前端界面设计

本技能指导创建 有辨识度、达到生产级质量 的前端界面，避免千篇一律的「AI 通用审美」。在用户要求构建 Web 组件、页面或应用时使用；生成有创意、完成度高的代码。

用户会提供前端需求：要实现的组件、页面、应用或界面，以及用途、受众、技术约束等上下文。

设计思维

写代码前先理解场景，并选定 明确、大胆 的美学方向：

• 目的：界面解决什么问题？谁在用？
• 气质：选一个极端方向作为基调，例如：极简、极繁、复古未来、有机自然、奢华精致、玩具感、杂志编辑风、粗野主义、装饰艺术几何、柔和粉彩、工业实用等。可从中汲取灵感，但要形成 贴合场景 的独特方向，而非机械套用列表。
• 约束：框架、性能、可访问性等技术要求。
• 差异化：什么是 令人难忘 的？别人会记住的 一个点 是什么？

关键：方向要清晰，执行要到位。大胆极繁与克制极简都可以，重点是 有意为之，而不是一味堆强度。

然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求：

• 生产可用、功能完整
• 视觉上有冲击力、易记忆
• 美学观点统一、连贯
• 在排版、间距、动效等细节上精细打磨

前端美学要点

重点关注：

• 字体：选 好看、有个性、有记忆点 的字体；避免 Arial、Inter 等过于通用的选择；标题可用有表现力的展示字体，正文配精致易读的正文字体。
• 色彩与主题：整体配色 统一；用 CSS 变量保持一致性；主色块 + 锐利点缀 往往比平均分配、不敢用色更有效。
• 动效：用动画做效果与微交互；纯 HTML 优先 CSS；React 可用 Motion 等库。优先 高影响时刻：例如一次编排良好的页面入场（animation-delay 错开）往往比零散微交互更出彩；善用滚动触发与 有惊喜感 的悬停状态。
• 空间构图：非常规版式——不对称、叠压、对角线动线、打破网格的元素、大量留白 或 有控制的密度。
• 背景与视觉细节：营造氛围与层次，避免只有纯色块。可用渐变网格、噪点纹理、几何图案、多层透明、强阴影、装饰边框、自定义光标、颗粒叠加等，且需与整体美学一致。

不要使用典型的「AI 通用审美」：泛滥的 Inter/Roboto/Arial/系统字体、尤其是白底紫渐变等陈词滥调配色、可预测的版式与组件套路、缺乏场景特征的模板感设计。

要 创造性解读，做出 出人意料但合理 的选择；不要每次生成收敛到同一套字体（例如反复 Space Grotesk）。不同作品应在明暗主题、字体、气质上 有所变化。

重要：实现复杂度要与美学愿景匹配。极繁设计需要更丰富的代码、动画与特效；极简或精致风格需要 克制、精确，在间距、字体与微妙细节上用力。优雅来自 把选定方向执行好。

记住：模型有能力做出 非常高水平 的创意实现。不要自我设限，在 跳出模板、全力贯彻一种独特愿景 的前提下展示可能性。