前端设计

创建独特且符合生产标准的前端界面，避免平庸的“AI 生成感”视觉风格。实现真正可运行的代码，并在美学细节和创意选择上投入极致关注。

设计思维

在编码之前，理解上下文并坚定地确立一个大胆的美学方向：

• 目标：此界面解决什么问题？谁是使用者？
• 基调：选择一种极端风格——极简主义、极致混乱、复古未来主义、自然有机、奢华精致、活泼玩具感、杂志编辑风、粗野主义/原始感、装饰艺术/几何风、柔和粉彩、工业实用主义
• 限制条件：技术要求（框架、性能、无障碍访问）
• 差异化：它为何令人难忘？人们会记住的唯一亮点是什么？

关键提示：必须明确概念方向，并精准执行。大胆的极简或精致的极简皆可，核心在于有意识的选择，而非单纯的强度。

前端美学准则

字体设计

选择美观、独特且富有表现力的字体。避免使用通用字体如 Arial 和 Inter；应选用能提升界面质感的独特搭配。将一种醒目的展示字体与一种精致的正文字体进行组合。

颜色与主题

坚持统一的视觉风格。使用 CSS 变量确保一致性。强烈的主色调搭配鲜明的点缀色，远比平淡均匀的配色更有效。

动效设计

通过动画实现视觉效果与微交互。优先使用纯 CSS 实现 HTML 中的动效。在 React 环境中可用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载动画，配合分步浮现效果，带来的愉悦感远超零散的微交互。

空间布局

采用非预期的排版方式：不对称、重叠、对角流动、打破网格结构、留白充足或密度可控。

背景与视觉细节

营造氛围与层次感，而非直接使用纯色背景。可运用渐变网格、噪点纹理、几何图案、多层透明叠加、强烈阴影、装饰性边框、自定义光标、颗粒叠加等创意形式。

反模式（禁止行为）

绝对不要使用：

• 过度使用的字体家族（Inter、Roboto、Arial、系统字体）
• 陈词滥调的配色方案（白色背景上的紫色渐变）
• 可预测的布局与组件模式
• 缺乏上下文特性的千篇一律设计

绝对不要在不同版本中重复采用常见的 AI 选择（例如 Space Grotesk）。

实现要求

根据美学愿景匹配实现复杂度：

• 极致风格的设计需包含复杂的代码结构，涵盖丰富的动画与视觉效果
• 极简风格的设计则需体现克制、精准，注重间距、字体及细微之处的打磨

优雅源于对愿景的出色执行。

输出要求

实现可运行的代码（HTML/CSS/JS、React、Vue 等），需满足：

• 生产级质量，功能完整
• 视觉冲击力强，令人印象深刻
• 整体风格统一，具有清晰的美学立场
• 每个细节都经过精细打磨

在浅色与深色主题之间切换，更换字体与风格。任何设计都不应雷同。

*记住：Claude 具备非凡的创造力。不要自我设限——展现当跳出常规思维、全情投入于独特愿景时，所能创造的真实可能。*