Vibe Guide制作界面时，用这里认识组件并描述想要的效果，将选中的组件和要求交给当前项目的 AI。
这页的方法适合你的项目吗，怎样检查？
- 什么情况下会用到这页的方法？
- 已知道用户要做的动作，需要安排界面时。
- 根据自己的情况，应该怎样选择？
- 先按任务选：切换内容用标签、提交操作用按钮、输入内容用表单；再比较视觉样式。复杂流程先画入口与返回。
- 哪些情况容易判断错？
- 不要照搬示例标签、条数和业务字段；少量内容不必加分页或搜索，重要操作不能只靠悬停、颜色或图标表达。
- 怎样检查这个方法在你的项目中有用？
- 用自己的长文本和空数据检查布局，再用键盘、触屏测试操作、焦点、错误提示与返回。
OVERLAY
对话框
阻断式编辑或确认。
Modal · Dialog
选这个组件前，先核对用途
什么情况下适合使用？临时补充上下文，或需要明确完成的小任务。
什么情况下不宜直接照搬？长流程不要塞进弹窗；必须有关闭、返回与焦点恢复。
下面的名称、条数和字段是示例。交给 AI 前换成本项目内容；实际示例仅证明演示交互，不代表业务已接通。
亲手试一下，再决定是否使用
按什么顺序试用这个示例？打开、关闭，再用 Escape；悬停内容也试键盘聚焦。
试用时应该观察什么？关闭回到触发器；阻断弹窗和非阻断气泡的行为不同。
交互示例 · 不连接真实业务
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
本次只制作一个对话框（Modal），不重做整页。
项目用途与使用人群：【填写】
组件所在页面和位置：【填写】
用户操作前看到什么：【填写】
用户点击、输入或选择后，应发生什么：【填写】
本项目实际文案、选项和资料：【填写】
目标设备与已有样式：【填写】
不允许改变的内容：【填写，无则写无】
先核对组件是否适合上述任务。不要照搬词典示例的姓名、品牌、条数或尺寸；需要补充时先问。
关闭回到触发器；阻断弹窗和非阻断气泡的行为不同。
只实现确认范围，并列出操作步骤、预期和实际结果。默认、选中、禁用、空白、失败状态按本组件需要检查，不适用则解释原因。不把示例成功提示当作业务已接通。查看保留的原始规格
Build a single Modal Dialog. Structure: a dimmed overlay, a centered panel with title Edit project, body text or a simple field, primary Save and secondary Cancel, plus a close control. Interaction: open from a trigger; trap focus inside; Escape and overlay click close; Cancel/Save close. States: closed, open. Motion: overlay fade, panel ~180ms. Do not use a side drawer, and do not open without a scrim. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.
做成对话框。有变暗遮罩、居中面板、标题 Edit project、正文或简单字段、主按钮 Save 和次按钮 Cancel、关闭。从触发器打开；焦点锁在内部；Escape 和点遮罩关闭。遮罩淡入，面板约 180ms。不要做成侧抽屉，也不要没有遮罩。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。
做出的效果不一致，应该检查什么？
只画出了样子 → 把缺失的点击、键盘或状态变化逐项交给 AI；交互已存在但行为不同 → 提供实际步骤、预期和结果，要求只修正差异。先在示例资料上验证，再接入产品。
继续描述组件 →