Editorial illustration 是一个面向文档站点的编辑插画生成技能，用于为每篇文档页面绘制一幅页首编辑插画，以视觉隐喻概括整篇文章的意图。其定位接近技术杂志委托插画师创作的场景：读者阅读正文之前，先通过一幅插画一眼感受文章要点。
一、用途与工作流程 该技能按四个部分自主运行，用户无需等待回复，技能会在过程中向用户发送进度更新。
- 解读（Interpretation）：通读文章全文，标出五处包含目标、强主张、张力、意外细节或情感时刻的段落；写出三个不超过20词的解读句，并选出最想探索的一个，同时确定希望读者感受到的一种情绪。
- 艺术风格（Artistic Style）：定义插画的视觉风格，包括线条、阴影、渐变、构图规则，以及光、颗粒、表面和边缘的绘制方式。目标风格为风格化2D故事书式的奇想写实，带有插画传说、丝网印刷和risograph印刷的质感，并参考Monument Valley、Global Village Coffeehouse 和 Nomada Studio 的 Gris 的光影与表面处理。风格强调海报美学、图形剪影和数学化构图，以清晰的层级引导视线。场景由3至5层平面构成，每层为简单剪影，边缘略带不规则，类似纸雕分层；远景更浅、更朦胧、更冷、对比度更低，近景更深更锐利；平面之间始终有雾气或光晕。画面中有一到两条长而流畅的曲线（如丝带、布、烟、河流、电缆、光轨、道路、根须）引导视线至主体，曲线有受光面、颗粒和线条，呈S形并至少扭转一次，在平面间穿插以展现深度。线条只出现在剪影与光相交处，颜色取自受光面或轮廓光，不是黑色或深灰，线宽在960宽度下为1.5到2.5px，只描绘剪影。背景有一层制图式装饰，如圆环、十字准星、标记点、点状罗盘、四尖星、虚线轨道等，以单一颜色低透明度绘制，不穿过主体。每个表面都有颗粒纹理，面可跨最多三种颜色（受光色、背光核心色、反射色），颜色过渡通过点状颗粒实现。物体为几何形但轮廓并非尺子画出的直线，每条边以约45px周期缓慢波动最多1px，并提供了波形函数代码。
- 构思（Ideation）：从文章中的名词出发列出十个具体物体或动作，找到一个物理世界中该方面已经发生的地方，再加入一个小小不可能性使其引人注目。用四种提示写出四个概念：场景（展示想法可见的情境）、替换（替换预期物体以改变含义）、融合（将两个物体合二为一）、反转（交换控制、支撑、承载或依赖关系）。按文章忠实度、视觉机制、易读性、情感贡献四项优先级比较概念，筛选出两个候选，各记录其最强机制和主要弱点，最终选择最优概念，必要时吸收另一概念的优点。
- 执行（Execution）：选择最能传达概念的视觉语言，包括透视、取景和空间关系；相机距离决定读者与概念的距离，高度决定主体是俯视还是仰视，镜头决定周围世界的重要性。从概念关系出发，将相机放在关系充满画面的位置，只框住想法发生的瞬间。先做两个小稿（一个展示整个场景，一个只框住想法发生部分），选定一个后细化成最终作品。
二、配色与输出 项目配置中的 .jotdown/config.json 提供项目主题作为起始调色板，可根据场景或情绪偏离。插画必须同时存在于亮色和暗色模式，亮色模式是同一场景的“不同时间段”，不可简单反转。颗粒密度也属于调色板，夜间阴影颗粒通常更密、发光更强，白天受光面带有更多高光颗粒。每个面在两种模式下都有自己的核心色和反射色，每个实体物体有自己的线条颜色。
插画作为独立SVG文件上传，在页面中以 markdown 图片形式放在 :::wide 容器内、front matter 之后。始终使用宽幅，因为插画如杂志跨页般开启故事，宽度与工作室宽度控制一致。 不要将SVG粘贴进页面：绘制好的插画可能有数百KB的路径数据，内联会成为每个代理读取页面时的第一内容，每次编辑都重新编译，浏览器无法缓存；作为文件只占页面一行。 文件放在 docs/_uploads/img/docs/ 下，按所开启的页面命名 illustration-<page>.svg，页面路径中的文件夹体现在文件名中，例如 docs/studio/branding.mdx 对应 illustration-studio-branding.svg。alt 描述场景中发生了什么，供无法看到图片的人使用；title 是插画传达的信息而非场景描述，作为图片下方说明和展开时显示的文字。
文件格式示例： <svg xmlns="http://www.w3.org/2000/svg" id="dark" class="pr" width="960" height="540" viewBox="0 0 960 540"> <style> .pr { --pr-sky: #d9dcf7; --pr-face-lit: #c9b2e6; --pr-face-core: #9a82c9; --pr-face-bounce: #e6b8c9; --pr-texture: 0.2; } .pr:target { --pr-sky: #0a0920; --pr-face-lit: #3a327f; --pr-face-core: #221c55; --pr-face-bounce: #5b3f7a; --pr-texture: 0.3; } </style> <rect width="960" height="540" fill="var(--pr-sky)" /> ... </svg> 两种调色板都在同一个文件中。每种颜色都是按角色命名的变量，在 <style> 中设置两次：亮色调色板设在图形的类上，暗色调色板设在 :target 下。暗色模式下页面在 #dark 处绘制同一文件，这正是让 :target 匹配的原因，因此根元素保留 id="dark"。在填充、描边和渐变停靠点中使用 var(--pr-…)。这是普通SVG，不是JSX。
三、适用场景与限制 该技能仅在处理文档站点时使用，适用于为文档页面生成页首编辑插画。资料未提供其他平台支持、收费方式、具体运行环境或性能指标。资料明确排除的风格包括：照片写实、Flash风格矢量剪贴画、干净平面填充与点状颗粒并置、实体物体边缘消散为点、整幅统一噪点纹理、黑色或深色轮廓、模糊或景深、画面中出现文字、为比例或代表读者而放置的微小人物（除非概念本身关于人）。