如何用Designer Skills 3分钟零代码起步新手快速安装教程【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skillsDesigner Skills 是一个面向 AI Agent 时代的设计技能合集它把用户研究、设计系统、UI 设计、交互设计到交付流程的 107 个设计技能Skills和 32 条工作流命令Commands打包成 9 个插件安装进 Claude Code 或 Gemini CLI 即可直接调用。本教程面向零基础新手全程零代码、三步安装约 3 分钟就能上手。安装前 30 秒了解 Skills 和 Commands 的区别在动手之前先花 30 秒搞懂两个核心概念后面选装内容会轻松很多概念一句话理解举例Skills技能名词——教会 AI 某项设计知识如何创建用户画像、如何定义设计令牌Commands命令动词——把多个技能串成完整工作流/design-research:discover一键跑完画像共情图旅程图 日常使用你主要会调用命令技能在幕后默默支撑。完整说明可参考 README.md 中的 What are skills and commands? 一节。一键安装步骤只需 3 步无需终端这套技能运行在 AI 编程助手内部最简单的使用方式是Claude CodeAnthropic 出品的免费应用。第 1 步获取 Claude Code从 Anthropic 官网claude.com下载安装登录并打开即可。这一步只需做一次。第 2 步告诉 AI 技能库在哪里在 Claude Code 中输入下面这一行按回车/plugin marketplace add Owl-Listener/designer-skills它只是告诉 Claude 技能库的位置此时还没有安装任何东西。第 3 步挑选你要的插件输入/plugin回车打开Discover标签页就能看到所有合集。用方向键移动按空格勾选想要的插件回车确认安装——完成✅新手推荐安装清单先装这 4 个就够用了不想全选官方给出了覆盖完整设计周期的推荐组合安装这 4 个插件即可/plugin install design-researchdesigner-skills /plugin install ux-strategydesigner-skills /plugin install ui-designdesigner-skills /plugin install design-opsdesigner-skills各插件职责一览design-research12 技能 / 4 命令用户画像、共情地图、旅程地图、访谈、可用性测试——详见 design-research/README.mdux-strategy12 技能 / 3 命令竞品分析、体验地图、信息架构、内容策略ui-design19 技能 / 5 命令布局网格、色彩系统、字体排印、响应式设计——详见 ui-design/README.md⚙️design-ops9 技能 / 3 命令设计评审、交付文档、Sprint 规划插件非常轻量多装不会拖慢速度之后想补装随时回来加即可。装完后第一步跑一个命令试试手从零做新产品直接输入/design-research:discover告诉 AI 你要做什么产品、认为用户是谁、要解决什么问题它会跑完一整轮发现流程用户画像 → 共情地图 → 旅程地图并指出你假设中的盲区。在维护现有产品输入/visual-critique:critique-screen丢一张截图进去它会从视觉层级、品牌一致性、排版等 7 个维度输出一份优先级排序的修改清单。更多场景的该用哪个命令速查表见 README.md 的 Pick your starting point 章节。插件之间的自然顺序研究 → 策略 → 设计 → 交付9 个插件并非严格流水线但有一条自然的纹理design-research → ux-strategy → ui-design / interaction-design → design-systems → design-ops研究支撑策略策略塑造 UI 决策UI 中的重复模式沉淀为系统组件系统最终流入交付。如果你感觉某个环节特别费劲往往是因为跳过了前面的一步。常见问题Q我只想要设计技能不想装其他的同样走三步流程第 3 步的 Discover 列表里只勾选设计相关的插件design-research、design-systems、ui-design、interaction-design 等其余留空即可。Q我用的是 Gemini CLI 怎么办每个插件也同时是 Gemini CLI 扩展可以从项目根目录复制扩展文件到.gemini/extensions/下具体步骤见 README.md 中 Prefer Gemini CLI? 一节。Q想看看某个技能内部是怎么写的每个技能都是一个结构清晰的 Markdown 文件例如 form-design/SKILL.md 就完整教 AI 如何设计低摩擦表单。写作规范可参考 SKILL_TEMPLATE.md更新记录见 CHANGELOG.md。写在最后Designer Skills 的初衷是把设计师的判断力写下来——什么东西是干什么用的、什么时候用、什么永远不能做让 AI Agent 也能像资深设计师一样思考。现在你只需要记住三步装 Claude Code → 加市场 → 勾选插件3 分钟就能拥有一支随叫随到的设计团队。【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考