d-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 工具读取文件	🟢 极低

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 树	比文字描述精确且紧凑
设计 Token	CSS 变量 / 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/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，再在流程中引用，效果最佳