illustration-halftone-line

插画：半色调线描

一种编辑风格的黑白画风：在暖色纸面上使用单色黑墨水，人物以自信而略带摇晃的线条勾勒，线条在闭合前停住，所有灰色都由仿印刷质感的网点组成。适合表现平静、有人情味的产品场景：协作、评审、通勤、专注时刻。

适用范围：如果要用一条连续线配合套印错位的色块，请使用 illustration-one-line；如果要用粗笔刷轮廓和第二种平涂墨色，请使用 illustration-two-colour-brush；如果要用靛蓝色细线内填色并点缀少量色彩，请使用 illustration-line-interior。如果需求中需要任何颜色，这就不是合适的技能。

此风格提取自一组包含 14 种风格、共 42 张原创设计与编码卡片；examples/ 中的三张卡片是此风格已发布的卡片。

用一句话概括风格

暖色纸面上的黑线与黑色网点，不含其他元素：所有灰色都由抖动网点构成，其大小随色调变化，周围的线条保持开放。

调色板

角色	Hex	使用位置
纸色	#f4f1ea	全幅卡片矩形，以及所有需要遮住后方内容的形状填充
墨色	#111111（写作 #111）	所有线条、所有半色调网点、所有纯黑色块

• 仅限两种颜色，不例外：不使用灰色、不透明度、渐变或彩色点缀。灰色只能由网点呈现。
• 实心黑色形状内部使用纸色描边（stroke="#f4f1ea"，宽度 1.2–1.5）绘制头发高光、叶脉、裤褶和包袋接缝。
• 卡片大部分留白为纸色：测得的墨色覆盖率（线条、网点和黑色块合计）占卡片面积的 12–14%。

线条与填充

以下宽度以宽 480 为基准。画面组使用 stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"；局部元素可覆盖这些属性。

元素	宽度
人物、手部外轮廓、家具、鞋子轮廓	2.0（1.9–2.1）
屏幕内框、窗户玻璃、植物、小道具	1.6–1.7
手指和拇指皱褶、衣褶、袖口、裤脚、连帽衫接缝	1.3–1.6
键盘按键、指甲短线、纸质道具上的文字线条	1.1–1.3
涂鸦线、花括号、放射状短线	2.0–2.3

• 轮廓保持开放。 轮廓应是独立的开放路径，而不是填充形状的描边。每个物体留出 1–3 个间隙，宽 4–14 个单位，多设在转角处和线条交汇处；线条在碰到另一条线前 2–6 个单位处停止。已发布的列车车窗示例：M366 74 H410 C420 74 428 82 428 92 V138 M426 160 C424 168 418 174 410 174 H318 M300 174 H166 …（同一窗框上有两个间隙）。
• 纸色填充用于遮挡，而非勾勒。 每个与后方内容重叠的形状都使用 stroke="none" 和纸色填充，并先于网点与开放轮廓绘制。
• 手绘摇晃感。 整个画面组只使用一个滤镜，不在其他位置使用：低频扭曲值为 2.3，加上 0.8 的精细边缘粗糙效果。scripts/halftone.mjs 会生成该滤镜（<filter id="xx-wob">）；每张卡片都要设置独立的 --seed。
• 色调由网点呈现。 使用间距为 2.58 的抖动网格，网点面积与色调成正比：服装、靠垫、浅色道具和外层地面阴影使用 flat 0.19（浅色，网点半径约为 0.6）；头发块、阴影侧面、远侧肢体、地面阴影核心使用 flat 0.36–0.38（中间色，半径约为 0.85）。渐变色调（lin、rad）以 0.08 至 0.36 的范围为圆润形体添加明暗层次。
• 纯黑色用于每张卡片中的 3–5 个色块：头发、植物叶片、包袋、黑色 T 恤或裤子、笔记本电脑或显示器的深色边缘、鞋底、勾选标记。

人物

