creative-design

创意设计

改编自 Anthropic 的前端设计技能

这项技能旨在指导你创建独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾”美学。适用于创意型一次性设计，而非标准应用组件。

何时使用此技能，何时采用标准模式

使用 creative-design	使用标准模式
落地页	应用仪表盘
作品集	CRUD 界面
营销网站	管理面板
一次性演示	可复用组件
“让它令人印象深刻”	“让它保持一致”

如果正在开发使用 shadcn/ui 的 Next.js 应用，除非明确要求设计独特，否则优先使用主题令牌和一致的模式。

设计思路

编码前，确定一个大胆的美学方向：

• 目的：要解决什么问题？谁会使用它？
• 基调：选择一种鲜明的风格：
  • 极简主义
  • 极繁主义混乱风
  • 复古未来主义
  • 有机自然风
  • 奢华精致风
  • 趣味玩具风
  • 编辑部／杂志风
  • 粗野原始风
  • 装饰艺术／几何风
  • 柔和粉彩风
  • 工业实用风
• 差异化：人们会记住它的哪一点？

重要：选择清晰的方向并精准执行。大胆的极繁主义和精致的极简主义都行得通，关键在于有意识地设计。

美学指南

字体排印

选择优美、独特且有趣的字体。避免使用：

• Arial、Inter、Roboto、系统字体
• Space Grotesk（在 AI 输出中使用过多）

可以尝试将别具特色的展示字体与精致的正文字体搭配。个性胜过稳妥。

色彩与主题

• 坚持统一的美学风格
• 使用 CSS 变量保持一致
• 以主色搭配鲜明的强调色，胜过胆怯而均匀分布的配色
• 避免：白底紫色渐变（陈腐的 AI 美学）

动效

专注于有冲击力的瞬间：

• 精心编排一次页面加载，使用交错显现效果（animation-delay）
• 滚动触发的效果
• 出人意料的悬停状态

HTML 优先使用纯 CSS。React 可用时使用 Motion 库。

空间构图

• 出人意料的布局
• 不对称、重叠、对角线流动
• 打破网格的元素
• 大量留白或经过控制的密集布局

背景与纹理

营造氛围，而非使用纯色：

• 渐变网格
• 噪点纹理
• 几何图案
• 多层透明效果
• 戏剧化阴影
• 颗粒叠加效果

反模式

绝不生成以下内容：

• 通用字体系列（Inter、Roboto、Arial）
• 白底紫色渐变
• 可预测的布局
• 千篇一律的组件
• 重复使用同一种设计

实现

让复杂度与构想相匹配：

• 极繁主义 = 复杂的动画、效果与层次
• 极简主义 = 克制、精准、留白与字体排印

始终生成可运行的代码（HTML/CSS/JS、React 等），并确保代码：

• 达到生产级水准且功能完善
• 视觉突出、令人难忘
• 风格统一，且有明确的美学主张