# ux-skill

面向AI编程工具的设计智能引擎。输入一个品牌色，输出一套通过WCAG检查的设计系统。离线运行，不调用大模型，MIT许可。

https://laithjunaidy.com/zh/research/ux-skill
作者 Laith Aljunaidy. 发布于: 2026-06-04. 更新于: 2026-11-09.

- 状态: v4.0.0 Foundations，已上线，MIT
- 打开项目: https://uxskill.laithjunaidy.com

ux-skill是一个开源的设计智能引擎，可接入Claude Code和另外16种AI编程工具，让它们做出的界面不再一看就是AI做的。4.0版本代号Foundations，能从一个品牌色和一份简报生成完整的设计系统，按WCAG检查每一组颜色搭配，只写出通过检查的结果，并内置阿拉伯语和从右到左排版。它完全离线运行，从不调用大模型，以MIT许可免费提供。由Laith Aljunaidy在安曼开发和维护。

---

## 我为什么做它

AI编程工具一个下午就能做出一整个产品，可做出来的东西长得都一样。同样的紫色渐变，同样的三张卡片，同样的图库首屏，同样的字体。隔着整个房间都能认出一个AI做的页面。

我以设计为生，每天也用这些工具开发。我希望它们像设计师那样设计：从品牌和简报出发，拒绝那些一看就是机器做的模式，在上线之前检查成果。我还希望阿拉伯语和从右到左排版从第一个token起就是系统的一部分，而不是最后才打的补丁，因为大多数工具正是在这里辜负了我为之设计的那些人。

所以ux-skill不粘贴模板。它依据被当作训练数据的真实品牌规范，为眼前这份简报编译一套设计语言，再配上一个拒绝劣质设计的检查器。

![用ux-skill做的落地页：深色遮罩下的真实工地照片，首屏有杂志风格的标题和报价表单](https://laithjunaidy.com/research/ux-skill/before-after.jpg)

*同一个AI编程工具，同一条提示词。有ux-skill提供约束，页面就不再千篇一律。*

## 4.0的新内容

4.0版本代号Foundations，于2026年11月2日发布。输入一个品牌色和一份简报，输出一套完整的设计系统。

![ux-skill网站：输入一个品牌色，输出一套设计系统](https://laithjunaidy.com/research/ux-skill/cover.jpg)

- **九大基础。** 颜色、字体、间距、布局、圆角、边框、层级、动效和图像，每一项都从基础值一直覆盖到语义角色，以W3C设计令牌和CSS的形式写出。
- **每个角色五种模式。** 浅色与深色，标准对比与高对比，舒适与紧凑，从左到右与从右到左，完整动效与减弱动效。页面上的一个属性就能切换其中每一种。
- **WCAG关卡。** 每一组文字、控件和焦点的颜色搭配，都会在浅色和深色、标准对比和高对比下逐一测量。不合格的系统不会写出，提示信息会说明要改什么。
- **内置阿拉伯语。** 切换到从右到左时，文字换成阿拉伯语字体，使用它自己的字号阶梯和行高，间距改用逻辑属性，动效随之镜像。
- **读取你已有的系统。** 支持导入设计令牌、CSS、Tailwind、Markdown规则和Figma变量。它会报告缺少什么，并把补充内容放在你的文件旁边，不改写任何一个令牌。
- **带契约的组件和区块。** 23份组件契约和14份区块契约，规定每个部分在每种状态下绑定哪些令牌，以及每个区块在手机上如何呈现。
- **会运行页面的检查器。** 它在真实浏览器里以桌面和手机宽度打开页面，检查人会注意到的问题：不显示的焦点环，响应迟缓的悬停效果，无视减弱动效设置的动画。

## 工作原理

一个Python推理核心，配一个确定性的七维合成器：温度、对比、密度、几何、正式度、动效和字体性格。为它提供数据的是十二份结构化清单：风格、配色、字体搭配、组件、行业、图表、动效预设、UX法则、反模式规则、技术栈，以及160份真实品牌规范。同样的输入，每次都得到同样的输出。

它以斜杠命令、子代理和MCP服务器的形式，接入Claude Code、Cursor、Windsurf、GitHub Copilot、Gemini CLI、Codex以及另外十一种工具。完全离线运行，从不调用大模型，不收集任何数据。

![GitHub上的ux-skill](https://laithjunaidy.com/research/ux-skill/github.jpg)

## 数据一览

<table>
<tbody>
<tr><th scope="row">版本</th><td>4.0.0，Foundations，2026年11月2日</td></tr>
<tr><th scope="row">支持的AI编程工具</th><td>17</td></tr>
<tr><th scope="row">设计基础</th><td>9</td></tr>
<tr><th scope="row">反模式检查规则</th><td>171</td></tr>
<tr><th scope="row">真实品牌规范</th><td>160</td></tr>
<tr><th scope="row">MCP工具</th><td>25</td></tr>
<tr><th scope="row">斜杠命令</th><td>18</td></tr>
<tr><th scope="row">组件契约和区块契约</th><td>23和14</td></tr>
<tr><th scope="row">README语言</th><td>17</td></tr>
<tr><th scope="row">GitHub星标，2026年11月9日</th><td>95</td></tr>
<tr><th scope="row">许可</th><td>MIT，免费</td></tr>
</tbody>
</table>

## 状态

已上线并持续维护。用`pip install uxskill`安装，在[GitHub](https://github.com/Laith0003/ux-skill)上阅读代码，在[uxskill.laithjunaidy.com](https://uxskill.laithjunaidy.com)查看。这个网站就是用它做的。

## 常见问题

### ux-skill是什么？

ux-skill是一个免费、开源的设计智能引擎，面向Claude Code、Cursor和Windsurf等AI编程工具。它根据一个品牌色和一份简报生成设计系统，并检查AI做出的页面里那些让页面显得千篇一律的模式。

### ux-skill 4.0有什么新内容？

4.0版本代号Foundations，能从一个品牌色生成完整的设计系统：九大基础、每个角色五种模式、WCAG对比度关卡、内置阿拉伯语和从右到左排版、现有系统的导入工具，以及组件和区块契约。

### ux-skill会调用AI模型吗？

不会。它用确定性引擎和结构化数据完全离线运行，从不调用大模型，也不收集任何遥测数据。同样的输入永远得到同样的输出。