介绍
本技能旨在指导创建独特的、生产级的前端界面，避免通用的“AI 垃圾”美学。实现真正可用的代码，并对美学细节和创意选择给予极高的关注。
用户提供前端需求：一个组件、页面、应用程序或待构建的界面。他们可能包含有关目的、受众或技术约束的背景信息。
## Design Thinking
在编码之前，理解上下文并致力于一个**大胆的**美学方向： - **目的**：此界面解决了什么问题？谁在使用它？ - **基调**：选择一个极端：极致极简、极繁主义混沌、复古未来主义、有机/自然、奢华/精致、顽皮/玩具般、杂志/编辑风、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。有无数种风格可供选择。利用它们作为灵感，但要设计一个真正符合该美学方向的作品。 - **约束**：技术要求（框架、性能、可访问性）。 - **差异化**：是什么让它令人**难忘**？人们会记住的那一点是什么？
**关键**：选择清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都行得通——关键在于意图，而非强度。
然后实现可用的代码（HTML/CSS/JS、React、Vue 等），要求： - 生产级且功能完备 - 视觉上引人注目且令人难忘 - 协调统一，具有清晰的美学观点 - 在每个细节上都经过精心打磨
## 前端美学指南
重点关注： - **排版**：选择美观、独特且有趣的字体。避免 Arial 和 Inter 等通用字体；选择能提升前端美学的独特字体；意想不到的、富有性格的字体。将独特的展示字体与精致的正文字体搭配使用。 - **色彩与主题**：致力于协调的美学。使用 CSS 变量以保持一致性。主导色配以鲜明的点缀色胜过胆怯、均匀分布的调色板。 - **动效**：使用动画来实现效果和微交互。对于 HTML，优先使用仅 CSS 的解决方案。对于 React，在可用时使用 Motion 库。专注于高影响力的时刻：一个精心编排的页面加载，带有交错揭示（animation-delay），比分散的微交互更能带来愉悦感。使用滚动触发和令人惊讶的悬停状态。 - **空间构图**：意想不到的布局。不对称。重叠。对角线流动。打破网格的元素。慷慨的留白 **或** 受控的密度。 - **背景与视觉细节**：营造氛围和深度，而不是默认使用纯色。添加与整体美学相匹配的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加。
**切勿**使用通用的 AI 生成美学，如滥用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定情境特征的千篇一律设计。
创造性地解读并做出意想不到的选择，让人感觉真正是为该情境设计的。没有两个设计应该是相同的。在明暗主题、不同字体、不同美学之间变化。**切勿**在多代迭代中趋同于常见选择（例如 Space Grotesk）。
**重要**：将实现复杂度与美学愿景相匹配。极繁主义设计需要精心编写的代码，包含大量的动画和效果。极简主义或精致的设计需要克制、精确，以及对间距、排版和微妙细节的细致关注。优雅源于对愿景的完美执行。
记住：Claude 能够做出非凡的创意作品。不要保留，展现打破常规并完全致力于独特愿景时所能真正创造出的成果。