Token Saver — 编码 & 视觉设计全流程节省 Token 指南#

核心原则（8 句话记住）#

精确 > 模糊，增量 > 重写，批量 > 逐条，Skill > 重复描述 模板 > 从零开始，引用 > 描述，结构 > 细节，一次 > 多轮

---

Part A — 编码场景#

A1. 精准上下文，拒绝冗余#

给 文件路径 + 行号 + 具体症状，而不是模糊描述。

方式示例❌ 费 token"帮我看看整个项目的登录功能有什么问题"✅ 省 token"检查 server/auth/login.js L45 的 JWT 刷新逻辑"

A2. 用文件引用代替代码粘贴#

方式Token 消耗粘贴 200 行代码让 AI 阅读🔴 极高让 AI 用 Read 工具读取文件🟢 极低text

❌ 把整个 500 行文件贴进来
✅ "读取 server/index.js L80-L120"

A3. 增量修改，不要重写#

Edit 局部替换 vs Write 整个文件，token 差 10-50 倍。

text

❌ "重写整个 app.js，把所有 fetch 改成 axios"
✅ "把 app.js L45 和 L78 的 fetch 替换为 axios"

A4. 合并同类操作#

每次对话往返有固定开销， 批量 > 逐条。

text

❌ 分 5 次说："加一个 CSS 类" → "再加一个" → ...
✅ 一次说清："追加 3 个类：.glass-card、.magnetic-btn、.gradient-text"

A5. 复用 Skill / Memory 而非重复描述#

一次写入，永久复用 — Skill 是最省 token 的投资。

text

❌ 每次都描述 "用 FluxUI 组件，Premium 风格，glass morphism..."
✅ 建立风格 Skill 后，直接说 "用 premium-style-guide 的模式实现导航栏"

A6. 约束输出长度#

约束指令节省效果"只写代码，不要解释"输出 token ↓ 60%"只改必要的行"上下文 ↓ 80%"一句话回答"输出 token ↓ 90%

A7. 定向读取，避免全文件扫描#

text

❌ "读取 server/index.js"  (2000行全读)
✅ "读取 server/index.js L1-L50"
✅ "Grep 查找 buildNodeInfo 定义位置，再定向读取"

A8. 并行处理独立任务#

text

❌ 串行："先查 bug A" → 等结果 → "再查 bug B"
✅ 并行：同时启动 Agent1 查 auth、Agent2 查 payment

---

Part B — 视觉设计执行场景#

视觉设计的 token 浪费重灾区： 反复调参、重复描述风格、逐张生成、从零构建布局。

B1. 生图（Text-to-Image）#

核心策略：Prompt 模板化 + 批量生成

text

❌ 每次从零写完整 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 工作流）#

核心策略：工作流模板复用 + 只改输入

text

❌ 每次重新描述完整工作流参数
✅ "用 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. 设计审查 / 反馈迭代#

核心策略：精确定位 + 改动指令

text

❌ "这个页面不太好看，帮我调整一下"
✅ "hero 区域标题 32px→48px，间距 24px→40px"

---

Part C — 设计流程前中后（新增）#

设计不只是「做图」，文档梳理、交互还原、代码交付等环节同样消耗大量 token。 以下按 设计前 → 设计中 → 设计后 全流程补充优化策略。

---

C1. 设计前 — 文档读取与梳理#

C1.1 PRD / 需求文档理解#

核心策略：结构化摘要 + 问题清单

text

❌ 把整个 30 页 PRD 粘贴进来让 AI 读
✅ "读取 PRD.md，只提取：1) 核心功能点 2) 用户角色 3) 边界条件，表格输出"

技巧省在哪示例定向提取省全文阅读"只提取需求中的页面列表和交互要求"结构化输出省长段叙述"用表格输出：页面名文档存本地省重复上传PRD 存项目目录，后续引用路径即可问题清单模式省漫无边际讨论"读完后列出 5 个最关键的待确认问题"差异对比省重读整文档"对比 PRD v1 和 v2，只列出变更点"MCP 直读在线文档省导出再粘贴用腾讯文档/乐享 MCP 直接读取在线文档

C1.2 竞品分析 / 设计调研#

核心策略：框架先行 + 填充式分析

text

❌ "帮我分析一下竞品 XX 的设计"
✅ "按 [导航结构|核心流程|视觉风格|交互亮点] 4 个维度分析竞品 XX，每个维度 2-3 点"

