Reference 01 · 提示词速查表

在当前任务里,找到一条合适的说法

先按工作阶段筛选,再替换尖括号里的项目事实。模板负责补齐目标、证据、限制与验收,不负责替你做判断。

起步

项目规则 · 启动 · 入口

先读项目,再决定怎么开始

第一次进入项目,或不确定启动方式与页面入口时。

请先不要修改代码。阅读项目规则、README、package.json 和目录结构,然后告诉我:

1. 项目使用什么框架、包管理器和样式方案
2. 首次安装与日常启动分别运行什么命令
3. 当前任务最可能涉及哪些页面、组件和数据文件
4. 启动成功后,终端和浏览器里应该出现什么证据
5. 有哪些文件、密钥或已有改动不应该碰

如果信息不足,请列出缺口,不要自行安装工具或改写配置。
替换尖括号里的内容再使用

起步

上下文 · 接手 · 进度

在新对话里恢复项目上下文

对话变长、Agent 开始遗漏约束,或需要换一个 Agent 接手时。

请根据下面的信息接手当前任务,先复述理解,不要立即修改。

项目目标:<这是什么项目>
当前任务:<这一轮要完成什么>
已经完成:<已确认的改动与证据>
还没完成:<待办与已知问题>
不可改变:<品牌规则、技术限制、用户已有修改>
相关文件:<路径列表>
验收入口:<URL、视口和操作路径>

请先检查当前工作区与以上描述是否一致,再给出最小的下一步。
替换尖括号里的内容再使用

规划

Brief · 范围 · 完成标准

把模糊想法写成任务 Brief

只有一句想法,还不能判断修改范围和完成标准时。

我想完成:<目标>

当前情况:<已有页面、组件、数据和问题>
用户会做什么:<主要操作路径>
必须保留:<内容、行为、品牌规则>
明确不要做:<不在范围内的内容>
设备范围:<桌面、平板、手机>
完成标准:<可以逐项观察或操作的结果>

请把它整理成一份最小任务 Brief,并标出仍需确认的问题、涉及文件和风险。先给方案,等我确认后再实现。
替换尖括号里的内容再使用

规划

方案 · 组件 · 验证

规划最小实现路径

任务已经清楚,但还需要决定组件、数据、状态与验证顺序时。

请为当前任务制定最小实现计划,不要先写代码。

目标:<任务目标>
相关页面:<URL 或路由>
现有实现:<相关文件或组件>
限制:<依赖、Design System、数据与权限边界>

计划需要说明:
1. 哪些现有组件可以复用
2. 页面、组件、数据和状态分别在哪里修改
3. 每一步完成后如何在浏览器里验证
4. 哪些风险需要先做只读检查
5. 哪些内容明确留到后续

把每一步控制在容易 Review 和撤回的范围内。
替换尖括号里的内容再使用

界面

组件 · 状态 · 可访问性

实现一个真实组件

组件的内容、状态和交互已经确定时。

请在现有项目中实现 <组件名称>。

使用位置:<页面或父组件>
真实内容:<文案与数据字段>
需要状态:<默认、hover、focus、loading、empty、error、disabled>
主要交互:<点击、键盘、展开或拖动>
视觉规则:<必须复用的 Token 和现有组件>
限制:<不要安装依赖,不改无关文件等>

先检索项目里是否已有相似组件。实现后检查 390px、桌面宽度、键盘操作和 Reduced Motion,并说明每个改动服务哪个完成标准。
替换尖括号里的内容再使用

界面

页面 · 内容 · 层级

从内容结构开始搭页面

要新增一张页面,但不希望 Agent 先堆装饰和卡片时。

请实现 <页面名称>,先从内容与阅读顺序开始。

页面目的:<用户为什么来到这里>
核心内容:<按重要性列出>
主要动作:<一个主要动作,必要时一个次要动作>
参考页面:<链接或截图,并注明只参考什么>
现有 Design System:<文件路径>

要求:
- 先建立标题、正文、列表和操作的层级,再决定是否需要特殊组件
- 不要默认使用三列卡片、渐变 Hero 或大量分割线
- 只有并列比较、映射或真实交互需要时才改变阅读方向
- 使用真实内容,处理空状态与长文本

先给出页面结构和复用组件,再实现。
替换尖括号里的内容再使用

视觉

参考 · 取证 · 复刻

根据参考完成有证据的视觉重建

需要参考一个网站或截图,但不能把视觉猜测写成技术事实时。

参考来源:<URL、截图或录屏>
需要重建:<页面、区块或交互>
允许保留:<结构、节奏或视觉原则>
必须替换:<品牌、内容、素材和受保护代码>

请先完成取证:
1. 检查公开源码、许可、DOM、样式、资源和交互状态
2. 把结论标为 SOURCE、PARTIAL 或 GUESS
3. 说明忠实重建、视觉重建和 DNA Remix 中哪条路径更合适
4. 列出桌面、平板和手机需要捕获的状态

没有证据的技术实现只能作为候选,不要直接写进最终方案。
替换尖括号里的内容再使用

视觉

Visual Diff · 截图 · 修正

逐项比较设计稿与当前页面

页面大致完成,但间距、字级、构图或互动仍然不像时。

请比较设计稿与当前页面,先列差异,不要立即重写。

设计证据:<截图或 Figma>
当前页面:<URL 与当前截图>
视口:<宽 × 高>

按优先级检查:
1. 内容结构与阅读顺序
2. 容器宽度、对齐和大块空间
3. 字号、字重、行高和换行
4. 图片裁切、边框、圆角与阴影
5. hover、focus、滚动和状态变化

