awesome-design-skill
🎨 设计多媒体
免费
📖 技能介绍
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 - 动画效果
输出格式
完成设计后，告知用户： 1. 使用的设计风格名称 2. 主要设计特点概述 3. 生成的文件列表
🤖 AI 评测
这个 Skill 质量不错，内置 54 种知名设计风格（如 Linear、Stripe、Apple 等），每套都有完整的设计规范文档，能帮助快速生成符合特定品牌风格的 UI。触发机制合理，只在用户明确指定风格时才会激活。不过它的功能比较基础，主要就是复制设计文档到项目，缺少实时预览和自动生成 UI 的能力。如果能直接生成带样式的代码页面会更实用。
📊 多维度评分
适应性4.5
规范性3.9
有效性4.7
可靠性4.2
可信度4.8
📁 包含文件 (225 个)
📄 README.md
7.4 KB
📄 SKILL.md
5 KB
📄 _meta.json
139 B
📄 design-md/airbnb/DESIGN.md
13.1 KB
📄 design-md/airbnb/README.md
1.2 KB
📄 design-md/airbnb/preview-dark.html
18.4 KB
📄 design-md/airbnb/preview.html
18.2 KB
📄 design-md/airtable/DESIGN.md
3.5 KB
📄 design-md/airtable/README.md
1.3 KB
📄 design-md/airtable/preview-dark.html
14.8 KB
📄 design-md/airtable/preview.html
14.7 KB
📄 design-md/apple/DESIGN.md
18.3 KB
📄 design-md/apple/README.md
1.2 KB
📄 design-md/apple/preview-dark.html
26.9 KB
📄 design-md/apple/preview.html
27 KB
📄 design-md/bmw/DESIGN.md
8.7 KB
📄 design-md/bmw/README.md
1.2 KB
📄 design-md/bmw/preview-dark.html
15.1 KB
📄 design-md/bmw/preview.html
15 KB
📄 design-md/cal/DESIGN.md
15.4 KB
📄 design-md/cal/README.md
1.2 KB
📄 design-md/cal/preview-dark.html
23.2 KB
📄 design-md/cal/preview.html
25 KB
📄 design-md/claude/DESIGN.md
18.4 KB
📄 design-md/claude/README.md
1.2 KB
📄 design-md/claude/preview-dark.html
31.2 KB
📄 design-md/claude/preview.html
31.8 KB
📄 design-md/clay/DESIGN.md
16.5 KB
📄 design-md/clay/README.md
1.2 KB
📄 design-md/clay/preview-dark.html
23.3 KB
📄 design-md/clay/preview.html
23.1 KB
📄 design-md/clickhouse/DESIGN.md
14.3 KB
📄 design-md/clickhouse/README.md
1.3 KB
📄 design-md/clickhouse/preview-dark.html
31.5 KB
📄 design-md/clickhouse/preview.html
29.7 KB
📄 design-md/cohere/DESIGN.md
13.5 KB
📄 design-md/cohere/README.md
1.2 KB
📄 design-md/cohere/preview-dark.html
30.1 KB
📄 design-md/cohere/preview.html
30.2 KB
📄 design-md/coinbase/DESIGN.md
4.9 KB
📄 design-md/coinbase/README.md
1.3 KB
📄 design-md/coinbase/preview-dark.html
14.9 KB
📄 design-md/coinbase/preview.html
14.8 KB
📄 design-md/composio/DESIGN.md
19 KB
📄 design-md/composio/README.md
1.3 KB
📄 design-md/composio/preview-dark.html
33.9 KB
📄 design-md/composio/preview.html
33.4 KB
📄 design-md/cursor/DESIGN.md
18.2 KB
📄 design-md/cursor/README.md
1.2 KB
📄 design-md/cursor/preview-dark.html
27.2 KB
📄 design-md/cursor/preview.html
27.1 KB
📄 design-md/elevenlabs/DESIGN.md
14 KB
📄 design-md/elevenlabs/README.md
1.3 KB
📄 design-md/elevenlabs/preview-dark.html
19.6 KB
📄 design-md/elevenlabs/preview.html
19.4 KB
📄 design-md/expo/DESIGN.md
16.3 KB
📄 design-md/expo/README.md
1.2 KB
📄 design-md/expo/preview-dark.html
28.9 KB
📄 design-md/expo/preview.html
29 KB
📄 design-md/figma/DESIGN.md
10.4 KB
📄 design-md/figma/README.md
1.2 KB
📄 design-md/figma/preview-dark.html
31 KB
📄 design-md/figma/preview.html
31.2 KB
📄 design-md/framer/DESIGN.md
16 KB
📄 design-md/framer/README.md
1.2 KB
📄 design-md/framer/preview-dark.html
29.7 KB
📄 design-md/framer/preview.html
29.3 KB
📄 design-md/hashicorp/DESIGN.md
15.1 KB
📄 design-md/hashicorp/README.md
1.3 KB
📄 design-md/hashicorp/preview-dark.html
40.9 KB
📄 design-md/hashicorp/preview.html
41.2 KB
📄 design-md/ibm/DESIGN.md
19 KB
📄 design-md/ibm/README.md
1.2 KB
📄 design-md/ibm/preview-dark.html
27 KB
📄 design-md/ibm/preview.html
26.8 KB
📄 design-md/intercom/DESIGN.md
6.3 KB
📄 design-md/intercom/README.md
1.3 KB
📄 design-md/intercom/preview-dark.html
17.1 KB
📄 design-md/intercom/preview.html
16.9 KB
📄 design-md/kraken/DESIGN.md
4.3 KB
📄 design-md/kraken/README.md
1.2 KB
📄 design-md/kraken/preview-dark.html
15.3 KB
📄 design-md/kraken/preview.html
15.1 KB
📄 design-md/linear.app/DESIGN.md
21.3 KB
📄 design-md/linear.app/README.md
1.3 KB
📄 design-md/linear.app/preview-dark.html
27.9 KB
📄 design-md/linear.app/preview.html
27.5 KB
📄 design-md/lovable/DESIGN.md
16.6 KB
📄 design-md/lovable/README.md
1.3 KB
📄 design-md/lovable/preview-dark.html
22.1 KB
📄 design-md/lovable/preview.html
21.9 KB
📄 design-md/minimax/DESIGN.md
13.5 KB
📄 design-md/minimax/README.md
1.3 KB
📄 design-md/minimax/preview-dark.html
38.6 KB
📄 design-md/minimax/preview.html
38.1 KB
📄 design-md/mintlify/DESIGN.md
16.3 KB
📄 design-md/mintlify/README.md
1.3 KB
📄 design-md/mintlify/preview-dark.html
25.8 KB
📄 design-md/mintlify/preview.html
25.5 KB
📄 design-md/miro/DESIGN.md
4.8 KB
📄 design-md/miro/README.md
1.2 KB
📄 design-md/miro/preview-dark.html
15.9 KB
📄 design-md/miro/preview.html
15.7 KB
📄 design-md/mistral.ai/DESIGN.md
14.5 KB
📄 design-md/mistral.ai/README.md
1.3 KB
📄 design-md/mistral.ai/preview-dark.html
28.3 KB
📄 design-md/mistral.ai/preview.html
28.3 KB
📄 design-md/mongodb/DESIGN.md
14.5 KB
📄 design-md/mongodb/README.md
1.3 KB
📄 design-md/mongodb/preview-dark.html
19.5 KB
📄 design-md/mongodb/preview.html
19.3 KB
📄 design-md/notion/DESIGN.md
17.2 KB
📄 design-md/notion/README.md
1.2 KB
📄 design-md/notion/preview-dark.html
25.5 KB
📄 design-md/notion/preview.html
25.3 KB
📄 design-md/nvidia/DESIGN.md
16.1 KB
📄 design-md/nvidia/README.md
1.2 KB
📄 design-md/nvidia/preview-dark.html
26.2 KB
📄 design-md/nvidia/preview.html
26.4 KB
📄 design-md/ollama/DESIGN.md
14.4 KB
📄 design-md/ollama/README.md
1.2 KB
📄 design-md/ollama/preview-dark.html
23 KB
📄 design-md/ollama/preview.html
22.9 KB
📄 design-md/opencode.ai/DESIGN.md
14.5 KB
📄 design-md/opencode.ai/README.md
1.3 KB
📄 design-md/opencode.ai/preview-dark.html
22.7 KB
📄 design-md/opencode.ai/preview.html
22.4 KB
📄 design-md/pinterest/DESIGN.md
11.7 KB
📄 design-md/pinterest/README.md
1.3 KB
📄 design-md/pinterest/preview-dark.html
17.8 KB
📄 design-md/pinterest/preview.html
17.6 KB
📄 design-md/posthog/DESIGN.md
17.4 KB
📄 design-md/posthog/README.md
1.3 KB
📄 design-md/posthog/preview-dark.html
28.5 KB
📄 design-md/posthog/preview.html
27.7 KB
📄 design-md/raycast/DESIGN.md
17.2 KB
📄 design-md/raycast/README.md
1.3 KB
📄 design-md/raycast/preview-dark.html
27.6 KB
📄 design-md/raycast/preview.html
29.3 KB
📄 design-md/replicate/DESIGN.md
13.5 KB
📄 design-md/replicate/README.md
1.3 KB
📄 design-md/replicate/preview-dark.html
29.9 KB
📄 design-md/replicate/preview.html
30.2 KB
📄 design-md/resend/DESIGN.md
17.7 KB
📄 design-md/resend/README.md
1.2 KB
📄 design-md/resend/preview-dark.html
24.5 KB
📄 design-md/resend/preview.html
24.3 KB
📄 design-md/revolut/DESIGN.md
8.6 KB
📄 design-md/revolut/README.md
1.3 KB
📄 design-md/revolut/preview-dark.html
18.3 KB
📄 design-md/revolut/preview.html
18.1 KB
📄 design-md/runwayml/DESIGN.md
13.1 KB
📄 design-md/runwayml/README.md
1.3 KB
📄 design-md/runwayml/preview-dark.html
24.7 KB
📄 design-md/runwayml/preview.html
24.7 KB
📄 design-md/sanity/DESIGN.md
19.9 KB
📄 design-md/sanity/README.md
1.2 KB
📄 design-md/sanity/preview-dark.html
31.4 KB
📄 design-md/sanity/preview.html
37.4 KB
📄 design-md/sentry/DESIGN.md
14.3 KB
📄 design-md/sentry/README.md
1.2 KB
📄 design-md/sentry/preview-dark.html
26.2 KB
📄 design-md/sentry/preview.html
30 KB
📄 design-md/spacex/DESIGN.md
10.5 KB
📄 design-md/spacex/README.md
1.2 KB
📄 design-md/spacex/preview-dark.html
15.6 KB
📄 design-md/spacex/preview.html
15.3 KB
📄 design-md/spotify/DESIGN.md
12.7 KB
📄 design-md/spotify/README.md
1.3 KB
📄 design-md/spotify/preview-dark.html
17.1 KB
📄 design-md/spotify/preview.html
16.9 KB
📄 design-md/stripe/DESIGN.md
19.7 KB
📄 design-md/stripe/README.md
1.2 KB
📄 design-md/stripe/preview-dark.html
27.9 KB
📄 design-md/stripe/preview.html
27.5 KB
📄 design-md/supabase/DESIGN.md
14.2 KB
📄 design-md/supabase/README.md
1.3 KB
📄 design-md/supabase/preview-dark.html
35.3 KB
📄 design-md/supabase/preview.html
34.7 KB
📄 design-md/superhuman/DESIGN.md
17.1 KB
📄 design-md/superhuman/README.md
1.3 KB
📄 design-md/superhuman/preview-dark.html
29.8 KB
📄 design-md/superhuman/preview.html
29.2 KB
📄 design-md/together.ai/DESIGN.md
13.5 KB
📄 design-md/together.ai/README.md
1.3 KB
📄 design-md/together.ai/preview-dark.html
31 KB
📄 design-md/together.ai/preview.html
31.3 KB
📄 design-md/uber/DESIGN.md
17.2 KB
📄 design-md/uber/README.md
1.2 KB
📄 design-md/uber/preview-dark.html
32.7 KB
📄 design-md/uber/preview.html
32.6 KB
📄 design-md/vercel/DESIGN.md
18.5 KB
📄 design-md/vercel/README.md
1.2 KB
📄 design-md/vercel/preview-dark.html
25.7 KB
📄 design-md/vercel/preview.html
25.6 KB
📄 design-md/voltagent/DESIGN.md
23.6 KB
📄 design-md/voltagent/README.md
1.3 KB
📄 design-md/voltagent/preview-dark.html
26.6 KB
📄 design-md/voltagent/preview.html
28.7 KB
📄 design-md/warp/DESIGN.md
15.2 KB
📄 design-md/warp/README.md
1.2 KB
📄 design-md/warp/preview-dark.html
23 KB
📄 design-md/warp/preview.html
24.3 KB
📄 design-md/webflow/DESIGN.md
4 KB
📄 design-md/webflow/README.md
1.3 KB
📄 design-md/webflow/preview-dark.html
16.3 KB
📄 design-md/webflow/preview.html
16.2 KB
📄 design-md/wise/DESIGN.md
8.5 KB
📄 design-md/wise/README.md
1.2 KB
📄 design-md/wise/preview-dark.html
17.1 KB
📄 design-md/wise/preview.html
16.9 KB
📄 design-md/x.ai/DESIGN.md
15.2 KB
📄 design-md/x.ai/README.md
1.2 KB
📄 design-md/x.ai/preview-dark.html
22 KB
📄 design-md/x.ai/preview.html
24.5 KB
📄 design-md/zapier/DESIGN.md
17.7 KB
📄 design-md/zapier/README.md
1.2 KB
📄 design-md/zapier/preview-dark.html
23.4 KB
📄 design-md/zapier/preview.html
23.2 KB
📄 scripts/copy-design.sh
983 B
📄 scripts/get-design.sh
422 B
📄 scripts/list-styles.sh
763 B
📄 scripts/random-style.sh
470 B
📄 scripts/smart-select.sh
4.2 KB
📄 scripts/styles.json
23.6 KB
