---

name: methodology-visualization

description: 将项目方案、工作坊产出或访谈素材中的方法论、理念体系提炼为单文件 HTML 可视化页面（内嵌 SVG 信息图）。当用户要求"可视化总结/梳理/呈现"某套方法论、理念框架、工作模型、成长体系时使用本技能。产出为无外部依赖、可直接分享的单文件 HTML，必要时可导出 PNG。触发词：可视化总结、方法论可视化、理念可视化、画一张方法论图、做成一页可分享的网页。

---



# 方法论可视化总结



## Overview



把散落在项目文档、方案、聊天记录里的方法论和理念，提炼成一套结构清晰、可以直接分享的单文件 HTML 可视化页面。核心能力：从素材中提炼方法论结构 → 匹配合适的信息图形态 → 用手写 SVG + CSS 产出成品。



## 工作流



### 第一步：提炼方法论结构



1. 通读用户提供素材（项目方案 docx、工作坊文档、聊天记录、播客笔记等），**让结构从素材里长出来，而不是套固定清单**。不同方法论的骨架完全不同：有的核心是一个循环，有的是一组信念，有的是一套操作步骤，有的是一条判断链，有的是几句反直觉的洞察。先找到这套方法论"自己的骨架"，再决定页面结构。

2. 提炼时反复回到三个问题：

   - 这套方法论**反复强调的东西**是什么？（出现频率最高的概念往往就是核心）

   - 它内部是什么**关系**在驱动？（什么东西推动什么、什么和什么互为因果、什么在递进）

   - 如果只能留下**一句话**，是哪句？（这句话通常就是页面的副标题或中心图的核心词）

3. 结构提炼的判断标准：不要试图把素材里所有内容都塞进页面——每个板块只留"标签 + 一句话"，细节宁缺毋滥。板块数量和组合完全由内容决定，没有标准件。

4. 语言风格：短句、克制、不喊口号。用素材中的原话提炼，不要生造排比句。文案先在回复中给用户过目再进入制图（结构大改时），小改动可直接做。



### 第二步：设计信息图形态



**形态不是固定的**。先由内容决定结构，再为这套结构设计图——不要拿现成模板硬套。设计时问三个问题：



1. 这套方法论里最核心的**关系**是什么？（互撑 / 循环 / 递进 / 中心辐射 / 演化 / 张力对比……）

2. 这个关系最直白的几何隐喻是什么？（三角、环、梯、网、河道、双螺旋、拼图、天平……都可以，越贴合内容越好）

3. 页面上几个图之间怎么形成叙事节奏？（比如一张大关系图 + 几张小卡片，避免连续多个同质大图）



`references/visual-patterns.md` 里的形态库（三角理念图、四分循环环、上升阶梯、放射网络、卡片网格等）是**过往实战的参考样本**，用途有二：

- 关系类型恰好吻合时，可直接借用其画法（配色、坐标、阴影等细节都在里面）

- 关系类型不吻合时，把它们当作笔法参考（描边、留白、字号层级、配色系统），自己发明新形态



基本原则：

- 常规构件有惯用形态可循（循环→环、递进→梯），但如果素材本身的比喻更生动（如"河流""根系""飞轮""接力"），优先用内容自己的隐喻

- 一个页面通常 3~5 个板块，从上到下按叙事排：核心理念 → 运转机制 → 阶段成果 → 洞察与网络（此顺序也按内容调整）

- 拿不准时可以给用户 2 个形态方案（一句话各描述一下），确认后再制图



### 第三步：产出单文件 HTML



1. `assets/page-skeleton.html` 提供页面级 CSS 骨架（header/板块标题/卡片/响应式），可整体沿用；SVG 图形部分按第二步的设计另行绘制，不要被骨架里的占位结构限制。`references/visual-patterns.md` 查阅配色系统与 SVG 笔法规范。

2. 硬性要求：

   - **单文件、零外部依赖**：不引外部 CSS/JS/字体/图标库，字体用 "Microsoft YaHei","PingFang SC" 栈

   - SVG 内嵌在 HTML 中，每个形状显式设置 fill，不能依赖默认色

   - 图形文字必须可读：浅底配深字，深底配白字

   - 响应式：容器 max-width 960~1080px，卡片网格在 768px 以下折行

3. 若用户需要 PNG 版本（单张模块图，如"XX_核心理念.png""XX_循环与阶梯.png"），按 SVG 板块单独导出：将对应 SVG 段落存成独立 HTML，用浏览器截图工具（agent-browser / playwright）按元素截图。

4. 交付时调用 present_files 打开 HTML 预览。



## 避坑



- SVG text 不自动换行，长句必须手动拆成多个 tspan/text 行并算好 y 坐标

- 箭头 marker 的 fill 要单独设置，继承不了 stroke 颜色

- 双向关系边：线段分两段画、箭头放在中点，边上标签水平放置且与箭头错开，避免重叠

- 扇环（PDCA 环）用 path 的 A 命令拼四段，内外半径差留出中心白圆的位置

- 页面不要太长：一个方法论一页纸讲完，超出部分宁可删内容也不加长度