1. 为什么你的 Claude Code 生成的前端总有一股“AI 味”如果你最近用 Claude Code 生成过页面大概率见过这种画面白底、紫蓝渐变、Inter 字体、卡片加圆角加阴影布局工整但毫无记忆点。这不是模型能力不行而是它默认走了一条“最安全”的审美路径——因为训练数据里这类页面最多模型自然倾向于复现它们。Anthropic 官方推出的 Frontend Design SKILL 就是冲着这个问题去的。它做的事情说起来很简单强制 Claude 在写第一行代码之前先明确一个大胆的美学方向然后所有排版、留白、字体、动效都必须围绕这个方向执行。它明确禁止了几样东西——Inter/Roboto/Arial 这类烂大街字体、紫色渐变配白底、千篇一律的卡片布局。这篇面向的是需要统一前端 UI 生成规范的开发者。我会给出可复制的 SKILL 配置文件骨架、settings.json 接入 TaoToken 统一 Key/API 通道的示例以及三步验证动作加载 SKILL、生成组件、比对 UI 输出一致性。整套流程在 Claude Code 终端环境里跑通VS Code 和 Cursor 的集成终端同样适用。2. 前置准备TaoToken 统一 Key 与 Claude Code 环境在配置 SKILL 之前先把 API 通道理顺。Claude Code 需要读取 Anthropic 兼容的 API 端点TaoToken 提供了统一的 Key 和 API 通道省去你分别管理多个供应商凭证的麻烦。你需要准备两样东西一个 TaoToken 的 API Key以及确认 Claude Code 已经装好。Key 在控制台的 API Keys 页面创建建议按项目建独立的 Key方便后续排查调用来源。拿到 Key 之后不要直接写死在代码里。Claude Code 读取的是settings.json把凭证放在这里SKILL 配置和模型调用就能共用同一条通道。下面这节给出完整配置。注意API Key 属于敏感凭证不要提交到 Git 仓库。建议在.gitignore里排除settings.json或使用环境变量注入。3. 可复制配置settings.json 接入 TaoToken 与 SKILL 骨架3.1 settings.json 接入统一 Key/API 通道Claude Code 的配置文件通常位于用户目录下的.claude/settings.json项目级配置则放在项目根目录的.claude/settings.json。项目级优先级更高适合团队统一规范。下面是一个可复制的骨架{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-your-taotoken-key-here, ANTHROPIC_MODEL: claude-sonnet-4-20250514 }, permissions: { allow: [ Read, Write, Edit, Bash(npx skills:*) ] } }这里ANTHROPIC_BASE_URL指向 TaoToken 的 API 端点ANTHROPIC_API_KEY填你在控制台创建的 Key。ANTHROPIC_MODEL按你实际可用的模型填写。permissions.allow里放开了npx skills相关命令这样安装 SKILL 时不会被权限拦截。配置完成后在终端里跑一次claude启动输入/status确认当前使用的端点和模型是否正确。如果显示的还是默认端点说明项目级配置没被读取检查一下文件路径和 JSON 格式。3.2 Frontend Design SKILL 配置文件骨架SKILL 的本质是一个带 frontmatter 的 Markdown 文件。官方版本通过npx skills add安装但如果你需要团队统一规范更推荐在项目里建一个自定义 SKILL把设计约束固化下来。目录结构如下mkdir -p .claude/skills/frontend-design然后在.claude/skills/frontend-design/SKILL.md写入--- name: frontend-design description: 团队前端设计规范强制美学方向先行禁止 AI 默认审美 --- # Frontend Design 规范 ## 执行顺序不可跳过 1. 先输出你选择的美学方向及 3 条理由 2. 再输出完整代码 3. 最后附 QA 检查清单 ## 美学方向必须选一个并贯彻 极致极简 / 野蛮主义 / 复古未来风 / 有机自然 / 奢华精致 / 趣味玩具感 / 杂志编辑风 / 装饰艺术 / 柔和粉彩 / 工业实用风 ## 硬性禁令 - 禁止使用 Inter / Roboto / Arial 字体 - 禁止紫色渐变 白底组合 - 禁止无差别的卡片 圆角 阴影布局 ## 设计要求 - 字体一个有性格的展示字体 一个精致的正文字体 - 色彩明确主色调 强烈对比色避免均匀分布 - 动效关键瞬间的动效而非零散小动效 - 空间大胆的不对称、重叠、对角线流动 - 背景渐变网格、噪点纹理、几何图案或透明叠加 ## 技术栈约束 - 框架Vue 3 Composition API TypeScript - 样式TailwindCSS 自定义设计 token - 组件不使用第三方 UI 库手写组件 - 必须处理 loading 和 error 状态 - 必须包含基础无障碍支持这个骨架把官方 SKILL 的核心方法论和团队技术栈约束合并在一起。name字段决定你调用时的命令名description帮助 Claude 判断何时触发。3.3 安装官方 SKILL 作为补充如果你还想用官方版本可以并行安装npx skills add anthropics/skillsfrontend-design安装后重启 Claude Code输入/就能在命令列表里看到/frontend-design。官方版和自定义版可以共存调用时用不同的命令名区分。4. 三步验证加载 SKILL、生成组件、比对一致性配置写完不算完得验证它真的生效了。下面三步是我实测下来最有效的检查流程。4.1 第一步验证 SKILL 加载在 Claude Code 会话里输入/查看命令列表。你应该能看到frontend-design。如果没出现按顺序排查文件路径是否为.claude/skills/frontend-design/SKILL.md、frontmatter 的---是否闭合、name字段是否和目录名一致。确认命令存在后直接调用一次/frontend-design 帮我做一个数据看板首页关键观察点Claude 有没有在写代码之前先输出美学方向如果没有说明 SKILL 内容没被正确读取或者被其他规则覆盖了。正常情况下它会先说“我选择杂志编辑风理由是……”然后再动手。4.2 第二步生成一个可对比的组件为了验证一致性我们需要一个固定的测试用例。用同一个 Prompt 生成两次对比输出差异。测试 Prompt 如下/frontend-design 在 src/components/DashboardHero.vue 中实现数据看板顶部区域 技术栈Vue 3 script setup TypeScript TailwindCSS 要求 - 展示 4 个核心指标卡片 - 每个卡片包含数值、标签、趋势箭头 - 响应式桌面 4 列 / 平板 2 列 / 手机 1 列 - 键盘可导航焦点指示器明显 - 页面加载时卡片依次淡入 - 尊重 prefers-reduced-motion 交付先输出美学方向及理由再输出完整代码最后附 QA 清单生成后检查几个硬性指标字体是不是避开了 Inter/Roboto/Arial背景是不是没有紫渐变白底布局有没有打破均匀网格动效是不是集中在加载瞬间而不是零散分布4.3 第三步比对 UI 输出一致性一致性验证的核心是同一个 SKILL 配置下不同时间、不同会话生成的输出是否遵循同一套设计约束。做法很简单——清空会话重新调用同一个 Prompt把两次生成的代码放在一起对比。重点比对这几个维度维度检查点合格标准字体展示字体 正文字体组合两次都不含禁用字体色彩主色调 对比色色系方向一致不随机漂移布局网格打破方式都体现不对称或重叠动效触发时机都集中在关键瞬间无障碍焦点环、语义标签两次都包含如果两次输出的美学方向完全不同说明 SKILL 的约束力不够需要在SKILL.md里把美学方向的选择规则写得更死比如“本项目固定使用杂志编辑风”。5. 本篇常见错排查5.1 SKILL 装了但 Claude 还是默认风格最常见的原因是 SKILL 没被加载。先确认/命令列表里有没有frontend-design。如果没有检查文件路径和 frontmatter 格式。如果有但调用后没输出美学方向可能是description字段写得太模糊Claude 没把它识别为设计类任务。把description改成更具体的触发描述比如“前端 UI 设计规范生成页面前必须选择美学方向”。另一个可能是项目级settings.json覆盖了用户级配置导致 SKILL 目录没被扫描到。确认.claude/skills/在项目根目录下而不是用户目录。5.2 VS Code / Cursor 扩展里看不到命令这是已知情况扩展面板可能显示不全。解决方法是用集成终端在 VS Code 里按Ctrl打开终端输入claude启动然后在会话里使用/frontend-design。终端环境下的命令列表是完整的。5.3 API 调用报 401 或 403先检查settings.json里的ANTHROPIC_API_KEY是否填对有没有多余空格。然后确认ANTHROPIC_BASE_URL指向的是https://taotoken.net/api不要带尾部斜杠。如果 Key 是在控制台刚创建的确认它没有被禁用或过期。可以在终端里用curl直接测一下端点连通性curl -X POST https://taotoken.net/api/v1/messages \ -H x-api-key: sk-your-key \ -H anthropic-version: 2023-06-01 \ -H content-type: application/json \ -d {model:claude-sonnet-4-20250514,max_tokens:64,messages:[{role:user,content:hi}]}返回正常说明通道没问题问题出在 Claude Code 的配置读取上。5.4 生成代码里出现禁用字体如果 SKILL 生效了但代码里还是出现 Inter说明禁令的优先级不够。在SKILL.md里把禁令放在最前面并用更强的措辞比如“以下字体出现即视为不合格必须替换”。另外可以在 Prompt 里显式重申一次禁令双重保险。6. 把 SKILL 接入你的日常编码流配置和验证跑通之后下一步是把它变成日常习惯。我的做法是在项目根目录的.claude/settings.json里固定好 TaoToken 通道和 SKILL 目录团队成员拉下代码就能用同一套规范。需要长期跑编码任务或 Agent 工作流的话可以在控制台里管理 Key 的配额和调用记录配合 Coding Plan 做更细粒度的资源分配。如果你只是想先验证模型输出效果可以直接在模型对话里试几个 Prompt对比开启 SKILL 前后的差异。接入文档里有完整的端点和参数说明排障时对着查更快。整套流程的核心就一句话Frontend Design SKILL 不是给模型加新能力而是给它加审美标准。先想清楚风格再动手写代码——这个顺序一旦固定下来输出的稳定性会明显提升。
