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