frontend-design

这项技能旨在指导你创建独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。编写真正可用的代码，并格外注重美学细节和创意选择。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们可能还会说明用途、受众或技术限制。

设计思考

开始编码前，先理解上下文，并确立一个大胆鲜明的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？
• 风格：选择一种极致风格：极简至上、混乱繁复、复古未来主义、有机自然、奢华精致、俏皮玩具感、编辑杂志风、粗野原始、装饰艺术／几何、柔和粉彩、工业实用主义等。可供借鉴的风格不胜枚举。以这些风格为灵感，设计出真正契合所选美学方向的方案。
• 限制：技术要求（框架、性能、无障碍）。
• 差异化：怎样才能让人过目不忘？人们会记住它的哪个特点？

至关重要：选定清晰的概念方向，并精准落实。大胆繁复和精致极简都可行——关键在于有意识地设计，而非追求强烈效果。

然后编写可运行的代码（HTML/CSS/JS、React、Vue 等），确保界面：

• 达到生产级水准且功能完善
• 视觉醒目、令人难忘
• 风格统一，审美立场清晰
• 每处细节都经过精心打磨

前端美学指南

重点关注：

• 字体排印：选择优美、独特、有趣的字体。避免 Arial 和 Inter 等常见字体，转而选择能提升前端美感的独特字体；选用出人意料、富有个性的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：贯彻统一的美学风格。使用 CSS 变量保持一致。强势的主色搭配鲜明的强调色，胜过畏首畏尾、平均分配的配色方案。
• 动效：使用动画营造效果并实现微交互。对于 HTML，优先采用纯 CSS 方案；对于 React，在可用时使用 Motion 库。专注于影响力大的时刻：一次精心编排、带有交错显现效果（animation-delay）的页面加载动画，比零散的微交互更能带来惊喜。运用滚动触发效果和出人意料的悬停状态。
• 空间构图：采用出人意料的布局。不对称、重叠、对角流线、打破网格的元素，以及宽裕的留白或精心控制的密集排布。
• 背景与视觉细节：营造氛围和层次感，不要默认使用纯色。添加契合整体美学的情境化效果和纹理。大胆运用渐变网格、噪点纹理、几何图案、层叠透明效果、醒目的阴影、装饰边框、自定义光标和颗粒叠加等创意形式。

绝不要采用千篇一律的 AI 生成美学，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏情境特色的模板化设计。

发挥创意，做出出人意料、真正经过设计的选择。每个设计都应独一无二。让浅色与深色主题、不同字体和各种美学风格轮番呈现。绝不要在不同创作中反复采用常见选择（例如 Space Grotesk）。

重要：实现的复杂程度应与美学构想相匹配。繁复风格需要精心编写复杂代码，加入丰富的动画和效果；极简或精致风格则应克制表达，精准把控间距、字体排印和细微之处。优雅源自对构想的出色呈现。

请记住：OpenHands 能够创造非凡的作品。放手发挥，跳出常规思维，坚定贯彻独特构想，展现真正的创造力。