[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f375itaxlisplm":3},{"code":4,"message":5,"data":6,"timestamp":42},10000,"success",{"full_name":7,"position":8,"description":9,"language":10,"stars":11,"forks":12,"stars_gained":13,"age_days":14,"hn_threads":15,"one_liner":16,"summary_md":17,"topic":18,"github_topics":21,"license":38,"homepage":39,"updated_at":40,"history":41},"plugin87\u002Fux-ui-agent-skills",3,"Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 50 objective gates that fail the build instead of faking success.","JavaScript",2979,284,945,222,[],"给编程 Agent 一套设计系统教义和 52 道可执行的检查门，让生成的 UI 在构建阶段失败，而不是交付成网页垃圾。","## 解决什么问题\n让 Agent 生成一个仪表盘，出来的是统计意义上的默认值：靛蓝到紫色渐变、四张没有主次的等高卡片、emoji 当图标、灰字配白底、删除按钮却是蓝色。提示词和仓库里都没有东西告诉它别这么写，事后也没有东西拦住它 —— 审美问题不会让构建失败。这个项目提供的是一层教义加一组客观检查门：真正渲染页面，对上面前几条逐一测量，不合格就让 CI 红掉。\n\n## 有什么不同\n同类思路基本两类：一类是组件库（拿到组件和它的主张，但胶水代码还得 Agent 自己写），一类是提示词\u002F人设文件（上手最便宜，但没人执行）。这个项目走第三条路：纯指令与知识层、无运行时，产出由真正打开浏览器的检查门验收。真正拉开差距的三点：一是检查门对着真实渲染跑 —— 每一种状态的对比度、点击目标尺寸、键盘、reduced motion、280px 下的横向溢出 —— 而不是扫源码文本；二是按意图校验 token，给「删除」标签填一个非危险色相的饱和色就判错，而且刻意不放过没有 token 的页面，因为正是这种页面最容易顺手选色；三是有 slop\u002F品味审计，能标出单一圆角、单一阴影、硬编码数值的产物。138 套设计系统和 52 个组件规范属于内容体量，应当按体量看待 —— 参考资料的广度容易宣称、难以验证。\n\n## 适合谁\n已经在用编程 Agent（Claude Code、Cursor、Codex、Copilot、Aider）、并且希望它的 UI 产出不经人工逐 diff 复审就能过无障碍检查的前端和设计系统工程师。有 WCAG 合规义务或已有公开设计系统的团队收益最大。一次性原型页面、或已经有成熟设计系统且自带强制 lint 规则的团队可以跳过 —— 你等于在一个已经跑起来的体系旁边再放一套教义。它不是 UI 库，不给你可 import 的组件。\n\n## 上手成本\nREADME 声称无构建工具、无依赖、无运行时，MIT 许可，可经 npm（`ux-ui-agent-skills`）安装。真正的成本在教义上：把 `CLAUDE.md` 和 `.claude\u002Frules\u002F` 装进项目，意味着这套工具对间距、圆角、阴影和颜色意图的主张变成了评审标准，遇到既有色板时预计要先调掉一批误报。检查门要跑浏览器，CI 会变慢变重。文档异常详尽，还主动检讨了一个曾经跳过未 token 化页面的检查门，这是成熟的信号 —— 但也提醒这套年轻的规则引擎仍有边界情况。v2.10.0 说明迭代很快，建议锁版本。\n\n## 点评\n这是一个全新项目：2026-03-16 创建，一周前还不到 300 star，本周周榜 +896、第 3 名，所以现在的关注是尖峰，还不是成熟用户群。设计上前后自洽，用测试钉住检查门、让子 Agent 盲跑评测的自我审计姿态，比多数 Agent skill 仓库诚实。风险也是这类指令层项目的通病：规则的好坏取决于下一个模型愿不愿意遵守，真正撑住底线的是检查门本身。如果你在意 Agent 写出来的 UI 的无障碍质量，值得在一个仓库里试用；在你自己跑出的检查门全绿之前，别急着推到整个团队。",{"slug":19,"name":20},"developer-tools","开发工具",[22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"accessibility","ai-agents","claude","claude-code","claude-skills","component-library","design-system","design-to-code","design-tokens","dtcg","figma","react","tailwindcss","ui","ux","wcag","MIT","https:\u002F\u002Fplugin87.github.io\u002Fux-ui-agent-skills\u002F","2026-10-24T19:36:08Z",[],1792887570]