规范化收录
每个条目含 DESIGN.md 原文与 front matter tokens，兼容官方规范。
核心功能
从规范到样板，一站式完成
真实预览
按文档规范渲染的静态样板页，即见即所得。
实时自定义
调整颜色、圆角、间距、按钮比例，样板页即时生效。
一键带走
下载定制后的 HTML 样板页，或回写 tokens 生成 DESIGN.md。
02
为谁而做
- 独立开发者——需要现成的设计参考
- 前端工程师——需要可落地的规范
- 设计师——需要表达设计意图的文档
你能得到
- 少走弯路：成熟产品的设计系统作为参考系
- 可复制的规范：直接拿走就能用的 design.md 模板
- 可定制的起点：调好颜色即用的样板页
使用指南
三步，把设计系统带回家
- 01
浏览筛选
进入设计库，按分类 tab 或关键词快速定位目标条目。
- 02
查看与自定义
打开详情页，在预览与文档间切换，用自定义面板实时调参。
- 03
下载使用
下载定制 HTML 样板页或 DESIGN.md 文档，直接投入项目。
对接到项目
下载 DESIGN.md 后，将下方 prompt 发送给 AI 编程助手，一键完成设计令牌集成
标准 Prompt
#你是一位资深前端工程师。请阅读项目中的 DESIGN.md 文件，提取全部设计令牌（design tokens）并应用到当前项目。
## 提取内容
- 颜色系统：主色、辅色、背景色、文字色、边框色、状态色
- 字体系统：字体族、字号层级、字重、行高、字间距
- 间距与尺寸：内边距、外边距、圆角
- 阴影与边框：卡片阴影、按钮阴影、边框样式
- 组件样式：按钮、卡片、输入框等关键组件
## 应用方式
- Tailwind CSS 项目 → 覆盖 tailwind.config 的 theme.extend
- CSS 变量项目 → 覆盖 :root 中的自定义属性
- 其他方案 → 按项目现有方式映射
## 输出要求
1. 完成所有令牌的代码集成
2. 确保代码可直接运行
3. 列出所有已应用的变更