Install
openclaw skills install @wanda-wu/d-token-saverd-token-saver
编码与视觉设计全流程节省 Token 指南。覆盖代码编写、设计前（文档梳理/需求分析/竞品调研）、设计中（生图/生视频/UI/交互还原/PPT）、设计后（走查/交付/资产归档）全链路。
Token Saver — 编码 & 视觉设计全流程节省 Token 指南
核心原则（8 句话记住）
精确 > 模糊，增量 > 重写，批量 > 逐条，Skill > 重复描述 模板 > 从零开始，引用 > 描述，结构 > 细节，一次 > 多轮
Part A — 编码场景
A1. 精准上下文，拒绝冗余
给 文件路径 + 行号 + 具体症状，而不是模糊描述。
| 方式 | 示例 |
|---|---|
| ❌ 费 token | "帮我看看整个项目的登录功能有什么问题" |
| ✅ 省 token | "检查 server/auth/login.js L45 的 JWT 刷新逻辑" |
A2. 用文件引用代替代码粘贴
| 方式 | Token 消耗 |
|---|---|
| 粘贴 200 行代码让 AI 阅读 | 🔴 极高 |
| 让 AI 用 Read 工具读取文件 | 🟢 极低 |
❌ 把整个 500 行文件贴进来
✅ "读取 server/index.js L80-L120"
A3. 增量修改，不要重写
Edit 局部替换 vs Write 整个文件，token 差 10-50 倍。
❌ "重写整个 app.js，把所有 fetch 改成 axios"
✅ "把 app.js L45 和 L78 的 fetch 替换为 axios"
A4. 合并同类操作
每次对话往返有固定开销，批量 > 逐条。
❌ 分 5 次说："加一个 CSS 类" → "再加一个" → ...
✅ 一次说清："追加 3 个类：.glass-card、.magnetic-btn、.gradient-text"
A5. 复用 Skill / Memory 而非重复描述
一次写入，永久复用 — Skill 是最省 token 的投资。
❌ 每次都描述 "用 FluxUI 组件，Premium 风格，glass morphism..."
✅ 建立风格 Skill 后，直接说 "用 premium-style-guide 的模式实现导航栏"
A6. 约束输出长度
| 约束指令 | 节省效果 |
|---|---|
| "只写代码，不要解释" | 输出 token ↓ 60% |
| "只改必要的行" | 上下文 ↓ 80% |
| "一句话回答" | 输出 token ↓ 90% |
A7. 定向读取，避免全文件扫描
❌ "读取 server/index.js" (2000行全读)
✅ "读取 server/index.js L1-L50"
✅ "Grep 查找 buildNodeInfo 定义位置，再定向读取"
A8. 并行处理独立任务
❌ 串行："先查 bug A" → 等结果 → "再查 bug B"
✅ 并行：同时启动 Agent1 查 auth、Agent2 查 payment
Part B — 视觉设计执行场景
视觉设计的 token 浪费重灾区：反复调参、重复描述风格、逐张生成、从零构建布局。
B1. 生图（Text-to-Image）
核心策略：Prompt 模板化 + 批量生成
❌ 每次从零写完整 prompt："一个赛博朋克风格的城市街道，霓虹灯光..."
✅ 建立风格模板 Skill，只换主体："用 cyberpunk-style 模板，主体换成：古风少女站在桥头"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 风格锁进 Skill | 省重复描述风格词 | Skill 存固定 neg prompt + 质量词 + 风格词 |
| 批量生图 | 省多次调用开销 | "同一 prompt 4 个变体：A/B/C/D" |
| 固定 seed 复用 | 省反复调参 | "seed=12345，只改 Lora weight 0.6→0.8" |
| 参考图代替文字 | 省长段风格描述 | "参考这张图的风格，生成 XX" |
| 先小图再高清 | 省 hd 生图 token | "先 512×512 确认构图，再 1024×1024" |
B2. 生视频（Text-to-Video / ComfyUI 工作流）
核心策略：工作流模板复用 + 只改输入
❌ 每次重新描述完整工作流参数
✅ "用 face-liveportrait 模板，视频换成 dance2.mp4，表情强度 1.2"
| 技巧 | 示例 |
|---|---|
| 工作流 JSON 存文件 | AI 只改参数字段，不重复贴 JSON |
| 参数表一次说清 | "改三处：fps=30, exp_scale=1.2, crop_scale=2.5" |
| 预设档位 | "用「强烈表情」预设" → 自动映射参数组合 |
| 短片段验证 | "先 2 秒预览，确认后出完整版" |
B3. 视觉 Demo（HTML/SVG 原型）
核心策略：结构先行 + 组件拼装
| 技巧 | 示例 |
|---|---|
| 结构大纲先于细节 | 先说 "hero + 3 cards + footer"，确认后填内容 |
| CSS 变量主题 | 定义 --primary: #667eea，后续只改变量值 |
| 组件名代替描述 | "用 card-03 样式" 代替长段描述 |
| 模板文件引用 | "基于 code-shimmer-ui.html 改，换暖色调" |
B4. UI 页面设计（Figma → Code）
核心策略：设计系统引用 + Figma MCP 直读
| 技巧 | 示例 |
|---|---|
| Figma MCP 直读 | 用 MCP 获取设计稿结构，不截图不描述 |
| 组件库映射 | "用 TDesign 的 Button、Card" 代替手写样式 |
| 页面结构 JSON | { header: [logo, nav], main: [hero, grid: 3], footer } |
| 先结构后样式 | 第一步 HTML 骨架 → 第二步 CSS → 第三步交互 |
| 局部修改代替重做 | "只改 hero 区域的背景渐变方向" |
B5. PPT 延展
核心策略：母版定义 + 批量填充
| 技巧 | 示例 |
|---|---|
| 母版一次定义 | 首页定义配色/字体/布局，后续页只说内容 |
| 大纲先行 | 先列 10 页标题+要点，确认后批量生成 |
| 批量同类页 | "3 个数据页用同一布局，数据分别是：A/B/C" |
| 图表数据紧凑格式 | [{q:"Q1",v:120},{q:"Q2",v:180}] 代替自然语言 |
B6. 设计系统 / 品牌规范维护
核心策略：一次写入，按需引用
| 技巧 | 示例 |
|---|---|
| 品牌色/字号 Skill | 把 color palette + typography scale 存 Skill |
| 组件模式库 | "用 btn-primary 模式" 代替描述 padding/shadow/hover |
| 设计决策记录 | Memory 记录 "圆角统一 8px" 以后不重复讨论 |
B7. 图标 / 插画 / 海报等专项设计
核心策略：风格锚定 + 变体批量出
| 场景 | 策略 |
|---|---|
| 图标 | "用 line-style 风格，画 5 个：首页/搜索/消息/我的/设置" |
| 插画 | "用 flat-illustration 模板，主体换：程序员/设计师/产品经理" |
| 海报 | "用 event-poster 模板，替换文案为 XX" |
| Banner | "用 gradient-banner 模板，3 个尺寸" |
B8. 设计审查 / 反馈迭代
核心策略：精确定位 + 改动指令
❌ "这个页面不太好看，帮我调整一下"
✅ "hero 区域标题 32px→48px，间距 24px→40px"
Part C — 设计流程前中后（新增）
设计不只是「做图」，文档梳理、交互还原、代码交付等环节同样消耗大量 token。 以下按 设计前 → 设计中 → 设计后 全流程补充优化策略。
C1. 设计前 — 文档读取与梳理
C1.1 PRD / 需求文档理解
核心策略：结构化摘要 + 问题清单
❌ 把整个 30 页 PRD 粘贴进来让 AI 读
✅ "读取 PRD.md，只提取：1) 核心功能点 2) 用户角色 3) 边界条件，表格输出"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 定向提取 | 省全文阅读 | "只提取需求中的页面列表和交互要求" |
| 结构化输出 | 省长段叙述 | "用表格输出：页面名 |
| 文档存本地 | 省重复上传 | PRD 存项目目录，后续引用路径即可 |
| 问题清单模式 | 省漫无边际讨论 | "读完后列出 5 个最关键的待确认问题" |
| 差异对比 | 省重读整文档 | "对比 PRD v1 和 v2，只列出变更点" |
| MCP 直读在线文档 | 省导出再粘贴 | 用腾讯文档/乐享 MCP 直接读取在线文档 |
C1.2 竞品分析 / 设计调研
核心策略：框架先行 + 填充式分析
❌ "帮我分析一下竞品 XX 的设计"
✅ "按 [导航结构|核心流程|视觉风格|交互亮点] 4 个维度分析竞品 XX，每个维度 2-3 点"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 分析框架预设 | 省自由发散 | 给出分析维度，AI 只填充内容 |
| 截图 + 定向提问 | 省长段描述 | "这张截图里，只分析导航信息架构" |
| 对比矩阵 | 省逐个描述 | "3 个竞品做成对比表：功能A/B/C，有/无/部分" |
| 结论先行 | 省流水账 | "先给结论，再补充依据" |
C1.3 信息架构梳理
核心策略：层级缩进 + 紧凑格式
❌ "这个 APP 有首页、发现页、消息中心、个人中心，首页里面有推荐、关注、热门..."
✅ "IA 如下：\n首页[推荐/关注/热门] | 发现[分类/搜索] | 消息[系统/互动] | 我的[设置/收藏]"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 树状缩进 | 省自然语言描述 | 用缩进/符号代替 "下面有"、"里面包含" |
| 页面流 JSON | 省逐页描述 | { pages: [{name, path, children}] } |
| Mind map 输出 | 省线性文字 | "用 Markdown 缩进输出站点地图" |
C2. 设计中 — 交互文档读取与还原
C2.1 交互规格文档解读
核心策略：状态机描述 + 关键路径
❌ "用户点击按钮后弹出一个弹窗，弹窗里有确认和取消，确认后跳转到..."
✅ "交互流：btn_click → modal(confirm/cancel) → confirm → page_B / cancel → close"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 状态机记法 | 省叙事体描述 | 状态A → 事件 → 状态B 代替段落叙述 |
| 关键路径优先 | 省铺陈所有分支 | 先写主路径，异常/边界用 bullet 补充 |
| 复用交互模式 | 省重复描述 | "搜索用 pattern:search-autocomplete" |
| 表格化交互 | 省文字叙述 | 元素 |
| 交互模式 Skill | 省每次定义 | 常用交互模式（下拉刷新、无限滚动、表单校验）存 Skill |
C2.2 Figma / 设计稿还原为交互
核心策略：分层读取 + 交互映射
❌ 截图贴进来 + "这个页面所有的交互效果都帮我实现"
✅ "Figma 文件 Page2，只还原：1) Tab 切换 2) 下拉筛选 3) 列表无限滚动"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 按交互类型分批还原 | 省一次全做导致返工 | "先还原静态布局，再加 hover 效果，最后加动画" |
| 交互组件名映射 | 省描述交互行为 | "TDesign Tabs 组件" 代替描述 tab 切换逻辑 |
| 原型链接直读 | 省描述跳转关系 | 用 Figma MCP 读取 Prototype 连线 |
| 设计 Token 映射代码 | 省手动量间距 | "用 Figma 的 spacing token 直接映射 CSS 变量" |
C2.3 动效 / 微交互定义
核心策略：参数化 + 引用预设
❌ "按钮按下去的时候有一个弹性的效果，然后慢慢恢复"
✅ "btn-press 用 spring(0.5, 0.3) 预设"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 动效参数化 | 省自然语言描述 | duration:200ms, easing:ease-out, scale:0.95→1 |
| 动效预设 Skill | 省每次定义曲线 | "用 ease-bounce 预设" → 映射 cubic-bezier(...) |
| CSS 动画关键帧简写 | 省逐帧描述 | @keyframes fadeIn { 0%{opacity:0} 100%{opacity:1} } |
C3. 设计后 — 代码前端交付与走查
C3.1 设计标注交付
核心策略：Token 化标注 + 自动映射
❌ "标题字号 24px，行高 32px，颜色 #333，左边距 16px..."
✅ "标题用 token: heading-lg + spacing-md"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 设计 Token 映射 | 省逐个报数值 | heading-lg → font:24px/32px, color:--text-primary |
| 组件标注代替细节 | 省描述组件内部 | "导航栏用 TDesign NavBar，自定义 logo slot" |
| CSS 变量批量定义 | 省重复写色值 | :root { --primary: #667eea; --text: #333; } 后续只引用 |
| 标注文件存项目 | 省重复沟通 | design-tokens.css / tokens.json 一次写好，前端引用 |
C3.2 代码前端实现交付
核心策略：分步交付 + 组件化
❌ "按这个设计稿把整个页面做出来"
✅ "分 3 步：1) HTML 骨架 2) CSS 还原视觉 3) JS 交互逻辑"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 分步交付 | 省一步到位大量返工 | 骨架→样式→交互，每步确认再下一步 |
| 组件拆分表 | 省边做边拆 | 先列：Header / Hero / CardGrid / Footer，再逐个实现 |
| 复用组件库 | 省手写每个组件 | "用 TDesign 组件，只自定义 theme 覆盖" |
| 响应式断点复用 | 省重复写 media query | "用 mixins/breakpoints 变量，断点：768/1024/1440" |
| 增量提交 | 省大 diff 审查 | 每完成一个组件就提交，而非最后一次性 diff |
C3.3 设计走查（Design QA）
核心策略：差异清单 + 精准定位
❌ "实现的效果和设计稿不太一样，你看看哪里有区别"
✅ "走查 3 处差异：1) hero 标题字重应为 700 2) card 间距应为 24px 3) 按钮圆角应为 8px"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 差异清单 | 省模糊反馈 | 列出具体偏差：属性 |
| 截图标注 | 省文字描述差异 | 圈出差异区域 + 标注正确值 |
| 批量修正 | 省逐个改 | "3 处 CSS 修正：L12 font-weight→700, L34 gap→24px, L56 radius→8px" |
| Figma 覆盖层对比 | 省人工比对 | 用 Figma Dev Mode 的 CSS diff 功能 |
C3.4 设计资产归档
核心策略：自动归档 + 目录约定
❌ "帮我把这个项目的设计文件都整理一下"
✅ "按归档规范整理：/assets/figma | /assets/export | /tokens/ | /docs/spec.md"
| 技巧 | 省在哪 | 示例 |
|---|---|---|
| 归档目录 Skill | 省每次定义结构 | 项目初始就建好 assets/tokens/docs 目录约定 |
| 导出清单 | 省重复沟通格式 | "切图按 @1x/@2x/@3x 输出，命名：组件_状态_尺寸" |
| Token 文件自动生成 | 省手动维护 | design-tokens.json 一次生成，后续增量更新 |
C4. 跨阶段通用优化
C4.1 文档类型选择
| 场景 | 最省 Token 的格式 | 原因 |
|---|---|---|
| 需求/规格 | Markdown 表格 | 结构化，AI 理解成本最低 |
| 交互流 | 状态机 / 流程图 | 比叙事体节省 60%+ |
| 页面结构 | JSON 树 | 比文字描述精确且紧凑 |
| 设计 Token | CSS 变量 / JSON | 直接可用，零转换成本 |
| 标注 | Token 名 + 数值表 | 比自然语言紧凑 5-10 倍 |
C4.2 沟通模式优化
❌ "我觉得这个按钮的蓝色好像太亮了，能不能调暗一点，但也不要太暗，
大概就是那种沉稳的感觉，你知道吧？"
✅ "按钮主色 #3B82F6 → #2563EB"
| 原则 | 说明 |
|---|---|
| 数值 > 感觉 | 给具体色号/字号/间距，不给"大一点""亮一点" |
| 列表 > 段落 | 3 个要点用 bullet，不用 3 句话 |
| 引用 > 重复 | "和 hero 标题同字号" 代替重新报数值 |
| 确认 > 试探 | "间距 24px 可以吗？" 代替 "间距你觉得多少合适？" |
C4.3 MCP 工具直连（省去中间环节）
| 场景 | MCP 工具 | 省什么 |
|---|---|---|
| 读 Figma 设计稿 | Figma MCP / figma-desktop | 省截图+文字描述 |
| 读在线文档 | 腾讯文档 MCP / 乐享 MCP | 省导出+粘贴 |
| 读设计系统 | Ardot MCP | 省手动查组件库文档 |
| 写腾讯文档 | 腾讯文档 MCP | 省复制粘贴到浏览器 |
| 读写网盘文件 | TDrive MCP | 省下载+上传 |
Part D — 全场景速查表
编码速查
| 场景 | 费 Token | 省 Token | 节省 |
|---|---|---|---|
| 看代码 | 粘贴代码 | 给文件路径+行号 | 80-90% |
| 改代码 | "重写整个文件" | "改 L45 的 X 为 Y" | 90%+ |
| 多处修改 | 逐条命令 | 批量一次说完 | 50-60% |
| 重复规范 | 每次重新描述 | 写 Skill/Memory | 95%+ |
视觉设计速查
| 场景 | 费 Token | 省 Token | 节省 |
|---|---|---|---|
| 生图 | 每次写完整 prompt | 风格模板 Skill + 只换主体 | 70-80% |
| 生视频 | 重复贴工作流参数 | 工作流存文件 + 只改输入 | 80-90% |
| 视觉 Demo | "做一个漂亮的 XX" | 引用模板 + 结构先行 | 60-70% |
| UI 页面 | 截图+文字描述 | Figma MCP 直读 + 组件库映射 | 70-85% |
| PPT | 逐页描述样式 | 母版定义 + 大纲批量填充 | 70-80% |
| 品牌规范 | 每次查色号/字号 | 品牌 Skill 一次写入 | 95%+ |
设计流程速查
| 场景 | 费 Token | 省 Token | 节省 |
|---|---|---|---|
| PRD 理解 | 全文粘贴 | 定向提取 + 结构化输出 | 60-70% |
| 竞品分析 | 自由发散描述 | 框架预设 + 填充式 | 50-60% |
| 信息架构 | 自然语言叙述 | 树状缩进 / JSON | 60-70% |
| 交互规格 | 叙事体描述流程 | 状态机记法 + 关键路径 | 60-70% |
| 设计还原 | "全部交互都实现" | 分层读取 + 分批还原 | 50-60% |
| 动效定义 | "弹性效果慢慢恢复" | 参数化 + 预设引用 | 70-80% |
| 标注交付 | 逐个报数值 | Token 化 + CSS 变量 | 70-80% |
| 代码交付 | "整个页面做出来" | 分步交付 + 组件拆分 | 40-50% |
| 设计走查 | "和设计稿不一样" | 差异清单 + 精准定位 | 60-70% |
| 资产归档 | 每次定义结构 | 归档 Skill + 目录约定 | 80-90% |
使用方式
- 编码/设计任务开始时，说
@token-saver加载本指南 - AI 助手在编码和设计过程中应自觉遵循以上规则
- 建议配套使用：先建风格/品牌/归档 Skill，再在流程中引用，效果最佳