📌 项目地址：jakubkrehel/skills | ⭐ 10,095 颗星 | 🔧 Markdown | 📜 未标注
一句话说明这个仓库是什么：作者 Jakub Krehel 把自己写过的设计工程知识整理成 13 份 Markdown 文件，给 Claude Code、Cursor 这类编码 Agent 加载。装上之后，Agent 写代码时就知道 border radius 该给多少、对比度够不够 WCAG 2.2、空状态文案该怎么写。
它解决的是“能用但难看”
AI 写功能没问题，产出界面却经常翻车：字号忽大忽小、颜色对比度不够、错误提示像系统日志、布局一换语言就崩。这不是模型不聪明，而是没人告诉它具体的设计标准。提示词里写“界面要精致”没用，Agent 需要的是可执行的数值和检查项。这个项目做的就是这件事，所以整个仓库几乎全是 Markdown：每个技能就是一份设计规范，Agent 按需读取。
13 个技能，两类用法
一类是持续性技能，编码时自动生效，共 7 个，覆盖界面质量的各个维度：
- better-interface：审查一个页面、流程或整个界面，覆盖无障碍、布局、文案、排版、颜色和 UI 细节，最后输出一份按优先级排序的报告。
- better-ui：打磨表面、图标和动效，给出 border radius、光学对齐、阴影、图标状态和动画的具体数值。
- better-typography：管文字渲染，从字号比例、间距到字体特性、换行、截断和标点。
- better-colors：生成色板、命名语义 token、转换颜色格式、测量对比度。
- better-accessibility：对照 WCAG 2.2 检查并修复键盘焦点、ARIA、可访问名称、表单、读屏播报、动效和缩放。
- better-layout：定分组、对齐、阅读顺序和响应式结构，还会为翻译文本和镜像（RTL）布局留空间。
- better-writing：写和审查界面文案，包括标签、错误信息、空状态、确认提示，让文案符合产品语气，并告诉用户下一步做什么。
另一类是按需调用的工具型技能，你说一声才动：
- interface-review：审查一个分支、PR 或未提交的改动，找出这次改动引入或弄退化的界面问题。做 code review 时特别实用。
- explain-interface：给它一个线上 URL 或截图，它解释这个网站、视觉效果或动画是怎么实现的。逆向学习别人实现的好工具。
- break：把你选中的组件放到一个临时页面上，按它能达到的每一种场景渲染出来，做压力测试。边界情况一目了然。
- build-design：从 Figma 文件或设计图构建 UI，要求还原设计，并复用项目里已有的 token 和组件，不另起炉灶。
- state-machine：把一个组件的所有状态渲染到一次性页面上，方便你检查每种状态长什么样。
- teardown：比较特别的一个，生成物体的技术插画，可以配色、调整，导出为 SVG、PNG 或 PDF。
怎么装
README 没给具体安装命令，技能托管在 skills.sh（https://skills.sh/jakubkrehel/skills），安装方式参考该站点和各编码 Agent 的技能安装文档。
我的看法
这个项目的思路和 linter、设计系统库都不一样：它不检查代码，也不提供组件，而是把设计经验写成 Agent 能直接执行的指令。相当于给 Agent 塞了一本设计手册。
内容有出处。作者长期在设计工程领域写作，有个人网站 jakub.kr，还办了一本叫 Interfaces 的设计工程杂志（interfaces.dev）。这些技能是他文章里方法论的落地，不是“界面要美观大方”这种空话。10095 个星也说明需求真实存在。
适合谁：已经在用编码 Agent、又在意界面质量的开发者。如果你主要手写代码、不用 Agent，对你没什么直接用处。用之前建议点开各个 SKILL.md 看一眼，确认它覆盖的内容符合你的技术栈，技能内容会随作者持续更新。