frontend-design

name	frontend-design
description	创建具有高设计水准、生产级的独特前端界面。当用户要求构建 Web 组件、页面、Artifact、海报或应用程序（例如网站、落地页、仪表板、React 组件、HTML/CSS 布局，或对任何 Web UI 进行美化/样式调整）时，应使用此技能。生成富有创意、打磨精细的代码和 UI 设计，避免平庸的 AI 审美。
license	完整条款详见 LICENSE.txt

此技能旨在引导创建具有独特性的生产级前端界面，避免平庸的“AI 工业垃圾”审美。实现真正的运行代码，并对审美细节和创意选择给予极大关注。

用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能还会提供有关用途、受众或技术限制的上下文。

设计思维 (Design Thinking)

在编码之前，请先理解上下文并致力于一个 大胆 (BOLD) 的审美方向：

• 用途：此界面解决了什么问题？谁在使用它？
• 基调：选择一种极端风格：极致极简 (brutally minimal)、繁复主义 (maximalist chaos)、复古未来主义 (retro-futuristic)、有机/自然 (organic/natural)、高级/精致 (luxury/refined)、趣味/玩具化 (playful/toy-like)、社论/杂志感 (editorial/magazine)、粗犷主义 (brutalist/raw)、装饰艺术/几何 (art deco/geometric)、柔和/粉彩 (soft/pastel)、工业/实用主义 (industrial/utilitarian) 等。有很多风格可供选择。利用这些作为灵感，但要设计一个忠于该审美方向的作品。
• 限制：技术要求（框架、性能、无障碍性）。
• 差异化：是什么让它 令人难忘 (UNFORGETTABLE)？别人会记住的一点是什么？

关键点：选择一个清晰的概念方向并精准执行。大胆的繁复主义和精练的极简主义都有效——关键在于 意图 (intentionality)，而非强度。

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

• 生产级且功能完备
• 视觉冲击力强且令人难忘
• 具有清晰审美视角的整体性
• 每一个细节都经过精心打磨

前端审美准则 (Frontend Aesthetics Guidelines)

重点关注：

• 字体 (Typography)：选择美观、独特且有趣的字体。避免使用 Arial 和 Inter 等通用字体；相反，应选择能提升前端审美的独特字体；出人意料且极具个性的字体选择。将独特的标题字体与精炼的正文字体配对。
• 色彩与主题 (Color & Theme)：致力于整体审美。使用 CSS 变量保持一致性。具有鲜明点缀的主导色比胆怯、均匀分布的色板表现更好。
• 动态 (Motion)：使用动画处理效果和微交互。对于 HTML，优先考虑纯 CSS 方案。在 React 中可用时使用 Motion 库。专注于高影响力的时刻：一个精心策划的、带有交错显示 (animation-delay) 的页面加载比分散的微交互更能带来惊喜。使用出人意料的滚动触发和悬停状态。
• 空间构成 (Spatial Composition)：出人意料的布局。不对称性。重叠。对角线流向。打破网格的元素。慷慨的负空间或受控的密度。
• 背景与视觉细节 (Backgrounds & Visual Details)：营造氛围和深度，而不是默认使用纯色。添加与整体审美匹配的情景效果和纹理。应用创意形式，如渐变网格 (gradient meshes)、噪点纹理 (noise textures)、几何图形模式、分层透明度、戏剧性的阴影、装饰性边框、自定义光标和颗粒叠加层。

绝不 (NEVER) 使用通用的 AI 生成式审美，例如过度使用的字体族（Inter, Roboto, Arial, 系统字体）、陈词滥调的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定情境特征的模板化设计。

发挥创意并做出出人意料的选择，让人感觉是真正为该情境设计的。每个设计都应该是独一无二的。在亮色和暗色主题、不同字体、不同审美之间进行变化。在各次生成中，绝不 (NEVER) 趋同于共同的选择（例如 Space Grotesk）。

重要提示：实现的复杂度应与审美视觉相匹配。繁复主义设计需要包含大量动画和效果的复杂代码。极简或精炼的设计则需要克制、精准，并细致关注间距、字体和微妙细节。优雅源于对视觉愿景的完美执行。

记住：Claude 能够完成非凡的创意工作。不要保留，展示出打破常规思维并全力投入独特视觉时真正能创造出的作品。