石墨:用铅笔,把一件事讲清楚

暖纸、石墨线、几支彩铅,画面像随手画的草图,一笔一笔按讲故事的顺序画出来。 拿它做讲解页、短视频、动图、壁纸都行。

出处:ai-doc 的论文图解(autoresearch 那一篇,http://doc.tbusos.com/ai-doc/zh/explain/autoresearch.html) 和它借鉴的 srt-whiteboard-animation(MIT,https://github.com/geeklee/srt-whiteboard-animation)。 展示页:demos/graphite-design/index.html;图例库 diagrams.html;素材 assets.html;短片样片 reel.html。

1. 定死的五样

这五样就是这个画风。少一样就不是它了;五样都在,别的怎么做都还是它。具体色值和理由见 references/material.md。

2. 放开的

版式、构图、用哪些角色和道具、用哪几支彩铅、动画怎么动、标题用什么字、位图还是代码、做成网页还是视频还是壁纸。

图例是例子,不是模板。 学的是材料和手法:拿 templates/src/ 里的代码改字、改颜色、改数据, 或者照着 assets/props.js 的写法画一个新角色。别把 37 张图例的版式当成「这个风格只能长这样」。

3. 谁来画:代码、出图模型、还是叠起来

2026-10-10 同一个题目让两边各画了一张(展示页「谁来画」一节并排放着),结论:

出图模型:本机 codex exec -m gpt-6-astra,提示词走标准输入(-i 会把后面的提示词也当成图片路径)。 提示词模板、参考图怎么附、夜间版怎么出、叠加区域怎么量,见 references/image-prompts.md; 本 skill 用到的 13 张图的提示词原文和挑选理由也记在那里。没有出图工具时全部用代码画,templates/src/20-scene.mjs 有现成场景。

4. 代码画:两个库

<link rel="stylesheet" href="assets/graphite.css">          <!-- 色值、图里各种线和字的样式、页面小部件 -->
<script src="assets/sketch.js"></script>                     <!-- window.Sketch -->
<script src="assets/props.js"></script>                      <!-- window.Props -->

var S = Sketch.create({ seed: 7, id: 'mine' });     // 同一个 seed 永远画出同一张
S.at(0, 1.6, function () {                          // 这一组在第 0–1.6 秒画完
  Props.robot(S, 120, 260, 0.8, { pose: 'wave' });
  var a = Props.node(S, 240, 60, 160, 64, { zh: '缓存', en: 'cache' }, { pen: 'orange' });
});
svg.innerHTML = '<defs>' + Sketch.filters() + '</defs><g filter="url(#g-pencil)">' + S.art() + '</g>' + S.labels() + '<style>' + S.css() + '</style>';

• 笔:line path rect ellipse circle blob poly loop arrow ring(圈重点)underline dot star burst
• 彩铅:fill(points, 'blue', { style: 'zig' | 'hatch' | 'cross' | 'wash', gap });图形函数都能带 fill: 参数;shade 是石墨阴影
• 字:text(x, y, '…', { size, anchor, ink, font: 'mono' }),ink 用 2 orange green red blue term
• 时间:at(start, dur, fn) 一组按长度分时间;track(keys, fn) 按时刻走到几个位置(写偏移);follow(keys, fn) 同上但写绝对坐标,fn(x, y) 画在最后一个位置;window(t0, t1, fn) 只在这段时间出现;move animate 任意 CSS 动画
• 自己用 S.raw 写 <clipPath> <mask> 渐变时,id 用 S.id('名字') 生成(带上这张图的前缀),别手写:图例页把所有图放在同一个页面里,两张图都叫 clip 就会共用一个裁剪框
• 角色和物件(props.js):robot person desk monitor laptop chair plant lamp window bed mug books bulb cloud server gear doc magnifier clock sun moon tree phone envelope cat
• 图表件:node decision cylinder link(框到框的箭头)token(沿线走的小点)code(深色代码卡,带 cursor 高亮行)formula(等宽公式,分段上色、带下标)

颜色从不写进 SVG:每样东西带一个 class(.ln 线、.p-blue 彩铅……),由 graphite.css 映射到 CSS 变量。 所以同一张图换主题就变色。别在 SVG 属性里写 var(),不生效。

图例在 templates/src/*.mjs(源)→ node scripts/build.mjs → templates/figures/*.svg(单独文件,跟随系统深浅色) 和 demos/graphite-design/*.html(页面由 site/graphite-design/*.tpl 生成,别手改)。

5. 动起来、做成视频

规则五条:一支笔(同时只画一样,时长和长度成正比)· 按故事顺序 · 先线后色 · 一个时钟(画面、代码高亮、计数挂在同一条时间线上)· 关掉动画也完整。

动画全是 CSS,时间由 sketch.js 写进每个元素。所以:

• 页面里 assets/player.js 提供 Graphite.replay(svg) Graphite.seek(svg, 秒):滚到哪张画哪张、拖进度条、单步
• 导出:node scripts/export.mjs video 页面或图.html 输出.mp4 --size=1280x720 --fps=30 (也支持 .gif .webm;png 子命令导出任意一秒的静帧;--lang=en 导出英文版,不写就是中文)。逐帧把所有动画拨到同一时刻再截图,不是录屏,第 300 帧永远是第 10 秒。
• 一个页面有自己的时间线时,挂 window.graphite = { duration, seek(t) },导出就调它。范例:demos/graphite-design/reel.html(位图镜头推拉 + 代码图 + 字幕,33 秒)。
• 短视频安全区:图例 mark-video-safe(16:9 字幕离底边 ≥ 8%;9:16 避开右侧和底部的平台按钮)。

6. 越用越懂这个人:口味档案

node scripts/taste.mjs suggest          # 画之前:按这个人的口味给出 sketch / 滤镜 / CSS 参数
node scripts/taste.mjs ab               # 想问一题:只改一个参数,给出 A、B 两个值,各画一张给对方挑
node scripts/taste.mjs pick hatchGap 4.7 3.7 "说右边太密"     # 对方挑了 A
node scripts/taste.mjs say "颜色太多了,线太抖"              # 对方说的话,按词表换成方向
node scripts/taste.mjs ingest check_objective输出.txt       # 审查器的结果
node scripts/taste.mjs explain hatchGap # 这个值是被哪几条记录推到现在的

• 每次画完、对方有反应,就记一条。 挑了哪张(权重 1)、说了什么(1)、留下或删掉了哪张(0.5)、 critic 评审的意见(0.3,审查器不是这个人)。90 天前的记录只算一半。
• 审查器查出的客观问题定下限,不算口味。 check_objective 的 O4(手机上字太小)→ 图中字号的下限; 口味再怎么往小走也不越过它,也不会随时间淡掉。
• 记录存在 ~/.config/sky-skills/taste.jsonl(所有设计风格共用一份,每条写明风格;SKY_TASTE_DIR 可改),只在本机;旧的 graphite-taste.jsonl 照读。展示页的「口味实验室」用同一套算法,导出后 taste.mjs import 就能接上。
• 2026-10-11 起学习算法搬到公共 skill design-taste(skills/design-taste/assets/taste-core.js,算法和为什么这么设计写在它的文件头),graphite 只留参数表 assets/taste-profile.js;assets/taste.js、scripts/taste.mjs 是薄包装,用法不变。搬过去后多了三样:在别的风格里说的「字太小」「颜色太多」也会以半份分量影响这里的字号、颜色数;taste.mjs ref 图.jpg 从你喜欢的图里量留白和颜色数;--scene 按场景分开记(graphite 暂未分场景)。自测:node scripts/taste.mjs --self-test (模拟读者答 40 题,在意的参数要学到一半以上;故意选反的读者必须学不到; 不能有一个参数占掉 40% 以上的题 —— 修之前,一个口味贴着下限的读者,24 题里有 18 题问的是线宽)。
• 「下一题问哪个参数」:挑最没把握的那个;连续几次答案都往同一边,说明还差得远,这个参数优先再问, 但这个加成最多算 2 次。200 个模拟读者各答 40 题:平均学到的差距从 49% 升到 73%。
• 图例「越用越懂你」三张(templates/src/90-taste.mjs)是这套算法自己画的:构建时在模拟读者上真跑 taste.js,曲线上每个点都是算出来的。讲这个功能时直接用它们。

7. 检查

node skills/design-review/scripts/check_objective.mjs --themes=dark,light 页面.html   # JS 报错 / 对比度 / 横滚 / 手机上的字 / 关掉动画
node skills/graphite-design/scripts/build.mjs --check      # 图例和页面是不是最新生成的
node skills/graphite-design/scripts/taste.mjs --self-test
python3 skills/design-review/scripts/check_fonts.py        # 在本仓库写了新汉字时:字体子集够不够

手机上图里的字会缩:页面里把图包进 <div class="gpan">,build.mjs 按图里最小字号给 svg 写好 min-width,窄屏时图框左右拖,字不小于 9px;只当缩略图用的标 data-allow-shrink。

8. 踩过的坑

9. 文件

assets/graphite.css   色值(浅 / 深)· 图里线和字的样式 · 页面小部件(纸底、方格纸、手画框、便签、终端卡、字幕条)
assets/sketch.js      手绘线、彩铅、时间表、铅笔滤镜(Sketch.filters)
assets/props.js       角色、物件、图表件
assets/taste-profile.js  口味参数表(参数、默认值、范围、词表;引擎在 design-taste)
assets/taste.js       口味学习薄包装(浏览器和命令行共用,接口不变)
assets/player.js      页面:主题 / 语言切换、重画、拖进度
assets/fonts.css      字体(本仓库里由 build_fonts.py 换成本地文件)
templates/src/        37 张图例 + 6 个页面部件的源码 · categories.json 分类
templates/figures/    生成的单独 SVG + index.json
scripts/build.mjs     生成图例和展示页(--check)
scripts/export.mjs    PNG / MP4 / GIF / WebM 导出
scripts/taste.mjs     口味档案(转调 design-taste/scripts/taste.mjs --style=graphite)
references/material.md       五样材料的色值和理由
references/image-prompts.md  出图模型的提示词写法 + 本 skill 13 张图的原始记录
references/recipes.md        十类图各自的画法要点