frontend-design

此技能旨在指导你打造独具特色、达到生产级品质的前端界面，避免千篇一律的“AI 垃圾风”。请编写真正可用的代码，并以非凡的用心打磨美学细节、展现创意。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们也可能补充有关用途、受众或技术限制的背景信息。

设计思路

开始编码前，先理解背景，并坚定选择一种大胆的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？
• 调性：选择一种极致风格：极简粗犷、混乱繁复、复古未来主义、有机自然、奢华精致、俏皮玩具风、编辑部／杂志风、粗野原始、装饰艺术／几何、柔和粉彩、工业实用主义等。风格变化无穷。可以从这些方向中汲取灵感，但最终设计必须忠于所选的美学方向。
• 限制：技术要求（框架、性能、无障碍）。
• 差异化：怎样才能让人过目难忘？人们会记住的亮点是什么？

至关重要：明确一个概念方向，并精准贯彻。大胆繁复和精致极简都能奏效——关键在于有意识地设计，而不是一味追求强烈效果。

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

• 达到生产级品质且功能完善
• 视觉出众、令人难忘
• 风格统一，有清晰的美学主张
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 排版：选择优美、独特、有趣的字体。避免使用 Arial 和 Inter 等常见字体，改用能提升前端美感的独特字体；选择出人意料、富有个性的字体。将特色鲜明的展示字体与精致的正文字体搭配。
• 色彩与主题：贯彻统一的美学风格。使用 CSS 变量确保一致性。与其采用平淡、均匀分布的配色，不如选择主色并搭配醒目的强调色。
• 动效：通过动画营造效果和微交互。对于 HTML，优先采用纯 CSS 方案；对于 React，条件允许时使用 Motion 库。重点打造影响力强的时刻：一次编排出色、带有交错显现效果（animation-delay）的页面加载动画，比零散的微交互更能带来惊喜。使用滚动触发效果和出人意料的悬停状态。
• 空间构图：采用出人意料的布局。不对称、重叠、斜向流动、打破网格的元素。留出充足的负空间，或营造经过掌控的高密度布局。
• 背景与视觉细节：营造氛围和纵深，不要默认使用纯色。添加符合整体风格的情境效果和纹理。尝试渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性阴影、装饰边框、自定义光标和颗粒叠加等创意形式。

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

大胆发挥创意，做出出人意料、真正精心设计且符合具体情境的选择。每个设计都应有所不同。在浅色与深色主题、不同字体和不同美学风格之间灵活变化。绝不要在不同创作中反复采用常见选择（例如 Space Grotesk）。

重要：实现的复杂度要与美学构想相匹配。繁复风格需要精细的代码、大量动画和效果；极简或精致风格则需要克制、精准，并仔细打磨间距、排版和细节。优雅源于对构想的出色贯彻。

请记住：能力出众的 Agent 能创造非凡作品。放开手脚，跳出常规思维，全心投入独特的设计构想，展现真正的创造力。