物界前沿
Vibe Coding自制设计师个人网站
《Vibe Coding自制设计师个人网站》拆解复刻教程
来源：小红书博主「表哥懂设计（AIGC版）」同名视频笔记 · 抓取核验于 2026-09-24
证据与复刻声明
本文按四层证据区分内容：来源画面事实（原视频画面、操作界面与内嵌字幕）、创作者披露（笔记正文、视频演示与口播字幕，评论区已登录读取）、官方资料（OpenAI 官方页面与公开资料，核验日期 2026-09-24）、复刻方案（我们基于以上证据整理的操作方案）。文中「创作者流程」为按视频章节进程归纳，不代表创作者原文表述；图 8 总提示词因录屏分辨率所限仅转录要点；复刻方案不等于创作者完整原始流程，仅供学习参考。
一、教程与作者信息
作品：《Vibe Coding自制设计师个人网站》，视频时长 10 分 44 秒，口播 + 屏幕录制混剪，按章节推进（图 1 章节卡「前期准备」）；作者声明：含 AI 生成内容。
作者：表哥懂设计（AIGC版）；笔记显示「6天前 北京」。
笔记正文：「这是一期小白也能学会的Codex保姆级教程，零基础Vibe Coding开发个人网站。」（创作者披露原文）
工具来源：画面多次出现 Codex 对话界面与「GPT-5.6 Sol 高」模型标识，标签含 #codex——工具为 OpenAI Codex（编程智能体），底层模型 GPT-5.6 Sol（来源画面事实）。
评论区信息：评论区中用户 CL 询问视频里推荐的灵感网站，「点点」（小红书 AI 助手）归纳回复为三个：Motionsites（网页设计与动效参考）、Pinterest（排版/配色/作品集灵感）、React Bits（可直接复制的交互动效代码）。属评论区信息，供参考。
画面说明：原视频为博主屏幕录制，个别帧底部自带其来源播放器的控件与内嵌字幕，均属原片内容；本文截图已作相应裁切。
二、视频关键画面拆解（9 帧）
图 1：章节卡「前期准备」——视频按章节推进，第一节从准备工作讲起（00:15）
图 2：AI 形象基准图与约束式提示词——「中心位置、肩线高度和构图不变。人物身体、胸口和双肩完全固定。始终正面对准画面中心，只让颈部轻微转动，头部向画面右侧转约20度……小巧的嘟嘴表情，呈现俏皮、好奇的感觉」，字幕「还需要继续让它参考这张基准图」（01:20）
图 3：用 Codex 修复生成素材——上传「视频节点_7.mp4」请求「优化提示词并给我优化后的完整版提示词」；Codex 用时 5m44s 分析出「尾帧仍是低头状态、躯干与肩膀明显放大抬高」，给出 @图片1–6 六图上传结构（正面起始图/右/上/左/下/结尾复现第一帧），字幕「让它分析具体的问题」（02:30）
图 4：Codex 编辑网站文件——「已编辑 2 个文件 +4 -0」（site/src/content/rough-preview.ts、site/test/cms.test.mjs），附撤销/审核按钮与「网页预览」卡片；本轮指令「把文件夹展开效果改为点击触发，文件夹平移到中间……支持关闭按钮、和 ESC 键收起」，模型标识 GPT-5.6 Sol 高，字幕「点击触发」（06:50）
图 5：履历页设计——上传素材「文件夹切换稿.mov / 个人履历.pages / 履历切文件夹.mp4 / 首屏切简历.mp4」，指令要求「分析视频中人物的动作、位置变化与画面节奏，据此安排人物区域、文字层级和内容出现顺序」；Codex「已编辑 3 个文件 +235 -66」（index.html +185 -66），并已运行 npm run dev -- --host 127.0.0.1 --port 4174，字幕「人物动作 位置 画面节奏」（08:20）
图 6：成品网站本地预览——浏览器访问 127.0.0.1:4174/showcase（与图 5 的本地服务端口一致），「Biaoge.」个人作品集站：导航含视觉开发/个人介绍/视觉文化/作品浏览/无用推理，展示「PRODUCT RENDER / 产品渲染」板块，AI 形象出现在页面中（09:20）
图 7：一句话部署——向 Codex 发送「帮我部署这个网站」，Codex 列出部署任务清单并逐项执行（停止/取消/记录/执行命令、修改文件、检查 HTML 入口与 Sanity 构建产物等），字幕「帮我部署这个网站」（09:40）
图 8：「✨ THE PROMPT」建站总提示词——分段锁定身份设定、技术栈（React、Vite、Tailwind、framer-motion、TypeScript 等）、页面结构、Sanity CMS 集成（密钥存环境变量、禁止硬编码）、部署要求与验收清单，字幕「粘贴我这段提示词」（10:20）
图 9：收尾——口播总结「学会了今天整套的制作流程」（10:35）
注：图 2、图 8 的提示词文字因原片为屏幕录制且分辨率所限，转录或有出入，以原视频为准。
三、创作者流程归纳（依据来源画面事实与创作者披露）
以下四步按视频章节进程归纳（证据见图 1–图 8）：
第一步 备资产：先定网站结构（口播「结构理清了」），再用 AI 生图工具做出贯穿全站的 AI 形象基准图——提示词用「构图/身体/肩线完全固定 + 只允许头部角度与表情基调变化」的约束式写法，保证后续页面里形象一致（图 1–图 2）。
第二步 修素材：生成的视频素材有问题（首尾不连贯）不自己猜原因，直接丢给 Codex 分析（尾帧低头、躯干放大），并让它输出优化后的完整提示词，含 @图片1–6 多参考图上传结构——Codex 在此充当「提示词工程师」（图 3）。
第三步 建站与迭代：用一段高度结构化的总提示词（图 8：身份设定→技术栈锁定→页面结构→CMS 内容来源→部署要求→验收清单）让 Codex 生成整站；之后全部用自然语言迭代——改交互（「文件夹展开改为点击触发」「支持 ESC 键收起」，图 4）、传素材做内容页（「分析人物视频的动作、位置与画面节奏来安排履历页」，图 5）（图 4–图 5）。
第四步 预览与部署：本地 npm run dev 预览（127.0.0.1:4174，图 6），满意后一句「帮我部署这个网站」交由 Codex 执行部署清单（图 7）。
核心观点：Vibe Coding 的关键不是一句「帮我做个网站」，而是①用约束式提示词先锁定视觉资产，②用一段结构化总提示词（技术栈+结构+验收标准）作为项目起点，③之后每次迭代只提一个具体、可验证的小改动。
四、工具与官方资料（官方资料）
Codex：OpenAI 官方编程智能体：在隔离沙箱中读取仓库、编写代码、运行测试、提交 PR；提供云端任务、本地 CLI、IDE 扩展与桌面应用等多种形态；随 ChatGPT 订阅提供（Plus 20 美元/月起），2026-03 宣布周活用户超 200 万；2026-07-09 Codex 应用并入 ChatGPT 桌面应用。
GPT-5.6：2026-07-09 发布，含三档：旗舰 Sol、均衡 Terra、轻量 Luna；在 Codex 中，Plus 及以上订阅可选 Sol/Terra/Luna 并分别设置推理强度（另有 max 档）——视频中「GPT-5.6 Sol 高」即旗舰 Sol + 高推理强度。
API 定价：API 每百万词元：Sol 输入 5 美元/输出 30 美元；Terra 2.5/15；Luna 1/6。
Vibe Coding：指用自然语言对话驱动 AI 生成完整可用代码、人不直接手写代码的开发方式，2025 年由 AI 研究者 Andrej Karpathy 提出后流行（背景资料）。
备注：创作者设有配套文档（评论区「求文档」线索），本文未获取；文中方法均来自视频画面与笔记正文。
官方页面（核验日期 2026-09-24）：OpenAI 官方：GPT-5.6 发布公告
五、可复刻性评测
技术可行性：高——全程无手写代码，生成、修改、运行、部署均由 Codex 完成；所用能力（对话生成、文件编辑、本地命令、部署）均为官方功能。基于来源与官方能力判断，未实测。
新手门槛：中——难点不在写代码，而在三处：①总提示词的结构化程度（技术栈、页面结构、验收标准要写清楚）；②给 Codex 的反馈要具体到交互行为；③本地环境（Node 等）与部署环节的少量命令行操作。
成本：ChatGPT Plus（20 美元/月）内含 Codex，有用量上限（用量约每 5 小时重置）；AI 形象生图/生视频费用取决于所用平台积分；域名与托管费用另计。
风险 / 抽卡：AI 生成的交互与素材常需返工（图 3 的首尾不连贯即一例）；部署环节涉及账号、密钥与环境变量，出错概率最高。
结论：中高——适合有清晰参考、愿意迭代的新手；把它当「给 AI 写清楚需求」的练习，而不是一键生成。
六、我们的复刻方案（复刻方案）
以下流程由我们根据视频演示与官方资料整理，供实际操作参考：
第 1 步 备资产：确定个人定位与栏目结构；用生图工具做一张 AI 形象基准图——提示词锁构图/身体/服装，只放开头部角度与表情基调（参考图 2 句式）。
第 2 步 写总提示词：按「身份设定 → 技术栈锁定 → 页面结构 → 内容来源 → 部署要求 → 验收标准」六段式写一段完整提示词（参考图 8 的结构，不抄原文）。
第 3 步 生成整站：粘贴进 Codex，先审它的计划再放行；生成后在本地跑起来逐页检查。
第 4 步 自然语言迭代：每次只改一件事，描述期望行为而非代码（如「文件夹展开改为点击触发，并支持 ESC 关闭」）；动效拿不准就让 Codex 先出方案再选；用撤销/审核兜底（图 4）。
第 5 步 上素材做内容页：上传个人视频、履历等素材，让 Codex 按素材的节奏设计内容页（参考图 5 的指令写法：分析素材的动作、位置与画面节奏来安排版面）。
第 6 步 预览与部署：本地预览确认后让 Codex 执行部署（图 7）；涉及密钥与环境变量的环节逐一确认，先本地构建成功再上线。
六段式总提示词模板（复刻方案示例，非创作者原文）：
段落 | 写什么 | 示例 |
身份与目标 | 你是谁、做什么网站 | 你是资深前端工程师，为独立设计师搭建单页作品集网站，含个人介绍、作品、履历、联系四大板块 |
技术栈锁定 | 框架/组件库/语言白名单 | 使用 React + Vite + Tailwind CSS + framer-motion，全部用 TypeScript；组件风格参考 shadcn/ui；禁止引入清单以外的大型依赖 |
内容与结构 | 每个板块放什么、数据从哪来 | 首屏：个人品牌 + 形象图 + 一句定位；作品：项目卡片；履历：时间线；内容接入 CMS，密钥一律走环境变量，禁止硬编码 |
验收与交付 | 完成后自检什么、交付什么 | 本地一条命令可运行；响应式无类型错误；附部署步骤与自检清单，逐项打勾 |
失败排查：生成结果与预期差很远 → 总提示词缺「页面结构」或「禁止事项」，回第 2 步补全；改 A 坏 B → 一次只提一个改动，让 Codex 先说方案再动手，必要时撤销（图 4）；AI 素材对不上（如首尾不连贯）→ 把素材问题交给 Codex 分析原因并重写提示词（图 3 流程）；部署失败或页面空白 → 先查环境变量与密钥（CMS token 等），确认本地构建成功再部署；用量焦虑 → 把大改动拆成明确小任务，避免反复返工消耗额度。
七、图片来源与版权声明
图 1–图 9 均截自该小红书笔记的原视频画面（来源：原视频画面，2026-09-24 抓取），仅用于学习拆解，版权归原作者「表哥懂设计（AIGC版）」所有；画面中出现的 Codex 界面、灵感网站等标识权利归属原权利方。
本教程为非官方拆解，与创作者无利益关联；图 8 提示词仅转录要点，如需全文请看原视频或向作者获取配套文档。
发布于 2026-09-17
关于作者：表哥懂设计（AIGC版）