AI 写的界面总一个样？7 个开源设计技能来补课

用 AI 智能体写界面，十次里有九次长一个样：米色底、衬线大标题、再点缀一点陶土色。模型写代码没问题，缺的是有人告诉它，什么样的设计才有辨识度。GitHub 上有一批免费的设计技能就是干这个的。我挑了 7 个，本站都已收录。

AI 界面的视觉方向和配色字体怎么定

Frontend Design是 Anthropic 官方出的技能。它让智能体先弄清楚产品是什么、给谁用，然后再定一个有辨识度的方向。它还专门点名了生成页面常见的几个破绽：标题里只给一个词换颜色，标签全部大写，满屏都是编号。UI UX Pro Max的路子不一样。它带一个设计系统生成器，分析完你的项目需求，几秒钟就给出页面模式、风格、配色和字体搭配，里面有 192 条推理规则，还有 79 种能搜索的 UI 风格。Impeccable主要用来检查设计，帮你改元素排布和文字排版。

动效和交互细节

Emil Design Eng的作者是 Emil Kowalski，在 Vercel 和 Linear 做过设计工程。举个例子，智能体写入场动画经常用 ease-in，其实应该用 ease-out。这套技能把这种小坑一条条写成了规则。同一个仓库里还有几个技能：严格审查动画、审计整个代码库、找出该加动效的地方、修掉帧。UI Skills是个设计工程技能的注册表，在终端里跑 npx ui-skills 就能浏览和拉取，另外也提供 MCP 入口。

UI 规范审查和自动化测试

Web Design Guidelines来自 Vercel。每次审查前它会先拉一份最新的 Web Interface Guidelines，然后逐条查无障碍、表单和焦点状态，问题按 file:line 格式报出来。Webapp Testing也是 Anthropic 的技能，用 Python 版 Playwright 写测试脚本。它会先看页面渲染出来的样子，再决定点哪里。测动态应用时，它自带的 with_server.py 可以管理服务器。

这几个设计技能怎么组合使用

开新项目时，先用 Frontend Design 或 UI UX Pro Max 定方向。页面写完，拿 Emil 的动效技能和 Web Design Guidelines 各过一遍。最后交给 Webapp Testing 实际点一遍。

这份清单是从 小樱的这条推文 来的灵感，推文里有各个技能的链接，可以对照着看。