Agent Skills
返回列表
Vibe UI 设计工作流

Vibe UI 设计工作流

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_15292d5a/yjkj-vibe-ui。

技能介绍

解决什么问题

网页 UI 生成的常见问题不是“能不能出页面”，而是结果容易漂成默认模板：靛蓝渐变、emoji 图标、假指标、堆砌玻璃拟态。vibe-ui 把视觉约束落到文件层面，用 DESIGN.md 作为颜色、字体、间距、圆角、阴影、布局密度和交互风格的来源，并围绕 Vibe Gate 做实现前检查与实现后复盘。

工作流与关键组件

  • 先读 brief：read 会生成 .vibe-ui/brief-read.json 与 .vibe-ui/product-context.json，记录受众、购买顾虑、语气、dials、证明策略和页面策略。
  • 锁定风格：用户指定风格时用 use 写入 DESIGN.md；未指定时用 recommend 选择内置 curated styles，或用 --source open-design 扩大资源库。
  • 页面生成：支持 landing、dashboard、pricing、login、docs、settings、profile、chrome-extension-landing 等页面类型；可用 template、like、browse --source all 比较或浏览风格。
  • 实现后检查：check / report 输出结果；若不够 Ready 或页面仍然 generic，再用 critique 和 polish 生成修复提示。

适用边界

它适合做视觉一致性的前端工作流，不替代项目测试或真实渲染检查。DESIGN.md 只能约束设计，不应复制真实 logo、商标、专有资产或官方品牌声明。Design Read、dials 和脚手架文本应保留在 JSON、报告、提示词或注释中，不要直接渲染到生产 UI。

使用场景

  • 做落地页时，用 recommend 选风格，再用 generate landing 输出 DESIGN.md 约束的提示。
  • 已有 brief 时，用 read 生成 brief-read.json，沉淀受众、购买顾虑和页面策略，再进入实现。
  • 页面生成后偏 generic 时，跑 report，再用 critique 和 polish 生成设计一致性修复提示。
  • 比较多个 UI 风格时，用 browse --source all 生成本地静态浏览器，为定价页或文档页选方向。

适合人员

  • 做 SaaS 落地页的前端工程师：希望把 DESIGN.md 的风格约束写进生成提示，减少默认风格漂移。
  • 负责营销页的独立开发者：需要为 pricing、login、docs 页面生成风格约束提示，并做实现后检查。
  • 做浏览器扩展界面的设计工程师：想用 recommend、template、like 比较风格并生成 brand-safe 页面提示。
  • 维护 UI 审查流程的技术负责人：需要把 anti-pattern watchlist 和 report/critique/polish 纳入前端复盘。