名称: 前端设计 描述: 创建独特、生产级的前端界面，具有高设计质量。当用户要求构建Web组件、页面、作品、海报或应用程序时使用此技能（示例包括网站、落地页、仪表板、React组件、HTML/CSS布局，或美化任何Web UI）。生成创意、精美的代码和UI设计，避免通用的AI美学。 许可证: 完整条款在LICENSE.txt中
该技能指导创建独特、生产级的前端界面，避免通用的“AI垃圾”美学。实现真实可用的代码，特别注重美学细节和创造性选择。
用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包括关于目的、受众或技术约束的上下文。
设计思维
在编码之前，理解上下文并致力于一个大胆的美学方向：
- 目的：这个界面解决什么问题？谁使用它？
- 基调：选择一个极端：残酷极简、最大主义混乱、复古未来、有机/自然、奢华/精致、 playful/玩具-like、 editorial/杂志、 brutalist/原始、 art deco/几何、柔和/ pastel、工业/实用等。有太多风味可供选择。使用这些作为灵感，但设计一个忠于美学方向的。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：什么让这个界面难忘？人们会记住的一件事是什么？
关键：选择一个清晰的概念方向并精确执行。大胆的最大主义和精致的极简主义都有效——关键是意图性，而不是强度。
然后实现工作代码（HTML/CSS/JS、React、Vue等），这些代码是：
- 生产级和功能性的
- 视觉上引人注目和难忘的
- 具有清晰美学观点的连贯性
- 在每个细节上都精心雕琢
前端美学指南
专注于：
- 排版：选择美丽、独特、有趣的字体。避免通用字体如Arial和Inter；选择提升前端美学的独特选择；意想不到、有特色的字体选择。将独特的显示字体与精致的正文字体配对。
- 颜色与主题：致力于一个连贯的美学。使用CSS变量保持一致性。主导色与鲜明强调色胜过 timid、均匀分布的调色板。
- 动效：使用动画效果和微交互。优先考虑HTML的纯CSS解决方案。在可用时使用React的Motion库。专注于高影响时刻：一个精心编排的页面加载与 staggered reveals（animation-delay）比 scattered micro-interactions 创造更多喜悦。使用 scroll-triggering 和 hover states 带来惊喜。
- 空间构成：意想不到的布局。不对称。重叠。对角流。打破网格的元素。慷慨的负空间或受控的密度。
- 背景与视觉细节：创造氛围和深度，而不是默认使用纯色。添加与整体美学匹配的上下文效果和纹理。应用创意形式，如渐变网格、噪声纹理、几何图案、分层透明度、 dramatic shadows、 decorative borders、 custom cursors、 grain overlays。
永远不要使用通用的AI生成美学，如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、 cliched 配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定特征的 cookie-cutter 设计。
创意地解释并做出意想不到的选择，感觉真正为上下文设计。没有设计应该是相同的。在亮暗主题、不同字体、不同美学之间变化。永远不要跨代收敛于常见选择（例如 Space Grotesk）。
重要：将实现复杂性与美学愿景匹配。最大主义设计需要 elaborate code 与广泛动画和效果。极简或精致设计需要克制、精确，并 careful attention 到间距、排版和 subtle details。优雅来自于良好执行愿景。
记住：Claude能够进行非凡的创意工作。不要退缩，展示当跳出框框思考并完全致力于一个独特愿景时真正能创造什么。