前言¶
在用 AI 生成 UI 代码时,经常会遇到风格不一致、缺少统一设计规范、需要反复调整的问题。现有做法往往依赖手动维护文档或零散的 Prompt,难以保证团队或项目内部的设计语言统一。下面介绍一个本地优先的 DESIGN.md 工作流技能,用于 AI UI 生成与设计一致性检查。
是什么¶
vibe-ui 是一个本地优先的 DESIGN.md 工作流技能,由社区用户 user_15292d5a 维护,版本 1.1.0,分类为 design-media。它帮助 AI 在生成 UI 代码前或过程中读取并应用设计规范,从而保持视觉风格的一致性。
核心功能¶
- 读取并解析 DESIGN.md 文件中的设计规范
- 将设计风格应用于 AI 生成的 UI 代码
- 根据设计规范生成页面提示或模板配方
- 浏览打包后的源系统,检查 UI 代码是否符合选定的视觉风格
- 本地运行,不依赖远程 API(requires_api_key=false)
安装与启用¶
在支持 SKILL.md 格式的客户端中安装即可启用。官方地址:https://api.skillhub.cn/user_15292d5a/yjkj-vibe-ui
典型用法¶
- 在项目根目录放置 DESIGN.md 文件,包含设计规范(如颜色、间距、字体等)
- 在会话中激活 vibe-ui 技能
- 向 AI 描述 UI 需求,AI 会读取 DESIGN.md 并生成符合风格的代码
- 需要检查 UI 代码是否符合设计规范时,可使用技能提供的检查功能
适用场景与注意¶
适合需要在 AI 生成 UI 时保持设计一致性的项目或团队。需提前准备规范的 DESIGN.md 文件,确保内容清晰、可被解析。技能为本地优先,无需额外 API 密钥。
短结尾¶
vibe-ui 通过本地 DESIGN.md 工作流,帮助 AI 保持 UI 设计一致性,适合需要统一视觉风格的项目。官方地址:https://api.skillhub.cn/user_15292d5a/yjkj-vibe-ui