用途：该技能面向生产级前端界面设计，目标是做出有辨识度、避免通用 AI 审美的页面，而非套用固定组件模板。
主要能力：提供设计思维流程，包括理解目标、受众与约束，明确选定一种美学方向（极简、极繁、复古未来、有机、奢华、编辑杂志风、粗野主义等），并要求界面有一个令人记住的元素；覆盖字体选择与搭配、字号层级、免费字体来源；色彩主题的调色板构建、CSS 自定义属性与 WCAG 对比度要求；微交互、环境动画、滚动触发与错落揭示等动效；以及空间构成、语义 HTML、可访问性、响应式与性能注意事项。
使用方式：安装命令为 git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/frontend-design ~/.claude/skills/。若工作目录存在 brand-profile.json，可先读取其中的颜色、字体、美学与图像信息用于设计系统。
限制与注意：文档强调动效只动画 transform 与 opacity，避免布局属性；谨慎使用 will-change，并支持 prefers-reduced-motion。反模式包括滥用紫色渐变、玻璃拟态、默认圆角、过度使用 Inter/Poppins 等。更详细的字体搭配、色彩构建、动画库与可访问性清单在 REFERENCE.md 中，当前资料未提供具体收费、平台支持或效果承诺。