Build Your Website
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.
- Voice (Wispr Flow)
- Type or paste
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.
Copy any prompt from this page and paste it into Gemini CLI. Or type your own request in natural language. No special syntax needed — just describe what you want.
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.
Create a project folder
- Windows
- macOS
- Open File Explorer
- Go to your Documents folder
- Right-click in an empty space → New → Folder
- Name it
my-website
- Open Finder
- Go to your Documents folder
- Right-click in an empty space → New Folder
- 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.Open terminal in your project folder
- Windows
- macOS
Open your
my-websitefolder in File Explorer. Click the address bar at the top, typepowershell, and press Enter.Right-click the
my-websitefolder in Finder and select "Open Terminal at Folder". If you don't see this option, open Terminal and type:cd ~/Documents/my-websiteStart Gemini CLI
In your terminal, type:
geminiPress 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.
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!- Simple
- Creative
- Professional
Say this or copy this promptCreate 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.Say this or copy this promptCreate a personal portfolio website for me. My name is [Your Name].
I want a modern, eye-catching design with:
- A bold hero section with a gradient background and my name
- An "About Me" section with a circular photo placeholder
- A "Skills" section showing my top skills with visual indicators
- A "Projects" section with 3 placeholder project cards
- A footer with social media icon links
Use HTML and CSS. Make it fully responsive for mobile devices.
Add smooth scroll behavior and subtle hover animations on buttons
and cards. Use a vibrant but professional color palette.Say this or copy this promptCreate a professional resume-style website. My name is [Your Name].
I am looking for work in [your field]. Include these sections:
- Professional header with my name, job title, and a brief summary
- Work Experience section (use placeholder content for 2-3 roles)
- Education section (use placeholder content)
- Skills section organized by category
- Contact section with email, LinkedIn, and phone placeholder
Use HTML and CSS. Make it clean, minimal, and employer-friendly.
Use a neutral, professional color scheme (navy blue or dark gray).
Make it responsive and print-friendly so it can be saved as a PDF.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.
Preview your website
Say or type this prompt:
Say this or copy this promptCan 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.htmlin yourmy-websitefolder 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.
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 promptChange the color scheme to blue and white. Keep the overall layout the same.Say this or copy this promptAdd 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 promptAdd 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 promptAdd 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:
Add a testimonials section with 3 placeholder quotes from colleagues.
Use a card layout with a subtle shadow on each card.
Add a timeline section showing my career journey. Use placeholder
dates and roles. Make it visually interesting with a vertical line
connecting each milestone.
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
The page is blank when I open it
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?"
The layout looks broken
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?
I want to start over completely
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]
My voice input has errors
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!