1. 为什么前端页面总是「差点意思」，frontend-design 能补上哪一环

写前端的人大多遇到过这种场面：功能都跑通了，接口也联调完了，可页面一打开，自己都觉得像十年前的模板站。配色是随手挑的蓝加灰，字体是系统默认，布局是三张卡片横排，间距全靠感觉。代码没问题，问题出在设计决策上——选什么风格、用什么字体、留白留多少、动效怎么加，这些原本是设计师的活。

frontend-design 这个 skill 解决的正是这一环。它不是又一个帮你补全 HTML 标签的代码助手，而是把「设计思维」注入到 AI 的生成过程里：当你描述一个页面需求，它会先替你定风格方向、配色体系、字体搭配、布局节奏，再输出完整可运行的代码。换句话说，它让 AI 从「会写代码」变成「会做设计决策」。

这篇是安装与首次调用教程，覆盖三个主流平台：OpenClaw、Claude Code、Codex，并且把三端的 endpoint 与 API Key 统一收敛到 TaoToken，这样你只维护一份 Key，换平台不用重新申请。适合刚接触 AI 编程工具、想快速把 frontend-design 跑起来的开发者。全程命令可复制，配置片段可直接粘贴，最后会用一次真实的 frontend-design 生成请求验证三端都能正常返回结果。

在开始之前，先把环境底线确认一下。三个平台都要求网络能正常访问 npm 与 GitHub，磁盘至少留 500MB。Claude Code 需要 Node.js 18 及以上，Codex 支持 Linux/macOS/Windows 的 CLI 环境，OpenClaw 需要客户端已完成基础配置。不确定 Node 版本的话，先跑这两条：

node --version npm --version

如果提示找不到命令，去 nodejs.org 下载 LTS 安装包，一路下一步即可。版本低于 18 的，建议用 nvm 管理：

nvm install 18 nvm use 18

环境确认完，我们进入正题。下面每个平台都会给出安装命令、配置文件位置、最小可运行示例，以及如何把请求指向 TaoToken 的统一入口。

2. TaoToken 统一 Key 接入前置：Base URL、API Key 与模型 ID 怎么拿

三个平台如果各自配一套 Key，切换时最容易出错的就是「改了这个忘了那个」。TaoToken 的思路是提供一个统一的 API 入口，你只需要一份 Key，三端共用。它的官网是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 根地址是 https://taotoken.net/api 。

先拿 Key。打开控制台页面 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，登录后在 API Keys 区域创建一个新 Key。创建时建议按用途命名，比如frontend-design-test，方便后面区分。Key 只在创建时完整显示一次，复制后先存到安全的地方。

拿到 Key 之后，你需要记住三件套，后面三个平台的配置都围绕它们展开：

模型 ID 不确定选哪个的话，可以去模型对话页面 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite 实际发一条消息，页面上会显示当前可用的模型名称，把它记下来填到配置文件里即可。

这里有个容易踩的坑：Base URL 到底带不带/v1。不同客户端对路径拼接的处理不一样，有的会自动补/v1/chat/completions，有的需要你手动写全。TaoToken 的 API 根地址是https://taotoken.net/api，在 Claude Code 这类走 Anthropic 协议的客户端里，通常填根地址即可；在 Codex 这类走 OpenAI 兼容协议的客户端里，如果报 404，可以尝试在末尾补/v1。具体以你所用客户端的文档为准，本文后面每个平台都会给出对应写法。

另外提醒一句：Key 不要硬编码进会提交到 Git 的文件里。建议用环境变量或者单独的本地配置文件，并在.gitignore里排除。下面每个平台的配置我都会给出相对安全的写法。

3. 三平台可复制配置：OpenClaw、Claude Code、Codex 的安装与 settings 片段

这一节是全文的核心，三个平台分别给出安装命令、配置文件路径和可直接粘贴的配置片段。建议按你实际使用的平台挑一段操作，不要三端同时改，避免混淆。

3.1 OpenClaw 安装 frontend-design 与配置

OpenClaw 用户安装 frontend-design 最省事，直接在对话框里输入：

安装 frontend-design

系统会调起 skillhub 搜索并列出结果，找到 frontend-design 这条点安装，几秒后提示安装成功。如果提示找不到，先更新本地索引：

openclaw skills update

然后重新搜索安装。安装完成后，把 OpenClaw 的模型请求指向 TaoToken。OpenClaw 的配置文件通常在用户目录下的.openclaw/config.json，打开后找到 provider 相关字段，改成下面这样：

