介绍
# Frontend Design
打造独特的、生产级的前端界面，避免通用的“AI 灌水”美学。实现真正可用的代码，并对美学细节和创意选择给予极致的关注。
## 设计思维
在编码之前，理解上下文并坚持一个**大胆**的美学方向：
- **目的**：这个界面解决了什么问题？谁在使用它？ - **基调**：选择一个极致风格—— brutalist 极简、maximalist 混乱、复古未来主义、有机/自然、奢华/精致、好玩/玩具感、杂志/社论风、粗野/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义 - **约束**：技术要求（框架、性能、可访问性） - **差异化**：是什么让它令人**难忘**？人们会记住的那一点是什么？
**关键**：选择一个清晰的概念方向并精准地执行它。大胆的极繁主义和精致的极简主义都行得通——关键在于意图，而非强度。
## 前端美学指南
### 排版
选择美观、独特且有趣的字体。避免 Arial 和 Inter 等通用字体；选择能提升界面质感的独特字体。将独特的展示字体与精致的正文字体搭配使用。
### 色彩与主题
坚持一致的美学风格。使用 CSS 变量以保持一致性。带有鲜明点缀的主色调胜过平庸、平均分布的调色板。
### 动效
使用动画来实现特效和微交互。HTML 优先使用纯 CSS 方案。React 可用的话，使用 Motion 库。聚焦于高影响力的时刻：一个精心编排、带有交错揭示效果的页面加载，比分散的微交互更能带来愉悦感。
### 空间构成
出人意料的布局。不对称。重叠。对角线流动。打破网格的元素。充裕的留白**或**受控的密度。
### 背景与视觉细节
营造氛围和深度，而不是默认使用纯色。运用创意形式，如网格渐变、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。
## 反面模式（不要做的事）
**切勿使用：** - 滥用的字体系列（Inter、Roboto、Arial、系统字体） - 老套的配色方案（白色背景上的紫色渐变） - 可预测的布局和组件模式 - 缺乏特定情境特征的千篇一律的设计
**切勿**在多次生成中收敛于常见的 AI 选择（例如 Space Grotesk）。
## 实现方式
使实现复杂度与美学愿景相匹配： - 极繁主义设计需要精心编写的代码，包含大量动画和特效 - 极简主义设计需要克制、精准，并仔细关注间距、排版和微妙细节
优雅源于对愿景的良好执行。
## 输出要求
实现可用的代码（HTML/CSS/JS、React、Vue 等），要求： - 生产级且功能完整 - 视觉震撼且令人难忘 - 风格统一，具有清晰的美学观点 - 每个细节都经过精心打磨
在明暗主题、不同字体和不同美学风格之间变化。没有任何设计应该是相同的。
---
*记住：Claude 拥有非凡的创造力。不要保留——请跳出思维定式，全身心投入到独特的愿景中，展示真正的创造潜力。*