为每个差异指出相关元素、可能原因和最小修复;一次只处理一组相关问题,修复后用同一视口重新截图。
替换尖括号里的内容再使用

状态

响应式 · 390px · 导航

补齐响应式,而不是把桌面缩小

桌面已经成立,需要检查手机与中间宽度时。

请检查 <页面 URL> 的响应式行为。

关键任务:<用户必须完成的操作>
检查宽度:390px、768px、1440px
必须保留:<内容与功能>

请分别检查:
- 阅读顺序是否仍然自然
- 是否出现横向溢出、遮挡或过早换行
- 触控目标、Dropdown 和浮层是否保留屏幕安全边距
- 表格、多列布局和侧栏是否需要改变结构
- 图片、Canvas 与视频是否有合适的裁切和静态替代

不要只缩字号。说明每个断点为什么改变结构,并在修改后重走同一条任务路径。
替换尖括号里的内容再使用

状态

边界情况 · 空状态 · 长文本

用边界数据挤压界面

正常状态看起来没问题,需要验证真实内容是否会破坏布局时。

请用测试数据检查 <页面或组件>,不要连接真实生产数据。

依次覆盖:
1. 空数组与缺失可选字段
2. 超长中文、英文单词、URL 和文件名
3. 0、负数、极大数值与未知状态
4. 图片加载失败、请求失败与长时间加载
5. 重复点击、禁用和权限不足

先记录每种状态的当前表现,再修复会阻断主要任务的问题。不要为了测试数据重写业务逻辑。
替换尖括号里的内容再使用

排错

Debug · 复现 · 最小修复

根据证据定位一个问题

已经能稳定复现错误,希望避免 Agent 同时尝试多种修复时。

请先定位问题,不要同时尝试多种修复。

页面与设备:<URL、浏览器、视口>
现象:<实际看到什么>
复现步骤:<从哪个状态开始,依次做什么>
期望结果:<正确状态应该怎样>
证据:<完整错误、截图、录屏、Network 或相关 Diff>

请输出三个最可能原因,按证据强弱排序;说明每个原因怎样验证,并先执行一个最小检查。确认原因以后,只修改必要文件,再用同一组步骤复验。
替换尖括号里的内容再使用

排错

回归 · 关联状态 · 证据

修复后检查有没有引入回归

问题已经消失,但还不能确认修复是否可靠时。

刚才修复了:<问题与原因>
相关改动:<文件或 Diff>

请不要继续美化,先完成回归检查:
1. 用原复现步骤确认问题已经消失
2. 列出共享组件、相邻状态和其他路由中可能受影响的位置
3. 检查键盘、手机、加载与失败状态
4. 确认没有新增 Console、Network 或类型错误
5. 说明哪些检查已完成,哪些仍需人工确认

如果发现新问题,先记录证据,不要顺手扩大修复范围。
替换尖括号里的内容再使用

验收

Diff · 范围 · 安全

只审查当前 Diff

Agent 说已经完成,需要判断改动能不能留下时。

请审查当前 Diff,暂时不要修改代码。

按顺序说明:
1. 哪些文件发生变化,每个文件服务哪个完成标准
2. 是否存在超出本次任务范围的修改
3. 原有行为、状态或样式有没有被删除或覆盖
4. 是否出现密钥、环境文件、调试代码或生成产物
5. 还缺哪些浏览器、响应式、可访问性或生产检查

最后给出“可以进入浏览器验收 / 需要先修正范围 / 应该撤回”中的一个结论,并附上依据。
替换尖括号里的内容再使用

验收

可访问性 · 性能 · 构建

完成一次发布前质量检查

功能与视觉已经稳定,准备交付或发布时。

请对 <页面或功能> 做发布前检查,发现问题先报告,不要自动扩大修改。

检查范围:
- 主要路径、加载、空、失败与禁用状态
- 390px、768px 与宽屏布局
- 键盘操作、焦点、语义、对比度与 Reduced Motion
- 图片尺寸、字体、脚本和交互性能
- Console、Network、类型检查与生产构建
- 元数据、错误边界和静态替代

按“阻断发布 / 应该修复 / 可以后续”分级,并为每项附上证据和复验方式。
替换尖括号里的内容再使用

交付

Git · Commit · 恢复

留下一个范围清楚的 Git Checkpoint

一轮任务已经通过检查,需要保存可恢复版本时。

请先检查当前 Git 状态,不要自动包含所有改动。

说明:
1. 这次任务相关与无关的文件
2. 是否存在密钥、环境文件、生成产物或用户之前的修改
3. 建议纳入本次 Commit 的明确文件
4. 一条说明“为什么改”的 Commit message
5. 提交后怎样恢复到这个版本

等我确认文件范围后再执行 Commit;不要改写或丢弃无关修改。
替换尖括号里的内容再使用

交付

PR · 交付 · 生产验收

生成交付与生产验收说明

需要把一轮实现交给团队 Review,或发布到公开环境时。

请根据当前实现生成一份交付说明。

任务目标:<目标>
预览地址:<本地或部署 URL>
相关设计:<Figma、截图或说明>

文档包括:
1. 新增与修改的页面、组件和文件
2. 关键设计与技术决定,以及没有做的内容
3. Mock、TODO、接口和权限对接点
4. 已完成的类型、浏览器、响应式和可访问性检查
5. Review 者应该重点重走的路径
6. 发布后需要重新检查的生产差异

用 Markdown 输出,结论与证据分开写,不要把“本地可运行”写成“已经上线”。
替换尖括号里的内容再使用

分类方式参考了设计师 Vibe Coding 工作指南的阶段化模板。全部提示词由 GoodVibe 根据课程任务重新编写,并扩展到参考取证、边界状态、Diff Review 与生产验收。