AI 做 Awwwards 级网页？这个 Skill 让设计不再「撞衫」

刷到一个作品集网页，满屏都是渐变紫+玻璃拟态+3D 粒子球——你是不是立刻想关掉？

AI 生成网页最大的问题，不是做不出来，是「太像 AI 做的」。千篇一律的 Hero + 3 张卡片 + 底部 Footer，设计师看了会沉默，甲方看了会流泪。

今天挖到一个专门治这个毛病的 Skill——frontend-creative。

🎨 它是干嘛的

一个 Awwwards 级创意网页 UI 生成 Skill。触发词很明确：landing page、portfolio、brand site、想要冲击感的页面。它会让你先出概念、定风格，再动手做代码。

最关键的是——它有审美底线。不是让 AI 随便生成一堆界面，而是强制执行一套设计规范，确保输出不落俗套。

🚫 明确拒绝这些

• 蓝紫渐变 SaaS 模板
• 满屏玻璃拟态
• 3 张一模一样的圆角卡片
• 自动播放的背景视频（带声音）
• 通用粒子球 3D 效果
• 滚动时处处做视差（视差疲劳）

说实话，看到这个拒绝清单我都惊了——这不是把市面上 90% 的 AI 网页工具都 Ban 了吗？但这恰恰是它值钱的地方：把「不做什么」写进规则，比写「做什么」更重要。

⚙️ 技术栈

输出质量有保障，固定技术栈：Next.js + TypeScript + Tailwind CSS + Framer Motion（微动效）+ GSAP + ScrollTrigger（场景动效）+ React Three Fiber（3D）+ Vercel 部署。

性能也是约束条件——要求 Lazy-load 3D、GPU 加速、Lighthouse 移动端 90+，不是「做出炫酷效果再说」。

📐 设计流程

严格分三轮迭代：

1. Macro Design：先出大布局、主题、动效策略
2. Local Refinement：细节打磨，做抗漂移检查
3. Visual Regression + Awwwards 自审：预设检查清单过一遍再交付

设计稿通过后，直接移交 $ai-engineering-harness 接管工程实现，设计和开发无缝衔接。

💡 适合谁

如果你需要：

• 个人/作品集网页，想一眼惊艳
• 品牌官网，不想套模板
• 活动 landing page，需要强视觉冲击力
• 想给 AI 设计工具立规矩，让它不再「糊弄」

这个 Skill 值得试试。

GitHub：https://github.com/lora-sys/ai-engineering-harness

GitHub: https://github.com/lora-sys/ai-engineering-harness/tree/main/skills/frontend-creative