Vibe UI 设计工作流

问题：生成页面时风格容易漂移

Web UI 生成常出现两个问题：模型会给出可运行的页面，但视觉语言不稳定；不同页面之间的字体、间距、颜色、组件密度缺少共同约束。Vibe UI 把视觉风格从口头描述变成可执行的 DESIGN.md 工作流，让风格、页面模板和审查规则在同一套约束下运行。

工作方式：先锁定设计，再生成代码

Vibe UI 默认使用 Vibe Gate 2.0 循环：

• 用 read 解析需求，产出 .vibe-ui/brief-read.json 与 .vibe-ui/product-context.json。
• 用 use、recommend 或 like 选择风格，写入 DESIGN.md 与 DESIGN.generated.md。
• 用 workflow、invariants、brief-check 明确执行链、不可漂移项和反模式。
• 用 generate 生成页面提示，再用 check、report、critique、polish 做实现后审查与修复。

它内置 18 个 curated styles，也包含 150 个上游 DESIGN.md 资源、111 个模板索引和模板 recipes，支持 landing、dashboard、pricing、login、docs 等页面类型。

边界与注意点

• 风格素材来自公开可见 UI 模式，不应描述为官方品牌系统。
• DESIGN.md 是颜色、字体、间距、圆角、阴影、布局节奏的 source of truth。
• 静态检查只是第一遍审查，前端仍需跑测试并检查实际渲染效果。
• .vibe-ui 中的设计读数、dials 和脚手架文本不要渲染到生产界面。