ClawHub

awesome-design-skill

v1.2.0

UI设计风格选择器，从design-md风格库中选择合适的设计系统作为UI开发指导。支持50+知名品牌设计风格（Linear、Apple、Stripe、Vercel等）。**触发条件：用户必须明确指定设计风格**（如"用Linear风格设计"、"使用Apple风格创建页面"、"按Stripe风格重构"）。也用于用...

0· 232· 4 versions· 0 current· 0 all-time· Updated 5d ago· MIT-0
byZhou Chang@zhouchang1988

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. 生成的文件列表

Version tags

latestvk9799x4yn3haqbezgvrzrp4tb985cd0q