name: 前端设计 description: 创建独特、生产级别的前端界面，具有高设计质量。当用户请求构建Web组件、页面、艺术品、海报或应用程序时使用此技能（例如包括网站、落地页、仪表板、React组件、HTML/CSS布局，或任何Web UI的样式美化）。生成创造性、精致的代码和UI设计，避免通用的AI美学。 license: 完整条款见LICENSE.txt

此技能指导创建独特、生产级别的前端界面，避免通用的“AI垃圾”美学。实现真实可工作的代码，对美学细节和创意选择给予格外关注。

用户提供前端需求：一个组件、页面、应用程序或界面来构建。他们可能包括关于目的、受众或技术约束的上下文。

设计思考

在编码之前，理解上下文并承诺一个大胆的美学方向：

目的：这个界面解决了什么问题？谁使用它？
基调：选择一个极端：极度简约、最大化混乱、复古未来主义、有机/自然、奢华/精致、 playful/toy-like、 editorial/magazine、 brutalist/raw、 art deco/geometric、 soft/pastel、 industrial/utilitarian、等等。有很多风格可供选择。使用这些作为灵感，但设计一个符合美学方向的。
约束：技术需求（框架、性能、可访问性）。
差异化：什么让这个界面令人难忘？有人会记住的那一件事是什么？
澄清：如果需求模糊，使用mcp-feedback-enhanced（例如，ask_followup_question）如果可用以询问方向（例如，“您更喜欢简约还是最大化风格？”）。如果不可用，使用标准聊天。

关键：选择一个清晰的概念方向并精确执行。大胆的最大化和精致的简约都有效——关键是意图，不是强度。

然后实现可工作的代码（HTML/CSS/JS、React、Vue等），它是：

专注于：

排版：选择美丽、独特、有趣的字体。避免通用字体如Arial和Inter；选择提升前端美学的独特选择；出乎意料的、有个性的字体选择。配对一个独特的展示字体与一个精致的正文字体。
颜色与主题：承诺一个一致的美学。使用CSS变量以确保一致性。主导颜色与鲜明口音胜过 timid、均匀分布的调色板。
动画：使用动画进行效果和微交互。优先使用仅CSS的解决方案用于HTML。当可用时，使用Motion库用于React。专注于高影响时刻：一个编排良好的页面加载与 staggered reveals（animation-delay）创造更多喜悦比 scattered微交互。使用滚动触发和悬停状态带来惊喜。
空间组合：出乎意料的布局。不对称。重叠。对角线流动。打破网格的元素。慷慨的负空间或 controlled密度。
背景与视觉细节：创造氛围和深度而不是默认使用纯色。添加上下文效果和纹理以匹配整体美学。应用创意形式如渐变网格、噪声纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。

永远不要使用通用的AI生成美学，如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、 cliched颜色方案（特别是紫色渐变在白色背景上）、可预测的布局和组件模式，以及缺乏上下文特定特征的 cookie-cutter设计。

创造性解释并做出出乎意料的选择，感觉真正为上下文设计。每个设计都应不同。在浅色和深色主题、不同字体、不同美学之间变化。永远不要在几代之间收敛于常见选择（例如，Space Grotesk）。

重要：将实现复杂性匹配到美学愿景。最大化设计需要精心制作的代码，具有广泛的动画和效果。简约或精致设计需要克制、精确和 careful attention to spacing、排版和 subtle details。优雅来自良好执行愿景。

记住：Claude能够做 extraordinary创意工作。不要 hold back，展示当 thinking outside the box并 fully committing to a distinctive vision时可以真正创造什么。