尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

页面骨架先做一个,Codex Skill 生成提示词时用 TaoToken

页面骨架先做一个,Codex Skill 生成提示词时用 TaoToken 1. 从「翻文章找模板」到 Skill 自动路由这个包到底解决什么问题把《小程序提示词模板》打包成 Agent Skill最初的动机很朴素。模板本身没问题问题出在调用环节每次要用都得回到文章里翻对应那一条占位符还得手动替换改着改着就忘了当前该用哪个阶段。于是我把 6 类模板、三条原则、常见坑提醒连同「该用哪条」的判断逻辑一起做成了一个可安装的 Skill 目录wechat-miniprogram-prompts在 Cursor、Codex、Claude Code 三端共用同一份文件夹。需要先说清一个前提Skill 本身不产出提示词真正生成内容的是它背后调用的模型。你装好 Skill 之后说的那句「我想做一个财务工具小程序」会被 Agent 拆成阶段判断 模板填充再交给模型补全。这条链路消耗的是模型 Token所以安装完之后第一件事不是急着试而是把模型供应商配好。我这边用的是 TaoToken官网入口在这https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentskill_introKey 去控制台取Base URL 全文统一使用https://taotoken.net/api下文所有配置里的 Key 一律写成占位符YOUR_API_KEY。这篇不讲「模板有多好」只讲三件可复现的事Skill 目录里有什么、三端怎么装、装完之后模型供应商怎么切到 TaoToken 并验证生效。中间会给出/doctor的报错前后对照以及一个财务工具小程序从模糊想法走到提审自查的完整路由实录。2. 拆包SKILL.md、templates.md 与 6 阶段路由表先把安装包解开看结构。分享包的顶层是一个普通文件夹脚本和 skill 目录分开摆放wechat-miniprogram-prompts-package/ ├── README.md # 安装说明 ├── install-all.ps1 # 一键安装三端 ├── install-cursor.ps1 # 单独安装到 Cursor ├── install-codex.ps1 # 单独安装到 Codex ├── install-claude.ps1 # 单独安装到 Claude Code └── skill/ └── wechat-miniprogram-prompts/ ├── SKILL.md └── templates.md两个核心文件的职责切得很干净SKILL.md是「岗位手册」。它写的是三条原则、6 个阶段的路由表、Agent 的行为边界以及常见坑。它决定 Agent 什么时候加载、加载之后按什么流程走。templates.md是「模板库」。6 类提示词的原文和填好的示例都在这里按需读取。这一点很重要模板正文不会常驻在每一轮对话的上下文里只有路由命中某一阶段时才去取那一段减少无关内容占用注意力。6 个阶段的路由关系如下表。推荐顺序是 01 → 02 → 03 →04 按需触发→ 05 → 06。编号阶段触发说法示例产出物01需求拆解「我想做一个 XX 小程序」待补充信息清单 功能范围02页面结构「给 pages/index/index 设计页面结构」单页骨架、数据结构、交互点03单一功能实现「实现新增一笔支出的功能」带验收标准的实现提示词04Bug 修复贴报错 复现步骤定位思路 修复提示词05合规检查「类目和隐私这块怎么弄」类目、隐私、主体限制清单06提审自查「准备提审了」主功能与真机路径行动清单和「复制一条提示词」相比Skill 多出来的能力集中在三处触发条件说到「想做小程序」「提审前检查」会自动命中、阶段路由自动判断该用需求拆解、页面结构还是修 Bug、坑位提醒比如「一次只做一个页面」「别只说坏了帮我修」。这三件事在后面的实录里会逐条体现。3. 三端安装实操路径、install-all.ps1 与目录校验安装动作本质是「把skill/wechat-miniprogram-prompts/整个文件夹复制到目标目录」文件夹名必须保持wechat-miniprogram-prompts不变改名会导致斜杠命令和路由名对不上。3.1 Windows 一键安装在分享包根目录打开 PowerShell先放开当前进程的执行策略再跑一键脚本cd .\wechat-miniprogram-prompts-package Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass .\install-all.ps1也可以按端单独装install-cursor.ps1、install-codex.ps1、install-claude.ps1。单端脚本适合你只用一个 Agent、不想让别的目录被写入的场景。3.2 Cursor个人级所有项目可用推荐~/.cursor/skills/wechat-miniprogram-prompts/项目级团队共享可提交进 git项目根/.cursor/skills/wechat-miniprogram-prompts/注意别放进~/.cursor/skills-cursor/那是 Cursor 内置目录放进去不会被当作用户 Skill 识别。装完重启 Cursor或者新开一轮 Agent 对话让它重新扫目录。3.3 Codex个人级路径通过$CODEX_HOME定位默认是~/.codex$CODEX_HOME/skills/wechat-miniprogram-prompts/也就是默认等价于~/.codex/skills/wechat-miniprogram-prompts/装完不需要重启下一轮对话就能命中。这里不要和 Claude Code 的~/.claude/混着放两个工具读的是各自的 skills 目录。3.4 Claude Code项目级项目根/.claude/skills/wechat-miniprogram-prompts/个人级可以放到~/.claude/skills/wechat-miniprogram-prompts/斜杠命令名取自目录名即/wechat-miniprogram-prompts。Claude Code 会监听 skills 目录变化但如果这个目录是新创建的、而当前会话已经启动最好重启一次会话再试。3.5 用一条命令确认文件到位不管走哪个脚本装完之后都建议手动校验一次两个文件是否都在$paths ( $HOME\.cursor\skills\wechat-miniprogram-prompts, $HOME\.codex\skills\wechat-miniprogram-prompts, $HOME\.claude\skills\wechat-miniprogram-prompts ) foreach ($p in $paths) { {0} - SKILL.md:{1} templates.md:{2} -f $p,(Test-Path $p\SKILL.md),(Test-Path $p\templates.md) }正常输出应该三行都是SKILL.md:True templates.md:True。如果出现False九成是复制的时候多套了一层同名文件夹实际变成了.../wechat-miniprogram-prompts/wechat-miniprogram-prompts/SKILL.md。4. 把模型供应商切到 TaoTokenClaude Code 的 settings.json 与 Codex 的 config.tomlSkill 只负责「怎么问」模型负责「怎么答」。安装完成后首次调用模型前先去 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentbefore_first_call 拿到 TaoToken Key再按下面的方式配置。两个工具的配置格式完全不同别混用。4.1 Claude Codesettings.json 里的三件套Claude Code 走的是settings.json核心是三个环境变量常说的「三件套」Base URL、鉴权 Token、模型 ID。写进用户级配置文件{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: YOUR_MODEL_ID } }三个字段的含义很直接ANTHROPIC_BASE_URL指向https://taotoken.net/api不要带路径后缀ANTHROPIC_AUTH_TOKEN填控制台创建的 KeyANTHROPIC_MODEL填你在模型列表里选定的模型 ID不要照抄别人的。项目级配置可以放到项目根目录的.claude/settings.json作用范围只在本项目内。如果你用 CC Switch 这类工具在多个供应商之间切来切去它管理的就是同一组三件套Base URL、Token、Model。切换时确认这三项同时被替换只改 Base URL 而不改 Token是最容易出现的「配了但报鉴权失败」的情况。改完之后用一条最小请求验证连通性先不牵扯 Skillclaude -p 输出 OK 两个字母不要别的内容能正常返回就说明供应商链路通了接下来才是 Skill 的事。4.2 Codexconfig.toml 里声明 providerCodex 读的是config.toml结构是「先声明一个 provider再让顶层 model_provider 指向它」。注意 Codex 不认ANTHROPIC_*那一套变量把 Claude Code 的配置照搬到 Codex 是一定跑不起来的。model YOUR_MODEL_ID model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat这里用env_key的方式把密钥从配置文件里剥出来Key 存到系统环境变量setx TAOTOKEN_API_KEY YOUR_API_KEYsetx写入的是用户级环境变量当前已经打开的终端不会立即生效重开一个终端再跑 Codex。验证方式和 Claude Code 类似先用一次极简对话确认模型有响应再加载 Skill 目录。4.3 密钥与额度的统一入口Key 的创建、查看和额度管理都在控制台的 API Keys 页面完成https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentkey_setup。建议给不同工具建不同的 Key比如一个给 Claude Code、一个给 Codex这样某一边出现异常调用时能直接从用量上定位是哪台机器、哪个工具在消耗 Token而不用在日志里猜。5. 验证安装/doctor 报错前后对照与 SKILL 加载排查配置好供应商之后回到 Skill 本身。Claude Code 里跑/doctor/doctor会检查当前会话能识别到的 skill。装对了应该能在列表里看到wechat-miniprogram-prompts。下面给两组「报错前后对照」覆盖最常见的两类问题。案例 A目录层级多套了一层# 安装前报错状态 项目根/.claude/skills/wechat-miniprogram-prompts/ └── wechat-miniprogram-prompts/ ├── SKILL.md └── templates.md # /doctor 表现列表里看不到该 skill斜杠命令也补全不出来 # 安装后正确状态 项目根/.claude/skills/wechat-miniprogram-prompts/ ├── SKILL.md └── templates.md # /doctor 表现列表出现 wechat-miniprogram-prompts案例 B目录新建但会话没重启# 安装前报错状态 新目录刚创建当前会话已启动 /doctor 输出里没有该 skill # 语音输入「我想做一个小程序」时Agent 按普通对话回答没有触发阶段路由 # 安装后正确状态 重启 Claude Code 会话后重新执行 /doctor 能看到该 skill # 再说「我想做一个小程序」Agent 会先给待补充信息清单而不是直接给代码Codex 没有/doctor这个入口验证方式更朴素新开一轮对话直接说「我想做一个记账小程序」观察它是否先抛出待补充信息清单。Cursor 同理重启或新开 Agent 对话之后看它在被问到「提审前检查」时会不会主动切到 06 阶段。判断标准只有一个——它有没有先做阶段判断而不是就着你那句话直接开写。6. 跑一遍财务工具小程序6 步路由的输入输出实录下面用一个连贯案例把路由走完重点看每一步 Agent 会输出什么结构而不是模板原文。第 1 步只有模糊想法。你说「我想做一个财务工具小程序」。Skill 命中 01 需求拆解此时它不会写代码而是把缺失信息列出来目标用户是谁、核心问题是什么记账、预算还是报表、个人主体还是企业主体、是否使用云开发、第一版只保留哪 12 个功能。这一步的价值在于把「帮我做个小程序」这种无法执行的输入压成几个可回答的问题。第 2 步补齐信息拿到填好的提示词。你回复「个人用户记账太麻烦不用云开发第一版要快速记账和月度统计」。Agent 按固定结构输出选用模板01 需求拆解、可直接复制的提示词项目名称、用户、核心问题都已填好、注意事项别一上来就说「帮我做小程序」这类没有约束的请求、下一步建议需求定下来后转 02 页面结构。你把提示词交给模型拿到功能清单、页面规划和 MVP 建议。第 3 步搭页面骨架。你说「给 pages/index/index 设计页面结构」。Skill 路由到 02并给出一个关键约束一次只做一个页面不要让它同时改app.json加三个页面。这一步就是标题里说的「页面骨架先做一个」——先把pages/index/index的骨架定下来数据结构、交互点、空状态都写清楚再谈别的页面。多页面同时改的后果通常不是效率提升而是约束互相冲突、改完还得回滚。第 4 步实现单一功能。你说「实现新增一笔支出的功能」。Skill 路由到 03生成的提示词自带验收标准主路径能走通、异常有提示、不破坏已有功能。三个标准里最容易被忽略的是第三条尤其在已经有页面骨架的项目里新增功能经常会顺手改动公共方法。另外验收这件事得你自己当 QA 点一遍Skill 不会替你点。第 5 步出问题走 04。保存按钮没反应真机报错TypeError: Cannot read property amount of undefined。Skill 路由到 04同时给出一条要求报错信息、复现步骤、涉及页面要完整别只说「坏了帮我修」。报错字符串本身要原样贴进去不要自己翻译成中文描述。这个报错在财务类小程序里很典型——表单字段没做空值兜底或者setData之后的读数时机不对04 模板会引导你先把复现路径写清楚再定位。第 6 步准备上线。功能差不多做完先走 05 合规检查确认类目、隐私协议、个人主体的功能限制准备提审时走 06 提审自查按清单过一遍主功能可用性、真机测试路径以及那份 10 分钟行动清单。这里必须强调清单打勾不代表没问题自己再用手机把主路径走三遍。模板和 Skill 都不能替代真机自测。整个流程跑完6 类模板一共命中 56 次每次都是「路由判断 填好占位符 注意事项」你的输入则是一句自然语言。这就是 Skill 相对手工抄模板的差别所在。7. 使用方式、常见坑与 Token 成本控制Skill 默认行为是只生成提示词不直接动你的代码。需要它直接改代码时明确说「直接帮我写代码」三条原则和模板约束依然生效。这个默认值对小程序开发比较友好因为小程序工程的目录结构、云开发配置、主体资质差异很大直接落代码容易和现有工程打架。几个实际安装中反复出现的坑集中列一下文件夹改名。目录名必须保持wechat-miniprogram-promptsClaude Code 的斜杠命令名直接取自目录名改了就对不上。放进 Cursor 内置目录。~/.cursor/skills-cursor/不是用户 Skill 目录放进去不会生效。Codex 抄 Claude Code 的变量。Codex 的config.toml不识别ANTHROPIC_*必须用model_providers段声明。Base URL 写错。统一用https://taotoken.net/api不要在后面追加/v1之类的路径。Key 泄漏。不要把真实 Key 写进提交到 git 的.claude/settings.json项目级配置只放结构Key 走环境变量。Token 成本方面Skill 的结构本身做了优化templates.md是按需读取的只有路由命中某一阶段时才把那一段相关模板拉进上下文而不是每轮都带上全部 6 类模板。真正影响消耗的是你的对话习惯——把「我想做一个记账小程序」和「给 pages/index/index 设计页面结构」分两轮说比一句话塞进五件事更省因为后者会让模型在需求没定的时候就开始规划页面。想先感受一下模型侧的提问效果可以直接在模型对话页试试https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contenttry_chat。8. 从提示词路由到日常开发Coding Plan 与 Claude Code 文档Skill 解决的是「问什么」供应商配置解决的是「谁来答」。如果你不只是偶尔生成几段提示词而是打算把 Cursor、Codex、Claude Code 当作日常开发工具长期使用可以顺带看一下 Coding Plan 的额度方案https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_plan。它更适合有稳定编码节奏的场景而不是临时试一两次。Claude Code 侧的详细参数、环境变量和配置文件说明官方文档在 https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentcc_doc配置项比这篇列的三件套更全遇到模型切换、超时、并发限制这类问题时可以去对一遍。按下面的顺序走一遍基本就是一条完整的接入路径到 模型对话 先确认模型可用需要长期开发就去 Coding Plan 选合适的方案到 创建 API Key 拿到YOUR_API_KEY对应的真实值按 Claude Code 文档 把settings.json补全Codex 侧则改config.toml的model_providers段。装好之后建议新开一轮对话说一句「我想做一个 XX 小程序」试试重点观察它有没有先给待补充信息清单。如果直接开始写代码说明 Skill 没被加载回到第 5 节的/doctor对照表排查一遍。你平时用 Cursor、Codex 还是 Claude Code做到哪个阶段最容易卡住可以在评论区说一下下一篇就挑问得最多的那个环节展开。
返回列表