HowTo VibeCoding 一个网站（附提示词）

先展示网页效果​

​

​

​

​

一、WorkBuddy 做网页的 3 步框架​

我把用 WorkBuddy 做网页的过程，抽象成了下面这张图：​

3 个步骤分别对应 3 种能力：​

​

​

下面每一步，我都会给出一个可直接复制到 Codex 的提示词模板。 复印机​

二、第 1 步：提问澄清 —— 把"我想做个网页"变具体​

3.1 为什么要先让 AI 反问？​

大多数人的起点是这样的：​

​

“帮我做一个个人博客网页。”​

​

但 AI 听到的是一片空白：什么风格？给谁看？要几页？要不要移动端？有没有品牌色？​

如果你直接让 AI 开写，结果往往是：生成 3 版都不对，然后你开始疯狂"往左一点"、“颜色再深一点”。​

更高效的做法是：先让 AI 当面试官，它问你答。​

3.2 可直接复制的 Prompt​

​

代码块​

PowerShell

我想做一个网页，但我还没把需求想得很清楚。​

​

请你作为前端开发专家，先不要写代码，而是向我提出 8~10 个关键问题，帮我把需求澄清清楚。问题要覆盖：​

这个网页的目标是什么？（展示、引流、销售、作品集、工具页……）​

目标用户是谁？他们的年龄、职业、使用场景？​

需要哪些页面或模块？（首页、关于、联系、产品列表、博客……）​

视觉风格偏好？（极简、科技、文艺、商务、暗黑、活泼……）​

有没有必须出现的品牌色、Logo、字体或文案？​

是否需要适配手机/平板？​

是否需要交互效果？（滚动动画、弹窗、表单、轮播……）​

有没有参考网站或竞品？​

​

​

​

3.3 实际对话示例​

你输入上面这段话后，Codex 会输出类似这样的反问：​

​

代码块​

PowerShell

好的，为了做出最符合你预期的网页，我需要先确认以下 10 个问题：​

​

这个网页的核心目标是什么？​

（例如：展示个人作品、推广产品、写博客、做落地页……）​

这决定了页面结构是作品集型、营销型还是内容型。​

​

目标访客是谁？​

...​

​

你只需要像填表一样回答，Codex 会在你回答完后自动生成一份需求摘要，并问你是否可以进入下一步。​

​

​

​

三、第 2 步：视觉匹配 —— 让 AI 照着参考做骨架​

3.1 这一步解决什么问题？​

需求清楚了，但如果让 AI “自由发挥”，风格大概率跑偏。​

最有效的方式：给它一个"看得见的参考"。​

可以是：​

•

一个你喜欢的网站链接​

•

一张你截的图​

•

一段具体的风格描述​

然后让 Codex 先搭出视觉骨架（颜色、字体、布局、组件结构），不急着填内容。​

4.2 可直接复制的 Prompt​

​

代码块​

PowerShell

我已经把需求确认如下：​

​

【需求摘要】​

目标：做一个个人作品集落地页​

用户：招聘方 / 潜在客户​

模块：Hero 区、关于我、项目展示、技能标签、联系表单、页脚​

风格：极简、深色、科技感，参考 https://linear.app 或附件截图​

品牌色：#0A0A0A 背景，#2EA7FF 强调色​

​

4.3 小技巧：如何描述参考风格？​

如果你没有具体参考链接，可以用下面这段"风格词"模板：​

​

代码块​

PowerShell

视觉风格关键词：​

整体：极简、留白多、信息密度低​

​

Codex 会根据这些关键词生成一个风格统一的骨架。 ​

​

五、第 3 步：素材整理 —— 把图片丢进文件夹，AI 自动处理​

5.1 真实痛点：图片怎么命名、怎么压缩、怎么插？​

骨架有了，下一步就是填真实内容。最常见的一类素材是图片：​

•

头像、Logo​

•

项目截图​

•

产品图​

•

背景图​

手动做很烦：要重命名、要压缩、要改 HTML 里的 src 路径、要调尺寸。​

