1. 同一句「做个小程序首页」为什么换三次模型还是那张脸如果你在 Claude Code 里反复让模型生成微信小程序首页多半遇到过这个场景第一版出来是紫色渐变背景、三张圆角卡片并排、标题默认走 Inter 字体不甘心换一版还是紫渐变再让它「高级一点」它给你加了一层玻璃拟态紫得更贵了。能点、能滚、能编译就是不像你自己的产品。这里有两个独立的问题被混在一起了一个是审美说明书缺失另一个是会话开销。前者决定页面好不好看后者决定你一次首页生成会消耗掉多少 Token。很多人只盯着前一个结果在 Claude Code 里来回改七八轮每一轮都把整页 WXML/WXSS 重写一遍Token 烧得飞快页面还是那股模板味。这篇文章给你一套可以今天就跑通的方案TaoToken 提供模型接入Key 从官网自助申请Base URL 统一走https://taotoken.net/apiClaude Code 负责执行frontend-design这类 Skill 放在 Claude 的 skills 目录里当审美说明书。最后产出的东西是可复现的——一个竖屏、克制、完全没有紫渐变的小程序首页。TaoToken 官网在这里注册、看模型列表、拿 Key 都在同一个站内完成https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentminiapp-ugc-intro先把结论摆出来后面每一步都可以照抄把 Skill 落到 Claude Code 能扫到的 skills 目录项目级或用户级都行不要让审美约束停留在聊天记录里把 TaoToken Key 和 Base URL 写进settings.json的env段跟 skills 目录同级管理换工具、换项目都不用重配首页生成走「先出设计简报 → 确认 → 再写代码 → 拆组件 → 体感自检 → 终审」六步而不是一句话让模型一口气写完每一步都控制上下文增量避免整页重写这是省 Token 最有效的手段比换模型管用。2. TaoToken Key 与 skills 目录同级Claude Code 的 Base URL 落法Claude Code 走的是 Anthropic 协议配置入口是settings.json。你可以放在用户级~/.claude/settings.json也可以放在项目级项目根目录下的.claude/settings.json。项目级的优先级更高适合「这个仓库固定用某套模型」的场景。配置长这样把占位符替换成你自己的值即可{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: claude-sonnet-4-5, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-5, ANTHROPIC_DEFAULT_HAIKU_MODEL: claude-haiku-4-5 } }几个容易踩错的点Base URL 只写到/api不要自己补/v1。Claude Code 的 Anthropic 协议路径是它自己拼的多写一段会直接 404。很多人在这一步怀疑 Key 有问题其实是地址尾巴多加了字符。如果你用的客户端明确要求 OpenAI 兼容路径那属于另一套配置不要混着抄。ANTHROPIC_AUTH_TOKEN和ANTHROPIC_API_KEY不要同时写。两个都存在时不同版本的行为不一致容易出现「明明填了 Key 却报未授权」。二选一推荐用AUTH_TOKEN。模型名以控制台里的实际 ID 为准。上面写的claude-sonnet-4-5/claude-haiku-4-5是示例你在模型列表里看到的完整 ID 是什么就写什么。SMALL_FAST_MODEL负责补全、文件摘要这类轻量任务把它指向小模型一次会话能省下相当一部分开销。如果你习惯用环境变量而不是配置文件等价写法是export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELclaude-sonnet-4-5配置文件和环境变量同时存在时配置文件的env段会覆盖同名变量排查问题时先确认哪一层在生效。不想手改文件的话也可以用 CC Switch 这类多供应商切换工具。它本质上是帮你管理三件套Base URL、API Key、模型 ID。三件套对齐之后Claude Code、Codex 之间来回切就不会串台——尤其注意 Codex 用的是config.toml走的是另一套字段绝对不要把ANTHROPIC_*那组变量塞给 Codex那是两套协议。Codex 侧的最小配置参考路径通常是~/.codex/config.tomlmodel gpt-5-codex model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api/v1 env_key TAOTOKEN_API_KEY wire_api responsesCodex 这一侧的具体路径和wire_api取值以你控制台或文档页给出的为准不同版本会有差异。原理记住一条就行Claude Code 认ANTHROPIC_*Codex 认config.toml两边别互相抄。Key 到控制台自助创建页面在这里https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentminiapp-ugc-keys拿到 Key 之后先别急着跑首页生成用一条最便宜的请求验证通路。最简单的方式是直接在模型对话页发一句「回复 ok」能回就说明 Base URL、Key、模型名三者对上了https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentminiapp-ugc-chat3. 在 Claude Code 的 skills 目录里落一个 frontend-designClaude Code 的 Skill 有两种放置层级用户级~/.claude/skills/skill-name/SKILL.md所有项目都能用项目级项目根/.claude/skills/skill-name/SKILL.md跟着仓库走团队共享。做小程序首页这种「一个仓库一套视觉规范」的事推荐项目级。目录结构大概是这样my-miniapp/ ├── .claude/ │ ├── settings.json # TaoToken Base URL Key │ └── skills/ │ ├── frontend-design/ │ │ └── SKILL.md # 定方向出设计简报 │ ├── ui-ux-pro-max/ │ │ └── SKILL.md # 查参数配色/字体/字号层级 │ ├── composition-patterns/ │ │ └── SKILL.md # 理结构拆自定义组件 │ └── web-design-guidelines/ │ └── SKILL.md # 终审可读性/触控/层级 ├── pages/ │ └── index/ │ ├── index.wxml │ ├── index.wxss │ ├── index.js │ └── index.json └── app.jsonSKILL.md的最小骨架重点是 frontmatter 里的name和description——Claude Code 靠这两项判断什么时候该触发这个 Skill。描述里写清楚触发场景比正文写一万字都有用--- name: frontend-design description: 在写页面代码之前先产出可确认的设计简报。适用于微信小程序首页、产品官网首页、落地页等界面生成任务尤其适合需要克制、竖屏友好、避免模板化视觉的场景。 --- # frontend-design ## 目标 在生成任何页面代码之前先输出一份设计简报覆盖气质、字体、主色、布局密度、禁止项。 ## 硬性要求 1. 简报必须是 8 行左右的可执行条目不要写形容词堆砌。 2. 必须显式列出「禁止项」。 3. 用户确认简报之前不得输出任何 WXML / WXSS / JS 代码。 ## 输出格式 - 页面类型与目标用户 - 视觉气质用可对齐的参照物描述不用「高级」「大气」 - 字体策略中文字体、数字字体、字重层级 - 主色 / 辅色 / 背景色给具体色值 - 首屏信息密度几屏、几个信息块 - 交互意图底部 Tab、下拉、悬浮按钮是否存在 - 禁止项不少于 3 条 - 验收标准怎么判断这版不算模板脸把frontend-design这个 Skill 装进去之后你在 Claude Code 里说的第一句话就不该是「帮我写个首页」而是「按 frontend-design 出一份设计简报」。这两句话的差别直接决定了后面几轮会话的 Token 消耗曲线。顺带说一句ui-ux-pro-max这类参数查询型 Skill 有个使用要点问句里必须带平台。你问「给我一套配色」它给的是通用方案你问「给微信小程序查一套视觉方案」它才会输出竖屏密度、字号层级、热区相关的参数。这个细节不写清楚产出会偏 Web 端。Skill 目录本身也是要跟着仓库提交的所以「Key 放在 skills 目录旁」这件事不是修辞——.claude/settings.json和.claude/skills/就在同一层一个管接入一个管审美边界清晰迁移项目时整包拷走就行。4. 八行设计简报把「竖屏克制、无紫渐变」变成可执行约束「克制」「别太花」这类词对模型来说是无效指令因为它没有可校验的边界。有效指令必须是可判定的。在 Claude Code 里你可以直接把这段话发给frontend-design按 frontend-design 做一版微信小程序首页工具类个人开发。 先给 8 行设计简报竖屏、克制、好扫、底部 Tab 意图、禁止项确认后再写代码。 不要紫渐变不要三列均等大卡片堆满首屏。一份能用的简报大概长这样注意每条都是可以被检查的1. 页面类型工具类小程序首页单列竖屏主推一个核心功能入口。 2. 视觉气质接近纸质手册排版留白多、边界弱、层级靠字重和间距区分。 3. 字体正文使用系统默认中文字体数字使用等宽字体字重只用 400 与 600 两档。 4. 配色背景 #FAFAF8主文字 #1C1C1E次文字 #6B6B70强调色 #2F6B4F无渐变。 5. 首屏密度首屏只放 1 个标题 1 个主操作 2 行说明不出现卡片网格。 6. 交互意图底部 Tab 三个首页为默认主操作按钮固定在首屏可视区内。 7. 禁止项不使用紫色系、不使用玻璃拟态、不使用三列等宽卡片、不使用大面积投影。 8. 验收标准首屏在 375×667 下不出现横向滚动任意两段文字对比度不低于 4.5:1。这份简报的价值在于它把「审美」翻译成了模型能执行的约束也翻译成了你后面能验收的清单。等页面生成出来你不用凭感觉说「好像还是有点丑」而是逐条对照。确认简报之后再让模型写代码。这一步的关键是把「写代码」和「定方向」拆成两次请求——方向错的时候你只花了一份简报的 Token 就发现了而不是等整页 WXML 生成完才发现配色走偏。5. 五步工作流在 Claude Code 里的串法单个 Skill 解决单个问题串起来才是流水线。推荐顺序是定方向 → 查参数 → 写页面 → 拆组件 → 顺体感 → 终审对应到 Claude Code 的实际操作# 第 1 步定方向 按 frontend-design 做一版微信小程序首页工具类。 先给 8 行设计简报我确认后再写代码。 # 第 2 步查参数简报里配色/字号不确定时 用 ui-ux-pro-max给个人工具类微信小程序查一套视觉方案。 输出风格关键词、主色辅色、字号层级、首页密度注意、2 条别做。 把结果写进 DESIGN.md后续以 DESIGN.md 为准。 # 第 3 步写页面 按 DESIGN.md 生成 pages/index 的 WXML 与 WXSS。 只生成首页不生成设置页不引入 UI 组件库。 # 第 4 步拆组件 用 composition-patterns 思路审 pages/index。 指出该拆哪些自定义组件、哪些数据不该堆在页面里。 先给重构清单确认后再改不要顺手改视觉样式。 # 第 5 步顺体感 检查 pages/index 的体感问题。 优先找多余 setData、列表卡顿、首屏请求瀑布、图片过大。 输出问题 → 小改法不改结构。 # 第 6 步终审 对照可读性 / 触控 / 信息层级审 pages/index。 按必须改 / 建议改列出关注对比度、按钮热区、字号是否好扫。注意第 4 步里那句「不要顺手改视觉样式」。这是把composition-patterns这类重构型 Skill 用好的关键——重构和改样式混在一次请求里模型很容易顺手把布局也动了前两步的设计简报就白做了。react-best-practices那类性能 Skill 主要是给 Web 端 React 项目用的。做原生小程序时借鉴的是它的检查思路把「多余 setData」「首屏请求瀑布」「列表渲染开销」当成同等级的问题来处理而不是直接把 React 的规则套到 WXML 上。卡住的点 优先用 先别急着做 出来像模板脸 frontend-design 堆 UI 组件库皮肤 说不清配色字号 ui-ux-pro-max 空喊「高级感」 改一处全局炸 composition-patterns 大范围改视觉 滚动卡顿 体感自检参照性能清单 直接换框架 上线前不放心 web-design-guidelines 在空白页上盲审这张表可以贴在仓库 README 里团队里谁在 Claude Code 里卡住了先查表再动手。6. 一次首页生成到底花掉多少 Token回到那个视角Claude Code 的页面生成会话本身就在消耗 Token而且前端生成是典型的「上下文膨胀型」任务。一次典型的三轮会话Token 大概花在这些地方第一轮系统提示 Skill 描述 你的需求。Claude Code 会把可用 Skill 的name和description注入上下文Skill 越多这部分固定开销越大。所以别把几十个用不上的 Skill 全塞进.claude/skills/只留当前项目用得到的。第二轮设计简报。这一轮输出很短几百 Token 量级但它能挡住后面最大的一笔浪费。第三轮整页 WXML WXSS JS。这是大头。一个信息密度中等的小程序首页WXML 加 WXSS 很容易写到几百行模型按行输出Token 是实打实按量算的。真正的浪费发生在第四轮之后你说「配色再淡一点」模型把整页代码重写一遍你说「卡片改成两列」它再重写一遍。每一轮都是全量输出而实际改动的可能只有十几行。七十轮下来Token 消耗和产出质量完全不成比例。几个能立刻见效的省法先简报后代码。方向错了只损失一份简报的钱而不是整页代码。按文件分次生成。先让模型只出 WXSS 变更片段确认后再落盘而不是每次全量重写。把项目规范写进DESIGN.md或CLAUDE.md。让规范成为可复用的上下文而不是每轮对话里重新描述一遍「不要紫渐变」。小模型干轻活。文件摘要、命名建议、注释补全这类任务交给ANTHROPIC_SMALL_FAST_MODEL指向的小模型。会话及时收口。一个功能做完就新开会话别让首页生成的上下文一直挂着后面做设置页时还在为前面的历史买单。web-design-guidelines这类终审 Skill 放在最后一步用也是同理它的输出是清单形式Token 消耗低但能挡住上线后的返工。7. 可复现产出竖屏克制风格的首页骨架按上面的流程走完落到代码上大概是这样。先看 WXML结构极简没有卡片网格!-- pages/index/index.wxml -- view classpage view classhero text classhero-title格式转换/text text classhero-sub本地处理不上传文件/text /view view classprimary-action bindtaponPickFile text classaction-text选择文件/text /view view classhint text classhint-line支持 PDF / DOCX / Markdown/text text classhint-line单文件不超过 20MB/text /view view classrecent wx:if{{recentList.length 0}} text classsection-title最近处理/text view classrecent-item wx:for{{recentList}} wx:keyid text classrecent-name{{item.name}}/text text classrecent-time{{item.time}}/text /view /view /viewWXSS 对应地保持克制无渐变、无大面积投影、层级靠字重和间距/* pages/index/index.wxss */ .page { min-height: 100vh; padding: 48rpx 40rpx; background: #FAFAF8; box-sizing: border-box; display: flex; flex-direction: column; } .hero-title { font-size: 48rpx; font-weight: 600; color: #1C1C1E; letter-spacing: 0.5rpx; } .hero-sub { display: block; margin-top: 16rpx; font-size: 26rpx; color: #6B6B70; } .primary-action { margin-top: 72rpx; height: 96rpx; border-radius: 8rpx; background: #2F6B4F; display: flex; align-items: center; justify-content: center; } .action-text { color: #FFFFFF; font-size: 30rpx; font-weight: 600; } .hint { margin-top: 24rpx; } .hint-line { display: block; font-size: 24rpx; color: #6B6B70; line-height: 40rpx; }页面逻辑只保留必要的数据避免首屏一次性把列表、配置、用户信息全塞进data——这是第 5 步体感自检要抓的典型问题// pages/index/index.js Page({ data: { recentList: [] }, onLoad() { this.loadRecent(); }, async loadRecent() { const res await wx.getStorage({ key: recent_files }).catch(() null); this.setData({ recentList: (res res.data) || [] }); }, onPickFile() { wx.chooseMessageFile({ count: 1, type: file, success: (res) { const file res.tempFiles[0]; wx.navigateTo({ url: /pages/convert/index?path${encodeURIComponent(file.path)} }); } }); } });判断这版首页算不算达标可以按简报里的验收标准过一遍375×667 下无横向滚动主操作按钮在首屏可视区内文字对比度不低于 4.5:1没有出现紫色系、玻璃拟态、三列卡片。这几条都过了说明 Skill 的约束真的生效了而不是模型偶尔发挥好。8. 配置与排障几类最容易卡住的情况报未授权401 / authentication_error。按顺序查三件事Key 是否是控制台里当前有效的那个ANTHROPIC_AUTH_TOKEN和ANTHROPIC_API_KEY是否同时存在请求头里的 Key 前面是否误加了Bearer前缀Anthropic 协议的x-api-key和Authorization用法不同交给客户端处理不要手拼。报 404 / not_found。九成是 Base URL 写多了。Claude Code 只写到https://taotoken.net/api不要补/v1、不要补/messages路径由客户端自己拼。模型不存在。ANTHROPIC_MODEL里写的是控制台展示的完整 ID不是简称。换模型时把ANTHROPIC_MODEL和ANTHROPIC_SMALL_FAST_MODEL一起更新否则轻量任务会去请求一个不存在的模型 ID。Skill 不触发。Claude Code 靠description匹配意图。如果你说「帮我做个首页」它不加载frontend-design就换一种说法把 Skill 名字显式说出来例如「按 frontend-design 出简律」——显式点名比依赖自动匹配稳。配置改了不生效。项目级.claude/settings.json覆盖用户级~/.claude/settings.json环境变量又被配置文件覆盖。排查时从外往里查先看 shell 里的ANTHROPIC_*再看用户级最后看项目级。切换工具后配置串了。Claude Code 和 Codex 不共用配置。切换时确认三件套Base URL、Key、模型 ID整体切换不要只改其中一项。用 CC Switch 这类工具的时候切换完记得重启一下编辑器内的终端会话避免旧环境变量还挂在进程里。配好之后建议先跑一次最小验证在 Claude Code 里让它读一个文件、改一行注释。这一步能过说明接入层没问题再去跑首页生成就不会把配置问题和审美问题混在一起排查了。9. 从这里开始动手完整的路径其实只有四步先进模型对话页用一句最简单的请求确认 Key 和 Base URL 通了再从 API Keys 页面创建一把专供 Claude Code 用的 Key别和别的工具复用然后把.claude/settings.json和.claude/skills/frontend-design/SKILL.md一起写进项目最后按「先简报、后代码、再拆组件、最后终审」的顺序跑一遍首页生成。模型对话页先验证通路https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentminiapp-ugc-chat创建 API Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentminiapp-ugc-keysClaude Code 接入文档协议、字段、模型 ID 以这里为准https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentminiapp-ugc-docCoding Plan首页生成这类高频会话场景可以先看这里的用量说明https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentminiapp-ugc-plan官网入口再放一次注册、模型列表、控制台都在站内https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentminiapp-ugc-config界面从能用到能看很少靠一句「再美一点」。方向有人拍板、参数有据可查、结构拆得开、体感说得清、上线前有清单——这五件事在 Claude Code 里就是五个 Skill、五段提示词、一个.claude目录。把它们固定下来下次做设置页、详情页你复制的是流程不是又一轮试错。