开源设计技能包

让 AI 成为
专业 UI/UX 设计师

一套专业级 Claude Code 设计技能包，涵盖市场调研、完整设计规范与生产级代码实现，让你的 AI 助手拒绝平庸输出。

查看源码 效果对比
效果展示

从平庸到专业
只需一个 Skill

左侧为普通 AI 生成的原始页面，右侧为应用 Design Skills 后的专业设计。注意排版层级、配色系统、间距节奏和整体视觉品质的显著提升。

使用前
使用后
使用前
使用后
拖拽滑块对比效果
核心特性

专业设计，有据可依

涵盖图标、排版、配色、布局、动效、响应式等 8 大规范体系，拒绝随心所欲的 "发挥"。

自动市场调研
设计前先分析 3-5 个同类型优秀作品，提取配色、排版与交互灵感，拒绝闭门造车。
严格设计规范
8 大规范体系覆盖图标、排版、配色、布局、动效与响应式，确保输出一致性。
专业 SVG 图标
全面禁止使用 emoji，全部使用原创手绘或专业矢量图标，保证视觉统一性。
多风格支持
内置科技硬件、奢侈品牌、极简现代、暗黑未来、活力年轻 5 大风格模板。
工作流程

三步获得专业设计

将复杂的设计任务拆解为可复用的标准化流程，AI 自动执行，你只需描述需求。

01
市场调研
搜索并分析同类型优秀设计作品，提取风格特点、配色方案、排版结构与交互模式，形成设计灵感板。
02
设计方案
基于调研结果输出完整设计方向、配色方案、字体层级、布局结构、视觉细节与动效描述。
03
代码实现
根据设计方案编写生产级前端代码，确保视觉效果与规范完全一致，直接可用。
快速开始

一分钟即可启用

将技能包克隆到 Claude Code 的 skills 目录，即可在对话中自动激活专业设计能力。

Bash
# 克隆到 skills 目录
cd ~/.claude/skills && git clone https://github.com/ccwbb78/design-skills.git