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.

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-website folder in File Explorer. Click the address bar at the top, type powershell, and press Enter.

Right-click the my-website folder in Finder and select “Open Terminal at Folder”. If you don’t see this option, open Terminal and type:

cd ~/Documents/my-website

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.

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 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.

Say this or copy this prompt

Create 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 prompt

Create 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 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.

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

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!

Overview

★ Getting Started

★★ Easy

★★★ Intermediate

★★★★ Challenging

★★★★★ Advanced

Build a Full-Stack AI Site (8 Weeks)

The Vibe Coding Loop

Go Further — Try Your Own Requests

Troubleshooting

​The Vibe Coding Loop

​Go Further — Try Your Own Requests

​Troubleshooting

The Vibe Coding Loop

Go Further — Try Your Own Requests

Troubleshooting