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