- name
- awesome-design-skill
- description
- UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。触发条件：用户必须明确指定设计风格（如"用Linear风格设计"、"使用Apple风格创建页面"、"按Stripe风格重构"）。也用于用户询问可用设计风格列表（"列出所有风格"、"有哪些风格"）或查看特定风格详情（"看看Vercel风格"）。不触发：用户未指定风格的一般设计请求（如"设计一个页面"、"创建UI"等不会触发此技能）。
Awesome Design Skill
根据用户指定的设计风格，从 design-md 风格库中选择对应的设计系统作为 UI 开发指导，并将 DESIGN.md 复制到当前工作目录。
重要：此技能仅在用户明确指定设计风格时触发。如果用户未指定风格，不要使用此技能。
字体说明
所有设计风格的预览文件（preview.html、preview-dark.html）使用 fonts.loli.net 作为 Google Fonts 的镜像源，以优化中国大陆地区的访问体验。如需更换为其他字体源，可批量替换文件中的 fonts.loli.net 为其他镜像地址。
自定义设计风格
design-md 目录中的内容可以自由添加或替换。 你可以：
- 添加自己喜欢的设计风格（只需在
design-md/目录下创建新的风格文件夹和 DESIGN.md） - 替换现有风格的 DESIGN.md 内容
- 删除不需要的风格
这样你可以构建属于自己的设计风格库，让 Claude 使用你熟悉和偏好的设计系统。
脚本文件
| 脚本 | 用途 |
|---|---|
scripts/list-styles.sh | 列出所有可用的设计风格 |
scripts/smart-select.sh [需求描述] | 智能选择设计风格（根据需求关键词匹配，无匹配则随机） |
scripts/random-style.sh | 随机选择一个设计风格 |
scripts/get-design.sh <风格名称> | 获取指定风格的 DESIGN.md 路径 |
scripts/copy-design.sh <风格名称> [目标目录] | 复制 DESIGN.md 到指定目录（默认当前目录） |
工作流程
用户指定风格进行设计
前提：用户必须明确指定风格名称
- 运行
scripts/get-design.sh <风格名称>验证风格存在并获取路径 - 运行
scripts/copy-design.sh <风格名称>复制 DESIGN.md 到当前目录 - 读取当前目录的 DESIGN.md 作为风格指导
- 告知用户使用的设计风格
用户查看可用风格
当用户询问"有哪些风格"、"列出所有风格"、"查看可用设计风格"时：
运行 scripts/list-styles.sh 列出所有可用的设计风格，并展示给用户。
用户查看特定风格详情
当用户询问"看看XX风格"、"查看XX风格的设计规范"时：
- 运行
scripts/get-design.sh <风格名称>获取风格路径 - 读取并展示该风格的设计规范概要
用户重构现有页面（需指定风格）
前提：用户必须明确指定目标风格
当用户要求将现有页面改为某种风格时（如"将index.html改为airbnb的风格"、"用Vercel风格重构这个页面"）：
- 首先读取用户指定的现有页面文件，理解其当前结构和内容
- 运行
scripts/get-design.sh <目标风格>验证风格存在 - 运行
scripts/copy-design.sh <目标风格>复制到当前目录 - 读取 DESIGN.md 作为风格指导
- 根据新风格的设计系统，重构页面的：
- 颜色方案（背景、文字、强调色等） - 字体排版（字体家族、字号、行高等） - 间距系统（边距、内边距、元素间距） - 阴影和圆角 - 组件样式（按钮、卡片、表单等） - 动画效果
- 保持页面原有的功能和内容结构，仅改变视觉风格
- 告知用户重构完成及主要变化
可用设计风格关键词
用户指定风格时可以使用以下关键词：
| 风格名称 | 适用场景 |
|---|---|
| linear.app | 项目管理、任务工具、深色主题 |
| apple | 产品展示、高端简洁、消费电子 |
| stripe | 支付、金融科技、企业级 |
| vercel | 开发者工具、深色主题 |
| spotify | 音乐、媒体播放器 |
| notion | 协作、文档工具 |
| figma | 设计工具、创意平台 |
| airbnb | 旅行、预订、民宿 |
| coinbase | 加密货币、区块链 |
| claude | AI产品、对话界面 |
| cursor | 开发者工具、代码编辑器 |
| posthog | 数据分析、监控仪表板 |
| framer | 设计工具、创意平台 |
...以及更多风格，使用 scripts/list-styles.sh 查看完整列表。
DESIGN.md 文件结构
每个 DESIGN.md 包含：
- Overview - 设计概述
- Colors - 颜色系统
- Typography - 字体排版
- Spacing - 间距系统
- Shadows - 阴影效果
- Border Radius - 圆角设置
- Components - 组件样式
- Animations - 动画效果
输出格式
完成设计后，告知用户：
- 使用的设计风格名称
- 主要设计特点概述
- 生成的文件列表