SKILLS & AGENTS/Skill 与 Agent·CLAUDE-SKILL

ux-ui-agent-skills

plugin87/ux-ui-agent-skills

让 Claude 化身资深设计架构师，自动输出通过 48 道质检的生产级组件代码。Turn Claude into a senior design architect — production-ready components that pass 48 quality gates, all automatically.

让Claude变成高级设计架构师的技能包，搞定设计系统、无障碍和组件代码。A Claude Code plugin with 19 design skills that turn Claude into a senior design architect, using automated quality gates to build accessible, production-rea…

打开仓库Open repository 官网Homepage 上升中Rising

怎么装：Install: /plugin marketplace add plugin87/ux-ui-agent-skills

02 / 现在的位置02 / Why now

它现在处在什么位置Where it stands right now

首次发现FIRST SEEN

03 OCT 202603 OCT 2026

增长GROWTH

+0.9%+0.9%

1.5k → 1.5k stars · 3 个快照1.5k → 1.5k stars · 3 snapshots

状态STATUS

持续活跃Active

项目拥有1534个star，社区认可度高。48 automated quality gates catch design and accessibility issues before they ship

03 / 它能帮你做什么03 / What it helps you do

它能帮你做成什么What it helps you do

01
检查界面是否满足无障碍标准
02
从设计图直接生成能用的代码
03
给新旧项目用上设计规范
04
对比不同设计系统的差异
05
把一份设计稿改到符合高品质标准

01
Audit any UI against WCAG 2.2 AA/AAA with criterion-referenced findings
02
Generate production-ready component code for any toolkit from design tokens
03
Run 44 quality gates that fail the build instead of faking success
04
Sync Figma variables with DTCG tokens in both directions
05
Write accessible UI copy using a consistent voice and tone system

04 / 安装04 / Install

怎么装How to install

CLAUDE-PLUGIN

$

README 里给出的安装方式。The installation method given in the README.

NPX

$

README 里给出的安装方式。The installation method given in the README.

两种装法选一个即可 —— 上面那条给命令行用户，下面那条给写代码的用户。Pick one of the two — the first is for command-line users, the second for people writing code.

在Claude Code中运行 /plugin marketplace add plugin87/ux-ui-agent-skills 然后 /plugin install ux-ui-agent-skills@ux-ui-agent-skillsInstall as a Claude Code plugin with two commands, or try it immediately with npx ux-ui-agent-skills demo.

05 / 限制与风险05 / Limits and risk

限制与风险Limits and risk

风险不是警告，是可信度的一部分。以下结论只基于文档静态扫描，我们不会执行项目里的任何代码。Risk here is evidence, not an alarm. These findings come from static scanning of the docs; we never execute a project’s code.

限制LIMITS

需检查Needs review

01需要 API KeyREQUIRES API KEY: 未在文档中发现Not found in the docs
02需要本地环境NEEDS LOCAL RUNTIME: 未在文档中发现Not found in the docs
03需要 DockerNEEDS DOCKER: 未在文档中发现Not found in the docs
04难度DIFFICULTY: 一键安装One-click install

PROVENANCE · 这些结论的依据是什么Where these conclusions come from

来源 URLSource URL: https://github.com/plugin87/ux-ui-agent-skills
原始数据哈希Raw data hash: 6b5142ecfc023157716829592b72f7a4
解析时间Parsed at: 2026-10-05T22:15:39.982Z
最后一次验证Last verified: 2026-10-05T13:45:39.240Z
增长测量时间Growth measured: 2026-10-05T22:16:26.213Z
发现查询Discovery queries: focus:design:repo:component-library, focus:design:repo:design-agent, focus:design:repo:design-skill, focus:design:repo:design-token, focus:design:repo:design-tokens, focus:design:repo:ui-ux-ai
分类来源Category source: rules

静态扫描STATIC SCAN

01控制浏览器Controls a browserreadme

**31 of them open a real browser, so they need one installed.** Playwright is not

02控制浏览器Controls a browser.claude/skills/design-component/SKILL.md

The contrast/axe gates pass while the UI is still visibly broken: a checkbox that doesn't toggle, a dash sitting at the bottom of its box, a

扫描发现两项中等风险：部分技能需要打开真实浏览器（需安装），且某些检查门可能通过但界面仍有明显错误。未发现高风险。Some skills open a real browser and require Playwright to be installed. Also, the automated gates may pass even when the UI is visibly broken, so manual review is still recommended.

这里只做静态扫描：读 README、SKILL.md 和依赖清单，不执行代码。没有命中不代表安全。This is static scanning only: we read the README, SKILL.md and dependency list, and never execute code. No findings does not mean safe.

完整解析证据 JSONFull parse evidence JSON

{
  "agents": [
    {
      "agent": "claude-code",
      "evidence": "tree: .claude/"
    }
  ],
  "apiKey": null,
  "docker": null,
  "taxonomy": {
    "scores": {
      "design": 18,
      "ai-tools": 0,
      "dev-tools": 0,
      "indie-web": 0,
      "skill-agent": 12,
      "productivity": 0
    },
    "primary": "skill-agent",
    "secondary": "claude-skill"
  },
  "localRuntime": null,
  "skillMdTotal": 19,
  "skillMdErrors": [
    {
      "path": ".claude/skills/data-dashboard/SKILL.md",
      "error": "Nested mappings are not allowed in compact mappings at line 2, column 14:"
    }
  ],
  "treeTruncated": false,
  "categoryScores": {
    "data": 0,
    "agent": 0,
    "media": 0,
    "design": 23,
    "browser": 0,
    "devtool": 1,
    "security": 0,
    "marketing": 0,
    "productivity": 0
  },
  "classification": [
    {
      "signal": "18 SKILL.md with name + description",
      "weight": 0.95
    },
    {
      "signal": "skills/ directory with 19 markdown files",
      "weight": 0.75
    },
    {
      "signal": "README describes a Claude / Agent Skill",
      "weight": 0.7
    },
    {
      "signal": "Claude Code plugin manifest",
      "weight": 0.7
    },
    {
      "signal": "name contains 'skill'",
      "weight": 0.4
    },
    {
      "signal": "description mentions AI",
      "weight": 0.2
    }
  ],
  "scannedSources": [
    "readme",
    ".claude/skills/a11y-audit/SKILL.md",
    ".claude/skills/apply-aesthetic/SKILL.md",
    ".claude/skills/brandkit/SKILL.md",
    ".claude/skills/data-dashboard/SKILL.md",
    ".claude/skills/design-code/SKILL.md",
    ".claude/skills/design-component/SKILL.md",
    ".claude/skills/design-doctrine/SKILL.md",
    ".claude/skills/design-qa/SKILL.md",
    ".claude/skills/design-review/SKILL.md",
    ".claude/skills/design-tokens/SKILL.md",
    ".claude/skills/figma-integration/SKILL.md",
    ".claude/skills/governance/SKILL.md",
    ".claude/skills/image-to-code/SKILL.md",
    ".claude/skills/migrate-design-system/SKILL.md",
    ".claude/skills/performance/SKILL.md",
    ".claude/skills/prototype/SKILL.md",
    ".claude/skills/redesign/SKILL.md",
    ".claude/skills/token-build/SKILL.md",
    ".claude/skills/ux-writing/SKILL.md"
  ],
  "skillMdFetched": 19
}