跳到主要内容
版本：2026 HER WAKA 活动

构建你的网站

这是最有趣的部分。你描述你想要什么，Gemini CLI 帮你构建。无需编程 —— 只需清晰的描述，说出来或打出来就好。

Wispr Flow 运行后，直接开口说话。你的话语会自动以文字形式出现在 Gemini CLI 中。自然地说出你需要什么 —— Gemini 会理解并为你编写代码。

Vibe Coding 循环​

每个步骤都遵循同样的模式：

你描述。Gemini CLI 构建。你审查。重复直到满意，然后继续。

  1. 创建项目文件夹

    1. 打开文件资源管理器
    2. 进入你的文档文件夹
    3. 在空白处右键 → 新建 → 文件夹
    4. 命名为 my-website

    用像 my-website 这样简单的名字。使用小写字母，不带空格 —— 这之后会成为你网站 URL 的一部分。

  2. 在项目文件夹中打开终端

    在文件资源管理器中打开你的 my-website 文件夹。点击顶部的地址栏，输入 powershell，然后按 Enter。

  3. 启动 Gemini CLI

    在终端中输入：

    gemini

    按 Enter。你应该会看到 Gemini CLI 启动并出现一个等待输入的提示符。

    如果你已运行 Wispr Flow，现在可以直接对着 Gemini CLI 说话了。开口说话 —— 你的话语会以文字形式出现在终端里。

  4. 描述你的网站

    选择一个你喜欢的风格，将完整提示词说出来或复制到 Gemini CLI 中。记得把 [Your Name]（你的名字）和 [your field]（你的领域）替换为真实信息！

    说出或复制此提示词
    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.

    记得替换 [Your Name] 和 [your field]，替换为你的真实信息，然后再粘贴提示词！如果你用 Wispr Flow 说出提示词，直接说出你的真实姓名和领域就好。

    不喜欢结果？直接告诉 Gemini 要改什么 —— 参见第 6 步中现成的追问提示词。

  5. 预览你的网站

    说出或输入这条提示词：

    说出或复制此提示词
    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.

    或者自己动手： 在你的 my-website 文件夹中找到 index.html，双击打开。它会在你的浏览器中打开。

    你的网站现在只在你的电脑上 —— 还没有上线到互联网。我们将在下一节发布它。

  6. 迭代和改进

    对结果不满意？这很正常 —— 这正是 Vibe Coding 的全部意义！将以下任意追问提示词说出来或复制到 Gemini CLI 中：

    说出或复制此提示词
    Change the color scheme to blue and white. Keep the overall layout the same.
    说出或复制此提示词
    Add a profile photo section with a round border at the top of the page.
    Use a placeholder image for now.
    说出或复制此提示词
    Add a sticky navigation bar at the top with links to each section
    of the page. It should stay visible when I scroll down.
    说出或复制此提示词
    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.

    Vibe Coding 循环： 描述 → 审查 → 优化。持续迭代，直到你满意为止！你可以向 Gemini CLI 发送任意多条提示词 —— 没有迭代次数限制。说出你的请求往往比打字更快、更自然。

进一步探索 —— 尝试你自己的请求​

上面的提示词只是起点。这里有一些创意请求，展示自然语言有多灵活：

说出或复制此提示词
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.

这就是自然语言的魔力。 你不需要了解 HTML 或 CSS —— 只需描述你想要什么。如果 Gemini 不确定你的意思，它会请你澄清。

故障排除​

打开网站时页面是空白的

确保你打开的是 index.html 文件，而不是文件夹。如果文件是空的，问 Gemini CLI："The index.html file appears to be empty. Can you check and regenerate it?"

布局看起来乱了

让 Gemini CLI 修复它：

The layout looks broken — things are overlapping or not aligned properly.
Can you fix the CSS so everything displays correctly?
我想完全重新开始

告诉 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 偶尔可能误听技术术语或专有名词。你可以在 Gemini CLI 中按 Enter 之前检查并修正文字。如果语音输入错误过多，改为打字或粘贴提示词即可。

对你的网站满意了吗？前往部署你的网站，免费将它发布到互联网！