{ "provider": { "baseUrl": "https://taotoken.net/api", "apiKey": "sk-你的Key", "model": "你的模型ID" }, "skills": ["frontend-design"] }

保存后重启 OpenClaw 客户端。注意skills数组里要包含frontend-design，否则 skill 装了也不会被加载。

3.2 Claude Code 安装 frontend-design 与 settings.json 配置

Claude Code 走 npm 全局安装：

npm install -g frontend-design-skill

如果遇到 EACCES 权限报错，不要直接加 sudo 了事，更稳妥的做法是改 npm 全局目录：

mkdir -p ~/.npm-global npm config set prefix '~/.npm-global' echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc source ~/.bashrc

然后重跑安装命令。验证安装：

frontend-design --version

输出版本号说明装好了。接下来配置 Claude Code，配置文件通常在~/.claude/settings.json。Claude Code 走 Anthropic 协议，Base URL 填 TaoToken 根地址，同时把 skill 加进去：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "sk-你的Key", "ANTHROPIC_MODEL": "你的模型ID" }, "skills": ["frontend-design"] }

保存后重启 Claude Code。这里三件套齐全：Base URL、Key、Model ID 都在env里，缺一个都会导致请求失败。

3.3 Codex 安装 frontend-design 与 auth.json 配置

Codex 用户先确认 CLI 已安装：

codex --version

提示找不到命令的话，先去装 Codex CLI。然后安装 frontend-design：

codex install frontend-design codex skills enable frontend-design

验证：

codex skills list

看到 frontend-design 在列表里就成功了。Codex 的认证配置在~/.codex/auth.json，把请求指向 TaoToken：

{ "base_url": "https://taotoken.net/api/v1", "api_key": "sk-你的Key", "model": "你的模型ID" }

注意 Codex 走 OpenAI 兼容协议，这里 Base URL 末尾带了/v1。如果请求报 404，先把/v1去掉试试；如果报路径拼接错误，再补回来。这是三端里路径最容易出分歧的地方，实测时以能返回结果为准。

3.4 用 CC Switch 统一管理三端配置

如果你三端都在用，手动改三份配置很容易漏。CC Switch 可以把三端配置集中管理，一条命令切换。先确认版本：

ccswitch --version

低于 1.4.0 先更新：

ccswitch update

然后把 frontend-design 装到当前激活的平台：

ccswitch skills add frontend-design

它会自动识别你当前激活的是 OpenClaw、Claude Code 还是 Codex，把 skill 装到对应位置。验证：

ccswitch skills list

看到 frontend-design 前面有勾选标记即可。CC Switch 的价值在于：切换平台时 skill 配置跟着一起切，不需要记三套安装语法，也不需要重复填 Base URL 和 Key。

4. 验证请求：一次真实 frontend-design 生成请求跑通三端

配置改完，必须验证请求真的能通。这一步不要跳过，很多「装好了但用不了」的问题都出在这里。

先做一次最小连通性测试。以 Claude Code 为例，在终端里发一条简单请求：

claude -p "用一句话说明你能做什么"

如果返回正常文本，说明 Base URL 和 Key 都通了。如果报 401，说明 Key 有问题；如果报连接超时，说明 Base URL 或网络有问题。Codex 和 OpenClaw 同理，各自用最简命令测一次。

连通性通过后，做一次真实的 frontend-design 生成请求。在任意一个平台里输入：

帮我做一个个人作品集页面

不需要写专业术语，直接描述你想要的感觉就行。frontend-design 会先做设计决策，再输出代码。以「个人作品集页面」为例，它会分析需求选定一个设计方向，比如极简杂志风；决定配色方案，不只是蓝紫渐变；选一对有特色的字体组合；规划非对称布局，打破三卡片模板；再加一个入场动画。最后输出完整的 HTML/CSS/JS 代码。

判断是否成功，看三个信号：第一，返回内容里有明确的设计方向描述，而不是直接甩代码；第二，代码里有具体的配色值和字体名，不是#333加sans-serif这种默认值；第三，代码完整可运行，没有占位符或截图。

三端都跑一遍同样的请求，对比返回结果。如果三端都能返回有设计感的完整代码，说明统一 Key 接入成功。如果某一端返回空或者报错，回到第 5 节对照排查。

