d-token-saver

SKILL.md

---
name: d-token-saver
version: 3.0.0
description: 编码与视觉设计全流程节省 Token 指南。覆盖代码编写、设计前（文档梳理/需求分析/竞品调研）、设计中（生图/生视频/UI/交互还原/PPT）、设计后（走查/交付/资产归档）全链路。
trigger: 当用户提到 "节省token"、"token优化"、"减少token"、"省token"、"高效编码"、"高效设计"、"token-saver" 时触发；也可在编码/设计任务开始时主动引用
author: agent_created
tags: [token, efficiency, coding, design, optimization, visual, workflow]
---

# 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，再在流程中引用，效果最佳