眼见为实
拖动分界线，看看差距有多大
左边是典型的 AI 生成页面——荧光紫、渐变字、模糊毛玻璃。右边是 SkillHub 改之后——干净、专业、能发给客户看。
你能做哪些事
不用学设计，说出来就行
每个场景都是真实对话。你说左边的日常问题，它给你右边的结果。
设计审查
把页面截图丢进去，像设计总监一样告诉你哪里不对——配色太花、留白不够、层级混乱。
设计系统
统一所有页面颜色、字体、间距。给项目建一套规范，新页面自动一致。
动效实现
让页面活起来——按钮弹性反馈、卡片自然滑入、毛玻璃面板，告诉它感觉就行。
视觉创建
给文字或数据，还你配图、信息图、流程图。写文章要封面？给。PPT 少图？给。
更多能力
一键生成 PPT、无障碍检查、Figma 双向同步、代码直出 React/Tailwind 组件。
Getting started
安装
直接把下面这句话发给你的 AI 工具，它会帮你装好。
帮我安装 Design SkillHub，GitHub 地址是 https://github.com/ikevss/design-skillhub
装完重启一下 AI 工具就行了
不用注册 · 不用付费 · 不用改任何设置
兼容性
适配这些 AI 编码工具
标准 Markdown 格式。复制到对应目录，重启即可。
| 工具 | 安装目录 | 安装方式 |
|---|---|---|
| Claude Code | ~/.claude/skills/ | bash designer-setup.sh |
| Codex | ~/.codex/skills/ | cp -r skills/* ~/.codex/skills/ |
| TRAE Work | ~/.trae/skills/ | cp -r skills/* ~/.trae/skills/ |
| Cursor | ~/.cursor/skills/ | cp -r skills/* ~/.cursor/skills/ |
| Gemini CLI | ~/.gemini/antigravity/skills/ | cp -r skills/* ~/.gemini/antigravity/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ | cp -r skills/* ~/.codeium/windsurf/skills/ |
怎么说话
用你自己的话说就行
不用记任何命令。就像跟一个设计师同事对话。
| 你想做什么 | 它会怎么做 |
|---|---|
| "帮我看看这个页面有什么问题" | 跑一遍设计审查，给你改进清单 |
| "配色有点奇怪，帮我调一下" | 分析当前配色 + 生成优化方案 |
| "字体大小和层级帮我理一下" | 重新建立排版层级 + 间距规范 |
| "帮我建一套统一的颜色和字体规范" | 自动生成完整的 Design Token |
| "这个组件动起来没感觉" | 按你的描述写动画代码 |
| "帮我做暗色模式" | 生成完整的暗色主题方案 |
| "这篇文章配张封面图" | 生成匹配内容的配图 |
| "这份数据画个图表" | 自动选择合适的图表类型并生成 |
| "帮我画个流程图" | 文字描述 → 流程图 |
| "帮我生成一份 PPT" | 给出内容，输出完整 PPT |
| "检查一下无障碍有没有问题" | WCAG 审计 + 修复建议 |
