Winfred 的小站 | Vibe Coding 笔记馆

方法入口

Vibe Coding 是什么

一句话定义：Vibe Coding 是一种把感觉、结构、提示词、反馈循环和工程交付放在一起的创作方法。它用自然语言驱动代码生产，但真正控制结果质量的，是你的目标感、审美判断和验收标准。

它适合设计师、产品经理、独立开发者、小团队和内容创作者。它不适合完全不检查代码、没有目标、没有审美基准，只想说一句“AI 帮我做完”的工作方式。

目标感先说清楚给谁用、解决什么、做到什么程度。
审美判断把参考、风格和取舍写进提示词，不把好看交给运气。
验收标准用真实页面、截图、交互和移动端检查来收尾。

坏用法

“帮我做一个高级网站。”这句话没有对象、结构、验收方式，也没有说什么叫高级。

好用法

“做一个单页知识站，中文为主，系统衬线排版，12 个模块，50 张玩具风配图，移动端不得横向滚动。”

关键判断

AI 能快速执行，但它不会自动知道你的审美底线。你要定义边界、节奏、禁忌和检查清单。

能力地图

Vibe Coding 能力地图

把灵感变成可交付作品，通常不是一个能力，而是一串小能力在接力。

想法翻译

把“我想要一个有灵气的网站”翻译成页面目标、用户、模块和验收标准。

失败信号：只剩形容词，没有任务。

设计判断

判断颜色是否过曝、正文是否可读、动效是否抢戏、手机端是否挤。

失败信号：页面好看，但读不下去。

代码执行

让 Codex 完成 HTML、CSS、JS、修复和自检，而不是只给建议。

失败信号：只停在方案，没有页面。

质量回路

截图检查、移动端检查、图片数量检查、控制台检查，问题修完才交付。

失败信号：看起来差不多，但一测就碎。

性能预算

图片很多也要压缩、懒加载、减少重型动效，别让美感拖垮滚动。

失败信号：一打开就风扇起飞。

可访问判断

文字对比、键盘焦点、alt、Reduced Motion，都属于作品质量，不是最后补丁。

失败信号：只有你自己的设备能看。

从想法开始

从一句话到一个网站

用一个小例子走完流程：把“想做一个明亮有趣、能学习的 Vibe Coding 小站”变成网页。

1. 写下原始感觉

先别急着写代码。写下“糖果色、衬线、像玩具知识乐园、有很多图、内容能学”。这不是需求文档，是原料。

2. 提炼项目目标

把感觉改写成目标：让第一次接触 Vibe Coding 的人理解方法，并能复制 Prompt 模板开始实践。

3. 拆页面与模块

拆成 Hero、定义、能力地图、流程、Prompt、Agent、代码入门、翻车、实验、案例、资源和 Footer。

4. 写 Codex 执行文档

告诉 Codex 文件结构、视觉约束、图片数量、移动端断点、动效边界和 QA 命令。

5. 生成第一版

先把完整页面跑起来，再调节视觉。不要在只有壳子的阶段讨论“高级不高级”。

6. 视觉检查并迭代

按 1440、1920、390、430 四个视口检查。发现重叠、裁切、破图、空内容，先修，再交付。

提示词料理室

好提示词不是长，而是结构清楚。角色、目标、素材、限制、输出格式和检查方式，一个都不能少。

让 AI 先提问还是直接执行

需求模糊时先提问，边界清楚时直接执行。

使用场景：你只有想法，没有结构。

先不要实现。请先问我 3 个会影响范围、视觉和验收的关键问题。问题要能直接改变执行方案。

为什么有效：它把“闲聊式补充”变成决策式澄清。

常见错误：让 AI 无限追问，最后没有人落地。

如何描述视觉风格

不要只说高级，要说材质、光、排版、禁忌和参考边界。

视觉方向：明亮 3D 黏土玩具风，原创小助手 IP，糖果橙粉绿蓝，系统衬线体，宽松留白。避免可读文字、水印、logo、拼贴图和卡片过密。

常见错误：只说“可爱 3D 风”，但不说明材质、色彩、主体、禁忌和排版边界。

如何要求移动端适配

移动端不是缩小桌面端，而是重新安排阅读顺序。

请检查 390px 和 430px 宽度：正文不得横向溢出，CTA 不得重叠，图片单列或合理双列，代码块可横向滚动但不能撑破页面。

为什么有效：具体视口比“适配手机”更容易验收。

如何要求 Codex 自检

不要问“有没有问题”，要给它检查清单。

完成后请检查：图片数量、破图、alt、横向滚动、控制台错误、Prompt 展开、返回顶部、Reduced Motion、390/430 移动端布局。

常见错误：让 AI 自称完成，但没有任何浏览器或脚本证据。

