frontend-design 是一个前端设计技能，目标是在实现生产级 UI 时做出独特、大胆的视觉选择，避免常见的通用 AI 审美。
用途：当用户需要具有鲜明视觉个性的前端组件或界面时使用，强调有辨识度的设计而非技术正确但平庸的界面。
主要能力围绕五个方面：1）有个性的排版，避免 Inter、Arial、Roboto、system-ui 等默认选择，按项目气质选用不同字体栈，如展示字体 Clash Display、Cabinet Grotesk、Satoshi、General Sans、Syne、Archivo，正文字体 Outfit、Plus Jakarta Sans、Switzer、Geist，等宽字体 JetBrains Mono、Geist Mono、IBM Plex Mono，并要求不同项目使用不同字体。2）有意图的配色，避免默认 Tailwind 颜色、基础蓝按钮和灰背景，使用语义化 token、HSL、带色相偏移的中性色和渐变主色。3）大胆的空间构成，避免全部居中、对称和死守网格，使用留白、元素重叠、刻意打破对齐，并用 clamp() 实现流式排版。4）把动效作为个性，使用弹簧物理而非线性缓动、错峰入场、细微模糊过渡和响应式悬停，并尊重 prefers-reduced-motion。5）生产级实现，要求 TypeScript 类型、无障碍（焦点状态、ARIA、键盘导航）、加载态、错误边界、响应式与性能优化。
使用方式：官方插件可通过 Anthropic marketplace 安装 frontend-design@claude-code-plugins，以便在前端任务中自动调用；该技能在官方版本之上提供扩展指导。工作流为：确立设计方向、创建组件架构、加入视觉个性、实现动效、生产加固。详细实现可参考 references 目录下的 typography-examples.md、color-animation-patterns.md、production-patterns.md。
适用场景：需要独特视觉识别、创意排版与配色、大胆空间构图、可上线的动效组件的项目。若要做完整 UI/UX 评审、无障碍审计、设计系统架构或组件库搭建，应使用 designer agent。
限制与注意：应避免把 Inter/Roboto 当默认字体、跨项目复用同一字体、灰底白底配蓝按钮、全部居中对称、无动效或通用淡入、忽略深色模式、遗漏加载与错误状态、跳过无障碍。技能本身未提供具体收费与价格信息。