• 身形富有弹性、四肢修长。头发在内的头部高 40–44 px；站立人物高 230–250 px（5.5–6 个头高，占卡片高度的 65–70%）；坐姿人物的头顶距卡片顶端约 70 px。
• 头部采用侧面或近侧面视角。在局部坐标系 <g transform="translate(cx cy) rotate(a)"> 中构建每个头部：纸面风格的脸部形状带有尖角鼻楔，轮廓线从眉毛上方沿鼻子和下巴延伸至下颌，后脑部分隐藏在头发下方。采用已发布的 critic 卡片中的头部形状：脸部 M-16 18 C-26 0 -20 -24 4 -26 C20 -26 23 -10 22 -1 L31 9 Q29 11.5 23 12 C24 18 23 24 17 28 C11 32 0 31 -8 24 Z。${H.head(x, y, rot, dir, hair, { back, eye, smile })} 绘制的头部形状完全相同，朝右时 dir 为 1，朝左时为 −1；其局部脸部范围约为 −26…31 × −26…32，因此 (x, y) 大致位于脸部中央。脸朝左时，负的 rot 会让头部向下倾斜。
• 面部细节：眼睛是半径 r 1.8–1.9 的点（平静表情可用闭眼弧线），短眉弧线线宽为 1.6–1.7，微笑弧线线宽为 1.7–1.8，耳朵是带内侧小卷线的 C 形，线宽为 1.6；圆形眼镜在侧面画一个轮廓镜片，并延伸镜腿至耳朵（H.hair.glasses()）。不画腮红、瞳孔或睫毛。
• 头发：纯黑色块加一道线宽为 1.3 的纸面高光线，或点状色块（0.38 加轮廓线和两道线宽为 1.3 的发丝线）；发髻画成黑色圆形，马尾画成黑色水滴形，针织帽用点状纹理并配罗纹纸面帽檐。在头部坐标系中使用已发布卡片的预设：H.hair.curly(t)（带前侧卷发的点状发型；'flat 0.3' 看起来会是灰色）、H.hair.bun()、H.hair.ponytail()、H.hair.long（将 .back 作为头部的 back 选项，将 .front 作为其 hair）以及 H.hair.glasses()。头发轮廓需要有变化（发髻、马尾、卷发或刘海缺口）：如果帽状发型顶部平滑、发际线笔直，看起来就像头盔。
• 脖子画成纸面四边形，并加一道或两道线宽为 1.5 的线。肩部线条倾斜；躯干应是柔和的袋状轮廓，而不是方块。
• 衣物：近侧袖子和身体部分采用浅色点状纹理，阴影侧和远侧肢体采用中等深度的点状纹理，或用纸面褶皱线勾勒纯黑色衣物。罗纹下摆和袖口由一排线宽为 1.3 的短线构成。${H.limb([[x,y] shoulder, elbow, wrist], [halfWidths], tone)} 将袖子或裤腿绘制成两端开放的色调形状三层结构（tone 为 'flat 0.19' 表示中等色调，'' 表示裸露皮肤，'black' 表示纯黑色衣物）；两条黑色裤腿之间需要加一道线宽为 1.4 的纸面褶皱线。
• 手要画得大而富有表现力，从手腕到指尖的长度约为头高的 0.8 倍。手部结构和左右手请参照 references/craft.md。这种风格中，每根手指和拇指都要分别画成纸面填充形状；外轮廓为线宽 2.0 的开放线条；褶皱线和指甲短线的线宽为 1.2–1.6；手指呈扇形张开，彼此之间留出小间隙；袖口线横穿手腕。scripts/halftone.mjs 中的 ${H.hand(x, y, rot, sc, thumb)} 绘制已发布卡片中用于打字或休息姿势的手：手腕位于 (x, y)，手指沿局部 +x 方向延伸并弯向 +y 方向的表面，食指位于 −y 一侧；当 thumb 为 true 时，拇指画在食指旁边。手指朝左时，将其镜像：<g transform="translate(x y) scale(-1 1)">${H.hand(0, 0, rot, sc, false)}</g>。指向和抓握的手也按相同方式手绘（画出手背、伸出的食指、以叠放环状线条表示弯曲的手指并加上线宽为 1.3 的褶皱线，以及单独绘制的拇指）。
• 脚：简单的运动鞋，鞋面为纸面风格，鞋底为黑色块，并加线宽为 1.3–1.6 的鞋带短线（${H.shoe(x, y, dir, sc)}，sc ≈ 0.6，(x, y) = 鞋跟底部，脚踝位于 x + 8·dir、y − 14），鞋子落在地面线上。人物的两个鞋跟至少相距 26：两只鞋重叠超过一个鞋头的宽度时，看起来就像一只双鞋。
• 合适的姿势：俯身在桌边，一侧膝盖弯曲，一只手臂撑在身后；坐着时将笔记本电脑放在抬起的大腿上，背靠隔板；坐在凳子上打字，远侧腿收起；站立时采用反胯姿势，一只手托着下巴，另一只手在胯部拿着杯子；两人分坐小桌两侧，讲解者身体前倾并用手指向对方。不要直挺挺地站着，双臂垂在身体两侧。若要让完成的躯干向前倾，将躯干、脖子和头部放入 rotate(−8 hipX hipY) 中，并调整手臂的肩部起点以匹配。

