尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

pages/index/index 页面结构,Claude Code 的模型入口交给 TaoToken

发布时间:2026/9/18 14:21:47

资讯中心
01
ARTICLE

pages/index/index 页面结构,Claude Code 的模型入口交给 TaoToken

pages/index/index 页面结构,Claude Code 的模型入口交给 TaoToken
1. 从 pages/index/index 的 401 和 TypeError 说起先分清 Skill 与模型入口你在 Claude Code 里让wechat-miniprogram-prompts给pages/index/index设计页面结构Skill 确实路由到了 02 阶段但模型请求却返回401 invalid x-api-key真机那边又报TypeError: Cannot read property amount of undefined——这两个问题的根因完全不同。前者是模型入口没换后者才是小程序数据没做兜底。模型入口建议直接交给 TaoToken官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentpages-index-introBase URL 用https://taotoken.net/apiKey 先用YOUR_API_KEY占位。很多小程序开发者装 Agent Skill 时会把“Skill 没生效”和“模型没配好”混在一起排查。实际上Skill 决定的是“Agent 该读哪条提示词模板、该在什么阶段提醒你什么”模型入口决定的是“这次对话的 Token 从哪个供应商出”。你可以在 Cursor、Codex、Claude Code 三端共用同一个wechat-miniprogram-prompts文件夹但三端的模型配置格式并不一样Claude Code 走settings.json和ANTHROPIC_*Codex 走config.toml和model_providers绝不能把ANTHROPIC_BASE_URL那套原样塞进 Codex。这篇内容按 CSDN 技术博客的可复现思路来写先给你SKILL.md与templates.md的最小目录再写install-all.ps1一键安装三端接着把 Claude Code 的模型入口切到 TaoToken再把 Codex 的config.toml配好最后用财务工具小程序跑一遍01 → 02 → 03 → 04 → 05 → 06并给出/doctor验证与报错前后对照。你不需要翻旧文章找模板重点是把 Skill 的路由逻辑和模型 Key 的接入路径同时跑通。2. wechat-miniprogram-prompts 的最小可复现目录SKILL.md 与 templates.md 各管什么把提示词模板打包成 Agent Skill不是把文章复制进一个 txt。更准确的理解是给助手一份“岗位说明书”里面写清楚什么时候该做需求拆解、什么时候该画页面结构、什么时候该提醒你别一次改三个页面。分享包的核心目录应该长这样wechat-miniprogram-prompts-package/ ├── README.md ├── install-all.ps1 ├── install-cursor.ps1 ├── install-codex.ps1 ├── install-claude.ps1 └── skill/ └── wechat-miniprogram-prompts/ ├── SKILL.md └── templates.md其中SKILL.md负责触发、路由、行为规则和常见坑templates.md负责存 6 类模板原文与填好占位符的示例。Claude Code 识别 Skill 时通常需要SKILL.md带 frontmatter目录名保持wechat-miniprogram-prompts不变。最小SKILL.md可以这样写--- name: wechat-miniprogram-prompts description: 微信小程序开发提示词路由覆盖需求拆解、页面结构、单功能实现、报错修复、合规检查、提审自查。 --- # 微信小程序提示词路由 ## 三条原则 1. 先确认阶段再输出提示词。 2. 一次只处理一个页面或一个功能。 3. 报错必须带完整信息、复现步骤和期望结果。 ## 阶段路由 - 01 需求拆解用户只有模糊想法时触发。 - 02 页面结构用户提到某个页面例如 pages/index/index。 - 03 单功能实现用户要新增、编辑、删除、统计某个功能。 - 04 报错修复用户给出报错、堆栈、真机现象。 - 05 合规检查类目、隐私、个人主体限制。 - 06 提审自查主功能可用、真机路径、提审清单。 ## 行为规则 - 默认只生成提示词不直接进入实现阶段。 - 用户明确说“直接实现”时才输出代码修改建议。 - 缺少关键信息时先追问不替用户编造业务目标。 ## 常见坑 - 别让助手同时改 app.json 和多个页面。 - 别只说“坏了帮我修”要给报错原文和复现步骤。 - 模板不能替代真机自测。templates.md不需要每次全部加载它更像按需查阅的模板库。目录可以按阶段拆# templates.md ## 01 需求拆解 - 目标用户 - 核心问题 - 主体类型 - 是否云开发 - 第一版 1~2 个功能 ## 02 页面结构 - 页面路径pages/index/index - 页面目标 - 数据来源 - 交互路径 - 空态、异常态、加载态 ## 03 单功能实现 - 功能名称 - 输入输出 - 验收标准 - 不破坏已有功能 ## 04 报错修复 - 报错原文 - 复现步骤 - 期望结果 - 已尝试方案 ## 05 合规检查 - 服务类目 - 隐私协议 - 个人主体限制 ## 06 提审自查 - 主功能可用 - 真机测试路径 - 10 分钟行动清单这样拆的好处是当你说“给pages/index/index设计页面结构”Agent 只读 02 相关部分不会把 6 类模板全塞进上下文。上下文越干净模型越容易稳定输出同时 Token 消耗也更可控。Skill 本身不产生 Token真正产生 Token 的是 Agent 调用模型生成提示词、改写提示词、补全占位符的过程。所以安装完 Skill 后第一次调用模型前要先去 TaoToken 官网取 Keyhttps://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentskill-minimal-dir Base URL 保持https://taotoken.net/api。3. 三端安装install-all.ps1 一键复制Cursor/Codex/Claude Code 目录不要放错如果你拿到的是wechat-miniprogram-prompts-packageWindows 下最省事的方式是在包目录里打开 PowerShell跑一键脚本。脚本逻辑并不复杂把skill/wechat-miniprogram-prompts分别复制到 Cursor、Codex、Claude Code 的 Skill 目录。示例# install-all.ps1 $ErrorActionPreference Stop $SkillName wechat-miniprogram-prompts $Source Join-Path $PSScriptRoot skill\$SkillName if (-not (Test-Path $Source)) { throw 未找到 skill 目录$Source } $Targets ( { Name Cursor; Path Join-Path $HOME .cursor\skills\$SkillName }, { Name Codex; Path Join-Path $HOME .codex\skills\$SkillName }, { Name Claude; Path Join-Path $HOME .claude\skills\$SkillName } ) foreach ($t in $Targets) { $parent Split-Path $t.Path -Parent New-Item -ItemType Directory -Force -Path $parent | Out-Null Copy-Item -Path $Source -Destination $t.Path -Recurse -Force Write-Host 已安装到 $($t.Name)$($t.Path) } Write-Host 验证确认 SKILL.md 与 templates.md 均存在。也可以单独安装对应install-cursor.ps1、install-codex.ps1、install-claude.ps1。手动安装时三端路径要分清工具推荐目录说明Cursor 个人~/.cursor/skills/wechat-miniprogram-prompts/所有项目可用推荐Cursor 项目项目根/.cursor/skills/wechat-miniprogram-prompts/可提交 git团队共享Codex 个人$CODEX_HOME/skills/wechat-miniprogram-prompts/默认$CODEX_HOME是~/.codexClaude Code 项目项目根/.claude/skills/wechat-miniprogram-prompts/目录名即斜杠命令名Claude Code 个人~/.claude/skills/wechat-miniprogram-prompts/全局可用Cursor 注意不要放到~/.cursor/skills-cursor/那是 Cursor 内置目录不是用户 Skill 目录。安装后重启 Cursor或者新开一轮 Agent 对话。Codex 安装后下一轮对话即可使用。Claude Code 会自动监听 skill 目录变更如果目录是新建且当前会话已经启动重启 Claude Code 会话更稳。Claude Code 里可以用/doctor检查 Skill 是否被识别。安装后先确认两个文件都在Get-ChildItem $HOME\.claude\skills\wechat-miniprogram-prompts期望看到SKILL.md templates.md如果/doctor不显示wechat-miniprogram-prompts先查目录名是否被改成了wechat-miniprogram-prompts-main或prompts。目录名建议保持wechat-miniprogram-prompts不变斜杠命令才会稳定对应。4. Claude Code 的模型入口交给 TaoTokensettings.json 与 CC Switch 三件套Skill 装好只是第一步。Claude Code 默认会尝试走 Anthropic 官方入口如果你没有可用额度或 Key就会在调用模型时失败。把模型入口交给 TaoToken推荐改~/.claude/settings.json用env字段注入环境变量。最小示例{ 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 } }这里就是很多开发者说的“CC Switch 三件套”Base URL、API Key、默认模型。Claude Code 对应的是ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN、ANTHROPIC_MODEL。如果你的 Claude Code 版本还读取ANTHROPIC_API_KEY也可以同时保留但不要写错变量名。Base URL 必须是https://taotoken.net/api不要多加路径也不要在这里加 UTM 参数。UTM 只用于官网领取 Key 的页面https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentclaude-code-settings-json 。如果你不想改全局settings.json也可以在 PowerShell 当前会话临时注入$env:ANTHROPIC_BASE_URL https://taotoken.net/api $env:ANTHROPIC_AUTH_TOKEN YOUR_API_KEY $env:ANTHROPIC_MODEL claude-sonnet-4-5 $env:ANTHROPIC_SMALL_FAST_MODEL claude-haiku-4-5 claudeBash 环境export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELclaude-sonnet-4-5 export ANTHROPIC_SMALL_FAST_MODELclaude-haiku-4-5 claude配完后在 Claude Code 里输入/doctor除了看 Skill 是否被识别也要看模型连接是否正常。可以继续输入/wechat-miniprogram-prompts然后说给 pages/index/index 设计页面结构。如果 Skill 正常加载Claude Code 应该进入 02 阶段并提醒你一次只做一个页面。如果返回401优先查ANTHROPIC_AUTH_TOKEN是否还是占位符如果返回404优先查ANTHROPIC_BASE_URL是否漏了/api如果一直转圈检查本机是否还有旧的代理环境变量覆盖了当前配置。5. Codex 接 TaoTokenconfig.toml 写 base_url 和 env_key别照抄 ANTHROPIC_*Codex 的配置文件和 Claude Code 完全不同。不要把ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN写进 Codex 的config.toml那样不会生效。Codex 走的是model_providers结构。示例~/.codex/config.tomlmodel YOUR_MODEL_ID model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api responses # 如果当前版本或模型要求 chat则改为 chat其中model填你在 TaoToken 模型列表里选定的模型 ID不要直接照抄别人的模型名。env_key写的是环境变量名不是 Key 本身。然后在本机设置环境变量setx TAOTOKEN_API_KEY YOUR_API_KEY或者 Bashexport TAOTOKEN_API_KEYYOUR_API_KEY重启终端后Codex 会从TAOTOKEN_API_KEY读取 Key请求发往https://taotoken.net/api。如果你在 Codex 里安装wechat-miniprogram-prompts个人目录是$CODEX_HOME/skills/wechat-miniprogram-prompts/。默认$CODEX_HOME是~/.codex所以完整路径通常是~/.codex/skills/wechat-miniprogram-prompts/SKILL.md ~/.codex/skills/wechat-miniprogram-prompts/templates.mdCodex 常见错误也有区分如果提示找不到 provider检查model_provider taotoken和[model_providers.taotoken]是否拼写一致如果提示 401检查TAOTOKEN_API_KEY是否在当前终端可见如果提示 404检查base_url是否是https://taotoken.net/api以及wire_api是否与当前 Codex 版本匹配。需要新建或查看 Key 时从 TaoToken 官网进入https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentcodex-config-toml 。6. 用财务工具小程序跑 01→06pages/index/index 只是 02 阶段的一个输入装好 Skill、配好模型入口后用一个连贯案例看它怎么路由。你说我想做一个财务工具小程序。Skill 识别为 01 需求拆解不会直接进入页面实现而是先追问目标用户是谁 核心问题是记账、预算、报表还是对账 个人主体还是企业主体 是否使用云开发 第一版最想保留的 1~2 个功能是什么你补充个人用户记账太麻烦不用云开发第一版要快速记账和月度统计。Agent 输出结构通常是【选用模板】01 需求拆解 【可直接复制的提示词】已填好项目名称、用户、核心问题、主体类型、云开发选择、MVP 功能。 【注意事项】不要一上来就说“帮我做小程序”。 【下一步建议】需求确定后进入 02 页面结构。你把这段提示词交给模型得到功能清单、页面规划、MVP 建议。接下来你说给 pages/index/index 设计页面结构。Skill 路由到 02并提醒一次只做一个页面不要同时改app.json 三个页面。这个阶段需要的不是“首页全部代码”而是页面目标、数据来源、交互路径、空态、异常态、加载态。你可以继续要求它输出请只针对 pages/index/index给出 1. 页面目标 2. 需要的数据字段 3. 用户操作路径 4. 空态与异常态 5. 下一步需要实现的单一功能需求定了以后你说实现新增一笔支出的功能。Skill 路由到 03 单功能实现生成的提示词会自带验收标准主路径能走通、异常有提示、不破坏已有功能。你要自己当 QA 点一遍Skill 不会替你省略真机测试。出问题时真机报TypeError: Cannot read property amount of undefinedSkill 路由到 04 报错修复并强调报错原文、复现步骤、期望结果要完整不要只说“坏了帮我修”。这个阶段可以让 Agent 先给排查提示词而不是直接改代码。排查提示词示例我在微信小程序真机环境遇到报错 TypeError: Cannot read property amount of undefined 复现步骤 1. 打开 pages/index/index 2. 点击“新增支出” 3. 输入金额后点击保存 4. 真机控制台报错页面无响应 期望结果保存成功并返回首页列表出现新记录。 已尝试重启开发者工具、清除缓存仍然复现。 请先给出排查顺序不要直接给最终代码。功能差不多后进入 05 合规检查类目、隐私、个人主体限制。准备提审时进入 06 提审自查主功能可用、真机测试路径、10 分钟行动清单。清单打勾后自己再用手机走 3 遍主路径。模板不能代替真机自测。阶段触发语句Skill 路由关键产出01我想做一个财务工具小程序需求拆解用户、问题、主体、MVP02给 pages/index/index 设计页面结构页面结构数据、交互、空态、异常态03实现新增一笔支出单功能实现验收标准、回归范围04真机报 TypeError报错修复复现步骤、排查顺序05功能差不多准备上线合规检查类目、隐私、主体限制06准备提审提审自查10 分钟清单、真机路径7. /doctor 与常见报错前后对照Skill 没被识别 vs 模型 401/404安装 Skill 和切换模型入口是两个独立检查项。/doctor能帮你确认 Claude Code 是否识别了 Skill但它不能替代模型连通性验证。下面这张表按“报错前 / 报错后”整理建议收藏。现象可能原因检查方式修复动作Claude Code 输入/wechat-miniprogram-prompts没反应目录名不对或会话未重启看~/.claude/skills/下目录名保持wechat-miniprogram-prompts重启会话/doctor里看不到 SkillSKILL.md缺失或 frontmatter 不完整Get-ChildItem看两个文件补SKILL.md与templates.mdSkill 能加载但输出空模板templates.md路径写错检查SKILL.md中的引用路径改成同目录相对引用模型请求 401ANTHROPIC_AUTH_TOKEN还是YOUR_API_KEY看settings.json或环境变量换成 TaoToken 控制台创建的真实 Key模型请求 404Base URL 写成https://taotoken.net检查ANTHROPIC_BASE_URL改为https://taotoken.net/apiCodex 提示 provider 不存在config.toml拼写不一致看model_provider与表名统一为taotokenCodex 读取不到 Key环境变量当前终端不可见echo $env:TAOTOKEN_API_KEY重开终端或重新setxCursor 安装后不触发放到了skills-cursor看目录位置移到~/.cursor/skills/一个典型的“报错前”长这样$ claude /doctor Skills: none /wechat-miniprogram-prompts Unknown command修复后应该变成$ claude /doctor Skills: - wechat-miniprogram-prompts /wechat-miniprogram-prompts Loaded skill: wechat-miniprogram-prompts模型连通性方面如果 401 修好后可以在 Claude Code 里发一句极短的验证请只回复skill-ready如果返回skill-ready说明模型入口已经通。再去说“给 pages/index/index 设计页面结构”让 Skill 路由到 02。这样排查顺序更清晰先确认模型能调用再确认 Skill 能加载最后确认模板输出是否符合预期。8. 文末 CTA模型对话 → Coding Plan → 创建 Key → Claude Code 文档如果你已经装好wechat-miniprogram-prompts但 Claude Code 还在报 401/404建议按下面顺序处理。第一步先用模型对话验证 Key 和 Base URL 是否可用https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchat-verify第二步如果你准备长期在 Cursor、Codex、Claude Code 里跑小程序 Skill可以看 Coding Plan 是否适合你的用量https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-plan第三步创建或管理 API Key把YOUR_API_KEY替换成真实 Keyhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keys第四步Claude Code 的模型入口配置细节以官方文档为准重点看ANTHROPIC_BASE_URL与ANTHROPIC_AUTH_TOKEN的写法https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude-code-doc最后再回到你的项目里输入/wechat-miniprogram-prompts 给 pages/index/index 设计页面结构。如果 Skill 正常加载、模型不再 401你会看到 02 阶段输出的页面目标、数据字段、交互路径、空态与异常态。真正影响小程序质量的仍然是你在 03 到 06 阶段的自测、报错复现和真机验证。Skill 把提示词路由做顺TaoToken 把模型入口接稳剩下的就是按阶段把pages/index/index一条条跑通。
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。