frontend-design

Anthropic 官方 Agent Skill。新建或改造界面时，引导 Agent 先定审美方向、字体和版式，再写代码，避开一眼就是 AI 生成的模板样式。

Apache-2.0 · Anthropic · github.com/anthropics/skills/tree/main/skills/frontend-design · github.com/anthropics/skills · Agent Skills（SKILL.md） · 编辑更新 2026-09-04

• 先找题材先确定产品是什么、给谁用、页面的主要任务，从题材本身找视觉方向，而不是套默认模板。
• 先出方案再写代码写代码前给出紧凑的设计方案：4–6 个色值、字体角色、版式草图和原则，并对照需求自查有没有落入通用套路。
• 点名常见的“AI 味”列出生成页面的常见特征（米色底配赤陶色、圆角卡片套件、全大写眉标等），需求没要求时主动避开。
• 动效克制一次编排好的入场优于每个区块都淡入；回应用户操作的动效可以用。
• 边做边截图自查完成前对照截图删掉多余装饰：“出门前照镜子，摘掉一件配饰”。

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

npx skills add https://github.com/anthropics/skills/tree/main/skills/frontend-design

frontend-design 包含在 example-skills 插件里。Claude.ai 付费计划已内置这些示例技能。

品牌规范或 Figma 稿已经定死时，这个技能会推着 Agent 做出“与众不同”的选择，可能偏离规范；这时改用 web-design-guidelines 做规范审查更合适。它只给设计指导，不提供组件或代码模板。