装饰与道具

• 涂鸦：每张卡片 2–4 个，悬浮在上方三分之一区域的空白纸面上：一个有三个环的卷曲曲线（2.3），头部上方三道放射状短线，表示思考或惊讶（1.8–2.0），花括号 { }（2.0），实心黑色对勾，一个带三个黑点的聊天气泡（r 3.2），一张带线条的文档或图片卡片。
• 道具采用线稿并填充纸色：有敞开桌腿的书桌和桌子、凳子、长椅、绘图桌、显示器和笔记本电脑（其中一个深色边缘为实心黑色）；屏幕上有 </>、1.3–1.7 的文字线条和光标；马克杯和外带杯（点状杯身或黑色环带）；有实心黑色叶片和纸色叶脉的植物；黑色托特包。
• 地面：绝不画完整线条。只在物体下方画短线，宽度为 1.9–2.0，并在每只脚、桌腿或底座下方加一个点状阴影池：浅色椭圆（0.19，ry 5.6），内含深色中心（0.36，宽度的 58%，ry 3.4）。${H.pool(cx, cy, rx)} 会同时绘制两者。
• 禁止：颜色、灰色填充、到处都是带描边的封闭方框、投影、闪光、排线（用点而非线来表现色调）、除 </> 和代码字形之外的文字。

构图

• 在 <defs> 之前先放纸张矩形：<rect id="xx-paper" width="480" height="360" fill="#f4f1ea"/>，保持方正，不加 rx。
• 墨迹边界框占卡片宽度的 78–82%、高度的 73–80%；边距为 37–55 px（2x 渲染时为 75–110 px）。
• 在 <g id="xx-frame" transform="translate(dx dy)"> 内按 1:1 绘制，并稍作偏移以居中（已发布的卡片使用 ±4），或者先画大图，再将整个 frame 缩放到 0.86，就像第一张卡片那样。缩放后仍须保持线宽为 2.0。
• 一到两个人物与一件家具或一台设备互动；焦点是手与该物体的接触处。涂鸦放在上方的空白纸面上，不能遮在人物上。
• 均衡分布实心黑色区域：分散 3–5 块黑色区域，避免卡片任一侧全是灰色点阵。
• 地面位于 y 305–322；所有站立的物体都通过阴影池与地面接触。

技巧

1. 编写源文件并编译。 使用 @P@ 作为 id 前缀，在 <defs> 内加入 ``，并使用 <stip> 标签表示色调、使用 ${…} 表达式，编写 card.src.svg，然后运行： node scripts/halftone.mjs card.src.svg card.svg --prefix oh- --seed 41 它会写入抖动滤镜、每个网点图案对应的裁剪路径以及网点；如果有任何 id 缺少前缀，则会报错。运行 node scripts/halftone.mjs demo /tmp/halftone-demo.svg 会写入色调样本（请将其放在 skill 文件夹之外的任意位置）。每个 ${…} 都是 JavaScript（支持嵌套花括号和对象参数），并可使用内置辅助函数 H.pool、H.E、H.shoe、H.hand、H.limb、H.head 和 H.hair.*；源文件顶部的 <gen>…</gen> 区块可放置你自己的辅助函数，例如可重复使用的指向手势。

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 360">
   <rect id="@P@paper" width="480" height="360" fill="#f4f1ea"/>
   <defs></defs>
   <g id="@P@frame" transform="translate(0 0)">
   <g id="@P@art" filter="url(#@P@wob)" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
     ${H.pool(120, 307, 24)}
     <path d="M40 307.6 H150" stroke-width="2"/>
     …
   </g></g></svg>
   

