Vibe Guide制作界面时，用这里认识组件并描述想要的效果，将选中的组件和要求交给当前项目的 AI。
这页的方法适合你的项目吗，怎样检查？
- 什么情况下会用到这页的方法？
- 已知道用户要做的动作，需要安排界面时。
- 根据自己的情况，应该怎样选择？
- 先按任务选：切换内容用标签、提交操作用按钮、输入内容用表单；再比较视觉样式。复杂流程先画入口与返回。
- 哪些情况容易判断错？
- 不要照搬示例标签、条数和业务字段；少量内容不必加分页或搜索，重要操作不能只靠悬停、颜色或图标表达。
- 怎样检查这个方法在你的项目中有用？
- 用自己的长文本和空数据检查布局，再用键盘、触屏测试操作、焦点、错误提示与返回。
跟着操作
只修改一个地方，让 AI 找准目标
描述改动时，按位置、现状、期望、保持不变和检查方法的顺序说明。先改一处并查看结果，再决定是否扩大到其他地方。
开始前需要准备什么？
当前页面地址或截图，以及已确认的界面风格。
1. 把目标指出来
写出页面名称、区域和可见文字；截图可以圈出目标。不要只说“这个改一下”，也不需要猜代码文件名。
看到下面的结果后，再继续：AI 修改前复述的是同一个地方；有多个同名按钮时先确认。
2. 说清改什么、不改什么
视觉问题写大小、颜色、间距和排列；交互问题写点击前后发生什么。明确修改只影响当前区域，还是全站同类组件。
看到下面的结果后，再继续：同一个组件被多处复用时，AI 说明影响范围，再选择局部或共享修改。
3. 按操作重新检查
打开最新预览，对照同一位置；点击主操作，检查手机排列和附近功能。错误仍在时贴出预期与实际差异，不直接再要求“整体优化”。
看到下面的结果后，再继续：本次目标达到、原功能仍可用；让 AI 更新任务记录并保存已检查版本。
复制材料，按实际项目填写
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
【背景】【填写项目用途与给谁使用】
【当前问题】【填写正在遇到的困难或希望完成的变化】
【输入材料】当前页面与截图、docs/ui-style.md（若已有）、任务清单。
【本次任务】【目标位置】填写页面地址、区域、可见文字；附带圈出的截图。
【现在怎样】描述实际现状。
【希望怎样】描述具体变化。
【保持不变】列出文字、数据、跳转、品牌或其他不能改的内容。
【影响范围】只改当前区域，或列明需要同步的位置。
先定位并复述，不确定时先问。完成最小修改，不顺手重做页面。
【约束】保留已确认范围和现有工作，不做无关修改。
请按以下顺序执行：
1. 先读取材料并复述目标；缺少会影响结果的信息时，先问一个关键问题。
2. 能由 AI 完成的读取、整理、修改和检查请直接执行；需要本人操作时说明在哪个页面点击什么。
3. 已有项目实施前保留可恢复版本；首次空目录先保留新建文件，Git准备完成后再建立起点提交。不要覆盖现有未确认改动。
4. 给出实际产物、文件位置与当前预览，不把方案当作已经执行。
【需要交付】改动前后说明、实际预览地址、受影响位置；验证原有操作、手机排列和相邻功能。
【检查标准】逐项对照本次目标，报告实际检查、未验证项和下一步。删除资料、付费、扩大访问或公开发布前等待明确确认。先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
【背景】【填写项目用途与给谁使用】
【当前问题】【填写正在遇到的困难或希望完成的变化】
【输入材料】当前组件截图或页面、需求与现有风格；词典名称可作为补充。
【本次任务】【组件名称】填写认识的名字；不知道时贴图并描述位置，请AI先识别。
【所在位置】填写页面和区域。
【当前状态】描述默认、点击或输入后的表现。
【目标状态】分别说明外观和操作反馈。
【禁用/空白/失败时】说明应该看到什么，不适用时说明原因。
【修改范围】仅此处或所有复用位置。
保留原数据与事件，只实现确认的变化。
【约束】保留已确认范围和现有工作，不做无关修改。
请按以下顺序执行：
1. 先读取材料并复述目标；缺少会影响结果的信息时，先问一个关键问题。
2. 能由 AI 完成的读取、整理、修改和检查请直接执行；需要本人操作时说明在哪个页面点击什么。
3. 已有项目实施前保留可恢复版本；首次空目录先保留新建文件，Git准备完成后再建立起点提交。不要覆盖现有未确认改动。
4. 给出实际产物、文件位置与当前预览，不把方案当作已经执行。
【需要交付】组件修改、受影响页面列表；实际检查鼠标、键盘、手机和关键状态，不用静态截图替代交互验证。
【检查标准】逐项对照本次目标，报告实际检查、未验证项和下一步。删除资料、付费、扩大访问或公开发布前等待明确确认。