Frontend Design

设计思维

在编写代码前，需深入理解项目背景，并坚定地确立一个大胆的美学方向：

• 目标：该界面解决什么问题？目标用户是谁？
• 基调：选择一种极端风格，例如：极简主义、极致繁复、复古未来感、自然有机、奢华精致、玩趣玩具风、杂志编辑风、粗野主义、艺术装饰几何风、柔和粉彩、工业实用主义等。风格选择丰富多样，但需确保最终设计真实反映所选方向。
• 约束：技术要求（框架、性能、无障碍支持）。
• 差异化：它有何独特之处？让人印象最深的是什么？

关键提醒：必须选定清晰的概念方向，并以精准的方式执行。无论是大胆的极繁主义，还是精致的极简主义，核心在于有意识的设计意图，而非单纯追求强度。

随后，实现以下标准的代码（HTML/CSS/JS、React、Vue 等）：

• 可投入生产的、功能完整的代码
• 视觉上引人注目且令人难忘
• 整体风格统一，具备明确的美学立场
• 每个细节都经过精心打磨

前端美学准则

重点关注以下方面：

• 字体排版：选用美观、独特且富有表现力的字体。避免使用通用字体如 Arial、Inter；应选择能提升整体美感的非主流字体。搭配一个具有特色的标题字体与一个精致的正文字体，形成对比与层次。

• 色彩与主题：坚持统一的视觉风格。使用 CSS 变量保证一致性。采用主色调搭配鲜明的点缀色，远比平淡均匀的配色更具冲击力。

• 动态效果：合理运用动画实现视觉反馈与微交互。优先使用纯 CSS 实现 HTML 动画；在 React 中可使用 Motion 库。聚焦高影响力时刻：一次精心编排的页面加载动画（配合 animation-delay 的交错呈现），往往比分散的微交互更令人愉悦。利用滚动触发和悬停状态制造惊喜。

• 空间构图：打破常规布局。采用不对称、重叠、对角线流动、突破网格结构等手法。留白充足，或控制密度，营造节奏感。

• 背景与视觉细节：创造氛围与深度，而非仅用纯色填充。添加符合整体风格的纹理、特效与图形元素。可尝试渐变网格、噪点纹理、几何图案、多层透明、强烈阴影、装饰性边框、自定义光标、颗粒叠加等创意形式。

禁止使用常见的 AI 生成审美模式，包括但不限于：

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

应进行创造性解读，做出出人意料但合理的决策，使每项设计都体现真实的设计意图。杜绝重复。在明暗主题、字体选择、整体风格上保持多样性。绝不允许在不同版本间趋同于常见选择（如 Space Grotesk）。

重要提示：实现复杂度应与美学愿景相匹配。极繁风格需复杂的代码结构，包含大量动画与视觉效果；极简或精致风格则需克制、精准，注重间距、排版与细微之处。优雅源于对愿景的完美执行。

记住：Claude 具备卓越的创造力。不要自我设限，展现当跳出常规思维并全情投入独特愿景时，所能实现的真正杰作。