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 到指定目录（默认当前目录）

工作流程#

用户指定风格进行设计#

前提：用户必须明确指定风格名称

1. 运行 scripts/get-design.sh <风格名称> 验证风格存在并获取路径
2. 运行 scripts/copy-design.sh <风格名称> 复制 DESIGN.md 到当前目录
3. 读取当前目录的 DESIGN.md 作为风格指导
4. 告知用户使用的设计风格

用户查看可用风格#

当用户询问"有哪些风格"、"列出所有风格"、"查看可用设计风格"时：

运行 scripts/list-styles.sh 列出所有可用的设计风格，并展示给用户。

用户查看特定风格详情#

当用户询问"看看XX风格"、"查看XX风格的设计规范"时：

1. 运行 scripts/get-design.sh <风格名称> 获取风格路径
2. 读取并展示该风格的设计规范概要

用户重构现有页面（需指定风格）#

前提：用户必须明确指定目标风格

当用户要求将现有页面改为某种风格时（如"将index.html改为airbnb的风格"、"用Vercel风格重构这个页面"）：

1. 首先读取用户指定的现有页面文件，理解其当前结构和内容
2. 运行 scripts/get-design.sh <目标风格> 验证风格存在
3. 运行 scripts/copy-design.sh <目标风格> 复制到当前目录
4. 读取 DESIGN.md 作为风格指导
5. 根据新风格的设计系统，重构页面的：
   • 颜色方案（背景、文字、强调色等）
   • 字体排版（字体家族、字号、行高等）
   • 间距系统（边距、内边距、元素间距）
   • 阴影和圆角
   • 组件样式（按钮、卡片、表单等）
   • 动画效果
6. 保持页面原有的功能和内容结构，仅改变视觉风格
7. 告知用户重构完成及主要变化

可用设计风格关键词#

用户指定风格时可以使用以下关键词：

风格名称适用场景linear.app项目管理、任务工具、深色主题apple产品展示、高端简洁、消费电子stripe支付、金融科技、企业级vercel开发者工具、深色主题spotify音乐、媒体播放器notion协作、文档工具figma设计工具、创意平台airbnb旅行、预订、民宿coinbase加密货币、区块链claudeAI产品、对话界面cursor开发者工具、代码编辑器posthog数据分析、监控仪表板framer设计工具、创意平台

...以及更多风格，使用 scripts/list-styles.sh 查看完整列表。

DESIGN.md 文件结构#

每个 DESIGN.md 包含：

• Overview - 设计概述
• Colors - 颜色系统
• Typography - 字体排版
• Spacing - 间距系统
• Shadows - 阴影效果
• Border Radius - 圆角设置
• Components - 组件样式
• Animations - 动画效果

输出格式#

完成设计后，告知用户：

1. 使用的设计风格名称
2. 主要设计特点概述
3. 生成的文件列表