Skip to main content

Documentation Index

Fetch the complete documentation index at: https://herwaka.shesharp.org.nz/llms.txt

Use this file to discover all available pages before exploring further.

This is the fun part. You’ll describe what you want, and Gemini CLI will build it for you. No coding required — just clear descriptions, spoken or typed.
With Wispr Flow running, just start speaking. Your words appear as text in Gemini CLI automatically. Say what you need naturally — Gemini understands and writes the code for you.

​
The Vibe Coding Loop

Every step follows the same pattern: You describe. Gemini CLI builds. You review. Repeat until it’s right, then move on.
1

Create a project folder

  1. Open File Explorer
  2. Go to your Documents folder
  3. Right-click in an empty space → New → Folder
  4. Name it my-website
Name it something simple like my-website. Use lowercase letters with no spaces — this will become part of your website URL later.
2

Open terminal in your project folder

Open your my-website folder in File Explorer. Click the address bar at the top, type powershell, and press Enter.
3

Start Gemini CLI

In your terminal, type:
gemini
Press Enter. You should see Gemini CLI start up with a prompt ready for your input.
If you have Wispr Flow running, you can now speak directly into Gemini CLI. Just start talking — your words will appear as text in the terminal.
4

Describe your website

Pick the style that appeals to you and say or copy the entire prompt into Gemini CLI. Replace [Your Name] and [your field] with your real information!
Say this or copy this prompt
Create a simple personal website for me. My name is [Your Name].
I want a clean, modern design with:
- A hero section with my name and a short tagline
- An "About Me" section where I can introduce myself
- A "Contact" section with links to my email and LinkedIn
Use a single index.html file with inline CSS. Make it responsive
so it looks good on both desktop and mobile phones.
Use a professional color scheme. Make it look polished and modern.
Remember to replace [Your Name] and [your field] with your actual information before pasting the prompt! If you are speaking with Wispr Flow, just say your real name and field naturally.
Don’t like the result? Just tell Gemini what to change — see Step 6 for ready-to-use follow-up prompts.
5

Preview your website

Say or type this prompt:
Say this or copy this prompt
Can you help me open this website in my browser so I can preview it?
Please start a local server or just open the index.html file directly.
Or do it yourself: find index.html in your my-website folder and double-click it. It will open in your browser.
Your website is only on your computer right now — not on the internet yet. We’ll publish it in the next section.
6

Iterate and improve

Not happy with the result? That’s normal — and that’s the whole point of vibe coding! Say or copy any of these follow-up prompts into Gemini CLI:
Say this or copy this prompt
Change the color scheme to blue and white. Keep the overall layout the same.
Say this or copy this prompt
Add a profile photo section with a round border at the top of the page.
Use a placeholder image for now.
Say this or copy this prompt
Add a sticky navigation bar at the top with links to each section
of the page. It should stay visible when I scroll down.
Say this or copy this prompt
Add a dark mode toggle button in the top-right corner. When clicked,
it should switch the entire website between light and dark themes.
Save the user's preference so it persists when they refresh the page.
The vibe coding loop: describe → review → refine. Keep going until you love it! You can send as many prompts to Gemini CLI as you want — there’s no limit on iterations. Speaking your requests often feels faster and more natural than typing them.

​
Go Further — Try Your Own Requests

The prompts above are just the beginning. Here are some creative requests to show how flexible natural language is:
Say this or copy this prompt
Add a testimonials section with 3 placeholder quotes from colleagues.
Use a card layout with a subtle shadow on each card.
Say this or copy this prompt
Add a timeline section showing my career journey. Use placeholder
dates and roles. Make it visually interesting with a vertical line
connecting each milestone.
Say this or copy this prompt
Make the hero section more dramatic — add a background image with a
dark overlay and large white text. Use a placeholder image for now.
This is the magic of natural language. You do not need to know HTML or CSS — just describe what you want. If Gemini is not sure what you mean, it will ask you to clarify.

​
Troubleshooting

Make sure you’re opening the index.html file, not a folder. If the file is empty, ask Gemini CLI: “The index.html file appears to be empty. Can you check and regenerate it?”
Ask Gemini CLI to fix it:
The layout looks broken — things are overlapping or not aligned properly.
Can you fix the CSS so everything displays correctly?
Tell Gemini CLI:
I want to start completely fresh. Delete the current files and create
a new website from scratch. [Then describe what you want]
Wispr Flow may occasionally mishear technical terms or proper nouns. You can review and correct the text in Gemini CLI before pressing Enter. If voice input is causing too many errors, switch to typing or pasting prompts instead.
Happy with your website? Head to Deploy your website to put it on the internet for free!