| 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 有能力做出非凡的创意工作。不要保留，展示当跳出框框、全力投入一个与众不同的愿景时真正能创造出什么。
