Vibe Coding 实战：不会写代码，3 步让 AI 帮你把网页做出来（附完整提示词）

一、为什么 Vibe Coding 突然火了2024 年底OpenAI 前科学家 Andrej Karpathy 发了一条推文把Vibe Coding这个词带出了圈。它的核心意思很简单你不再逐行写代码而是描述想要什么让 AI 生成、调试、迭代你只在旁边感受 vibe。这对两类人最友好不会写代码的产品/运营/设计师脑子里有页面但手不会敲 HTML/CSS。会写但想提效的工程师把重复、繁琐、偏视觉的页面搭建交给 AI自己专注业务逻辑。而 OpenAI 发布的Codex基于codexCLI 的 AI 编程助手把这件事真正变得可落地它不仅能写代码还能直接在本地终端里读文件、改文件、运行命令像一个能动手的实习生。二、Codex 做网页的 3 步框架我把用 Codex 做网页的过程抽象成了下面这张图3 个步骤分别对应 3 种能力步骤核心动作你要给 AI 什么AI 返回什么01 提问澄清让 AI 主动反问一句模糊需求8~10 个关键问题 需求确认02 视觉匹配给参考搭骨架参考网站/截图/风格词风格一致的 HTML/Tailwind 页面骨架03 素材整理丢素材自动插一个图片文件夹自动命名、压缩、替换路径后的完整页面下面每一步我都会给出一个可直接复制到 Codex 的提示词模板。三、第 1 步提问澄清 —— 把我想做个网页变具体3.1 为什么要先让 AI 反问大多数人的起点是这样的“帮我做一个个人博客网页。”但 AI 听到的是一片空白什么风格给谁看要几页要不要移动端有没有品牌色如果你直接让 AI 开写结果往往是生成 3 版都不对然后你开始疯狂往左一点、“颜色再深一点”。更高效的做法是先让 AI 当面试官它问你答。3.2 可直接复制的 Prompt我想做一个网页但我还没把需求想得很清楚。 请你作为前端开发专家先不要写代码而是向我提出 8~10 个关键问题帮我把需求澄清清楚。问题要覆盖 1. 这个网页的目标是什么展示、引流、销售、作品集、工具页…… 2. 目标用户是谁他们的年龄、职业、使用场景 3. 需要哪些页面或模块首页、关于、联系、产品列表、博客…… 4. 视觉风格偏好极简、科技、文艺、商务、暗黑、活泼…… 5. 有没有必须出现的品牌色、Logo、字体或文案 6. 是否需要适配手机/平板 7. 是否需要交互效果滚动动画、弹窗、表单、轮播…… 8. 有没有参考网站或竞品 9. 技术栈偏好HTML Tailwind、React、Vue、纯静态页…… 10. 交付形式单个 HTML 文件、一个项目文件夹、部署到 GitHub Pages…… 请把这些问题一次性列出来并说明每个问题为什么重要。3.3 实际对话示例你输入上面这段话后Codex 会输出类似这样的反问好的为了做出最符合你预期的网页我需要先确认以下 10 个问题 1. 这个网页的核心目标是什么 例如展示个人作品、推广产品、写博客、做落地页…… 这决定了页面结构是作品集型、营销型还是内容型。 2. 目标访客是谁 ...你只需要像填表一样回答Codex 会在你回答完后自动生成一份需求摘要并问你是否可以进入下一步。四、第 2 步视觉匹配 —— 让 AI 照着参考做骨架4.1 这一步解决什么问题需求清楚了但如果让 AI “自由发挥”风格大概率跑偏。最有效的方式给它一个看得见的参考。可以是一个你喜欢的网站链接一张你截的图一段具体的风格描述然后让 Codex 先搭出视觉骨架颜色、字体、布局、组件结构不急着填内容。4.2 可直接复制的 Prompt我已经把需求确认如下 【需求摘要】 - 目标做一个个人作品集落地页 - 用户招聘方 / 潜在客户 - 模块Hero 区、关于我、项目展示、技能标签、联系表单、页脚 - 风格极简、深色、科技感参考 https://linear.app 或附件截图 - 品牌色#0A0A0A 背景#2EA7FF 强调色 - 技术栈单个 HTML 文件 Tailwind CSS CDN - 交付一个 index.html 请根据以上需求和参考风格先给我生成一个完整的 HTML 页面骨架 1. 使用 Tailwind CSS CDN不要引入外部 CSS 文件。 2. 严格按照参考风格设置配色、字体、间距、圆角。 3. 先使用占位文本和占位图片用 https://via.placeholder.com 或彩色色块。 4. 包含响应式布局桌面端和移动端都要好看。 5. 每个 section 用清晰的注释标注方便我后续替换内容。 6. 不要急着加复杂动画先保证结构清晰、风格对齐。 完成后请把 index.html 保存到当前目录并告诉我如何预览。4.3 小技巧如何描述参考风格如果你没有具体参考链接可以用下面这段风格词模板视觉风格关键词 - 整体极简、留白多、信息密度低 - 配色深黑背景 #0A0A0A电蓝强调 #2EA7FF纯白文字灰色次要文字 - 字体无衬线、标题粗、正文细、行高宽松 - 质感轻微毛玻璃、柔和阴影、细边框、小圆角 - 动效淡入、轻微上浮、鼠标悬停反馈Codex 会根据这些关键词生成一个风格统一的骨架。五、第 3 步素材整理 —— 把图片丢进文件夹AI 自动处理5.1 真实痛点图片怎么命名、怎么压缩、怎么插骨架有了下一步就是填真实内容。最常见的一类素材是图片头像、Logo项目截图产品图背景图手动做很烦要重命名、要压缩、要改 HTML 里的src路径、要调尺寸。Codex 的好处是它能直接读你文件夹里的文件然后自动完成这些脏活。5.2 可直接复制的 Prompt页面骨架已经完成现在我要把真实素材放进去。 请你执行以下操作 1. 读取当前目录下的 /assets 文件夹列出里面所有图片文件。 2. 根据图片内容给每张图片一个语义化的英文文件名例如hero-portrait.jpg、project-dashboard.png。 3. 如果图片过大超过 500KB请用合适的工具压缩到合理尺寸并保留一份备份。 4. 在 index.html 中把之前的占位图片替换为这些真实图片 - Hero 区背景 / 头像 - 项目展示区的项目截图 - 技能/客户 Logo - 其他需要图片的位置 5. 为每张图片添加合适的 alt 文本提升可访问性。 6. 确保替换后页面仍然响应式图片不会变形或溢出。 完成后请告诉我 - 哪些图片被重命名/压缩了 - 每个图片用在了哪个位置 - 是否还需要我补充其他素材5.3 进阶让 AI 做一轮视觉质检替换完素材后可以让 Codex 自己检查一遍请检查当前 index.html 的以下内容并修复明显问题 1. 所有图片路径是否正确、能否正常加载。 2. 图片是否有 alt 文本。 3. 文字和图片之间是否有足够的对比度。 4. 移动端下是否有图片溢出或变形。 5. 是否有未替换的占位文本如 Lorem ipsum、Placeholder。 6. 页面整体视觉是否协调有没有突兀的颜色或间距。 请列出发现的问题并直接修复它们。六、常用调整提示词从能用到好看骨架和内容都有了接下来就是一轮一轮地调。下面这些提示词是我用得最频繁的建议你收藏6.1 版式与间距- 整体再大气一点标题加大、留白增多、section 之间间距拉开。 - 内容太挤了模块之间增加呼吸感。 - 这个 section 在手机上堆叠得太长改成左右交替布局。 - 把三列卡片改成两列大卡片信息更聚焦。6.2 颜色与质感- 背景再深一点文字对比度再高一点。 - 给卡片加一层很淡的毛玻璃效果。 - 强调色从蓝色换成青绿色更科技。 - 按钮hover时加一个轻微的上浮和阴影。6.3 字体与排版- 标题用更粗的字体正文行高调大。 - 中文正文换用 Noto Sans SC 或 PingFang SC。 - 标题字体大小做成层级Hero 最大Section 标题次之卡片标题再小。6.4 交互与动画- 页面加载时元素依次淡入上浮。 - 项目卡片hover时显示项目详情遮罩。 - 导航栏滚动时变成半透明毛玻璃背景。 - 点击联系按钮时平滑滚动到表单区域。七、我的真实工作流总结用 Codex 做网页我的标准流程是先让 AI 提问5 分钟把模糊想法变成结构化需求。给参考搭骨架10 分钟不看内容只看结构和风格。丢素材自动整理10 分钟图片、文案、路径一次性替换。轮调细节15~30 分钟用上面的调整提示词逐轮打磨。整个过程下来一个完整可看的静态网页30~60 分钟就能出来。八、几个避坑建议不要一次性说太多需求。先澄清再骨架再素材再调细节。AI 一次性处理太多容易丢上下文。永远给参考。无论是网站链接、截图还是风格词看得见的描述比感觉上更准确。让 AI 先保存再预览。Codex 可以直接运行python -m http.server或npx serve让你在浏览器里看效果。做好版本管理。让 Codex 每完成一个阶段就git commit一次方便回滚。复杂交互先降级。第一版先保证结构和视觉动画和复杂交互放在第二轮以后。九、结语Vibe Coding 不是完全不用动脑而是把脑力从写代码转移到描述问题和判断结果。Codex 让这件事变得特别具体你只需要会提需求、会给参考、会判断好坏它就能帮你把网页做出来。如果你也想试试建议直接复制本文的提示词打开 Codex从我想做一个网页开始。