2. 三层色调形状。 相同的 d 使用三次：纸色填充、网点、开放描边。

   <path d="M98 190 C94 214 … Z" fill="#f4f1ea" stroke="none"/>
   <stip d="M98 190 C94 214 … Z" t="flat 0.19"/>
   <path d="M98 190 C94 214 90 236 88 252 C86 268 82 284 79 299 M96 300 C98 284 102 268 104 254"/>
   

   在形状的一部分上叠加第二个较小的 <stip … t="flat 0.36"/>，即可呈现阴影面。第一张已发布的卡片改用 60-unit 的平铺网点（浅色为 fill="url(#@P@dl)"，中间色调为 url(#@P@dm)）；如果源文件引用了平铺图案，编译器会添加该图案。优先使用 <stip>：它能呈现渐变效果且保持清晰。色调参数：flat t、lin x1 y1 t1 x2 y2 t2、rad cx cy r t0 t1、noise a scale（相乘）。<stip> 路径支持 M L H V C S Q T Z，不支持圆弧：椭圆请使用 ${H.E(cx, cy, rx, ry)}。
3. 实心黑色并加纸色细节。 先写 <path d="…hair…" fill="#111"/>，再写 <path d="…" stroke="#f4f1ea" stroke-width="1.3"/>，添加一处高光或褶皱。
4. 涂鸦卷曲曲线（2.3，三个环）：<path d="M60 268 C53 259 60 248 67 253 C74 258 65 265 63 256 C61 245 74 236 81 243 C88 250 75 257 75 246 C75 233 91 224 96 234" stroke-width="2.3"/>。

失败模式

• 网点过密。 “Train Ride” 得分停在 7 分，因为长裤使用了 0.52 色调：网点融合成了斑块。点状区域的色调应保持在 0.38 或更浅；再深就会变成纯黑。
• 站姿僵硬，手像连指手套。 “Design Critique” 因人物直挺挺地站着、双手像团块而只得了 6 分。让站立人物采用反向平衡姿势，并为每只手安排具体动作；每根手指都要画成独立的带轮廓形状。
• 模仿参考图。 “Design Critique” 的首个布局被两位评审否决，认为它与用于研究风格的参考图过于相似。围绕家具和自己设计的真实动作来安排每个场景，切勿照搬参考图的布局（references/craft.md，原创性）。
• 拇指方向错误。 已发布的三张卡片都需要修正左右手。为每只手记下左手或右手、掌心或手背，以及手指方向，然后进行拇指验证（references/craft.md）。
• 轮廓封闭且粗细一致。 粗细一致的全封闭轮廓看起来像剪贴画。每个物体留出 1–3 处缺口，并根据作用使用 2.0 / 1.6 / 1.3 的线宽。
• 用灰色涂层代替网点。 网点图案太细（间距小于 2.2 或半径小于 0.4），在 1x 显示时会看起来像一片灰色。间距应保持为 2.58。
• 多余的灰色。 任何 #888、opacity 或模糊阴影都会违反双色规则；使用 --palette 运行 lint 可检测这些颜色。
• 脚和家具悬空。 每只脚、每条桌腿和每个底座都需要地面线和下方的点状阴影。
• 头发像头盔。 在自测中，两个光滑的发帽造型配上笔直的发际线，在 1x 显示时看起来像针织帽和头盔。发髻、马尾、卷发或刘海缺口都能解决问题；请使用 H.hair 预设。
• 两只鞋连成一只。 双脚间距为 14 时重叠成了一只长鞋。人物脚跟至少相距 26，远侧的脚要向后收。
• 人物身上的涂鸦。 与头部或手部重叠的曲线或短线会看起来像错误。每个涂鸦周围留出 10 px 的空白。

示例

• pair-programming.svg：“Pair Programming”。一名戴着点状针织帽的男子坐在桌前，对着显示器打字；一名扎黑色马尾的女子俯身靠近，用铅笔指着一行代码；场景中还有一株黑叶植物、凳子、马克杯、大括号、对勾和曲线涂鸦。展示了 60 单位的网点图块、0.86 的画框缩放比例，以及打字和握铅笔的手部姿势。
• train-ride.svg：“Train Ride”。一名扎黑色发髻的女子坐在地铁长椅上，把笔记本电脑放在抬起的大腿上，用双手打字；场景中还有显示沿途风景的车窗、吊环、放在地上的黑色托特包、聊天气泡和曲线涂鸦。展示了坐姿、渐变网点，以及（长裤上）过深的色调。
• design-critique.svg：“Design Critique”。一名穿黑色 T 恤的男子俯身靠在绘图桌上，用笔圈出打印稿上的一个按钮；一名穿点状毛衣、着黑色长裤的女子站着，一只手托着下巴，臀侧拿着外带饮料杯。展示了俯身姿势、倾斜的桌面、托腮握法和纯黑色衣物。

工作流

在此技能的文件夹中运行命令。

1. 简述。 写出主题，以及能展现主题的一个动作（“导师在学生的笔记本电脑上讲解一个错误”）。
2. 选择姿势和主体物件。 选择一到个人物，以及一件家具或设备。为每只手记录 LEFT 或 RIGHT、手掌或手背、手指方向，以及手碰到的东西。
3. 搭建草图。 在 card.src.svg 中，用火柴人骨架（2.0 线条）和家具轮廓勾勒每个人物；编译并渲染；在细化前检查人物高度、地面 y 坐标和边距。
4. 绘制。 从后往前：地面色块和线条、家具、远处人物的各部分、近处人物的各部分、最后画手，然后添加涂鸦。每个带色调的形状都按以下顺序绘制：纸张填充 → <stip> → 开放轮廓。
5. 编译： node scripts/halftone.mjs card.src.svg card.svg --prefix oh- --seed 41。
6. 渲染： node scripts/render.mjs card.svg card.png。
7. 将画稿与示例并排制成图表： node scripts/render.mjs --sheet sheet.png examples/*.svg card.svg。线条粗细、圆点大小、纸张和留白量是否一致？
8. 放大查看每只手、每张脸、每只脚和接触点：node scripts/render.mjs card.svg hand.png --zoom 180,170,60,50 --scale 8。拇指验证：在一个临时的源文件副本中，将拇指的纸张填充设为 #ff0000，食指的纸张填充设为 #0000ff，然后编译、放大检查，最后删除副本。在 H.hand 中，手掌之后的第一条手指路径是食指。
9. 根据 references/craft.md 中的五项标准进行严厉评审；在源文件中修正，绝不修改编译后的 SVG；重复步骤 5–9。预计需要四轮。
10. Lint： node scripts/lint.mjs card.svg --prefix oh- --palette style.json。任何 WARN 都表示有多余颜色：将其移除。

验证

• 纸张矩形 #f4f1ea 是第一个元素，铺满整个画面，且没有 rx。
• 只出现 #111 和 #f4f1ea；除了唯一的抖动滤镜外，不使用透明度、渐变或模糊。
• 抖动滤镜包裹整个图稿组，不包含其他内容。
• 主线条为 2.0；次要线条为 1.6–1.7；皱褶线为 1.3–1.6；任何线条都不低于 1.1。
• 每个物件的轮廓都至少留有一个有意的缺口；线条在连接处要留出间隙。
• 点状色调为 0.19 或 0.36–0.38（渐变范围为 0.08–0.38）；点状色调的深度不得超过 0.4。
• 有 3–5 块纯黑色块，分布在卡片各处。
• 头部为侧面轮廓，带楔形鼻子、点状眼睛和浅浅的微笑；头发轮廓有断口；人物身高为 5.5–6 个头高。
• 每个人物的脚跟间距至少为 26；双脚踩在地面线条上。
• 每只手都有独立勾勒的手指、位于正确一侧的拇指，以及与手臂相连的手腕和袖口。
• 每只脚和底座下方都有地面线条及双色点状色块；地面上没有连续的线条。
• 留白处有 2–4 个涂鸦，与人物保持距离。
• 墨迹区域宽度占 78–82%，高度占 73–80%；边距为 37–55 px（2x 渲染时为 75–110 px）；卡片的大部分区域留白。
• 无需标题说明，主体在 1x 尺寸下也清晰可辨。
• scripts/lint.mjs 使用 --prefix 和 --palette style.json 后通过。