技巧省在哪示例分析框架预设省自由发散给出分析维度，AI 只填充内容截图 + 定向提问省长段描述"这张截图里，只分析导航信息架构"对比矩阵省逐个描述"3 个竞品做成对比表：功能A/B/C，有/无/部分"结论先行省流水账"先给结论，再补充依据"

C1.3 信息架构梳理#

核心策略：层级缩进 + 紧凑格式

text

❌ "这个 APP 有首页、发现页、消息中心、个人中心，首页里面有推荐、关注、热门..."
✅ "IA 如下：\n首页[推荐/关注/热门] | 发现[分类/搜索] | 消息[系统/互动] | 我的[设置/收藏]"

技巧省在哪示例树状缩进省自然语言描述用缩进/符号代替 "下面有"、"里面包含"页面流 JSON省逐页描述{ pages: [{name, path, children}] }Mind map 输出省线性文字"用 Markdown 缩进输出站点地图"

---

C2. 设计中 — 交互文档读取与还原#

C2.1 交互规格文档解读#

核心策略：状态机描述 + 关键路径

text

❌ "用户点击按钮后弹出一个弹窗，弹窗里有确认和取消，确认后跳转到..."
✅ "交互流：btn_click → modal(confirm/cancel) → confirm → page_B / cancel → close"

技巧省在哪示例状态机记法省叙事体描述状态A → 事件 → 状态B 代替段落叙述关键路径优先省铺陈所有分支先写主路径，异常/边界用 bullet 补充复用交互模式省重复描述"搜索用 pattern:search-autocomplete"表格化交互省文字叙述元素交互模式 Skill省每次定义常用交互模式（下拉刷新、无限滚动、表单校验）存 Skill

C2.2 Figma / 设计稿还原为交互#

核心策略：分层读取 + 交互映射

text

❌ 截图贴进来 + "这个页面所有的交互效果都帮我实现"
✅ "Figma 文件 Page2，只还原：1) Tab 切换 2) 下拉筛选 3) 列表无限滚动"

技巧省在哪示例按交互类型分批还原省一次全做导致返工"先还原静态布局，再加 hover 效果，最后加动画"交互组件名映射省描述交互行为"TDesign Tabs 组件" 代替描述 tab 切换逻辑原型链接直读省描述跳转关系用 Figma MCP 读取 Prototype 连线设计 Token 映射代码省手动量间距"用 Figma 的 spacing token 直接映射 CSS 变量"

C2.3 动效 / 微交互定义#

核心策略：参数化 + 引用预设

text

❌ "按钮按下去的时候有一个弹性的效果，然后慢慢恢复"
✅ "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 化标注 + 自动映射

text

❌ "标题字号 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 代码前端实现交付#

核心策略：分步交付 + 组件化

text

❌ "按这个设计稿把整个页面做出来"
✅ "分 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）#

核心策略：差异清单 + 精准定位

text

❌ "实现的效果和设计稿不太一样，你看看哪里有区别"
✅ "走查 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 设计资产归档#

核心策略：自动归档 + 目录约定

text

❌ "帮我把这个项目的设计文件都整理一下"
✅ "按归档规范整理：/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 树比文字描述精确且紧凑设计 TokenCSS 变量 / JSON直接可用，零转换成本标注Token 名 + 数值表比自然语言紧凑 5-10 倍

C4.2 沟通模式优化#

text

❌ "我觉得这个按钮的蓝色好像太亮了，能不能调暗一点，但也不要太暗，
    大概就是那种沉稳的感觉，你知道吧？"
✅ "按钮主色 #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/Memory95%+

视觉设计速查#

场景费 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%信息架构自然语言叙述树状缩进 / JSON60-70%交互规格叙事体描述流程状态机记法 + 关键路径60-70%设计还原"全部交互都实现"分层读取 + 分批还原50-60%动效定义"弹性效果慢慢恢复"参数化 + 预设引用70-80%标注交付逐个报数值Token 化 + CSS 变量70-80%代码交付"整个页面做出来"分步交付 + 组件拆分40-50%设计走查"和设计稿不一样"差异清单 + 精准定位60-70%资产归档每次定义结构归档 Skill + 目录约定80-90%

---

使用方式#

• 编码/设计任务开始时，说 @token-saver 加载本指南
• AI 助手在编码和设计过程中应自觉遵循以上规则
• 建议配套使用：先建风格/品牌/归档 Skill，再在流程中引用，效果最佳