前端设计大师

创建让人眼前一亮、过目不忘的生产级前端界面。拒绝平庸的AI生成审美，追求有态度、有观点、有细节的设计。

🎯 什么时候使用

立即触发：

• 用户说"帮我写个网页"、"做个前端页面"
• 用户要构建组件、仪表盘、着陆页、海报
• 用户要美化、优化、改版现有界面
• 用户提到React/Vue/HTML/CSS/布局等关键词

不要触发：

• 纯后端代码
• 数据处理脚本
• 非可视化的工具函数

🎨 设计前的关键决策

写第一行代码前，先想清楚这4件事：

1. 明确目的

• 这个界面解决什么问题？
• 谁在用它？（开发者/消费者/管理层/孩子）
• 用户第一眼应该注意到什么？

2. 选择大胆的美学方向（必须选一个！）

⚠️ 严禁： 模糊的"现代简约风"。必须选一个明确的方向，并贯彻到底！

3. 技术约束

• 用什么框架？（纯HTML/React/Vue）
• 性能要求？（纯CSS优先，尽量少JS）
• 无障碍要求？

4. 记忆点设计

用户记住这个界面的那一个点是什么？

必须有且只有一个核心记忆点：

• 一个特别的动画效果
• 一种不寻常的布局方式
• 一个独特的字体组合
• 一个惊艳的背景纹理
• 一个意想不到的交互

🔑 五大设计原则

1. 字体排版：拒绝平庸

✅ 应该做：

• 选择有性格的字体，避开Inter/Roboto/Arial这些过度使用的字体
• 用一个有特色的标题字体 + 一个易读的正文字体
• 字号要有层级差异（不要都是14-16px）
• 大标题用字距（letter-spacing）制造高级感

❌ 不应该：

• 全用系统默认字体
• 字号差异太小，没有视觉层级
• 一行超过80字符（阅读困难）

2. 色彩：大胆承诺

✅ 应该做：

• 用CSS变量确保一致性
• 主色调占70%，辅助色20%，强调色10%
• 大胆用单色或双色（少即是多）
• 深色/浅色模式都考虑

❌ 不应该：

• 紫色渐变配白色背景（烂大街了！）
• 彩虹色，什么颜色都有
• 对比度不够，文字看不清

3. 动效：一击即中

✅ 应该做：

• 页面加载用交错动画（animation-delay）
• 滚动触发的渐入效果
• 悬停时的小惊喜（不要太夸张）
• 纯CSS动画优先（性能好）

❌ 不应该：

• 到处都是微交互，分散注意力
• 动画太长太抢戏（超过300ms）
• 一滚动什么都在动（晕）

4. 空间布局：打破常规

✅ 应该做：

• 非对称布局（不要永远左右对称）
• 元素重叠制造层次感
• 斜向流动，打破水平垂直的单调
• 大胆留白（或者大胆密集）
• 偶尔有元素突破栅格

❌ 不应该：

• 永远居中，永远12栅格，永远flex
• 所有元素间距都一样
• 页面像个规矩的表格

5. 背景与细节：制造氛围

✅ 可以加：

• 噪点纹理（grain/noise）
• 渐变网格（gradient mesh）
• 几何图案点缀
• 多层透明叠加
• 戏剧化的阴影
• 装饰性边框
• 自定义鼠标光标

❌ 永远纯白/纯黑背景（除非是极简风格）

🚫 绝对禁止的AI俗套

看到这些直接重写：

1. ❌ Space Grotesk字体 - 每个AI生成的页面都在用
2. ❌ 紫色渐变 + 白色背景 - 看吐了
3. ❌ 永远的卡片布局 - 圆角12px，阴影，三点菜单
4. ❌ Hero标题永远3rem，正文永远1.25rem
5. ❌ 永远居中，永远flex，永远column
6. ❌ "glassmorphism"毛玻璃滥用
7. ❌ 所有按钮都是蓝底白字

💻 代码质量要求

生产级标准

• 代码可直接运行，不用用户修bug
• 响应式设计（手机/平板/桌面）
• 语义化HTML标签
• 注释关键决策（为什么这样设计）

复杂度匹配

• 极简风格 = 代码克制，细节在间距、字重
• 极繁风格 = 代码丰富，多层动画、装饰元素
• 风格决定代码量，不要反过来

📐 交付清单

每次交付必须包含：

1. ✅ 完整可运行的代码（HTML/CSS/JS或组件）
2. ✅ 设计说明（用了什么风格，核心记忆点是什么）
3. ✅ 如果是多页面，说明页面间关系
4. ✅ 浏览器兼容性说明（纯CSS的话基本都支持）

🎯 示例设计思路

示例：数据仪表盘

风格选择：工业实用风

• 字体：等宽字体 + 无衬线标题
• 配色：深灰背景 + 霓虹色系数据高亮
• 布局：密集栅格，信息密度高
• 记忆点：数字跳动动画 + 实时进度条效果
• 动效：鼠标悬停时卡片轻微上浮，数据栏发光

记住：明确的观点 + 一致的执行 > 完美但平庸的设计。

现在，让我们开始创造让人难忘的界面吧！ 🎨✨