这里分享一个实测经验：三端里 Codex 的路径拼接最容易出问题，如果它返回 404，优先检查auth.json里 Base URL 末尾的/v1是否和你的客户端版本匹配。Claude Code 则更常见的是settings.json里env字段名写错，比如把ANTHROPIC_BASE_URL写成ANTHROPIC_BASE_URI，这种拼写错误不会报配置错误，只会静默走默认地址。

5. 本篇常见错排查：401、local proxy failed、reading choices、OAuth 对照

配置过程中最常见的几类报错，这里逐个对照给出排查方向。遇到报错先别急着重装，多数问题出在配置字段或路径上。

401 Unauthorized。这是 Key 相关错误，三种可能：Key 复制时带了空格或换行；Key 已失效或被删除；Key 填到了错误的字段。排查方法：去控制台重新复制一次 Key，确认粘贴时首尾没有空白字符。Claude Code 检查ANTHROPIC_API_KEY，Codex 检查auth.json里的api_key，OpenClaw 检查config.json里的apiKey。三端字段名不一样，别填串了。

local proxy failed。这个报错通常出现在客户端尝试走本地代理但代理没起来的时候。检查你的系统代理设置，确认没有残留的代理配置指向一个已经关闭的端口。如果你之前配过npm config set proxy，用下面命令清掉：

npm config delete proxy npm config delete https-proxy

然后重试请求。注意不要配置任何来路不明的代理，保持直连即可。

reading choices 相关报错。这类报错一般出现在解析响应体的时候，说明请求发出去了但返回结构不符合预期。常见原因是 Base URL 路径不对，客户端把/v1/chat/completions拼到了错误的根地址上。对照本文第 3 节，Claude Code 填https://taotoken.net/api，Codex 填https://taotoken.net/api/v1，改完重启客户端再试。

OAuth 相关报错。如果你在 Codex 或 Claude Code 里看到 OAuth 字样，说明客户端还在走它默认的登录鉴权流程，没有读取你配置的 Key。检查配置文件路径是否正确：Claude Code 是~/.claude/settings.json，Codex 是~/.codex/auth.json。文件放错目录等于没配。另外确认客户端版本支持通过配置文件覆盖鉴权，过旧的版本可能不支持。

skill 装了但不生效。OpenClaw 检查skills数组是否包含frontend-design；Claude Code 检查settings.json里有没有skills字段；Codex 用codex skills list确认已启用。CC Switch 用户如果切换平台后 skill 丢失，重启终端让环境变量生效。

Node 版本太低。frontend-design 要求 Node.js 18 以上，低于这个版本会在安装阶段就报错。用node --version确认，低于 18 的用 nvm 升级。

排查完还是不通的话，可以去接入文档页面 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 对照最新的配置说明，文档里的字段名和路径会随客户端版本更新。

6. 长期编码与 Agent 场景：把 frontend-design 接进日常工作流

三端跑通之后，frontend-design 真正的价值在于日常使用。它不是一次性工具，而是可以接进你现有工作流的常驻能力。

如果你主要做长期编码项目，建议把配置收敛到 Coding Plan 里统一管理。Coding Plan 页面 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 可以查看适合持续编码场景的接入方式，配合 CC Switch 做多平台切换，避免每次换项目都要重新配 Key。

日常使用 frontend-design 时，描述需求的方式决定了输出质量。不要写「做一个好看的页面」这种模糊指令，而是给出场景和感觉，比如「做一个适合设计师的深色主题作品展示页，要有杂志感」。frontend-design 会据此做设计决策，输出更贴近你预期的结果。

如果你在做 Agent 类项目，需要程序化调用模型，直接用 API 入口 https://taotoken.net/api 配合你的 Key 即可。API Keys 管理页面 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 可以创建和管理多个 Key，按项目隔离，方便追踪用量。

Claude Code 用户如果想把 frontend-design 用在更复杂的编码任务里，可以参考 ClaudeCodeAnthropic 接入说明 https://taotoken.net/doc/claudecode-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claudecode-anthropic&utm_campaign=rewrite ，里面有针对 Anthropic 协议的详细配置项，包括超时、重试等参数，适合需要稳定长连接的场景。

最后给一个实用建议：把三端的配置文件用 CC Switch 统一托管，Key 只存一份。这样换平台、换项目、换模型时，只改一处，三端同步生效。frontend-design 负责设计决策，TaoToken 负责统一接入，CC Switch 负责配置切换，三者配合下来，你只需要专注在「想做什么页面」这件事上。