awesome-claude-design

环境要求

• Claude Code 环境（命令写入 .claude/skills、.claude/plugins 或使用 /plugin 斜杠命令）
• Node.js 与 npx（用于 npx skills add、npx skillkit install）
• git（用于 git clone 方式安装插件与技能）
• design-review 工作流需额外具备 Playwright MCP

安装与启动步骤

1. 1浏览资源合集

   这是 awesome 清单仓库，主体是 DESIGN.md 提示词、混搭配方与技能索引，直接打开 GitHub 仓库按分类查阅，无需安装。

2. 2安装 taste-skill

   提供高级 UI 生成、改版审计与 GSAP 动效，含 brutalist／minimalist／soft 变体，一条 npx 即可安装。

   npx skills add Leonxlnx/taste-skill

   复制

3. 3安装 interface-design

   提供持久化设计系统记忆与 /interface-design:audit 斜杠命令，克隆到用户级插件目录。

   git clone https://github.com/Dammyjay93/interface-design ~/.claude/plugins/interface-design

   复制

4. 4安装图表技能

   用 Excalidraw 生成能表达观点的图示，带渲染校验循环，克隆到项目的 .claude/skills 下。

   git clone https://github.com/coleam00/excalidraw-diagram-skill .claude/skills/excalidraw-diagram

   复制

5. 5安装 canvas-design

   把设计理念转成海报／PDF 产物，两阶段流程，通过 skillkit 安装。

   npx skillkit install composio/canvas-design

   复制

6. 6添加 designer-skills

   在 Claude Code 内添加插件市场，获得 63 个设计技能、27 个命令与 8 个插件的整套工具集。

   /plugin marketplace add Owl-Listener/designer-skills

   复制

7. 7安装 design-review

   Patrick Ellis 的设计评审子代理，提供 /design-review 命令，需先克隆再把配置拷入项目 .claude。

   git clone https://github.com/OneRedOak/claude-code-workflows
   cp -r claude-code-workflows/design-review/.claude/* .claude/

   复制

如何确认成功

查看 ~/.claude/plugins 或项目 .claude/skills 下已出现对应文件，并在 Claude Code 会话中确认对应技能或 /design-review 等命令可被调用。

常见问题

注意事项

• README 没有给出本仓库自身的安装命令，步骤中的命令全部来自它列出的社区技能，执行前请核对对应仓库。
• 安装会写入 ~/.claude 目录，可能与你已有的插件或技能冲突，建议先备份。
• 本合集条目会随社区更新，安装前留意原文的时效与维护状态。