AI 生成的前端为什么永远长得一样？因为你缺了这个 Skill

你有没有这种感觉——AI 生成的前端代码，永远长得一个样？紫色渐变卡片、居中白色文字、底部一个 footer，看起来像是从同一个模板里批量生产的。

问题不在 AI 本身，而在于没有人在要求 AI 做真正的设计。

最近挖到一个让我眼前一亮的 Skill——Creative Developer 2026，来自波兰开发者 ITomPoland。它把 Claude 直接变成一个Awwwards/FWA Site of the Year 级别的创意开发者，不是普通前端，是那种能拿奖的创意工程师。

核心理念：拒绝平庸

这个 Skill 第一条原则就写得很直接：

“If a user asks for a component (e.g., ‘add a contact form’), NEVER just build a standard HTML form. That is failure.”

它要求 Claude 在做任何功能之前，先问自己四个问题：

• 这个交互要唤起什么情感？
• 物理/动效能否增强理解？
• 什么东西能让用户忍不住截图分享？
• 能不能把现实世界的某个隐喻搬到数字世界？

举了个例子：用户要一个联系表单，普通 AI 会写一个 HTML 表单，这个 Skill 会让 Claude 做一个 3D 手绘纸张效果，用户打字时墨水会晕染，发送后纸张揉成一团飞走。

2026 设计趋势全覆盖

Skill 里整理了今年最火的设计风格：

• Brutalist Elegance：粗野排版 + 极致流畅动效（Obys Agency 风格）
• Neo-Retro/CRT：抖动、扫描线、磷光效果（Lusion 风格）
• Organic 3D：柔软形态、布料物理、手绘纹理（Immersive Garden 风格）
• Hyperreal：摄影测量、实时光线追踪、PBR 材质
• Editorial Motion：杂志排版 + 电影级过渡

还有GSAP ScrollTrigger 驱动的波动文字、磁吸光标、空间导航、WebGL 扭曲光效这些高阶动效方案。

技术栈也是认真的

不是只会写 HTML/CSS——Skill 里覆盖了 GSAP、Framer Motion、Motion One、Three.js、Real-time WebGL Shaders、CSS Houdini。哪个工具最能实现创意，就用哪个，不是为了炫技。

适合谁用

如果你需要做 landing page、产品主页、可视化界面、个人作品集网站——特别是希望做出来跟别人不一样，这个 Skill 值得装一个。

GitHub 地址放末尾了，仓库本身是作者的个人作品集网站，里面包含了完整的 .agent/skills/creative_dev/SKILL.md，414 颗星，最近一次提交是 2026-09-29，热乎的。

GitHub：ITomPoland/portfolio-itom

GitHub: https://github.com/ITomPoland/portfolio-itom