awesome-design

精选设计技能指南

经过验证和精心整理的 AI 编码 Agent 设计技能目录。帮助你为 Logo、UI 组件、动画、演示文稿、图标和完整设计系统挑选合适的技能。

技能目录

视觉设计与 UI 系统

技能	功能	安装	来源
UI/UX Pro Max	提供 67 种 UI 风格、161 条行业规则、161 套配色方案、57 种字体搭配和 25 种图表类型。最全面的 UI 系统。	git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill ~/.claude/skills/ui-ux-pro-max	GitHub
Taste	基于指标规则的资深 UI/UX 工程设计。提供 7 种变体：core taste、soft（高级）、minimalist（编辑风）、brutalist、stitch（Google Stitch）、output（防截断）和 redesign。	git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste	GitHub
Impeccable	提供 18 个设计子技能（/polish、/audit、/typeset、/overdrive、/colorize、/layout 等）。可检测反模式。CLI 扫描器包含 24 项设计质量检查。	git clone https://github.com/pbakaus/impeccable ~/.claude/skills/impeccable	GitHub
Design & Refine	在 /__design_lab 生成多个不同的 UI 变体并排对比。支持 Figma 风格的评论。适用于 Next.js、Vite、Remix、Astro。	git clone https://github.com/0xdesign/design-plugin ~/.claude/skills/design-plugin	GitHub
Interface Design	融合工艺、记忆和规范执行的设计工程。提供 6 种设计方向（精准、温暖、精致等），帮助在不同项目中保持 UI 一致。	git clone https://github.com/Dammyjay93/interface-design ~/.claude/skills/interface-design	GitHub

组件与图标

技能	功能	安装	来源
Shadcnblocks	精通 1,338 个区块和 1,189 个 shadcn/ui 组件。支持智能选择和组合组件。	git clone https://github.com/masonjames/Shadcnblocks-Skill ~/.claude/skills/shadcnblocks	GitHub
Better Icons	可从 150 多个图标集合（Lucide、Material、Heroicons、Tabler）中搜索 200,000 多个图标。自动学习你偏好的图标集。支持导出 React/Vue/Svelte/SVG。	git clone https://github.com/better-auth/better-icons ~/.claude/skills/better-icons	GitHub

SVG 与 Logo 设计

技能	功能	安装	来源
SVG Design	全面的 SVG 创建与编辑。涵盖 Logo、图标、路径命令、渐变、蒙版、滤镜、CSS 动画、优化／精灵图、无障碍功能和布尔运算。包含 8 个参考文件。	git clone https://github.com/tryopendata/skills ~/.claude/skills/tryopendata-skills	GitHub
SVG Logo Designer	专业矢量 Logo，每个项目提供 3-5 个概念。支持横向、纵向、方形和纯图标布局。生成简洁、语义清晰的 SVG。	git clone https://github.com/rknall/claude-skills ~/.claude/skills/rknall-claude-skills	GitHub
Algorithmic Art	使用带种子的随机性、流场和粒子系统，通过 p5.js 创作生成式艺术。90% 为算法，10% 为参数。	属于 Anthropic Skills 的一部分	GitHub

SVG 工作流提示： 使用 SVG Design 来创建、编辑和优化 SVG（SVGO、精灵图、布尔运算）。使用 SVG Logo Designer 快速生成多个 Logo 概念。搭配 Anime.js v4 实现 SVG 变形和时间轴动画。需要现成的 SVG 图标而非从头创建时，使用 Better Icons。Visualise 可快速处理内嵌 SVG 图表，无需专门的 SVG 技能。

3D 与创意编程

技能	功能	安装	来源
Three.js Skills	3D 场景、几何体、材质、光照、摄像机控制和 WebXR 集成。提供完整的 Three.js API 参考。	git clone https://github.com/cloudai-x/threejs-skills ~/.claude/skills/threejs	GitHub
WebGPU Skill	使用 WebGPU 和 Three.js Shading Language（TSL）进行 GPU 计算和着色器开发。	git clone https://github.com/dgreenheck/webgpu-claude-skill ~/.claude/skills/webgpu	GitHub
Motion Canvas	使用 TypeScript 以编程方式制作矢量动画。适用于讲解视频、教程和数据可视化。	git clone https://github.com/apoorvlathey/motion-canvas-skills ~/.claude/skills/motion-canvas	GitHub

图像生成

技能	功能	安装	来源
Z-Image	使用 Alibaba 的免费 Z-Image-Turbo 模型（ModelScope API）根据文本生成图像。每天可免费调用 2,000 次。自定义尺寸为 512-2048px。支持英文和中文提示词。	git clone https://github.com/FuturizeRush/zimage-skill ~/.claude/skills/zimage	GitHub

动画与动态效果

技能	功能	安装	来源
Animate	基于 Emil Kowalski 课程的 Next.js／React 动画模式。包含 8 个可运行示例。	git clone https://github.com/delphi-ai/animate-skill ~/.claude/skills/animate	GitHub
CSS Animation	用于功能演示、Demo 和新手引导的独立 HTML／CSS 动画。无 JS 依赖（使用 Google Fonts）。	git clone https://github.com/neonwatty/css-animation-skill ~/.claude/skills/css-animation	GitHub
Anime.js v4	Anime.js v4 动画模式，附带 API 参考和示例。支持时间轴排序、错开效果和 SVG 变形。	git clone https://github.com/BowTiedSwan/animejs-skills ~/.claude/skills/animejs	GitHub

