frontend-design

此技能将指导你打造独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。编写真正可用的代码，并对美学细节和创意选择倾注非凡的关注。

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

设计思路

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

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

关键：明确一个概念方向，并精准地贯彻到底。大胆繁复和精致极简都可以，关键在于有意为之，而非追求强烈效果。

然后实现可用的代码（HTML/CSS/JS、React、Vue 等），并确保成品：

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

前端美学指南

重点关注：

• 字体排印：选择优美、独特、有趣的字体。避免 Arial 和 Inter 等常见字体，改用能提升前端美感的独特选择，让字体富有个性。将醒目的展示字体与精致的正文字体搭配使用。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。比起平淡、均匀分布的配色，大面积主色搭配鲜明强调色更出彩。
• 动效：使用动画营造效果并实现微交互。对于 HTML，优先采用纯 CSS 方案；如果 React 项目中提供了 Motion 库，则使用它。聚焦于影响力最大的时刻：精心编排页面加载时的错落显现（animation-delay），比零散的微交互更能带来惊喜。运用滚动触发和悬停状态，创造意外效果。
• 空间构图：尝试出人意料的布局、不对称、重叠、对角线动势和打破网格的元素。留出充足的负空间，或采用有控制的密集布局。
• 背景与视觉细节：营造氛围与层次，而非默认使用纯色。添加符合整体美学的环境效果与纹理。发挥创意，运用渐变网格、噪点纹理、几何图案、层叠透明效果、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加效果等。

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

发挥创意，做出出人意料、真正经过设计的选择，让设计贴合具体情境。每个设计都应独一无二。在浅色和深色主题、不同字体与美学风格之间灵活变化。绝不要在不同生成结果中反复采用常见选择（例如 Space Grotesk）。

重要：让实现的复杂度与美学构想相匹配。繁复风格的设计需要精心编写的代码，包含丰富的动画与效果；极简或精致风格的设计则需要克制、精准，并仔细打磨间距、字体排印和细微之处。优雅源于将构想出色地贯彻到底。

请记住：Claude 能够创造非凡的作品。不要有所保留，跳出固有思维，全心投入鲜明独特的构想，展现真正可能创造出的精彩成果。