Vibe Guide制作界面时，用这里认识组件并描述想要的效果，将选中的组件和要求交给当前项目的 AI。
这页的方法适合你的项目吗，怎样检查？
- 什么情况下会用到这页的方法？
- 已知道用户要做的动作，需要安排界面时。
- 根据自己的情况，应该怎样选择？
- 先按任务选：切换内容用标签、提交操作用按钮、输入内容用表单；再比较视觉样式。复杂流程先画入口与返回。
- 哪些情况容易判断错？
- 不要照搬示例标签、条数和业务字段；少量内容不必加分页或搜索，重要操作不能只靠悬停、颜色或图标表达。
- 怎样检查这个方法在你的项目中有用？
- 用自己的长文本和空数据检查布局，再用键盘、触屏测试操作、焦点、错误提示与返回。
跟着操作
把想要的界面风格说清楚
先说产品怎样被使用，再把“好看”拆成能看到的选择：内容密度、颜色、字体层级、间距、边界和动效。AI 负责把这些整理成页面，不需要先学设计术语。
开始前需要准备什么？
需求文档、当前页面；有喜欢的参考图可以一起提供，没有参考也可以开始。
1. 先说这是什么产品
告诉 AI 使用者需要阅读、填写、比较还是反复操作；说明最重要的内容和按钮。风格应帮助完成任务。
看到下面的结果后，再继续：AI 能说出首先应该看到什么，而不是只列形容词。
2. 用可见差异描述偏好
说明浅色或深色、信息紧凑或宽松、主要颜色、圆角大小、是否用阴影和动效。不知道时请 AI 给两个小样，选一个再推广。
看到下面的结果后，再继续：先比较一个代表页面，确定文字可读、主次清楚，再应用到其他页面。
3. 参考图要指明借鉴部分
给截图编号，标明借鉴的是布局、颜色、字体还是某个控件。说明哪些不要借鉴，避免 AI 连示例人物、文案和业务一起照搬。
看到下面的结果后，再继续：AI 先描述看见的结构，再列未知交互；看不到的行为不能当成截图事实。
复制材料，按实际项目填写
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
【背景】【填写项目用途与给谁使用】
【当前问题】【填写正在遇到的困难或希望完成的变化】
【输入材料】需求文档、当前页面、品牌颜色或参考截图（可选）。
【本次任务】先整理风格说明，不重做全部页面。
【用途与主要操作】填写实际任务。
【整体感觉】填写想要的感觉，并转成可见选择。
【颜色】填写主色、背景、需要保留的品牌色，或请AI提供两个小样。
【内容密度与间距】填写紧凑/宽松及最重要的信息。
【字体与层级】说明标题、正文、辅助说明的主次。
【边框、圆角、阴影、动效】逐项说明偏好，未知则请AI建议。
【参考】附图并说明只借鉴哪些部分。
先做一个代表页面，确认后保存 docs/ui-style.md，再按相同规则扩展。
【约束】保留已确认范围和现有工作，不做无关修改。
请按以下顺序执行：
1. 先读取材料并复述目标；缺少会影响结果的信息时，先问一个关键问题。
2. 能由 AI 完成的读取、整理、修改和检查请直接执行；需要本人操作时说明在哪个页面点击什么。
3. 已有项目实施前保留可恢复版本；首次空目录先保留新建文件，Git准备完成后再建立起点提交。不要覆盖现有未确认改动。
4. 给出实际产物、文件位置与当前预览，不把方案当作已经执行。
【需要交付】风格说明、一个可操作页面；检查手机和电脑、长标题、空白/加载/失败反馈；列出没有改变的功能。
【检查标准】逐项对照本次目标，报告实际检查、未验证项和下一步。删除资料、付费、扩大访问或公开发布前等待明确确认。