name: 前端设计 description: 创建独特、生产级前端接口，具有高质量设计。当用户要求构建Web组件、页面、应用程序等时使用此技能（例如包括网站、落地页、仪表盘、React组件、HTML/CSS布局，或美化任何Web UI）。生成创意、精美的代码和UI设计，避免通用AI美学。 license: 完整条款在LICENSE.txt
此技能指导创建独特、生产级前端接口，避免通用“AI垃圾”美学。实现真实工作的代码，对美学细节和创意选择给予格外关注。
用户提供前端需求：要构建的组件、页面、应用程序或接口。他们可能包括有关目的、受众或技术约束的上下文。
设计思维
在编码之前，理解上下文并承诺一个大胆的美学方向：
- 目的：这个接口解决了什么问题？谁使用它？
- 基调：选择一个极端：极致简约、最大主义混乱、复古未来、有机/自然、奢华/精致、有趣/玩具般、编辑/杂志、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有很多风味可以选择。以这些为灵感，但设计一个符合美学方向的作品。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：什么让这个接口难以忘怀？人们会记住的那一件事是什么？
关键：选择一个清晰的概念方向，并精确执行。大胆的最大主义和精致的极简主义都有效——关键是意图性，而非强度。
然后实现工作代码（HTML/CSS/JS、React、Vue等），这些代码：
- 生产级且功能性强
- 视觉上引人注目且令人难忘
- 与明确的美学观点相协调
- 在每一个细节上都精心雕琢
前端美学指南
专注于：
- 排版：选择美丽、独特、有趣的字体。避免通用字体如Arial和Inter；而是选择提升前端美感的独特字体；出乎意料的、有个性的字体选择。搭配独特的展示字体和精致的正文字体。
- 颜色与主题：承诺一个连贯的美学。使用CSS变量以保持一致性。主导色搭配鲜明的强调色，优于胆小、均匀分布的调色板。
- 动效：使用动画进行效果和微交互。对于HTML，优先使用纯CSS解决方案。当可用时，使用React的Motion库。专注于高影响力时刻：一个精心编排的页面加载，带有错开的揭示（animation-delay），比分散的微交互创造更多喜悦。使用滚动触发和悬停状态来带来惊喜。
- 空间构图：出人意料的布局。不对称。重叠。对角线流动。打破网格的元素。宽裕的负空间或控制的密度。
- 背景与视觉细节：创造氛围和深度，而不是默认使用纯色。添加符合整体美学的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、层叠透明、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。
永远不要使用通用的AI生成美学，如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定特征的千篇一律设计。
创造性解读，做出出乎意料的选择，感觉像是真正为上下文设计的。没有一个设计应该相同。在亮色和暗色主题、不同字体、不同美学之间变化。永远不要跨越世代收敛到常见选择（例如Space Grotesk）。
重要：将实现复杂性与美学愿景相匹配。最大主义设计需要详细的代码，带有广泛的动画和效果。极简主义或精致设计需要克制、精确，以及对间距、排版和细微细节的仔细关注。优雅来自于良好地执行愿景。
记住：Claude能够进行非凡的创意工作。不要退缩，展示当跳出框框思考并完全承诺于一个独特愿景时能创造什么。