先说清楚：Skill 到底能替设计师干什么
很多人第一次听说 Agent Skill，会把它理解成"更长的一段提示词"。这个理解不算错，但低估了它的价值。Skill 的真正作用是把你每次都要重复交代的那套标准，写成一份模型每次都会自动读到的说明书。你不用每次都在对话开头写"别给我套模板、字体只用两个家族、间距按 8 的倍数来"，这些话写进 Skill 一次，之后每次开工它都在场。
它和 MCP 的分工也值得先分清：MCP 解决"模型能不能连上你的 Figma、你的图标库、你的浏览器"，Skill 解决"连上之后按什么标准干活"。两者的架构差别我们在MCP 与 Agent Skill 有何不同里拆过，这里不重复。
需要说明一下这 5 个是怎么挑出来的。我们把站内设计向的 Skill 候选过了一遍，逐个打开上游仓库里的 SKILL.md 原文读完，只留下"真的写了可执行标准"的那些——很多名字叫 design 的 Skill，正文其实只有十几行"请注意美观"这类空话。另外四个维度也顺手查了：仓库是否真实存在、最近是否还在更新、有没有配套的本地资料、以及能不能给出评审依据而不是只给产出。
一、frontend-design：治"一眼 AI 做的"这个毛病
它是什么：Anthropic 官方 Skill 仓库 anthropics/skills 里的一个（该仓库 9 月底 17.9 万星标），专门管新界面的视觉方向和改造现有界面时的审美判断。
它的开头第一段就把模型的身份钉死了：以"一家设计工作室里那个设计负责人"的视角来做，每个客户都要拿到不会被认错成别人的视觉身份，而且明确写了"这位客户已经退回过那些俗套、模板感的方案"。这句话不是修辞，它直接改变了模型的选择分布。
最有用的几条硬约束：
- 先落地主题。如果需求里没说清这是什么产品、给谁用、要完成什么任务，它要求模型先自己提出一个具体对象、受众和主要任务，再向用户确认，然后才开始设计。行业的材料、语言、语境才是视觉选择的来源——给 8–11 岁女孩做的玩具，和给金融分析师做的仪表盘，本来就不该长一个样。
- 点名了默认套路。它直接写着："大数字 + 小标签 + 辅助数据 + 渐变强调"是模型的默认首屏处理，只有确实是最优解时才用。这是我在所有 Skill 里见过的、对"AI 味首屏"最精准的一次拦截。
- 字体只准一到两个家族，但两者必须明显区分；并且要求按字级体系设定字重、字宽和字距，把标题本身当成设计元素，而不是承载文字的透明容器。
怎么触发：装好之后不需要记指令，说"给这个页面定个视觉方向""这块看着太像模板了，重做"就会命中。
适合谁：需要做落地页、控制台首屏、品牌站的人。如果你只想要一个能跑的界面，它反而会拖慢你——它会先回来找你确认主题和受众。
详情页：frontend-design
二、theme-factory：把配色和字体配对变成可复用的资产
它是什么：同一个官方仓库里的主题工具。核心是 10 套预设主题，每套都带完整的十六进制色板、标题与正文的配对字体，以及适配的场景和受众；也可以现场生成一套新主题。
它解决的痛点非常具体：模型给你做的第二页、第三页，配色和第一页往往完全不是一套东西。这个 Skill 的做法是先定主题、再把主题套到任何已有产物上——幻灯片、文档、报表、HTML 落地页都行。
用法上的建议：把它当成"交付前的统一层"。先让模型自由发挥把结构做出来，再用一句"把整套东西套到同一个主题上"收敛，比一开始就锁死主题更容易出东西。
注意：预设主题解决的是"协调"，不解决"独特"。要辨识度，得靠前面那个 frontend-design；这两个搭配着用正好互补。
详情页：theme-factory
三、canvas-design：先写设计哲学，再画成海报
它是什么：官方仓库里做静态视觉产物的 Skill，输出 .png 和 .pdf，用于海报、艺术作品、设计稿这类一次性静态物料。
它的流程跟直觉相反：第一步不是画，是写一份"视觉哲学"——一个美学运动，包括它在空间、色彩、构图、材质上的立场；第二步才是把这套哲学表达成画布。它反复强调第一步产出的不是版式也不是模板，而是一套可以被视觉解释的东西。而且限定只输出 .md、.pdf、.png 三种文件。
它还有一条明确的版权红线：只做原创视觉设计，不复制现有艺术家的作品。这条对商业交付很关键——用它出物料时，值得把那份"设计哲学"文档一起存档，作为原创性的过程记录。
适合谁：需要出活动海报、封面、社媒配图的人。用法上要注意别只丢一句"给我做张海报"——按它自己定的两步流程，应该先把风格立场说清楚（比如"克制、大字号、只用一个强调色"），再让它把这套立场表达成画布，产出质量差别非常大。
详情页：canvas-design
四、ui-ux-pro-max：一个装在本地的设计资料库
它是什么：nextlevelbuilder/ui-ux-pro-max-skill（9 月底 13.1 万星标）里的 UI/UX 设计智能库。它和前面三个的区别很明确：前三个给判断标准，这个给可检索的数据。
按它 SKILL.md 里的自述，本地就带了 79 种可检索风格（其中 50 种启用）、192 套产品配色及其推理画像、74 组字体搭配、119 条 UX 规则、105 个精选图标、17 个 GSAP 动画预设、25 种图表类型、22 个技术栈的实现规范。这意味着"这个行业的后台一般用什么配色"这类问题，它不用猜，可以查。
它最值得表扬的一点，是写清了什么时候别用它：纯后端逻辑、API 和数据库设计、非视觉的性能工作、基础设施和运维，都直接跳过——除非这次改动会影响"看起来、摸起来、动起来、交互起来"的样子。会写拒绝边界的 Skill，通常比什么都想接的那个更可靠。
适合谁：既要出稿又要自己写一点前端的人，以及做组件库、设计系统落地的人。如果你完全不看代码，这个库里技术栈那部分你大概用不上。
详情页：ui-ux-pro-max
五、popular-web-designs：54 套真实站点的设计系统，直接借
它是什么：挂在 NousResearch/hermes-agent（9 月底 24.9 万星标）下的一个创意类 Skill，收录 54 套真实世界的设计系统——Stripe、Linear、Vercel 这些都在里面。每套记录的是完整的视觉语言：色板、字体层级、组件样式、间距体系、阴影、响应式表现，并且附带带精确 CSS 数值的提示词，不是"大概那个感觉"。
它最有价值的地方是给了模型一个具体的参照物。你说"像个专业的 SaaS 后台"，模型脑子里的分布非常模糊；你说"按 Linear 的间距和层级来"，它就有可对齐的东西了。它的触发词写得很直白："make it look like stripe""design like linear""website styled like"。
两点要提前知道：
- 这些设计系统是从 VoltAgent/awesome-design-md 整理的，属于对公开站点视觉语言的第三方归纳，不是各品牌官方发布的规范。借来对齐手感很合适，直接当成品牌资产交付给甲方就不合适了。
- 它的 SKILL.md 里自己写了配套关系：要设计流程和品味判断，配合同仓库的
claude-design；要正式的令牌规范文件，用design-md。三者是一套分工。
六、另外三个，看场景再装
- brand-guidelines（Anthropic 官方）：把 Anthropic 自己的品牌色和字体排印套到产物上。想模仿一个成熟品牌的克制风格时很好用，但产出会带上明显的 Anthropic 味，做给客户的东西别直接用。详情页：brand-guidelines
- banner-design（ui-ux-pro-max 同仓库）：专管 banner。给社媒、广告位、网站首图、印刷物料出多套美术方向，支持用生成图或你自己的素材。它按平台列了尺寸语境：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、网站 hero、印刷。详情页：banner-design
- design-consultation（
garrytan/gstack，9 月底 13.4 万星标）：偏咨询流程——先理解你的产品，再调研同类，然后提出一整套设计体系（美学、字体、色彩、布局、间距、动效），并生成字体与配色预览，最终落成一份DESIGN.md作为项目的设计事实来源；已有站点则改用它的plan-design-review反推体系。适合从零起项目。详情页：design-consultation
七、五个怎么串成一条工作流
单装一个效果有限，按下面的顺序组合才像一条流水线：
| 阶段 | 用哪个 | 你负责什么 |
|---|---|---|
| 定方向 | frontend-design | 说清产品是什么、给谁用、要完成什么任务 |
| 找参照 | popular-web-designs | 挑一到两套接近的视觉语言，别超过两套 |
| 收敛样式 | theme-factory | 定色板和字体配对，之后所有产物复用同一套 |
| 查细节 | ui-ux-pro-max | 间距、状态、图表类型、无障碍这类具体问题去库里查 |
| 出物料 | canvas-design | 先让它写风格立场，再要海报和封面 |
顺带说一句，设计稿到前端代码这一段已经不止 Skill 能帮忙，组件库自动化那条路可以看前端组件库研发智能化。
八、安装，以及一件必须提醒的事
上面每一个，站内详情页里都有可直接复制的安装命令。以 frontend-design 为例，命令形如：
npx skills add anthropics/skills@frontend-design -a cursor -y
-a 后面换成你实际用的客户端（Cursor、Claude Code 等），-y 是跳过确认。国内网络下 npx 拉依赖可能超时，先把 npm 镜像源换掉再试；找不到 npx 则是 Node 没装或没进 PATH。
至于要提醒的那件事：Skill 会放大你的标准，也会放大你的懒惰。 它把"你本来就该提的要求"写死在说明书里，于是模型会稳定地输出一个"没毛病但也没想法"的东西——毕竟它读的是通用规则，不是你的品牌。上面这些 Skill 里真正值钱的部分，全是评审和取舍，而那部分它一点都没替你做完。
还有一个更实际的坑：Skill 是可以自己调工具、读写文件的。装第三方来源的 Skill 之前，值得先想清楚你给了它什么权限——这条在让 AI 替你办事的安全清单里写过，对 Skill 同样适用。想看更多设计向的 Skill，直接从场景目录或Skill 总入口进，选型思路可以参考这份可检索的工具目录与评测指南。
九、一句话版本
frontend-design 管方向，theme-factory 管统一，canvas-design 出物料，ui-ux-pro-max 当字典，popular-web-designs 给参照。 五个装完，你在对话里重复交代的废话至少少一半——但判断还是你的活儿。