frontend-design

name	frontend-design
description	创建具有高设计质量、与众不同、生产级的前端界面。当用户要求构建 web 组件、页面、artifact、海报或应用时使用本技能（示例包括网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或为任何 web UI 做样式/美化时）。生成有创意、精致、避免通用 AI 美学的代码与 UI 设计。
license	Complete terms in LICENSE.txt

本技能指导创建与众不同、生产级、避免通用"AI 粗制滥造"美学的前端界面。用对美学细节和创意选择的非凡关注来实现真正可运行的代码。

用户提供前端需求：一个要构建的组件、页面、应用或界面。他们可能包含关于用途、受众或技术约束的上下文。

设计思考

写代码之前，理解上下文并确定一个大胆的美学方向：

• 用途：这个界面解决什么问题？谁来用它？
• 调性：选一个极端：残酷极简、极繁混沌、复古未来、有机/自然、奢华/精致、俏皮/玩具感、编辑/杂志感、粗野/原始、装饰艺术/几何、柔和/粉彩、工业/实用等等。有非常多风味可选。用这些作灵感，但设计一个忠于该美学方向的。
• 约束：技术要求（框架、性能、无障碍）。
• 差异化：什么让它令人难忘？有哪一件事是别人会记住的？

关键：选择一个清晰的概念方向，并精确地执行它。大胆的极繁与精致的极简都行——关键在意图，而非强度。

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

• 生产级且功能完整
• 视觉上震撼且令人难忘
• 连贯，有清晰的美学观点
• 每个细节都精心打磨

前端美学准则

聚焦于：

• 排版：选择美观、独特、有趣的字体。避免 Arial 和 Inter 这类通用字体；转而选用能提升前端美感的与众不同的选择；出人意料、有性格的字体。把一款独特的展示字体与一款精致的正文字体搭配。
• 颜色与主题：投入一个连贯的美学。用 CSS 变量保持一致。主导色配尖锐的强调色，胜过怯懦、均匀分布的调色板。
• 动效：为效果和微交互使用动画。对 HTML 优先纯 CSS 方案。在可用时对 React 用 Motion 库。聚焦高冲击力的时刻：一次编排良好的页面加载配合错落显现（animation-delay）带来的愉悦，胜过散落的微交互。使用会让人惊喜的滚动触发和 hover 状态。
• 空间构图：出人意料的布局。不对称。重叠。对角线流动。打破栅格的元素。慷慨的负空间或受控的密度。
• 背景与视觉细节：营造氛围与深度，而不是默认用纯色。加入与整体美学匹配的情境效果和纹理。运用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰性边框、自定义光标和颗粒覆盖层等创意形式。

绝不使用通用的 AI 生成美学，如被用滥的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏情境特性的千篇一律设计。

创造性地诠释，做出出人意料、真正为该情境设计的选择。没有一个设计应当相同。在明暗主题、不同字体、不同美学之间变化。绝不在多次生成中收敛到常见选择（例如 Space Grotesk）。

重要：让实现的复杂度匹配美学愿景。极繁设计需要带大量动画和效果的精巧代码。极简或精致设计需要克制、精确，以及对间距、排版和微妙细节的仔细关注。优雅来自把愿景执行到位。

记住：Claude 有能力做出非凡的创意工作。不要保留，展示当跳出框框、全力投入一个与众不同的愿景时真正能创造出什么。