1. 为什么我要拆 open-design 的 SKILL.mdClaude Design 开源复刻版里最值得研究的不是 UI而是SKILL.md这套配置骨架。它决定了 Claude Code 在 Next.js 项目里怎么被唤起、拿到哪些工具、按什么流程产出设计稿。我把它 clone 下来逐行读了一遍发现真正能复用的只有三块Skill 目录约定、Daemon 的 spawn 参数、以及settings.json里的模型通道配置。如果你正在用 Claude Code 做设计类工具或者想把 Claude Design 那套「问卷先行 确定性调色板 五维自检」搬到自己的 Next.js 项目里这篇会把可复制的片段直接给你。适合人群写过 Next.js、装过 Claude Code、想搞清楚 SKILL.md 到底怎么写才不会被 Agent 忽略的开发者。下面所有配置我都本地跑过命令可以直接抄。2. 前置TaoToken 统一 Key 与 Claude Code 接入open-design 的 Daemon 本质是child_process.spawn拉起你 PATH 里的 AI CLI。默认它会找claude、codex、gemini、cursor-agent。我这边用 Claude Code 作为主 Agent模型通道走 TaoToken 的统一 Key好处是一个 Key 同时覆盖对话、编码、Agent 三类调用不用在多个控制台之间切。先去控制台建一个 Key然后拿到 API 地址https://taotoken.net/api。Claude Code 侧需要两个环境变量ANTHROPIC_BASE_URL和ANTHROPIC_AUTH_TOKEN。注意 Base URL 不要带末尾斜杠也不要拼/v1Claude Code 会自己补路径。提示Key 只存在本地settings.json或 shell 环境里不要提交到 git。open-design 的.od/目录已经在.gitignore里但settings.json通常不在自己加一行。如果你还没建 Key入口在控制台的 API Keys 页面想先验证模型通不通可以直接用模型对话页发一条消息试试确认返回正常再往下配。3. 可复制配置SKILL.md 骨架 settings.json3.1 SKILL.md 的最小可用结构open-design 的 19 个 Skill 每个就是一个文件夹核心是SKILL.md。我提炼出的最小骨架如下放在skills/web-prototype/SKILL.md--- name: web-prototype description: 生成可交互的网页原型输出单文件 HTML artifact tools: Read, Write, Bash, WebFetch --- ## 何时使用 用户要求做网页原型、落地页草稿、交互 demo 时启用。 ## 执行流程 1. 先输出交互式问卷平台 / 目标用户 / 品牌色调 / 屏数 / 禁忌等用户填完再动笔。 2. 从 references/themes.md 读取确定性调色板OKLch 值与字体栈。 3. 读取 assets/template.html 作为 seed禁止从零手写结构。 4. 生成前做五维自检设计哲学 / 视觉层级 / 执行质量 / 方案精确性 / 克制程度各 1 分低于 3 分返工。 5. 输出 artifact 包裹的单文件 HTML。 ## 禁止清单 - 积极紫色渐变背景 - 泛滥 emoji 图标 - 圆角卡片 左侧色条装饰 - 把 Inter 当展示字体 - 编造指标数据没有就写 — 或灰色占位块关键点tools字段决定 Agent 能不能读assets/和references/。如果你漏写ReadAgent 会直接凭空生成模板和调色板全部失效。description要写清楚触发条件Claude Code 靠它做 Skill 路由。3.2 settings.json 接入 TaoTokenClaude Code 的配置文件放在项目根.claude/settings.json或者用户级~/.claude/settings.json。我用项目级方便和 open-design 一起版本管理{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-5, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-5 }, permissions: { allow: [Read, Write, Bash(pnpm:*), Bash(git:*)], deny: [Read(./.env), Read(./.od/**/secrets/**)] } }ANTHROPIC_SMALL_FAST_MODEL用于问卷解析、todo 更新这类轻量调用能明显压成本。permissions.deny里把.env和 secrets 目录挡掉避免 Agent 在 grep 时把 Key 读进上下文。3.3 Next.js 项目结构对照open-design 的 Web UI 是 Next.jsDaemon 和前端分离。我复刻时用的结构open-design-clone/ ├── apps/ │ └── web/ # Next.js 15 App Router │ ├── app/ │ │ ├── page.tsx # 欢迎 问卷入口 │ │ └── api/chat/route.ts # 流式转发到 Daemon │ └── components/ArtifactPreview.tsx ├── packages/ │ └── daemon/ # spawn Claude Code 的核心 │ └── src/spawn.ts ├── skills/ # 19 个 SKILL.md ├── design-systems/ # 71 个 DESIGN.md ├── .claude/settings.json └── .od/projects/id/ # Agent 工作目录Daemon 的 spawn 片段工作目录必须指向.od/projects/id/否则 Agent 的 Write 会污染项目根import { spawn } from node:child_process; import path from node:path; export function runAgent(projectId: string, prompt: string) { const cwd path.resolve(process.cwd(), .od/projects, projectId); const child spawn(claude, [-p, prompt, --output-format, stream-json], { cwd, env: { ...process.env }, stdio: [ignore, pipe, pipe], }); return child; }--output-format stream-json是让 Next.js 前端能流式渲染 todo 进度条的关键普通文本模式拿不到结构化事件。4. 验证请求本地启动与成功结果装依赖并启动git clone https://github.com/nexu-io/open-design.git cd open-design corepack enable pnpm install pnpm tools-dev run web环境要求 Node 24、pnpm 10.33.x。第一次启动 Daemon 会扫 PATH找到claude后加载 19 个 Skill 和 71 个设计系统.od/自动创建。验证模型通道是否走通单独发一条请求curl https://taotoken.net/api/v1/messages \ -H x-api-key: sk-你的Key \ -H anthropic-version: 2023-06-01 \ -H content-type: application/json \ -d { model: claude-sonnet-4-5, max_tokens: 128, messages: [{role: user, content: 回复 OK 两个字母}] }返回里content[0].text是OK就说明 Key 和地址都对。然后回到 UI输入「帮我做一个种子轮融资 Pitch Deck」正常表现是先弹问卷填完出现 todo 进度条流式更新最后artifact在沙箱 iframe 里渲染出设计稿。如果问卷没弹直接出稿说明 SKILL.md 的description没被路由到检查 frontmatter 格式。5. 本篇常见错排查报错spawn claude ENOENTDaemon 没在 PATH 里找到 Claude Code。用which claude确认如果是 nvm 装的Daemon 继承的 PATH 可能不含 nvm 目录在 spawn 的env.PATH里手动拼上。Skill 不生效、Agent 凭空生成九成是SKILL.md的 frontmatter 少了tools: Read或者description写得太泛比如只写「生成设计」路由匹配不上。改成具体触发词。401 / invalid api keyANTHROPIC_BASE_URL带了末尾斜杠或/v1。正确写法就是https://taotoken.net/api路径由 Claude Code 自己拼。问卷被跳过检查 SKILL.md 里「执行流程」第 1 步是否写成硬性规则。open-design 的做法是把问卷写进提示词门控不是建议。如果放在description里Agent 会当参考而不是必须执行。artifact 不渲染Next.js 的ArtifactPreview组件没做 sandbox iframe或者流式解析没识别artifact标签。先看 Daemon 的 stream-json 输出里有没有完整标签对。成本异常高ANTHROPIC_SMALL_FAST_MODEL没配所有轻量调用都走了主模型。补上后问卷解析和 todo 更新的开销会降一个量级。6. 继续往下走把 SKILL.md 和 settings.json 跑通之后下一步通常是两件事一是扩 SkillFork 一个dashboard改references/themes.md就能出自己品牌的调色板二是把 Agent 从单次对话升级成长期编码任务这时候用 Coding Plan 比按次调用更划算适合反复迭代设计稿的场景。接入文档里有完整的 Base URL、模型名和参数对照遇到 401 或路由问题先查那里。模型对话页可以快速验证某个模型名是否可用不用改代码。API Keys 页面管理 Key 的额度和轮换。整套配置的核心就一句SKILL.md 管流程settings.json 管通道Daemon 管工作目录三者对齐了Claude Design 那套体验在本地就能复刻出来。