frontend-design

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

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

设计思路

开始编码前，先了解背景，并确定一个大胆鲜明的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？
• 风格：选择一种极端风格：极简冷峻、混乱繁复、复古未来主义、有机自然、奢华精致、玩具般俏皮、编辑／杂志风、粗野原始、装饰艺术／几何、柔和粉彩、工业实用主义等。可供参考的风格多种多样，但要围绕选定的美学方向，设计出真正契合它的方案。
• 限制：技术要求（框架、性能、无障碍）。
• 差异化：怎样才能让人难以忘怀？人们会记住它的哪一点？

关键：选定清晰的概念方向，并精准贯彻。大胆繁复与精致极简都可行——关键在于有明确意图，而非一味追求强烈效果。

随后实现可运行的代码（HTML/CSS/JS、React、Vue 等），并确保代码：

• 达到生产级水准且功能完善
• 视觉鲜明、令人印象深刻
• 风格统一，拥有明确的美学立场
• 每处细节都经过精心打磨

前端美学指南

重点关注：

• 排版：选择优美、独特、有趣的字体。避免使用 Arial 和 Inter 等常见字体，转而选择能提升前端美感的独特字体；选择出人意料、个性鲜明的字体。将独特的展示字体与精致的正文字体搭配。
• 色彩与主题：贯彻统一的美学风格。使用 CSS 变量保持一致。与其采用保守、平均分配的配色，不如以主导色搭配醒目点缀色。
• 动效：通过动画实现视觉效果与微交互。HTML 优先采用纯 CSS 方案。React 可用时使用 Motion 库。重点打造影响力大的瞬间：一次精心编排、带有交错显现（animation-delay）的页面加载动画，比零散的微交互更能带来惊喜。运用滚动触发效果和出人意料的悬停状态。
• 空间构图：尝试出人意料的布局、不对称、重叠、对角动线、打破网格的元素，以及充裕的留白或经过控制的密集布局。
• 背景与视觉细节：营造氛围与层次感，避免默认使用纯色。添加与整体风格相符的情境化效果和纹理。尝试创意形式，例如渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性阴影、装饰边框、自定义光标和颗粒叠层。

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

发挥创意，选择出人意料、真正经过设计的方案。每个设计都应独一无二。在浅色与深色主题、不同字体和不同美学风格之间灵活变化。绝不要在每次生成时都趋同于常见选择（例如 Space Grotesk）。

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

请记住：Claude 能够创作非凡的作品。放开手脚，跳出常规思维，全力贯彻独特的构想，展现真正可能实现的创造力。