frontend-design 是 Anthropic 发布的前端设计 Skill，适合用编程助手制作新界面或改造已有页面。它指导助手先决定页面的视觉方向、用业务需求审视方案，再写代码并检查成品；它不是现成组件库，也不会替你提供真实文案和素材。
安装：选择适合客户端的一条路径
Claude Code 官方插件。 在 Claude Code 中输入以下命令（不是在系统终端运行）：
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
Anthropic 的 example-skills 插件包含 frontend-design，也会安装该插件内的其他示例 Skill。安装后在对话里明确说“使用 frontend-design Skill”。
只在当前项目安装这一个 Skill。 在项目终端使用第三方 skills CLI：
npx skills@latest add anthropics/skills --skill frontend-design --agent claude-code
Codex 用户把末尾改为 --agent codex。这个命令从 Anthropic 仓库取 Skill 文件，但安装器由 Vercel Labs 维护；默认安装在当前项目，不等同于 Anthropic 的 Claude Code 插件。两条路径选一条即可。若助手找不到 Skill，先检查目标客户端和安装目录，开启新对话再试。
第一次使用：先要方案，暂不改代码
准备一个可运行的前端项目，并提供真实业务信息：读者是谁、页面要完成什么操作、现有技术栈、品牌规范、可用素材，以及不能改动的功能。下面以陶艺工作室预约页为例；把文件路径和内容换成自己的项目。时间、价格、地点尚未确定时应标为待确认，不要让助手编造。
使用 frontend-design 改造 app/page.tsx 的体验课预约页。读者是第一次接触陶艺的成年人；主要任务是了解课程并进入现有预约流程。沿用项目技术栈、现有预约入口和 public/studio 中已获授权的作品照片。没有提供的价格、时间和评价请标为待确认。
第一轮先不要改代码。请给出：
1. 页面任务、读者及首页第一屏应传达的内容；
2. 4–6 个有名称和十六进制色值的基础颜色，以及标题、正文和辅助文字的字体角色；
3. 一句话布局概念、对齐方式，并用简短 ASCII 线框比较两种信息排列；
4. 三条与这家工作室有关的设计原则。
然后对照需求检查方案：哪些颜色、卡片、标签或动效只是任何行业都能套用的默认做法？修正这些地方，说明改了什么及原因。等我确认方案后再实现。
第一轮的正常产物应是颜色、字体、线框和修订理由，而不是页面代码；若助手直接开始改文件，就请它停下，先补完方案。这里的重点不是要求助手“做得高级”，而是让方案解释为什么作品照片、课程信息和预约入口要这样安排。暖米色、陶土色或卡片并非禁用；只有确实符合品牌和内容时才采用。若把店名和照片换成另一种行业仍完全成立，就先调整信息结构与视觉重心。
确认后实现并检查
选定方向后，再给助手第二条任务：
按刚确认的方案实现页面，保留现有预约逻辑和项目约定。先检查真实文案与素材是否齐全；缺失处用明确的待确认占位，不写虚构评价。完成后运行项目已有检查并打开预览。若环境支持截图，请分别查看桌面和手机窄屏；检查主要按钮的实际去向、键盘 Tab 焦点、降低动态效果设置、文字可读性和空状态或错误提示。报告无法在当前环境验证的项目。
预览时按访客顺序走一遍：是否能看出是什么课程，找到时长、地点和费用，知道下一步会发生什么。按钮写“预约体验课”，进入的也应是预约流程；错误提示要说明如何重试，不能只写“出错了”。如果样式在不同区块互相覆盖，检查 CSS 选择器优先级，尤其是通用区块类与按钮、间距规则的交叉。截图仅在环境支持时进行，未看到页面就不要声称已经验收。
常见卡点
- 助手没调用 Skill： 确认安装的客户端与当前对话一致；插件和
skillsCLI 是不同安装路径。新开会话并明确点名frontend-design。 - 页面像模板： 先回到第一轮方案，删去无信息作用的编号、眉题、渐变和重复卡片；保留真正帮助读者判断与操作的结构。不要机械禁止某种字体或颜色。
- 布局好看但不好用： 检查移动端、键盘焦点、减弱动效、按钮结果和文案一致性。页面是否符合业务目标，要靠实际预览和操作路径判断。