让AI写的代码不再”一眼AI”：这个MCP让coding agent拥有设计审美

用 AI 写前端，最怕什么？

代码跑通了，界面丑哭了。

现在 Claude Code / Cursor / Codex 这些 coding agent 确实能帮你把页面搭出来，但出来的清一色是”AI 风”——圆角卡片、蓝紫渐变、千篇一律的字重。甲方看了摇头，你自己看了更摇头。

今天挖到一个开源工具，叫 designer-skill，专门解决这个问题。

它是什么

designer-skill 是一个 MCP 服务器，往你的 coding agent 里一塞，就能让它理解设计、做对设计。

GitHub：https://github.com/PyModel/designer-skill

支持 Claude Code、Codex、Cursor、VS Code，以及所有兼容 MCP 的客户端。

怎么装

一行命令，不需要任何 API Key：

npx skills add PyModel/designer-skill --skill designer-skill

或者用插件模式：

/plugin marketplace add Pythoughts-labs/designer-skill
/plugin install designer-skill@pythoughts-labs

装完之后，你的 agent 就不只是”能写代码”了，而是”知道什么是好看的代码”。

核心功能

1. 听懂人话的设计意图

你说”颜色太闷了”或者”按钮不够醒目”，agent 会自动翻译成具体的设计动词——是调饱和度？改对比度？还是换字体？它会查 15 份参考资料文件，挑最合适的那份来执行。

2. 44 条规则自动拦截丑 UI

这是最狠的部分。发布前会跑一个确定性检测器，44 条规则专门抓”AI 味”——无脑用 Inter 字体、所有卡片等宽圆角、蓝紫渐变背景……只要踩中任何一条，一律拦下来不许上线。

3. Anti-Slop 检查清单

类 AI 生成的界面特征批量检测，确保产出的东西有设计感而不是流水线货色。

实际效果

团队用它做了 pythinker.com，整个站从设计到前端全程由这个 skill 驱动。有图有真相，感兴趣可以去围观一下真实生产环境的案例。

适合谁

• 经常用 Claude Code / Cursor 写前端，但苦恼 AI 输出太”糊弄”的开发者
• 设计师想把 AI coding agent 变成真正的设计搭档
• 任何想让自己项目 UI 看起来”有人设计过”而不是”AI 批量生成”的团队

npm 包地址：@pymodel/designer-skill-mcp，最新版本 0.10.0。

说到底，AI 写代码已经不稀奇了，但”AI 写出有设计感的代码”还是个稀缺能力。这个 skill 解决的就是这个问题——让 coding agent 从”能跑就行”进化到”拿得出手”。

GitHub：https://github.com/PyModel/designer-skill

GitHub: https://github.com/PyModel/designer-skill