marker-sketch 是做什么的？
将创意转化为手绘草图：粗且略微抖动的黑色线条、偏移的灰色填充并带有笔触纹理、灰色阴影、简短的手写文字、点状纸。渲染结果始终如一，因为风格寄宿于固定的核心（assets/template.svg、assets/glyphes.svg），且思考过程遵循相同的协议。不依赖记忆重新绘制，而是进行组装。
路径与依赖
在命令中，${CLAUDE_SKILL_DIR} 是此技能的文件夹（Claude Code 会自动替换）。在 claude.ai 中，如果该变量原样出现，请使用从复制到执行环境的技能文件夹的相对路径（scripts/compose.py）。工作文件（draft.svg、croquis.svg）写入工作文件夹，绝不写入技能文件夹。
依赖：Python 3 足以运行 compose.py（文本保留在 <text> 中，并嵌入字体）。fonttools 将文本转换为路径（--outline，渲染结果处处一致），playwright 配合 Chromium 生成 PNG 控制图（render.py）。安装：pip install fonttools playwright && playwright install chromium。如果缺少依赖项且无法安装，则提供 SVG 并说明未进行视觉控制。
1. 在十秒内选择模式
| 情况 | 模式 | 输出 | 目标时间 |
|---|---|---|---|
| 问题或图表请求，附带插图回答 | 草图（默认） | 一个 SVG | 单次生成 |
| 会议、研讨会、口头交流，“展示刚才讨论的内容” | 现场 | 一个 16:9 且高度清晰的 SVG，每次交流后修改 | 每次修改数秒 |
| 密集图表（超过 10 个对象），大量链接，需控制渲染结果 | 工坊 | 通过脚本构建的 SVG，附带 PNG 控制图 | 一分钟 |
| “现在、接着、以后”、“当前、未来”、演变、趋势、可拖动元素 | 交互 | 一个独立的 HTML 页面 | 一次 JSON 配置 |
如有疑问，默认使用草图模式。默认情况下绝不使用 three.js：它仅在工坊模式下用于创建缺少的透视符号（参见 references/glyphes.md，3D 部分）。
2. 思维协议，始终如一（在绘制之前）
按顺序在脑中回答以下六个问题。这是保证一致性的关键，而非技巧。
- 一句话总结信息。 读者必须在三秒内理解什么？这句话将成为标题或蓝色注释。
- 图表家族。 从
references/familles-diagrammes.md中选择（十五个家族：流程、循环、树、集合、层、枢纽、轮盘、曲线、矩阵、网络、场景、线框、前/后、时间线、漏斗）。 - 可能的隐喻。 如果概念抽象（张力、增长、债务、摩擦），寻找一个能用十笔左右画出的物理对象来承载该张力（
references/metaphores.md）。否则，坚持使用图表家族。 - 预算。 5 到 9 个对象，40% 留白，每个文本 1 到 3 个词（最多一行图例）。在“现场”模式下：最多 7 个对象。
- 墨水层级。 黑色 = 核心信息（最多一个纯黑色对象）。灰色 = 上下文。蓝色钢笔 = 注释、评论箭头、数字。每张图只能有一个填充强调色（黄色高亮、橙色、红色、天蓝色或沙色），面积少于 10%，绝不用于装饰。
- 构图。 从左到右、从上到下阅读；一个焦点；在松散网格上对齐；为注释预留空间。
然后绘制。然后进行控制（第 8 节）。
3. 不可妥协的风格规则
- 绝不使用渐变，绝不使用细而规则的轮廓，绝不使用模糊阴影。阴影 = 偏移 (-7, 10) 的灰色副本。
- 三种灰色 + 黑色 + 纸张：
f1浅色，f2中色，f3深色，f4纯黑。 - V 形开口箭头（
arr、arrb、arrg类），S 形曲线而非直角弯头。 - 灰色粗虚线流程线（
flow），黑色小点周长线（dotk），破折线（dash）。 - 文本：Patrick Hand 字体，
t(36)、tl(52, 标题)、ts(27, 迷你)、tb(蓝色)、tg(灰色)、tw(黑底白字) 类。法语要求严格：大写字母带重音，œ 连字，« » 引号，无长破折号，使用弯角撇号 ’。 - 使用读者自己的词汇。不创造术语，不写完整句子。
- 不使用表情符号、品牌标志或受保护角色。
精确数值、颜色和特殊情况：references/grammaire-visuelle.md。
4. 草图模式：直接绘制
原始绘图仅包含内容。样式核心由 compose.py 添加。
对象模式（四层，共享相同 id）：
<use href="#a1" x="-7" y="10" class="sh"/> <!-- 阴影 -->
<use href="#a1" class="pp"/> <!-- 不透明纸张 -->
<use href="#a1" x="-2.5" y="2.5" class="f1"/> <!-- 偏移平面 -->
<g class="ink"><path id="a1" d="M300 300 L560 296 L556 420 L296 424 L302 296"/></g>
<text class="t" x="430" y="372">想法</text>
角度略微超出（路径未完全闭合），边永不严格平行于像素点。对于符号（人物、窗口、数据库、云、放大镜...），使用符号库：
<use href="#g-person" x="540" y="260" class="cb"/> <!-- 色调类: cb co cr cs ch c1 c3 c4 -->
目录：python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py --catalog 或 references/glyphes.md。视觉板卡：references/planche-symboles.png。
组装与控制：
python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg -o croquis.svg --outline # 纸张、点、滤镜、文本转路径
python3 ${CLAUDE_SKILL_DIR}/scripts/check.py draft.svg # 预算、强调色、符号、颜色强调
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py croquis.svg # PNG 控制图（Chromium）
compose.py 的选项：--paper cream|white|kraft|yellow|blue、--no-dots、--transparent（用于幻灯片粘贴）、--size 1200x1200、--embed-font（保持文本可编辑）、--title。
不执行代码（在 claude.ai 中进行简单对话）：直接复制 assets/template.svg 中的 <defs> 块，仅从 assets/glyphes.svg 粘贴使用的符号，然后内容放在 <g id="drawing" filter="url(#wob)"> 中。明确说明未能进行视觉控制。
5. 现场模式：会议、研讨会、口头交流
在首次修改前阅读 references/mode-live.md。要点：
- 倾听，而非编写。从交流中提取 3 到 7 个元素：名词变为对象，动词变为箭头，“但是”和“否则”变为分支，“前/后”变为两列，“首先，然后”变为流程。
- 16:9 格式，最小文本 36 px (
t)，标题 52 px (tl)，绝不使用ts。四米外可读。 - 稳定位置。 每次修改时，仅移动变化的部分。重复使用相同的标识符和坐标。团队不应失去参照物。
- 口头修改：“添加”、“连接”、“划掉”、“突出显示”（纯黑或高亮）、“干净版本”（重新对齐，最后只做一次）。
- 投影：
python3 ${CLAUDE_SKILL_DIR}/scripts/live.py draft.svg打开一个页面，每次文件重写时自动更新（全屏按 f 键）。在 claude.ai 中：重新发布相同的 artifact，或每次修改时将 SVG 渲染为 PNG。 - 实时线框和流程：参见
references/wireframes-flows.md中的方法。
6. 工坊模式：通过脚本构建的密集图表
对于超过十个对象或大量链接，编写几行代码使用 scripts/sketch.py：链接会自动计算到对象边缘，包括 S 形曲线和 V 形开口箭头。
import sys; sys.path.insert(0, "${CLAUDE_SKILL_DIR}/scripts")
from sketch import Sketch
s = Sketch()
s.box("a", 260, 420, "探索", fill="f1") # (id, 中心 x, 中心 y, 文本)
s.box("b", 800, 420, "定义", fill="fh")
s.glyph("c", "g-flag", 1340, 400, "交付")
s.link("a", "b"); s.link("b", "c", label="验证")
s.perimeter(["a", "b"], "发现")
s.note(1330, 640, "在此测量", target="c")
s.save("draft.svg")
对象：box（形状 box、pill、oval，对于重叠的集合可使用 solid=False）、glyph、text、label、wf（线框元素）、badge（蓝色数字）。链接：link(kind="ink|gray|flow|dash|blue|line")、arrow、perimeter、note、highlight、raw（自由 SVG）。完整示例见 examples/build_examples.py。
对于大型图表的自动布局，使用 ELK 或 dagre（npm）计算位置，然后将坐标传递给 sketch.py。
7. 交互模式：时间上的演变
当需求涉及演变、连续状态、“现在、接着、以后”、趋势变化、组织转型、可移动部件时：生成一个独立的 HTML 页面。阅读 references/interactif.md（六个模式、配置结构图、陷阱）。
原理：原始绘图（元素具有 id）+ JSON 配置（状态，每个元素的关键帧：x y s r o d draw txt、图层、注释）：
python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg --interactive scenes.json -o page.html
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py page.html --state 1 # 控制每个状态
页面提供：状态按钮、时间滑块、播放、显示或隐藏图层、拖放标记为 drag 的元素、双击重命名文本、跟随元素的链接、导出状态为 SVG、复制布局（JSON）、键盘快捷键（箭头、空格、f）。无外部依赖，离线工作。示例：examples/migration-organisation.html、examples/tendance-adoption.html。
8. 回答前的控制
check.py无错误（已知符号、无长破折号、仅一个颜色强调）。- 查看渲染的 PNG：文本可读、无重叠、阴影可见、焦点明显、留白充足。
- 看向图画而不阅读文本，信息一句话可概括。
- 如果无法进行视觉控制，请说明。
9. 根据环境交付
- Claude Code：将
croquis.svg（及 PNG）写入工作文件夹，提供路径。在“现场”模式下，启动live.py。 - claude.ai（可执行代码）：生成、控制，发送 SVG 和 PNG。对于交互式页面或需要保留及分享的绘图，发布为 artifact（首先加载
artifact-design技能，标题两到四个词）；compose.py --interactive生成的 HTML 已经独立。 - 无法执行：根据第 4 节手动编写完整 SVG，并声明未经控制。
法语回答：对绘图标签和周围文本应用 francais-parfait。
10. 参考索引
| 文件 | 何时阅读 |
|---|---|
references/grammaire-visuelle.md | 样式精确值、类、纸张、边界情况 |
references/familles-diagrammes.md | 选择并组成十五个家族之一 |
references/metaphores.md | 将抽象概念可视化 |
references/glyphes.md | 47 个符号目录、添加符号、可选 3D |
references/mode-live.md | 会议、研讨会、口头交流 |
references/wireframes-flows.md | 线框、流程、屏幕状态 |
references/interactif.md | 动画页面、状态、可拖动元素 |
references/planche-symboles.png | 所有符号概览 |
examples/ | 六个草图（SVG 和 PNG）、两个交互式页面、brut/（源绘图和配置）、build_examples.py |