前端设计
打造具有独特审美、生产级品质的前端界面，避免陷入泛滥的“AI 设计通病”。提供真实可用的代码，在美学细节和创意选择上极致用心。
设计思考（编码前）
确立一个大胆的美学方向：
- 目的：该界面解决什么问题？用户是谁？
- 基调：选择极端方向——极致极简、极繁混乱、复古未来、有机/自然、奢华/精致、俏皮/玩具、杂志/编辑、粗野/原始、装饰艺术/几何、柔和/粉彩、工业/实用
- 约束：技术要求（框架、性能、无障碍）
- 差异化：什么东西让人过目不忘？用户记住的唯一一点是什么？
选择一个清晰的概念方向，并精准执行。无论是大胆的极繁主义还是精致的极简主义，关键在于目的性，而非强度。
前端美学支柱
排版
选择优美、独特、有趣的字体。避免 Arial、Inter、Roboto 等系统字体的俗套。将特色鲜明的展示字体与精致的正文字体搭配。选择出人意料、富有性格的字体方案。
色彩与主题
坚持一致的美学风格。使用 CSS 变量确保统一性。主导色调搭配锐利强调色，效果远优于均匀分布、怯懦的调色板。
动效
动画用于效果和微交互。HTML 场景只用 CSS，React 场景使用 Motion 库。高光时刻：一次精心编排的页面加载，配合交错出现效果，远比零散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。
空间构图
出人意料的布局。不对称、重叠、对角线流动、打破网格的元素。慷慨的留白 或者 受控的密集感。
背景与视觉细节
用氛围与深度取代纯色背景。渐变网格、噪点纹理、几何图案、多层透明度、戏剧化阴影、装饰性边框、自定义光标、颗粒叠加层。
绝对不要使用
- 过度使用的字体家族（Inter、Roboto、Arial 等系统字体）
- 陈词滥调的色彩方案（白色背景上的紫色渐变）
- 可预测的布局和组件模式
- 缺乏语境特色的模板化设计
创意解读，每项设计都与众不同。在浅色/深色主题、不同字体、不同美学风格之间切换。绝对不要在不同生成之间落入常见选择。
实现复杂度必须与美学愿景相匹配。极繁主义设计需要复杂代码，极简主义设计则需要克制、精准以及对间距、排版和微妙细节的密切关注。
Kevin 的设计上下文
开始任何 UI 工作前，请阅读 wiki/design/design-system.md 了解当前设计令牌。
另见：wiki/design/aesthetic-systems.md 了解艺术方向原型。
相关技能
web-design-guidelines— Vercel Web 界面指南合规性vercel-react-best-practices— React 性能优化frontend-design-taste— Kevin 的个人艺术方向技能modern-web-design— 设计趋势与实现模式