awesome-design-skill

UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如"用Linear风格设计"、"使用Apple风格创建页面"、"按Stripe风格重构"）。也用于用户询问可用设计风格列表（"列出所有风格"、"有哪些风格"）或查看特定风格详情（"看看Vercel风格"）。**不触发：用户未指定风格的一般设计请求**（如"设计一个页面"、"创建UI"等不会触发此技能）。

Zhou Chang@zhouchang1988

Install

openclaw skills install @zhouchang1988/awesome-design-skill

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 - 动画效果

输出格式

完成设计后，告知用户：

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