frontend-design

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

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

设计思考

开始编写代码前，先理解背景，并确立一个大胆鲜明的审美方向：

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

重要：明确一个概念方向，并精准地贯彻到底。大胆繁复与精致极简都可行——关键在于用心，而非追求强烈效果。

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

• 达到生产级水准且功能完整
• 视觉效果出众、令人印象深刻
• 风格统一，审美方向明确
• 每个细节都经过细致打磨

前端美学指南

重点关注：

• 排版：选择美观、独特且有趣的字体。避免使用 Arial 和 Inter 等通用字体，转而选择能提升前端美感、出人意料且富有个性的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。大胆的主色搭配鲜明的点缀色，效果胜过平淡、均匀分布的配色。
• 动效：使用动画来呈现效果和微交互。对于 HTML，优先采用纯 CSS 方案。条件允许时，React 可使用 Motion 库（使用 anime.js 制作动画：./references/animejs.md）。聚焦于影响力大的时刻：精心编排一次带有错落显现效果（animation-delay）的页面加载，比零散的微交互更能带来惊喜。使用滚动触发效果和令人意外的悬停状态。
• 空间构图：采用出人意料的布局。不对称、重叠、对角流线、打破网格的元素。留出充裕的负空间，或营造有节制的密集感。
• 背景与视觉细节：营造氛围和层次感，而不是默认使用纯色。添加与整体美学相契合的情境化效果和纹理。尝试创意形式，例如渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加效果。

切勿采用缺乏个性的通用 AI 生成美学风格，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏具体情境特色的千篇一律的设计。

发挥创意，做出出人意料的选择，让设计真正契合具体情境。每个设计都应各不相同。在浅色和深色主题、不同字体和不同美学风格之间灵活变化。切勿在多次生成中反复采用常见选择（例如 Space Grotesk）。

重要：让实现复杂度与美学构想相匹配。极繁主义设计需要复杂的代码、大量动画和效果。极简或精致的设计则需要克制、精准，并仔细关注间距、排版和细节。优雅来自出色地实现设计构想。

请记住：Claude 能够创作非凡的作品。放开手脚，尽情展现突破常规、全心投入独特构想后所能创造的一切。