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