修复布局重叠

把 bug 当成复现任务，而不是审美抱怨。

在 390px 宽度，#prompt-kitchen 第 3 张卡片展开后按钮压住正文。请只修复该区域，保持桌面端视觉不变，并说明改了哪些 CSS。

为什么有效：视口、元素、状态、期望都齐了。

生成 Image2 图片提示词

图片要服务模块，不要只服务装饰。

为“质量回路”生成 1 张 4:3 图片：原创玩具小助手、空白检查卡、放大镜、修复道具组成反馈循环，糖果色 3D 黏土质感，无文字、无 logo、非拼图。

常见错误：让图片出现可读文字，最后全是乱码。

要求动效自然

动效像呼吸，不像抢镜。

请只使用 opacity、transform 和少量 filter。时长 600 到 900ms，hover 上浮不超过 8px，支持 prefers-reduced-motion。

为什么有效：限制幅度比“自然一点”更可执行。

保持设计一致性

统一不是所有东西长一样，而是规则稳定。

请检查全站的颜色变量、标题层级、卡片内边距、图片圆角、按钮状态和段落宽度，列出不一致并修复。

常见错误：每个 section 都重新发明一套卡片。

补全空栏目

空栏目不是少几句话，而是缺少具体对象。

请为每个空栏目补充：一句解释、为什么重要、怎么做、小例子、常见误区。不要使用占位拉丁文或泛泛口号。

为什么有效：它强迫内容落到知识结构，而不是形容词。

真实内容而非套话

好的内容有对象、情境和判断。

请用“设计师做 CRM Demo”作为具体对象，写背景、目标、提示词策略、结果、反思。每项至少一句具体判断。

常见错误：写“提升效率、优化体验、赋能创作”，但没有发生任何事。

按检查清单逐项修复

QA 后不要凭感觉修，按条目闭环。

请根据 QA_CHECKLIST.md 逐项修复。每修一项，在清单中记录：问题、修改文件、验证方式、是否通过。

为什么有效：它把“改好了”变成可追踪证据。

导出为 PPT 或 PDF

网页复用为演示稿时，要保留结构而不是截图堆砌。

请把这个网页整理成 12 页 PPT：每页一个观点、一个图像、三条以内要点。保留标题层级和案例，不要整页截图。

常见错误：把网页直接切成图片，演示时没人能读。

协作工位

AI Agent 工作台

多 Agent 协作不是让一群模型热闹地写同一个文件，而是把输入、输出和交接物分清楚。

Planner Agent

拆任务、定验收标准，把“做个网站”拆成可检查的页面、图片、内容、动效和 QA。

Content Agent

写知识内容、案例和提示词。它的交付物不是漂亮句子，而是可学习的结构。

Image Prompt Agent

负责 56 张图的用途、比例、提示词、alt 和文件名，防止图片变成随机装饰。

Frontend Agent

实现 HTML、CSS、JS，把内容和图片变成可直接打开的页面。

Motion Agent

只做必要动效：滚动显影、悬停、光晕、返回顶部和 Reduced Motion。

QA Agent

检查桌面、手机、图片数量、空内容、横向滚动、动效失效和性能问题。

设计师代码入门

设计师的代码入门

你不一定要先成为工程师，但要知道页面由哪些东西构成，才知道该怎样指挥 AI。

HTML 像页面骨架

它回答“这里有什么”。例如标题、段落、图片、按钮、案例卡片，都应该有语义位置。

CSS 像视觉系统

它回答“看起来怎样”。颜色变量、字体、间距、响应式断点都在这里统一。

JS 像行为和交互

展开卡片、复制代码、返回顶部、过滤地图，这些都属于行为，不应该写死在视觉里。

组件像可复用模块

Prompt 卡、案例卡、图片框、按钮，都要有统一规则，避免越做越散。

数据像内容仓库

当案例很多时，先整理字段：背景、目标、策略、结果、反思。字段清楚，页面才稳。

翻车现场

常见翻车现场

翻车不可怕，怕的是只说“感觉怪怪的”。下面这些事故都有症状、原因和修复方法。

页面很炫但看不懂

原因：视觉层级比信息层级更强。修复：减少装饰层，把每屏限制为一个主观点。

手机端全崩

原因：桌面网格直接缩小。修复：390px 单列优先，代码块独立滚动。

卡片互相覆盖

原因：固定高度和绝对定位太多。修复：回到普通文档流，用 grid gap 管理节奏。

动效太多导致卡顿

原因：每个元素都在动。修复：只保留入口、hover 和滚动显影。

栏目看着满，其实空

原因：只有标题，没有例子。修复：每张卡补“怎么做”和“小例子”。

Codex 改 A 坏 B

