用三个词，生成一张自己的线稿图

30 秒速查

• 网址后面接 ?g=主体-动作-标记层
• 三个词用短横线连：puzzle-misreg-purple
• 打开站内页面，改一个词，图就变；SVG 和 PNG 都能下
• 不用注册、不上传；图在浏览器里画完
• 站内小工具：打开生成器；词表

一张图，为什么不能只是配菜

大多数教程里的图，是配菜：扫一眼，觉得“哦，是这样”，然后继续往下读。关掉页面，图留在页面上，读者手里什么都没多。

我们想试另一种做法：图本身是一件能带走的东西。

不是截图，不是示意图，是一张你自己组合出来的线稿图。你可以下载 SVG，也可以导出 PNG；可以放进自己的文章、封面、PPT，或者只是存着。

这篇文章讲的就是这个站内小工具：它怎么用，为什么这么做，以及它现在还没做到哪。

怎么用：改三个词

这个站内小工具只有一个输入：网址里的 g 参数。

?g=主体-动作-标记层

三个词用短横线连起来。比如：

?g=puzzle-misreg-purple

就是“拼图 + 错位 + 紫标”。直接打开：在站内小工具里打开这一组。

打开页面之后，改一个词，图就变。把 puzzle 换成 paper，主体从拼图变成纸；在「错位」和「断开」这两个动作里，把 green 换成 purple，主体还是青绿，只是在旁边多一条紫色标记线；把 misreg 换成 broken，第二层从实线变成断开的虚线。「平移」是个例外：它只把整块图形挪 8 像素，不画第二层，标不标出来是同一张图。

不用注册，不用上传，不用装软件。它现在就在站内：打开 https://www.genwozuo.com/tools/online/svg/，把上面这段接在地址后面；词表页是 https://www.genwozuo.com/tools/online/svg/vocab/。

三个词分别是什么

词位	可选项	它决定什么
主体	paper 纸 / box 盒子 / puzzle 拼图 / frame 相框	画面中间那个大轮廓
动作	misreg 错位 / slide 平移 / broken 断开	第二根线和第一根线怎么错开
标记层	green 不标 / purple 紫标	主体旁边要不要多一条紫色标记线（「平移」不画第二层）

一句话：青绿是主体，紫是「标出不对劲的那一条」。第三个词选 green 就不标，选 purple 就在主体旁边叠一条紫色的线（「平移」除外：它只挪位置、不画第二层，选 green 还是 purple 出图一样）；主体不会变成紫色。

三个词组合起来，是 4 × 3 × 2 的格子。拼图配「断开」会和缺口打架，站内小工具里置灰，所以实际可用 22 种。其中，「平移」配紫标和配不标是同一张图，「不标」时错位与断开也落在同一条线上——按当前代码数，真正长得不一样的画面是 15 种。现在词表还小，是故意的：先把每种组合都看一遍，确认成立，再往外扩。

三个组合，先看画面

下面这三张，是我从可用组合里挑出来的。它们不是手绘示意图，是这个站内小工具按当前代码渲染出来的画面。

?g=puzzle-misreg-purple：青绿的拼图轮廓，紫色标记线往右错开 12 像素（纵向没动）。第一眼看像“印歪了”，但错得很有秩序。

?g=paper-broken-purple：青绿矩形，紫色第二层是断开的虚线，错开一点。它比“错位”安静，但“断开”的意思很清楚。

?g=box-misreg-purple：青绿盒子，旁边一条紫色错位线，错开只有一点点。它没有前两张那么“响”，适合放在文章里当轻一点的例子。

27 张缩略图，本来就是一套手写系统

这个站内小工具不是临时起意。

站内 27 篇教程，每篇都有一张 1080 × 675 的线稿缩略图。它们不是买的图库，也不是 AI 生成的；是同一套手写 SVG：米白底、青绿线，偶尔加一道紫色套印错位线。

每张图只讲一件事：

• 讲表格乱码的那张，是一张整齐的表格里，只有一小段线错开了半格；
• 讲两个表格合并的那张，是两张带拼图口的网格纸，从左右碰到一起；
• 讲 AI 接口重试的那张，是一架纸飞机撞墙折返，再从高处绕过去；
• 讲断点续跑的那张，是一条虚线断在书签那里，书签之后接着走。

这些画面不是“配图师找一张差不多的图”，是先把教程要做的事想清楚，再决定用哪一根线、往哪边错。27 张图，就是 27 次这样的选择。

所以这个站内小工具不是新发明。它做的是把这套已经用了 27 次的语言，拆成最小的三个变量：主体、动作、标记层。以前是我们画给教程看，现在读者可以自己组合一张。

这也是为什么 27 张缩略图这一段要放在文章中间：如果先讲这个站内小工具，再补一句“我们也有缩略图”，那是功能说明；先说 27 张图是怎么一张张画出来的，再说“现在把这套语法做成一个站内小工具”，它才是一个自然延伸。

为什么是网址，不是上传或注册

做一个站内小工具，专门生成图片，常见做法是：上传素材、选模板、登录、保存到作品集。

我们选了更笨的一种：一个组合就是一个网址。

所以它没有上传这一步。你打开页面，线条由浏览器里的脚本画出来；图在浏览器里画完，不出这台电脑。我们把这句话直接写在这个站内小工具上：

站内小工具：选三个词，出一张图。不用注册，不上传——图在你的浏览器里画完，不出这台电脑。

“不上传”不是一句态度，是能验证的事实：页面没有上传接口，图由浏览器里的脚本画出来；你下载 SVG 或 PNG，也是在本地生成文件。

好处很实际：

• 发给人，对方打开就是同一张图，不用描述“你把那个滑块往左拉一点”；
• 在站内页面里，改一个词，等于换一个变量，不用重新填表；
• 不用账号，就没有“登录后保存”的门槛，也没有“你的图存在我们服务器上”的问题；
• 图小到可以塞进一个 URL，不需要一个 App。

这不是技术炫耀。恰恰相反，是因为这张图足够小，才配得上这么轻的做法。

现在做到哪，没做到哪

已经有的：

• 站内小工具和词表页都能打开；词表页可以逐词看样张；
• 4 个主体、3 个动作、2 种标记层；拼图配断开置灰，实际 22 种可用组合，真正不同的画面 15 种；
• SVG 和 PNG 都能下载；
• 不用注册、不上传。

还没有的：

• 没有账号，也没有历史记录，关掉页面就没了；
• 没有短链，组合串还比较长；
• 词表只有 9 个词，离“想画什么就画什么”还很远；
• 部分动作组合还在调效果，不是每一种都同样好看。

它现在已经在站内，但还是早期版本；先把“三个词能不能出一张好图”这件事验证扎实，再谈更多词。

下一步

接下来补三件事：

1. 短链：把 ?g=puzzle-misreg-purple 收短，方便发人；
2. 标记层样张：动作已经各配「纸 / 相框」两张样张，标记层还只有色块——补上线稿样张，读者才看得出紫标到底标在哪里，不用凭空猜；
3. 更多词：主体、动作、标记层都可以扩，但每加一个词，都要把新组合重新看一遍。

如果你有想加的主体或动作，发邮件到 hello@genwozuo.com。我们先看它在现有组合里成不成立，再决定要不要加。

教程的终点，是手里多一张图

我们做教程，最怕的不是读者没看完，是看完了、也懂了，但手里什么都没多。

一张图很小，但它是一个开始：读者可以不只“看会”，还可以“拿走一个东西，改成自己的”。

现在打开 https://www.genwozuo.com/tools/online/svg/，改三个词，就能拿走一张。它已经在站内跑起来了。