frontend-design

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

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

设计思路

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

• 用途：这个界面要解决什么问题？谁会使用它？
• 风格：选择一种鲜明风格：极简到极致、极繁混乱、复古未来主义、有机自然、奢华精致、趣味玩具感、编辑／杂志风、粗野原始、装饰艺术／几何风、柔和粉彩、工业实用主义等。
• 限制：技术要求（框架、性能、无障碍性）。
• 差异化：怎样才能让人过目难忘？别人会记住的核心亮点是什么？

重要：选定清晰的概念方向，并精准地贯彻执行。大胆的极繁主义和精致的极简主义都可行——关键在于有意识地设计，而非一味追求强烈。

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

• 达到生产级水准且功能完整
• 视觉突出、令人印象深刻
• 风格统一，审美立场清晰
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 字体：选择美观、独特、有趣的字体。避免使用 Arial 和 Inter 等常见字体，改用能提升前端审美的独特字体。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致。主色鲜明、强调色醒目，胜过温吞、平均分配的配色。
• 动效：使用动画营造效果并呈现微交互。聚焦于影响力大的时刻：精心编排、带有交错显现效果的页面加载动画，比零散的微交互更能带来惊喜。
• 空间构图：尝试出人意料的布局、不对称、重叠、斜向流动、打破网格的元素，以及宽裕的留白或经过控制的密集布局。
• 背景与视觉细节：营造氛围与层次感，不要默认使用纯色背景。

切勿采用千篇一律的 AI 生成美学，例如泛滥的字体系列（Inter、Roboto、Arial）、陈词滥调的配色方案（白底紫色渐变），以及可预测的布局和组件模式。

结合具体情境，发挥创意，做出出人意料、真正经过设计的选择。