原因：没有保护已有行为。修复：要求限定修改范围，并跑回归检查。

视频替换后不动

原因：只换了文件，没有处理 autoplay 和 Reduced Motion。修复：进入视口播放，离开视口暂停。

提示词越写越散

原因：缺少角色、目标、限制和验收格式。修复：先写边界，再让 AI 执行。

媒体太多拖慢页面

原因：图片、视频和粒子同时抢性能。修复：压缩媒体，按视口播放，控制粒子上限。

小实验室

这些互动都很轻。它们不是为了炫技，而是让知识站有一点可触摸的手感。

Live Demo 鼠标光晕

把鼠标移进这块区域，光束会检查卡片、路径和按钮状态。

鼠标光晕

移动指针检查卡片，像一束软糖色小灯。

卡片 3D 倾斜

hover 轻微倾斜，幅度小，不影响阅读。

滚动显影

章节进入视口时淡入上移，让长页更有节奏。

图片漂浮

关键图慢慢浮动，避免全站乱动。

代码片段复制

Prompt 模板一键复制，按钮反馈“已复制”。

Prompt 卡片展开

默认显示摘要，展开后看模板、误区和原因。

知识地图过滤

按设计、代码、QA 过滤能力卡，降低阅读噪音。

时间线进度条

拖动进度条，模拟流程章节推进。

主题色切换

橙粉与绿蓝之间切换，保持文本对比。

图片墙懒加载

图片进入视口再显影，减少突兀感。

视觉风格

三案视觉方向

根据新的参考图，最终采用「软糖玩具知识乐园」：明亮、圆润、3D 黏土质感，同时保持知识站的对齐和阅读秩序。

软糖玩具知识乐园

原创小助手 IP、糖果色背景和黏土玩具道具建立第一眼记忆点。当前网站采用这一案。

奶油编辑室

更克制，留白和衬线文本更强，适合阅读型知识站。风险是趣味感不如玩具 IP 方向明确。

AI 玩具工作台

突出 Agent 协作和实验室感，交互更多。风险是工具气质过强，会削弱小站的松弛感。

案例陈列室

这些案例是虚构的，但工作方式是真实可用的。它们展示 Vibe Coding 怎么落到项目里。

1 小时做品牌落地页

背景：香氛新品牌需要第一版页面。目标：先跑出可读的 Hero、卖点和 CTA。策略：限制一页、三段内容、五张图。结果：一小时出可演示版本。反思：速度来自约束。

设计师做 CRM UI Demo

背景：设计师想验证线索跟进流程。目标：做可点击 Demo。策略：先写用户流和假数据。结果：销售团队能试用。反思：不会后端也能验证体验。

AI 做小红书视觉系统

背景：内容团队封面风格太散。目标：统一模板和句式。策略：定义色彩、图片裁切和标题结构。结果：批量产出更稳定。反思：统一比炫更重要。

PDF 生成网页

背景：一份 30 页报告没人读。目标：转成可浏览网页。策略：先拆章节、摘要、图表和引用。结果：信息层级清晰。反思：转网页前先整理内容。

Codex 修复手机端导航

背景：菜单在 390px 挤压。目标：可点、可读、不遮挡。策略：给出视口、复现状态和验收标准。结果：移动端变成单列菜单。反思：bug 描述越具体，修复越快。

Image2 补齐网站配图

背景：网站内容完整但视觉空。目标：每个模块都有图像叙事。策略：按页面用途写 50 条独立 prompt。结果：页面节奏更像杂志。反思：图片不是填空，是讲述。

单 HTML 做交互演示

背景：需要快速分享一个概念。目标：无需构建即可打开。策略：把核心交互控制在原生 JS 内。结果：发文件就能预览。反思：越早展示，越早发现问题。

用 AGENTS.md 管理复杂任务

背景：多 Agent 容易跑偏。目标：统一目标、命名、图片和 QA。策略：把不可协商项写进根目录文档。结果：协作范围清晰。反思：文档就是项目边界。

资源书架

这里不是链接堆砌，而是你可以直接拿去用的知识索引。

入门关键词

Prompt structure、Agent workflow、acceptance criteria、responsive QA、visual hierarchy、image manifest。

学习路径

先做单页静态站，再加交互，再做数据驱动，最后才考虑复杂框架。

工具分类

Codex 负责代码和修复，Image2 负责视觉资产，浏览器负责验证，清单负责闭环。

检查清单

内容完整、图片真实、移动端可读、控制台干净、动效可降级。

项目模板

AGENTS.md、PRODUCT.md、DESIGN.md、image2-manifest.md、QA_CHECKLIST.md。

收藏句式

“请先说明验收标准，再实现。” “请只修改这个模块，并确认没有影响其他模块。”