ux-skill

我为什么做它

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

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

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

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

4.0的新内容

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

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

工作原理

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

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

数据一览

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

状态

已上线并持续维护。用pip install uxskill安装，在GitHub上阅读代码，在uxskill.laithjunaidy.com查看。这个网站就是用它做的。

常见问题

ux-skill是什么？

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

ux-skill 4.0有什么新内容？

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

ux-skill会调用AI模型吗？

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