Codex 的好处是：它能直接读你文件夹里的文件，然后自动完成这些脏活。​

5.2 可直接复制的 Prompt​

​

代码块​

PowerShell

页面骨架已经完成，现在我要把真实素材放进去。​

​

请你执行以下操作：​

​

读取当前目录下的 /assets 文件夹，列出里面所有图片文件。​

根据图片内容，给每张图片一个语义化的英文文件名（例如：hero-portrait.jpg、project-dashboard.png）。​

如果图片过大（超过 500KB），请用合适的工具压缩到合理尺寸，并保留一份备份。​

在 index.html 中，把之前的占位图片替换为这些真实图片：​

Hero 区背景 / 头像​

项目展示区的项目截图​

技能/客户 Logo​

其他需要图片的位置​

为每张图片添加合适的 alt 文本，提升可访问性。​

​

5.3 进阶：让 AI 做一轮视觉质检​

替换完素材后，可以让 Codex 自己检查一遍： 机器学习与人工智能​

​

代码块​

PowerShell

请检查当前 index.html 的以下内容，并修复明显问题：​

所有图片路径是否正确、能否正常加载。​

图片是否有 alt 文本。​

文字和图片之间是否有足够的对比度。​

移动端下是否有图片溢出或变形。​

是否有未替换的占位文本（如 Lorem ipsum、Placeholder）。​

页面整体视觉是否协调，有没有突兀的颜色或间距。​

​

​

​

六、常用调整提示词：从"能用"到"好看"​

骨架和内容都有了，接下来就是一轮一轮地调。下面这些提示词是我用得最频繁的，建议你收藏：​

​

6.1 版式与间距​

​

•

整体再大气一点：标题加大、留白增多、section 之间间距拉开。​

•

内容太挤了，模块之间增加呼吸感。​

•

这个 section 在手机上堆叠得太长，改成左右交替布局。​

•

把三列卡片改成两列大卡片，信息更聚焦。​

​

​

6.2 颜色与质感​

​

•

背景再深一点，文字对比度再高一点。​

•

给卡片加一层很淡的毛玻璃效果。​

•

强调色从蓝色换成青绿色，更科技。​

•

按钮hover时加一个轻微的上浮和阴影。​

​

​

6.3 字体与排版​

​

•

标题用更粗的字体，正文行高调大。​

•

中文正文换用 Noto Sans SC 或 PingFang SC。​

•

标题字体大小做成层级：Hero 最大，Section 标题次之，卡片标题再小。​

​

​

6.4 交互与动画​

​

•

页面加载时，元素依次淡入上浮。​

​

​

七、我的真实工作流总结​

用 Codex 做网页，我的标准流程是：​

​

先让 AI 提问（5 分钟）：把模糊想法变成结构化需求。​

给参考，搭骨架（10 分钟）：不看内容，只看结构和风格。​

丢素材，自动整理（10 分钟）：图片、文案、路径一次性替换。​

轮调细节（15~30 分钟）：用上面的调整提示词，逐轮打磨。​

​

整个过程下来，一个完整可看的静态网页，30~60 分钟就能出来。​

​

​

八、几个避坑建议​

不要一次性说太多需求。先澄清，再骨架，再素材，再调细节。AI 一次性处理太多容易丢上下文。​

永远给参考。无论是网站链接、截图还是风格词，"看得见"的描述比"感觉上"更准确。​

让 AI 先保存再预览。Codex 可以直接运行 python -m http.server 或 npx serve，让你在浏览器里看效果。​

做好版本管理。让 Codex 每完成一个阶段就 git commit 一次，方便回滚。​

复杂交互先降级。第一版先保证结构和视觉，动画和复杂交互放在第二轮以后。​

​

​

九、结语​

Vibe Coding 不是"完全不用动脑"，而是把脑力从"写代码"转移到"描述问题"和"判断结果"。​

Codex 让这件事变得特别具体：你只需要会提需求、会给参考、会判断好坏，它就能帮你把网页做出来。​

​