前端设计技能

创建独特的、生产级前端界面，避免千篇一律的 AI 审美通病。实现真正可运行的代码，对美学细节和创意选择给予极致关注。

设计思维

编码前先理解上下文，确定大胆的美学方向：

• 目的: 这个界面解决什么问题？谁在使用？
• 调性: 选择一个极端方向：极简主义、最大化主义、复古未来、有机自然、奢华精致、俏皮玩具感、杂志编辑风、粗野主义、装饰艺术、柔和粉彩、工业实用...
• 约束: 技术要求（框架、性能、可访问性）
• 差异化: 什么让这个设计令人难忘？用户会记住的一个特点是什么？

关键: 选择清晰的概念方向并精确执行。大胆的最大化和精致的极简都可行 — 关键是意图性，不是强度。

前端美学指南

字体

• 选择美丽、独特、有趣的字体
• 避免: Arial、Inter、Roboto、system-ui 等通用字体
• 用一个有个性的展示字体搭配一个精致的正文字体
• Google Fonts 推荐：Playfair Display、Sora、DM Serif Display、Space Mono、Fraunces

色彩与主题

• 承诺一个完整的美学体系，用 CSS 变量保持一致
• 主色占主导 + 锐利强调色 > 胆怯的均分配色
• 避免: 紫色渐变白底（AI审美典型特征）

动效

• 用动画增添效果和微交互
• HTML 优先 CSS-only 方案；React 使用 Framer Motion
• 聚焦高影响时刻：一个精心编排的页面加载（staggered reveals）比零散微交互更令人愉悦
• 滚动触发和悬停状态要出人意料

空间构图

• 意想不到的布局：不对称、重叠、对角线流动
• 打破网格的元素
• 大胆的留白或受控的密度

背景与视觉细节

• 创造氛围和深度，不要默认纯色
• 渐变网格、噪点纹理、几何图案、层叠透明度
• 戏剧性阴影、装饰边框、自定义光标、颗粒叠加

绝对避免的 AI 审美通病

通病	替代方案
Inter/Roboto/Arial 字体	选择有个性的字体对
紫色渐变白底	针对主题选择专属配色
千篇一律的圆角卡片	根据调性选择形状语言
居中一切	不对称布局、偏移构图
通用图标库默认图标	定制图标或独特视觉元素
均匀间距无层次	有意的留白和密度对比

实现要求

代码必须是：

• 生产级：可运行、响应式、无bug
• 视觉震撼：令人印象深刻且独特
• 一致：有清晰的美学观点
• 精细打磨：每个细节都经过考量

技术栈建议

场景	推荐栈
快速原型	HTML + Tailwind CSS
组件库	React + Tailwind + shadcn/ui
动效丰富	React + Framer Motion
数据仪表盘	React + Recharts + Tailwind
落地页	Next.js + Tailwind

代码质量

• 语义化 HTML
• CSS 变量管理主题
• 响应式设计（移动优先）
• 可访问性（aria 标签、键盘导航、对比度）
• 性能优化（懒加载、代码分割）

设计审查清单

• 字体选择是否独特且有个性？
• 配色是否专为此主题设计？
• 布局是否避免了通用模式？
• 是否有令人记忆深刻的视觉元素？
• 动效是否增添了愉悦感？
• 响应式适配是否完善？
• 深色/浅色模式是否都考虑到？

记住: AI 有能力创造非凡的创意作品。不要保守，展示真正跳出框架思考、全力投入独特愿景时能创造的东西。