Agent 写界面像盲人摸象，逻辑通了样子难看
让 Cursor 或 Claude Code 写个后台管理页，接口调通、状态机跑顺全靠提示词堆，一到『对齐』、『对比度过 WCAG 2.2』、『文案别用『点击这里』这种废话』，模型要么装瞎要么胡编。GitHub 上 jakubkrehel/skills 仓库 8,530 星、MIT 协议，直戳这个痛点：把排版、颜色、无障碍、布局、文案、UI 六大领域收成一套可安装的 Agent 技能，专治 coding agent『逻辑顺、界面能用就行』的毛病。
动手前：编辑器就位，评审范围先划清
别急着敲命令。先确认两件事：你要用的编辑器或 Agent 能装技能，工作区状态干净。按 better-interface 的文档，评审开始要先把范围说清楚——审的是哪个页面、哪条流程、哪个功能，范围太大到审不 credible 时就收窄到一条完整流程，并把排除了什么写明白；没审过的面不许说成审过。
两条命令把界面技能包塞进编辑器
skills CLI 路线：在终端跑 npx skills add jakubkrehel/skills，可单装某个技能，也可一次装全套；better-interface 负责协调其余六个技能，想做整体评审就装全套。
Claude Code 插件路线：依次跑 /plugin marketplace add jakubkrehel/skills 与 /plugin install interfaces@interfaces，装完就能用 /interfaces:better-interface 这类带命名空间的指令。
/better-interface：一句话启动六个领域的合议评审
敲 /better-interface，默认就是 full 模式，传 quick 则出精简版。评审按固定顺序走六个领域：better-accessibility（对标 WCAG 2.2）、better-layout、better-writing、better-typography、better-colors、better-ui，各领域先出自己的结论，再由 better-interface 合并成一张按用户影响排过序的表。
报告格式死板但极好用：每条发现必须给文件路径加行号证据，同一个根因只算一条发现、把所有位置列在一起，最多 15 条，默认只评审不改代码。文档里列出的触发项一见就是 HIGH：交互控件没有无障碍名称、键盘可达的控件没有可见焦点环、正文或控件文字的对比度不达标、含义只靠颜色传达、破坏性操作没有确认或撤销。
interface-review 才是大招：专审 PR、未提交改动、指定分支
别只盯着 /better-interface，手动调用的 interface-review 才是团队协作核心：它专门审分支、PR 或未提交改动这类“变化”，而且只对“新引入”和“回归”两类发现下结论——一处改动如果只有历史遗留问题，结论就是通过。评审交回后，再按上面同一套规则合并、排序、给证据。
还有 explain-interface 让 Agent 用大白话讲清楚某段 JSX 为什么触发 better-accessibility，break、build-design、teardown、state-machine、variant 则是给设计系统团队备的：拆组件、出状态图、生成变体文档，属于『有空再折腾』的高阶玩法。
翻车现场：默认只评审不改代码，这是设计不是 bug；某个领域技能没加载时，那个领域要标“未评审”而不是硬凑结论；跑不成的检查要标“未验证”，不能算成发现；觉得报告太长时先砍重复根因，别为了凑数把一条发现拆成多条。
别拿它对标 Hallmark v2：技能包 ≠ 主题包
本站 2026-10-25 发的 Hallmark v2 篇讲的是『给页面套设计主题 + 真浏览器质检』。jakubkrehel/skills 走的是另一条路：以评审与证据为核心，读代码、读设计 Token、读无障碍规则出结论，默认不改代码。一个是『套主题、跑浏览器验效果』，一个是『写代码时就拦住坏味道』，互补不互斥，别搞混了。
