## 规矩即出品：当"设计治理"成为前端技能的最大装机品类 2026年6月的 Claude Code 前端设计技能生态，已经悄然完成一次分野。聚光灯长期打在"创意品味层"——Taste Skill、Impeccable、官方 frontend-design——它们教模型如何摆脱"AI 腔"、做出大胆配色与不对称版式。但如果翻开 skills.sh 的装机遥测榜，真正统治榜单的是另一群很少被讨论的技能：`react-best-practices`（14.89万装机）、`web-design-guidelines`（11.27万）、`composition-patterns`（4.84万）。它们不生产美，它们生产**规矩**——把无障碍、组件架构、令牌一致性、视觉层级、可用性启发式，变成模型在每次生成时必须遵守的工程约束。本期评测聚焦这条被低估却装机量最高的"设计治理层"，对七款约束类引擎做七维实测，看谁能让 Claude Code 的前端输出从"看起来对"升级到"工程上经得起审查"。 ## 一、评测维度与权重 本期沿用五维加权模型，但评分标尺对齐"约束/治理"语义而非"创意/品味"：功能完整度看规则库覆盖面与可执行性，上手难度看是否需要团队既有设计系统做底座，变现潜力看能否沉淀为企业级合规与审查 SaaS，训练营适用性看能否作为系统化教学骨架，社区活跃度看 Star 与更新频率。 | # | 引擎 | 来源 | 功能完整度(25%) | 上手难度(20%) | 变现潜力(25%) | 训练营(15%) | 社区(15%) | 加权 | |---|------|------|:---:|:---:|:---:|:---:|:---:|:---:| | 1 | web-design-guidelines | Vercel Labs | ★★★★★ | ★★★★★ | ★★★ | ★★★★ | ★★★★★ | 4.45 | | 2 | composition-patterns | Vercel Labs | ★★★★ | ★★★★ | ★★★ | ★★★★★ | ★★★★★ | 4.10 | | 3 | platform-design-skills | ehmo | ★★★★★ | ★★★ | ★★★★ | ★★★★ | ★★★ | 3.95 | | 4 | UI/UX Pro Max (Master+Overrides) | nextlevelbuilder | ★★★★★ | ★★★ | ★★★★★ | ★★★★★ | ★★★★★ | 4.40 | | 5 | interface-design | Dammyjay93 | ★★★★ | ★★★★ | ★★★★ | ★★★★ | ★★★ | 3.80 | | 6 | Refactoring UI | LovroPodobnik | ★★★ | ★★★★★ | ★★★★ | ★★★★★ | ★★ | 3.55 | | 7 | UX Heuristics | wondelai | ★★★★ | ★★★★★ | ★★★ | ★★★★★ | ★★★★ | 3.85 | ## 二、逐个深度评测 ### 1. web-design-guidelines — 把"专业清单"编译进每次生成 - **来源**：Vercel Labs `vercel-labs/agent-skills`（仓库 2.77 万 Star） - **装机**：11.27 万次（skills.sh 遥测，前端榜第二，仅次于 react-best-practices） - **安装**：`npx skills add vercel-labs/agent-skills/web-design-guidelines` 它不规定"做成什么风格"，只规定"任何风格都必须满足什么标准"——排版尺度、间距系统、配色比例、响应式断点、可触达触控目标、对比度下限，本质是一份随模型实时跑的质量清单（quality checklist）。与官方 `frontend-design` 形成"创意 + 守门"的黄金组合：前者决定大胆与否，后者保证"不仅在我这块屏幕上好看"。评测中它能稳定拦截三类高频翻车——低于 44px 的移动端点击区、未声明 focus 样式、断点处溢出滚动。**变现**：天然适配"接入 CI 的可访问性门禁"，可包装成持续部署前的合规闸（compliance gate），定价空间在企业 ATS/合规工具区间。**训练营**：适合做"前端质量底线"模块的 2-3 课时骨架。**竞品**：与 `platform-design-skills` 同属清单派，前者偏通用 Web，后者偏原生平台规范，二者互补不互斥。 ### 2. composition-patterns — 终结"布尔属性地狱" - **来源**：Vercel Labs（同上仓库） - **装机**：4.84 万次（前端榜第五） - **安装**：`npx skills add vercel-labs/agent-skills/composition-patterns` 它解决的是组件库随规模膨胀必然爆发的顽疾——`isLarge`、`isDisabled`、`showIcon`、`hasBorder` 这类布尔属性（boolean-prop proliferation）。没有它时，Claude 倾向于堆叠开关；有了它，输出转向复合组件（compound components）、render props、Context 组合与 slot API，真正可扩展。**变现**：可作为"设计系统代码体检"产品的规则引擎，扫描既有组件库输出重构建议。**训练营**：是七款里最适合做"前端架构"教学的——复合组件、Headless UI、状态提升都能借此讲透，5-8 课时。**竞品**：与同门的 `react-best-practices`（14.89万装机）是"地基 vs 进阶"关系，前者管 hook/性能惯例，后者管架构可扩展性，推荐叠加使用。 ### 3. platform-design-skills — 300+条平台规范的强制执行器 - **来源**：ehmo（社区） - **规则量**：300+条，取自 Apple HIG、Material Design 3、WCAG 2.2 它不替你做创意决策，只强制执行标准——触控目标尺寸、对比比、字号阶梯、间距系统、无障碍要求。当项目要同时满足 iOS/Android/Web 三端合规时，它是少数能把"平台规范"从文档落成代码约束的引擎。**功能**最厚实的一档，但**上手**要求团队先确定目标平台组合，规则越细，前置配置成本越高。**变现**：直接对标"App Store / Play Store 提审前合规预检"服务，对独立开发者与小工作室是强刚需，可做按次或按应用的 SaaS。**训练营**：适合跨平台规范的对比教学。**竞品**：`iOS HIG Design`（rshankras，395 Star）是其单平台特化版，全平台选 platform-design-skills，纯 iOS 选后者。 ### 4. UI/UX Pro Max 的 Master+Overrides — 设计系统持久化的范式之争 - **来源**：nextlevelbuilder `ui-ux-pro-max-skill`（8.87 万 Star，社区设计技能 Star 之王；装机 3.16 万） - **版本**：v2.5.0（2026年5月） - **安装**：`/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill` 本期评测的不是它的"50+ 风格、161 套配色、57 套字体、12 技术栈"创意面，而是它 v2.5.0 引入的 **Design System Persistence**——Master + Overrides（主版 + 覆盖）模式：先由推理引擎按行业生成主设计系统，后续组件在主版之上做受控偏移，而非每次重新发明。这把"设计令牌一致性"从口号变成可执行的治理结构。**变现**：是七款里商业化天花板最高的，可演化为"企业设计系统即服务"——按组织订阅，托管其 Master 并生成各产品线的 Overrides。**训练营**：设计系统课程的核心教具，"主版与覆盖"这一范式本身值得 6-10 课时拆解。**竞品**：与 `interface-design` 都做持久化，但 Pro Max 用行业推理自动初始化 Master，interface-design 从零声明——前者适合快速成型，后者适合有强约定的团队。 ### 5. interface-design — 跨会话的设计记忆 - **来源**：Dammyjay93 `interface-design`（5000 Star） - **安装**：`/plugin marketplace add Dammyjay93/interface-design` 它解决了别人都忽视的问题——**跨会话一致性**。长项目里模型会"风格漂移"：上一会话的按钮圆角，下一会话就变了。它把设计决策写入 `.interface-design/system.md` 持久化文件，并预设"Precision Density""Warmth Approachability"等设计方向，强制模型在每个组件前显式声明其设计选择。**上手**友好，声明式而非推理式。**变现**：可做成"Figma ↔ 代码"双写的 system.md 中枢插件，对追求设计-开发对齐的中型团队是真实痛点。**训练营**：教"设计决策如何可追溯"的好案例。**竞品**：见上，与 Pro Max 的 Master+Overrides 是同一赛道的"轻声明 vs 重推理"两条路线。 ### 6. Refactoring UI — 视觉层级的自动审计员 - **来源**：LovroPodobnik `refactoring-ui-skill`（24 Star，但底子是 Adam Wathan 与 Steve Schoger 的《Refactoring UI》方法论） - **激活**："my UI looks off" / "fix the design" / "visual hierarchy" 当你说不出"哪里不对"，它能：审计视觉层级（权重、字号、对比）、纠正间距系统不一致、优化阴影（贴合真实高度感）、校验配色是否符合和谐阶梯。它不做创意，专治"差一点点"。**功能**偏窄但精准，**上手**极低（一句话触发）。**变现**：最值得做成"线上应用设计 Linter"——像 ESLint 之于代码，对线上页面做实时的视觉合规扫描与修复建议，订阅制潜力大。**训练营**：教视觉层级与间距理论的绝佳骨架，3-5 课时。**竞品**：与下一款 UX Heuristics 都属"审计派"，但分工清晰——Refactoring UI 审"看得见的视觉"，UX Heuristics 审"用得顺的逻辑"。 ### 7. UX Heuristics — Nielsen 十条 + Krug 的可用性体检 - **来源**：wondelai `wondelai/skills`（1200 Star，同仓还含 Design Sprint、Hooked UX） - **激活**："audit this for usability" / "heuristic review" 它把 Nielsen 十条可用性启发式与 Steve Krug《别让我思考》的原则编译成自动化审计，对每个问题给出**严重度评分**（severity score）与修复优先级，并解释"为什么坏了、怎么修"。它产出的不是界面，是一份带优先级的可用性报告——这恰好是企业最愿意付费购买的交付物。**变现**：可直接包装为"上线前可用性审计报告"按份售卖，对没有专职 UX 团队的中小企业是即买即用的合规背书。**训练营**：可用性工程课程的现成教学引擎，十条启发式逐条演示。**竞品**：同仓的 Hooked UX（用 Nir Eyal 上瘾模型查留存断点）是其姊妹篇，二者覆盖"能用 vs 留得住"两个面。 ## 三、生态分类思维导图 治理层的存在，让整个前端设计技能生态形成三层结构。理解这三层的分工，比记住任何单个技能更重要——创意层决定"敢不敢"，治理层决定"对不对"，还原层决定"像不像"。 ```mermaid mindmap root((前端设计技能生态)) 创意品味层 决定敢不敢 品味可调 Taste Skill 37.4k Star Impeccable 35.8k Star 出图视觉 Canvas Design Algorithmic Art 治理约束层 决定对不对 质量清单 web-design-guidelines 112.7k装机 react-best-practices 148.9k装机 组件架构 composition-patterns shadcn-ui 平台规范 platform-design-skills 300+规则 iOS HIG Design 令牌持久化 UI/UX Pro Max Master+Overrides interface-design system.md 审计评测 Refactoring UI 视觉 UX Heuristics 可用性 设计还原层 决定像不像 figma-implement-design stitch-loop 迭代 ``` ## 四、分维度推荐排行榜 **装机量榜（治理层已全面压制创意层）** 1. react-best-practices — 14.89万 2. web-design-guidelines — 11.27万 3. frontend-design — 8.27万 4. composition-patterns — 4.84万 5. react-native-skills — 3.43万 **治理深度榜（规则库厚度与可执行性）** 1. platform-design-skills（300+条平台规范，三端覆盖） 2. UI/UX Pro Max（Master+Overrides，行业推理初始化） 3. UX Heuristics（Nielsen 十条 + 严重度评分） **变现潜力榜（离付费产品最近）** 1. UI/UX Pro Max → 企业设计系统即服务（订阅制天花板最高） 2. Refactoring UI → 线上设计 Linter SaaS（按站点扫描计费） 3. interface-design → Figma/代码双写 system.md 中枢（团队订阅） 4. platform-design-skills → 应用商店提审合规预检（按次） **训练营适用榜（可直接当教学骨架）** 1. UX Heuristics（可用性工程课程现成教具） 2. composition-patterns（前端架构教学最佳） 3. Refactoring UI（视觉层级与间距理论） 4. UI/UX Pro Max（设计系统课程核心） **最佳组合（按团队类型）** - 独立开发者 / 1人项目：`frontend-design` + `web-design-guidelines`（创意 + 守门，最低摩擦） - 组件库 / 设计系统团队：`react-best-practices` + `composition-patterns` + `UI/UX Pro Max` - 移动应用团队：`react-native-skills` + `expo-app-design` + `platform-design-skills` - 上线前必经：`Refactoring UI` + `UX Heuristics`（视觉 + 可用性双审计） ## 五、结论：治理层的工程价值正在反超创意层 一个反直觉的发现：2026年6月，治理层技能的装机量已全面超过创意层。`web-design-guidelines` 的 11.27万 装机是 `frontend-design` 的 1.36 倍，是 `ui-ux-pro-max` 的 3.5 倍。原因不难理解——创意品味让输出"不丢人"，但真正决定一个 AI 生成的前端能否进入生产环境、能否通过无障碍合规、能否在团队中长期维护的，是治理层。Master+Overrides 与 system.md 这类令牌持久化模式，把"设计一致性"从口口相传的默契变成了可版本控制的工程资产；Refactoring UI 与 UX Heuristics 这类审计引擎，则把高级设计师的"眼力"产品化成了人人可调的服务。 落地建议：先用 `web-design-guidelines` + `composition-patterns` 建立质量底线，再用 `UI/UX Pro Max` 或 `interface-design` 落地令牌治理，最后在关键节点接入 `Refactoring UI` 与 `UX Heuristics` 做上线前双审计。需要提醒的是，据 Snyk 的 ToxicSkills 研究，所测技能中 36% 含提示注入、生态中检出 1467 个恶意载荷——治理类技能因规则库庞大尤需在安装前审阅 SKILL.md 源文件。规矩本身，也需要先被验证是否干净。 ## 参考来源 1. [The 18 Best Claude Code Skills for UI/UX Design: Complete Guide](https://pasqualepillitteri.it/en/news/576/claude-code-skills-design-uiux-guide) — 2026年5月24日更新，含 Star 数、v2.5.0 Master+Overrides、Taste/Impeccable 详析与 Snyk ToxicSkills 安全数据 2. [Best Claude Skills for Frontend Development: React, Next.js & Tailwind (2026)](https://agenticskills.io/learn/best-frontend-skills) — 基于 skills.sh 遥测的 Top 15 前端技能装机量排名（2026年6月8日） 3. [Frontend Design Plugin | Claude by Anthropic](https://claude.com/plugins/frontend-design) — 官方 frontend-design 插件页，反"AI slop"与禁用 Inter/Roboto 等字体规则 4. [GitHub - alirezarezvani/claude-skills](https://github.com/alirezarezvani/claude-skills) — 345+ 生产就绪 Claude Code 技能与插件聚合仓库 5. [Best Claude Code Skills & Plugins (2026 Guide) - DEV Community](https://dev.to/raxxostudios/best-claude-code-skills-plugins-2026-guide-4ak4) — 2026 社区技能策展指南，含前端分类与跨平台兼容性说明 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。