让 Claude 真正懂美学的 Skill：aesthetic 把设计拆成 4 个阶段

你有没有这种感觉：让 Claude 帮你「做一个好看的 UI」，出来的结果永远带着点 AI 味儿——颜色配得安全、字体偏 Inter、间距均匀但没层次，最后还是得设计师手动改一遍？

最近翻海外社区，挖到一个真正在认真解决「AI 美学」这件事的 Skill——aesthetic，来自 mrgoonie 的 ClaudeKit Skills 合集（GitHub 2.2k stars）。它不靠换 prompt 撞运气，而是给 Claude 装了一套结构化的美学操作系统。

它把设计拆成了 4 个阶段

aesthetic 的核心是一个叫 BEAUTIFUL → RIGHT → SATISFYING → PEAK 的四段框架：

• BEAUTIFUL（美学）：先用 chrome-devtools 截屏，从 Dribbble、Mobbin、Behance 抓灵感，再用 ai-multimodal（Gemini）拆解配色、字体、层级，给当前作品定一个 1–10 的「美学分」。
• RIGHT（功能）：好看不够，还得对得上设计系统、WCAG 无障碍规范。它会检查你的组件库、对比度、键盘导航。
• SATISFYING（微交互）：动画时长 150–300ms，缓动用 ease-out / ease-in / spring 这套经典曲线。卡片 hover、按钮按下、模态弹出，都有明确的节奏模板。
• PEAK（叙事）：视差、粒子、渐进展开——但作者在文档里反复强调「Too much of anything isn’t good」，克制才是高级感。

真正亮眼的是「循环打分」

最有意思的玩法是 Workflow 2：让 Claude 用 ai-multimodal 生成一张设计稿 → 自己给这张图打分（1–10）→ 如果低于 7 分，自动识别弱点（颜色、字体、层级、间距）→ 改 prompt → 再生成。整个过程全自动跑几轮，直到达到专业标准才停下来。

这等于让 AI 有了「设计师的眼睛」——它不再是一次性吐图，而是一个会自我迭代的审美机器。

配套资源也很扎实

Skill 里塞了 5 个 reference 文档：设计原则、微交互、叙事设计、配色心理学，以及一份现成的「Design Guideline + Story」模板。装上以后直接：

/plugin marketplace add mrgoonie/claudekit-skills
/plugin install ai-ml-tools@claudekit-skills

谁该用？

做产品前端、独立开发做落地页、设计师想搭 AI 工作流的，都值得装一个。它最香的地方是把「审美」从 prompt 的玄学变成了有据可查、有分可打、有模板可套的工程化流程。

📦 GitHub: https://github.com/mrgoonie/claudekit-skills

（具体 aesthetic skill 路径在 .claude/skills/aesthetic，作者 mrgoonie 是 ClaudeKit.cc 创始人，这个仓库合集还有 ai-multimodal、chrome-devtools、frontend-design 等十几个实战向 skill，可以一并装。）

GitHub: https://github.com/mrgoonie/claudekit-skills/tree/main/.claude/skills/aesthetic