用途 该技能用于指导创建风格鲜明、达到生产级水准的前端界面，目标是避免通用化的“AI slop”审美，在实现真实可运行代码的同时，对美学细节和创意选择给予高度关注。它由 anthropics/claude-code 的 frontend-design 插件移植而来。
主要能力 技能接收用户提供的前端需求：一个组件、页面、应用或界面，可能附带关于用途、受众或技术约束的背景信息。在编码前，技能会先进行设计思考，并确定一个大胆的美学方向，包括：
- 用途：这个界面解决什么问题？谁在使用？
- 基调：选择一个极端方向，例如极简、极繁混乱、复古未来、有机自然、奢华精致、玩趣玩具感、编辑杂志风、粗野原始、装饰几何、柔和粉彩、工业实用等。
- 约束：技术需求（框架、性能、可访问性）。
- 差异化：什么让它令人难忘？
随后实现可运行代码（HTML/CSS/JS、React、Vue 等），要求达到生产级且功能可用、视觉醒目且令人难忘、具有清晰统一的审美观点，并在每个细节上精心打磨。
前端美学指南
- 字体排印：选择美观、独特、有趣的字体，避免 Arial、Inter 等通用字体，采用有辨识度的展示字体搭配精致的正文字体。
- 色彩与主题：坚持统一的审美，使用 CSS 变量保持一致；主色搭配锐利点缀色，优于平均分布的保守配色。
- 动效：用动画实现效果与微交互。HTML 优先使用纯 CSS 方案；React 可用时使用 Motion 库。聚焦高冲击时刻，例如一次编排良好的页面加载配合错落显现（animation-delay），比零散微交互更令人愉悦；使用滚动触发和令人惊喜的悬停状态。
- 空间构图：采用出人意料的布局、不对称、重叠、对角线流动、打破网格的元素，以及大量留白或受控的密集排布。
- 背景与视觉细节：营造氛围与深度，而非默认纯色；加入与整体审美匹配的语境化效果与纹理，如渐变网格、噪点纹理、几何图案、分层透明、戏剧化阴影、装饰边框、自定义光标和颗粒叠加。
技能明确要求绝不使用通用 AI 生成审美，例如被过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏语境特征的模板化设计。同时要求创造性诠释，做出真正为语境而设计的选择，不同设计之间应有变化，在浅色与深色主题、字体和审美之间切换，避免跨代收敛到常见选择（例如 Space Grotesk）。
实现复杂度需与美学愿景匹配：极繁设计需要大量动画与效果的精细代码；极简或精致设计则需要克制、精确，并仔细处理间距、字体排印和微妙细节。
字体排印参考 选择字体时倾向高对比搭配，完全避免通用选择：
- 绝不使用：Inter、Roboto、Open Sans、Lato、系统字体
- 代码审美：JetBrains Mono、Fira Code、Geist Mono
- 编辑风格：Playfair Display、Crimson Pro、Fraunces
- 创业风格：Clash Display、Satoshi、Cabinet Grotesk
- 技术风格：IBM Plex 系列、Source Sans 3
- 独特风格：Bricolage Grotesque、Obviously、Newsreader 使用字重极端值（100/200 对 800/900，而非 400 对 600），字号跳跃 3 倍以上而非 1.5 倍。编码前先说明字体选择。
隔离提示 如需针对性控制，可将指导聚焦于单一维度（字体排印、色彩、动效），而不应用完整美学系统。references/prompting-guide.md 中提供了可直接使用的提示片段和主题约束模板（Solarpunk、粗野主义、黑色电影、装饰艺术等）。
适用场景 适用于用户要求构建 Web 组件、页面或界面，并希望获得高设计品质、风格鲜明的前端实现时。
限制 资料未提供关于收费、价格、平台支持范围或具体效果保证的信息。