数据可视化

技能	功能	安装	来源
Visualise	内嵌交互式视觉内容：SVG 图表、HTML 小组件、Chart.js 图表、说明内容。渐进式加载。无依赖项。	git clone https://github.com/bentossell/visualise ~/.claude/skills/visualise	GitHub

演示文稿与文档

技能	功能	安装	来源
PPTX	完整的 PowerPoint 工具包：读取、编辑、创建 .pptx 文件。缩略图网格、XML 访问、PDF 转换。	属于 Anthropic Skills 的一部分。依赖项：pip install "markitdown[pptx]" Pillow + npm install -g pptxgenjs	GitHub

主题与品牌设计

技能	功能	安装	来源
Theme Factory	预设 10 种主题，包含颜色和字体。可应用于任何作品。	属于 Anthropic Skills 的一部分	GitHub
Brand Guidelines	应用 Anthropic 的品牌颜色和字体排印。用于创建品牌指南技能的模板。	属于 Anthropic Skills 的一部分	GitHub
Canvas Design	高级字体排印，包含 80 多种字体、色彩协调和文本渲染效果。	属于 Anthropic Skills 的一部分	GitHub
Web Artifacts Builder	使用 React、Tailwind、shadcn/ui 构建多组件 HTML 作品。适用于 claude.ai 网页作品。	属于 Anthropic Skills 的一部分	GitHub

我应该使用哪种技能？

按任务选择

任务	推荐技能	原因
“设计一个落地页”	UI/UX Pro Max + Taste（柔和风格）	Pro Max 提供结构，Taste 带来高级质感
“制作一个徽标”	SVG Design 或 SVG Logo Designer	SVG Design 提供全面控制（路径编辑、优化）；Logo Designer 可快速生成 3–5 个概念
“添加动画”	Animate（React/Next.js）、CSS Animation（原生）或 Anime.js（时间轴/SVG）	根据框架和复杂度选择
“查找图标”	Better Icons	超过 20 万个图标，可自动学习偏好
“构建组件库”	Shadcnblocks + Impeccable	Shadcnblocks 用于组件，Impeccable 用于质量检查
“创建演示文稿”	PPTX	完整支持 PowerPoint 读取/写入/创建
“重新设计我的应用”	Taste（重新设计变体）	在不破坏功能的情况下进行审查和升级
“制作图表/示意图”	Visualise	内嵌交互式图表和示意图
“设计评审/审计”	Impeccable	24 项设计质量检查 + /audit 命令
“应用主题”	Theme Factory	10 种预制主题，可即时应用
“创建/编辑 SVG 图标”	SVG Design	路径命令、图标网格、像素对齐、精灵图
“优化 SVG”	SVG Design	SVGO 配置、精灵图、缩减文件大小
“为 SVG 元素添加动画”	SVG Design（CSS）或 Anime.js（JS）	SVG Design 适用于 CSS 关键帧；Anime.js 适用于时间轴/变形动画
“构建图标系统”	SVG Design + Better Icons	SVG Design 用于自定义图标；Better Icons 提供 20 多万个现有图标
“生成数据艺术”	Algorithmic Art	使用 p5.js 和带种子的随机数生成艺术
“构建 3D 场景”	Three.js Skills	完整的 Three.js API + WebXR
“创建动画说明视频”	Motion Canvas	TypeScript 矢量动画
“生成图像”	Z-Image	免费，每天可调用 2,000 次，无需 OpenAI 密钥
“比较 UI 方案”	Design & Refine	并排展示不同方案并支持评论

按框架分类

框架	最佳技能
Next.js / React	Taste、Animate、Shadcnblocks、Design & Refine
Tailwind CSS	UI/UX Pro Max、Impeccable、Shadcnblocks
Vanilla HTML/CSS	CSS Animation、Visualise、SVG Logo Designer
Vue / Svelte	Better Icons（支持多个框架）、UI/UX Pro Max
Three.js / WebGL	Three.js Skills、WebGPU Skill
SVG / 矢量图形	SVG Design、SVG Logo Designer、Visualise
p5.js / 创意编程	Algorithmic Art
PowerPoint	PPTX

安全说明

此处列出的所有技能均已通过安全审查：

• 不包含 curl | sh 管道或混淆代码
• 不会窃取凭据（收集环境变量）
• 不会对隐藏载荷进行 base64 解码
• 不会连接原始 IP URL

安装此处未列出的技能前，请检查是否存在以下模式：

# Quick security scan
grep -rn 'curl.*|.*sh\|base64.*decode\|eval(\|exec(' /path/to/skill/ --include="*.md" --include="*.js" --include="*.ts" --include="*.py" --include="*.sh"

提示

• 每个类别先从一个技能开始。不要一次性安装所有技能。
• Taste + UI/UX Pro Max 是最受欢迎的通用 UI 工作组合。
• Impeccable 最适合设计 QA 和发现反模式。
• 标注为 “Part of Anthropic Skills” 的技能来自 Anthropic 官方合集，是最安全的选择。
• 查看技能的 GitHub 仓库，了解近期活动情况——无人维护的技能可能包含过时的模式。
• 技能发生冲突（设计理念不同时），通常以最后安装的技能规则为准。