驾驭 Vibe Coding · 01.2 / 04
开发阶段：让页面一轮轮长出来
先把任务和数据状态说明白，再按页面骨架、真实内容、交互与边界状态逐轮推进。每轮都回到浏览器确认结果，不把整页工作压进一次长对话。
- GoodVibe 编写
- 含 Prompt Builder
项目已经运行，开发阶段就围绕浏览器里的可见结果推进。先写清页面要解决什么，再准备足够真实的数据，让 Agent 依次完成整体框架、组件、交互和边界状态。
每轮只交付一个能够观察的变化。页面骨架出现以后看一次，真实内容放进去再看一次，交互和极端状态也分别检查。这样更容易发现是哪一轮把方向带偏了。
小步实现，小步查看；浏览器里没有出现的结果，暂时不算完成。
任务说明
先把模糊要求整理成一页计划
“做一个更好看的列表”会让 Agent 同时猜内容、版式、状态和技术方案。开始写代码以前，先补齐使用者、主要动作、已有材料、不可触碰的边界和完成标准；仍然缺少的信息直接列成问题。
让 Agent 整理需求与实现顺序
请先整理任务，不要开始修改代码。
页面或组件：<名称与 URL>使用者：<谁会使用>主要动作：<用户需要完成什么>已有材料：<设计稿、截图、现有组件或内容>限制：<必须沿用什么 / 暂时不做什么>完成标准：<怎样操作和观察才算完成>
请输出：1. 功能与状态清单2. 可以复用的现有组件3. 需要准备的数据结构4. 按页面框架、组件和交互细节排列的实现顺序5. 需要我先确认的问题
等我确认以后再实现。准备数据
用真实形状的数据提前挤压界面
接口尚未接入时，可以先用 Mock 数据完成界面。字段名称与未来接口保持接近，并且主动加入空值、长文字、重复内容和异常数字。整齐的示例数据会让布局问题一直藏到交付前。
- 01
定义数据形状
列出页面真实需要的字段、类型和可为空条件，不为了填满卡片临时增加无来源内容。
留下 一份清楚的数据类型 - 02
准备正常状态
使用接近真实长度和分布的内容，确认主要布局和层级。
留下 可阅读的默认页面 - 03
加入边界状态
覆盖空数组、超长文字、缺失图片、零值、负数和特殊字符。
留下 不会轻易破版的数据集 - 04
标记未来替换点
说明哪份 Mock 会被哪个接口或业务逻辑替换，让协作者能找到接手位置。
留下 数据对接说明
准备带边界情况的 Mock 数据
根据已经确认的页面计划，生成本轮开发需要的 Mock 数据。
要求：1. 沿用项目已有 TypeScript 类型写法2. 字段贴近未来接口，不增加无来源的展示内容3. 同时覆盖正常、空值、超长文字、缺失图片和特殊字符4. 放进项目现有的 mock 或 fixtures 目录5. 标出未来替换为真实数据的位置
先给出数据结构和状态清单，确认后再创建文件。分轮实现
页面先有骨架，再补真实状态
第一轮只让页面入口、主要区域和真实内容出现；第二轮补齐可复用组件与视觉层级；第三轮接入交互，再用边界数据逐个检查状态。一次改动越小，回看文件变化和撤回错误都越容易。
- 01
搭出页面框架
确认导航、主要内容区和信息顺序，先不加入动画与复杂状态。
留下 能打开的页面入口 - 02
填入真实内容
使用 Mock 或已有数据检查行长、密度、留白和组件层级。
留下 内容完整的静态界面 - 03
补上交互状态
依次处理 hover、focus、展开、筛选、加载、空白与失败状态。
留下 可操作的主要流程 - 04
检查不同宽度
从常用桌面宽度走到手机，不删掉关键操作，也不让表格与长文字直接溢出。
留下 桌面与手机验收记录
一次只完成一轮
请开始下一轮实现。
这一轮只完成：<一个可以在浏览器看到的结果>需要复用：<现有组件、Token 或数据>不要处理：<留给后续轮次的内容>
要求：- 只修改当前结果必需的文件- 保留已有行为、键盘操作和响应式- 遇到超出范围的选择先停下来说明
完成后列出修改文件，并告诉我应该在浏览器依次检查哪些状态。持续检查
页面每变化一轮，就回到浏览器走一遍
保存文件后先看当前 URL 是否更新，再操作这一轮新增的功能。出现异常时，记录页面、设备宽度、复现步骤、期望结果和报错；把这些证据交给 Agent，比重复说“还是不对”更容易得到小而准确的修复。
同时查看本轮文件变化，确认 Agent 只改了计划里的范围。这里不要求读懂每一行代码，只要能把每个修改文件对应到一个页面结果，并及时发现陌生配置、无关重构或被删除的旧能力。
正常数据看起来没问题
换成长标题、空数组和缺失图片，再检查布局与引导内容。
鼠标点击可以使用
再用键盘走一遍焦点、打开、关闭和提交动作。
桌面首屏很完整
检查手机宽度、页面中段和底部，不把关键操作直接隐藏。
Agent 说已经完成
对照文件变化和浏览器结果，确认计划中的状态都能真实复现。
根据现象做一次最小修复
请先定位问题，不要同时尝试多种修复。
页面与设备：<URL、浏览器、视口>当前现象：<实际看到了什么>复现步骤：<从哪里开始，依次做什么>期望结果：<正确状态应该怎样>证据：<截图、完整报错或相关文件>
请按证据强弱列出可能原因和验证方式。确认原因后，只做一处最小修复，再重新走同一组复现步骤。开发结束
给下一步留一份清楚的交接面
页面主要流程与边界状态都能运行以后，把仍待接入的接口、权限和业务规则留在明确位置，并说明当前 Mock 数据如何替换。交付阶段会进一步审查修改范围、保存版本并生成公开链接。
学习进度
正在读取你的学习记录…