Anthropic热门官方frontend-design
Anthropic 官方示例技能。在写新页面或改造界面时，引导 Agent 先确定审美方向、字体和配色，再动手写代码，避开「紫色渐变 + 圆角卡片」这类 AI 味很重的默认设计。
安装
Claude Code 插件市场
/plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills
skills CLI（多客户端通用）
npx skills add anthropics/skills --skill frontend-design
也可以手动安装：把仓库里的 skill 目录复制到 ~/.claude/skills/（Claude Code）或对应客户端的 skills 目录。
怎么触发
装好后不用手动调用，对 Agent 说类似的话，它会自动用上这个 Skill：
- 「给我的产品做一个有辨识度的落地页」
- 「这个后台首页太丑了，重新设计一下」
适用场景
- 落地页、官网从零设计
- 改造「一眼 AI 生成」的界面
同类 Skill
vercel-react-best-practicesVercel 工程团队总结的 React / Next.js 性能优化规则ui-ux-pro-max可检索的 UI/UX 设计知识库：风格、配色、字体搭配一应俱全web-design-guidelines按 Web 界面规范审查 UI：可访问性、交互、细节vercel-composition-patternsReact 组合模式：告别越加越多的 boolean propsvercel-react-native-skillsReact Native 与 Expo 的性能与工程最佳实践vercel-react-view-transitions用 React View Transition API 做页面切换和共享元素动画