做 AI 前端开发几乎所有人都踩同一个大坑：直接让 Claude 写页面，生成的 UI 全是 “AI 流水线塑料感”—— 统一蓝色主色、无层次卡片、敷衍阴影、千篇一律 Inter 字体、动效杂乱无章，看着能用，交付客户、上线官网完全拿不出手。 市面上 v0、Cursor 只能生成孤立页面片段，无法贴合现有项目设计规范，复制粘贴后样式冲突、目录混乱；而frontend-design 是 Anthropic 官方原生 Skill，托管在官方 skills 仓库（https://github.com/anthropics/skills/tree/main/skills/frontend-design），专为 Claude Code 打造，从设计美学、排版配色、动效规范、工程代码四层约束 AI 输出，彻底根除廉价 AI 界面。 本文从底层背景、源码解读、完整安装流程、全场景实战指令、横向竞品对比、踩坑避坑全维度拆解，纯生产硬核内容，所有命令、模板可直接复制运行。一、