AI生成的页面为什么总是一个样？这个skill帮你摆脱”AI味”

为什么AI生成的页面看起来都一样？因为少了它

你有没有这种感觉——让AI帮忙写代码，做出来的页面总是似曾相识？紫色渐变、Inter字体、四平八稳的卡片布局……一眼就知道是AI写的。

这不怪AI，怪skill不够好。

creative-design：专门对付”AI设计感”的skill

这个skill是Anthropic官方frontend-design的进阶版，定位很明确——让Claude Code帮你做出有辨识度、不过度模板化的界面，而不是又一套”高级感但众雷同”的页面。

它解决的核心问题：怎么让AI的输出避免那些廉价的AI美学？

核心思路：三问法定方向

动手之前，这个skill要求你先回答三个问题：

• Purpose：这页面给谁看？要让他们感受到什么？
• Tone：调性是什么？不是”好看”，而是要在”极简克制””复古未来””有机自然””奢华精致”这类极端词里选一个。
• Differentiation：用户会记住的唯一一件事是什么？

听起来像设计师的工作流对吧？这正是它厉害的地方——把专业设计师的决策框架内置成AI可以执行的指令。

实操指南：这些雷区绝对不要踩

skill里列了一份反模式清单，很实用：

• 不许用 Inter / Roboto / Arial 这类无趣字体
• 不许用紫色渐变配白色背景
• 不许用可预测的居中对称布局
• 不许每次都给你一样的组件组合

取而代之的是：独特字配、纹理背景、不对称构图、戏剧性阴影、精心编排的动效。这些才能真正做出”记得住”的页面。

适合谁用

• 落地页、作品集、营销活动页面——需要记忆点的
• 一次性的创意页面——不要模板感
• 设计师想快速验证方向——让AI跑草图

不适合：后台系统、CRUD管理界面这类需要一致性和效率的常规开发。

怎么装

一行命令搞定：

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/creative-design

装完在Claude Code里直接说”帮我设计一个有记忆点的落地页”就能触发。

做设计不想跟别人撞脸？这个skill值得试试。

GitHub仓库地址

GitHub: https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/creative-design