design.md 生成器 / Design Specification Markdown Generator - VibeUI Kit
通过 8 步可视化配置生成 design.md、Design Tokens 和实时组件预览，帮助把 UI 决策沉淀成可交付规范。
design.md 生成器把页面风格、色彩、字体、间距、圆角、阴影和组件规则整理成一份结构化 Markdown。它适合在设计到开发之间建立共同语言，让 AI 编码工具、前端开发者和设计师都能读取同一份规范。
design.md 适合谁
- 前端开发者
- 产品设计师
- UI 设计师
- 需要维护设计规范的团队
适合场景
- 想快速生成 design.md 作为项目设计规范入口。
- 想把颜色、字体、间距、圆角和阴影整理成 Design Tokens。
- 想在导出前实时查看按钮、卡片和表单等组件预览。
- 想让 AI 编码工具读取统一的 UI specification。
- 想把一次页面设计决策沉淀成后续可复用文档。
核心能力
- 8 步可视化配置设计规范。
- 生成结构清晰的 design.md。
- 输出颜色、字号、间距、圆角和阴影等 Design Tokens。
- 实时预览组件外观，降低规范和视觉之间的偏差。
- 本地生成文档，不依赖 AI 或外部服务。
输入
- 品牌和产品语气
- 颜色、字体、间距、圆角、阴影等视觉选择
- 组件规则和状态说明
- 导出目标和规范偏好
输出
- design.md Markdown 文档
- Design Tokens 片段
- 实时组件预览
- 可复制的实现说明
使用步骤
- 填写产品定位、页面目标和视觉关键词。
- 选择色彩、字体、间距、圆角、阴影和密度偏好。
- 配置按钮、卡片、表单等组件规则。
- 查看实时预览并调整不一致的视觉项。
- 导出 design.md 和 Design Tokens，交给开发或 AI 编码工具使用。
常见问题
- design.md 生成器会调用 AI 吗？
- 不会。当前工具根据表单配置在浏览器本地生成 Markdown、Design Tokens 和组件预览，不依赖外部 AI 服务。
- 生成的 design.md 适合谁读取？
- 它适合前端开发者、UI 设计师、产品设计师以及 AI 编码工具读取，用来统一页面风格、组件规则和实现细节。
- Design Tokens 可以直接用于项目吗？
- 可以作为实现起点。正式接入项目时，仍建议根据项目命名规范、主题结构和无障碍要求做一次复核。
相关链接
- 素材切割: 先整理 UI 素材，再沉淀设计规范。
- 工具列表: 查看 VibeUI Kit 当前可用工具。
- UI 网站推荐: 寻找更多设计系统、组件库和灵感资源。
关键词：design.md、Design Tokens、设计规范、UI specification、design system、Markdown generator