illustration-halftone-line

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Illustration: Halftone line

插画：半色调线条

An editorial black-and-white style: one black ink on warm paper, figures drawn with a confident, slightly wobbly line that stops short instead of closing, and every grey made of printed-looking dots. It suits calm, human product moments: collaboration, reviews, commutes, focus time.

Boundary: for a single continuous line with off-register colour patches use

illustration-one-line

; for thick brush outlines with a second flat ink use

illustration-two-colour-brush

; for thin indigo interiors with sparse colour accents use

illustration-line-interior

. If the brief wants any colour, this is the wrong skill.

Extracted from a set of 42 original design-and-coding cards in 14 styles; the three cards in

examples/

are this style's shipped cards.

一种编辑类黑白风格：仅用一种黑色油墨印在暖色纸上；人物由自信、略带手绘抖动的线条勾勒，线条会提前停止而不闭合；所有灰度均通过印刷质感的网点呈现。它适合平静、有人情味的产品场景：协作、评审、通勤、专注工作时段。

边界：对于带套印偏移色块的单根连续线，请使用

illustration-one-line

；对于带第二种平涂油墨的粗笔触轮廓，请使用

illustration-two-colour-brush

；对于带稀疏彩色点缀和纤细靛蓝色内部线条的插画，请使用

illustration-line-interior

。如果需求 brief 要求任何色彩，则不适合使用此 skill。

提取自一组包含 14 种风格、共 42 张原创设计与编码卡片的内容；

examples/

中的三张卡片就是此风格已发布的卡片。

The look in one sentence

一句话概括这种视觉

Black line and black dots on warm paper, nothing else: every grey is a field of jittered halftone dots whose size tracks the tone, and the line around it is left open.

暖色纸上的黑色线条和黑色圆点，除此之外别无其他：每一处灰度都是由抖动的半色调网点构成的区域，网点大小随色调变化，而周围的线条轮廓保持开放。

Palette

调色板

Role	Hex	Where it goes
Paper	`#f4f1ea`	the full-bleed card rect, and the fill of every shape that must hide what is behind it
Ink	`#111111` (written `#111` )	every line, every halftone dot, every solid black mass

Two colours, no exceptions: no greys, no opacity, no gradients, no colour accents. A grey comes only from dots.
Paper-coloured strokes (
```
stroke="#f4f1ea"
```
, 1.2–1.5) are drawn inside solid black shapes for hair highlights, leaf veins, trouser creases and bag seams.
Most of the card is open paper: measured ink cover (lines, dots and blacks together) is 12–14% of the card.

角色	十六进制值	使用位置
纸张	`#f4f1ea`	铺满卡片的矩形，以及每个需要遮挡后方内容的形状的填充色
油墨	`#111111` （写作 `#111` ）	所有线条、所有半色调圆点、所有纯黑色块

只有两种颜色，没有任何例外：不用灰色、不用透明度、不用渐变，也不添加彩色点缀。灰色只能由圆点构成。
纸色描边（
```
stroke="#f4f1ea"
```
，1.2–1.5）绘制在纯黑形状内部，用于头发高光、叶片纹理、裤褶和包袋接缝。
卡片的大部分区域保留纸张底色：实测总墨量（线条、圆点和黑块合计）占卡片的 12–14%。

Line and fill

线条与填充

Widths at 480 wide. The art group carries

stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"

; parts override it.

Element	Width
Figures, hands' outer contour, furniture, shoes' outline	2.0 (1.9–2.1)
Screens' inner frame, window glass, plants, small props	1.6–1.7
Finger and thumb creases, folds, cuffs, hems, hood seams	1.3–1.6
Keyboard keys, nail ticks, text lines on paper props	1.1–1.3
Squiggles, braces, radiating ticks	2.0–2.3

Open contours. An outline is a separate open path, not the fill's stroke. Leave 1–3 gaps of 4–14 units per object, mostly at corners and where one line would meet another, and stop lines 2–6 units short of the line they would hit. Example from the shipped train window:
```
M366 74 H410 C420 74 428 82 428 92 V138 M426 160 C424 168 418 174 410 174 H318 M300 174 H166 …
```
(two gaps on one frame).
Paper fills hide, they do not outline. Each shape that overlaps something behind it gets a paper fill with
```
stroke="none"
```
, drawn before its dots and its open outline.
Hand wobble. One filter on the whole art group, nowhere else: a low-frequency warp of 2.3 plus a fine edge roughening of 0.8.
```
scripts/halftone.mjs
```
writes it (
```
<filter id="xx-wob">
```
); give each card its own
```
--seed
```
.
Tones are dots. A jittered grid at pitch 2.58 with dot area proportional to tone:
```
flat 0.19
```
(light, dot r ≈ 0.6) for clothes, cushions, light props and the outer floor pool;
```
flat 0.36–0.38
```
(mid, r ≈ 0.85) for hair blobs, shadow sides, the far limb, the core of a floor pool. Graded tones (
```
lin
```
,
```
rad
```
) shade rounded forms from 0.08 to 0.36.
Solid black for 3–5 masses per card: hair, a plant's leaves, a bag, a black tee or trousers, a laptop's or monitor's dark edge, shoe soles, a check mark.

在宽度为 480 的画布上的线宽。art group 带有

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

开放轮廓。 轮廓应是独立的开放 path，而不是填充形状的 stroke。每个物体留出 1–3 个宽度为 4–14 units 的缺口，主要位于转角以及两条线本应相接的位置；线条应比它将要碰到的线提前 2–6 units 停止。已发布的列车窗口示例：
```
M366 74 H410 C420 74 428 82 428 92 V138 M426 160 C424 168 418 174 410 174 H318 M300 174 H166 …
```
（同一个框架上有两处缺口）。
纸色填充只负责遮挡，不负责描边。 每个与后方内容重叠的形状都要设置纸色填充和
```
stroke="none"
```
，并在其圆点和开放轮廓之前绘制。
手绘抖动。 整个 art group 只使用一个滤镜，其他任何位置都不使用：低频扭曲为 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 恤或长裤、笔记本电脑或显示器的深色边缘、鞋底、对勾。

Characters

人物

Rubbery and long-limbed. Head with hair 40–44 px tall; a standing figure is 230–250 px (5.5–6 heads, 65–70% of the card height); a seated figure's head top sits about 70 px from the top of the card.
Heads in profile or near-profile. Build each in a local frame
```
<g transform="translate(cx cy) rotate(a)">
```
: a paper face shape with a pointed nose wedge, an open outline from the brow over the nose and chin to the jaw, the back hidden under the hair. From the shipped critic's head: face
```
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 })}
```
draws exactly this head, facing right (
```
dir
```
1) or left (−1); its local face spans about −26…31 by −26…32, so
```
(x, y)
```
is roughly the middle of the face. For a face turned left, a negative
```
rot
```
tips it down.
Face marks: an eye dot
```
r 1.8–1.9
```
(or a closed-eye arc for calm), a short brow arc at 1.6–1.7, a small smile arc at 1.7–1.8, an ear as a C with an inner curl at 1.6, round glasses as one outline lens in profile with an arm to the ear (
```
H.hair.glasses()
```
). No blush, no pupils, no lashes.
Hair: a solid black blob with one 1.3 paper highlight stroke, or a dotted blob (0.38 plus an outline with two 1.3 strand lines); buns are black circles, ponytails black teardrops, beanies dotted with a ribbed paper band. Presets from the shipped cards, in the head's frame:
```
H.hair.curly(t)
```
(dotted crop with a front curl;
```
'flat 0.3'
```
reads as grey),
```
H.hair.bun()
```
,
```
H.hair.ponytail()
```
,
```
H.hair.long
```
(pass
```
.back
```
as the head's
```
back
```
option and
```
.front
```
as its hair) and
```
H.hair.glasses()
```
. Hair needs a broken silhouette (a bun, a tail, curls or a fringe notch): a smooth cap with a straight hairline reads as a helmet.
Necks are a paper quad with one or two 1.5 lines. Shoulders slope; torsos are soft sacks, not boxes.
Clothing: light dots on the near sleeve and body, mid dots on the shadow side and the far limb, or a solid black garment with paper crease lines. Ribbed hems and cuffs are rows of 1.3 ticks.
```
${H.limb([[x,y] shoulder, elbow, wrist], [halfWidths], tone)}
```
builds a sleeve or trouser leg as the toned-shape triple with open ends (tone
```
'flat 0.19'
```
,
```
''
```
for bare skin,
```
'black'
```
for a solid garment); two black legs need a 1.4 paper crease line between them.
Hands are large and expressive, about 0.8 of the head height from wrist to fingertip. Follow
```
references/craft.md
```
for construction and handedness. In this style each finger and the thumb is its own paper-filled shape; the outer contour is an open line at 2.0; creases and nail ticks are 1.2–1.6; fingers fan with small gaps; a cuff line crosses the wrist.
```
${H.hand(x, y, rot, sc, thumb)}
```
in
```
scripts/halftone.mjs
```
draws the typing or resting hand used on the shipped cards: wrist at
```
(x, y)
```
, fingers along local +x bending onto a surface toward +y, the index on the −y edge and the thumb beside it when
```
thumb
```
is true. For fingers pointing left, mirror it:
```
<g transform="translate(x y) scale(-1 1)">${H.hand(0, 0, rot, sc, false)}</g>
```
. Pointing and gripping hands are drawn by hand in the same manner (back of hand, an extended index, curled fingers as stacked loops with 1.3 creases, the thumb as its own shape).
Feet: simple sneakers with a paper upper, a black sole slab and 1.3–1.6 lace ticks (
```
${H.shoe(x, y, dir, sc)}
```
, sc ≈ 0.6,
```
(x, y)
```
= heel bottom, the ankle lands at
```
x + 8·dir
```
,
```
y − 14
```
), resting on the floor stroke. Set a figure's two heels at least 26 apart: two shoes overlapping by more than a toe read as one double shoe.
Poses that work: leaning over a table with one knee bent and one arm braced behind the back; seated with a laptop on a raised thigh, back against a partition; perched on a stool typing with the far leg tucked; standing in contrapposto, chin resting on one hand, the other holding a cup at the hip; two people seated either side of a small table, the explainer leaning in and pointing. Never bolt upright with both arms hanging. To lean a finished torso, wrap torso, neck and head in
```
rotate(−8 hipX hipY)
```
and re-aim the arm's shoulder point to match.

造型如橡胶般柔软、四肢修长。带头发的头部高 40–44 px；站立人物高 230–250 px（5.5–6 头身，占卡片高度的 65–70%）；坐姿人物的头顶距卡片顶部约 70 px。
头部采用侧面或接近侧面的视角。在局部坐标系
```
<g transform="translate(cx cy) rotate(a)">
```
中构建每个头部：使用带尖鼻楔形的纸色脸部形状，开放轮廓从眉部越过鼻子和下巴延伸至下颌，后脑藏在头发下。已发布的评审者头部示例：脸部
```
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
```
作为头发），以及
```
H.hair.glasses()
```
。头发轮廓必须存在明显断点，如发髻、发尾、卷发或刘海缺口；平滑且发际线笔直的帽状头发会像头盔。
颈部是带一至两条 1.5 线条的纸色四边形。肩膀应有倾斜，躯干是柔软的袋形，而不是方盒。
服装：近侧衣袖和身体使用浅色圆点，阴影侧和远侧肢体使用中灰圆点；也可以使用带纸色褶线的纯黑服装。螺纹下摆和袖口由一排排 1.3 的短线构成。
```
${H.limb([[x,y] shoulder, elbow, wrist], [halfWidths], 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 方向弯曲落到平面上；当
```
thumb
```
为 true 时，食指位于 −y 边缘，拇指位于其旁边。要让手指朝左，可进行镜像：
```
<g transform="translate(x y) scale(-1 1)">${H.hand(0, 0, rot, sc, false)}</g>
```
。指向和抓握手也采用相同方式手工绘制，包括手背、伸出的食指、以叠放环线表现的弯曲手指，以及独立绘制的拇指。
脚部：简单的运动鞋，纸色鞋面、纯黑鞋底板和 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)
```
中，并重新调整手臂肩点的位置。

Decor and props

装饰与道具

Doodles, 2–4 per card, floating in open paper in the upper third: a curly squiggle with three loops (2.3), three radiating ticks above a head for a thought or surprise (1.8–2.0), curly braces
```
{ }
```
(2.0), a solid black check mark, a chat bubble with three black dots (r 3.2), a document or image card with lines.
Props are line drawings with paper fills: desks and tables with open legs, stools, benches, a drafting table, monitors and laptops (one dark edge solid black), screens carrying
```
</>
```
, text lines at 1.3–1.7 and a cursor, mugs and takeaway cups (dotted body or a black band), a plant with solid black leaves and paper veins, a black tote.
Floor: never a full line. Short strokes at 1.9–2.0 only under what stands there, plus a dotted pool under every foot, leg or base: a light ellipse (0.19, ry 5.6) with a darker core (0.36, 58% of the width, ry 3.4).
```
${H.pool(cx, cy, rx)}
```
writes both.
Never: colour, grey fills, outlined closed boxes everywhere, drop shadows, sparkles, hatching (tone is dots, not lines), text other than
```
</>
```
and code glyphs.

涂鸦：每张卡片 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)}
```
会同时写入这两层。
禁止使用：彩色、灰色填充、到处封闭的方框轮廓、投影、闪光点、斜线排线（色调应使用圆点而非线条），以及
```
</>
```
和代码字形以外的文字。

Composition

构图

Paper rect first, before

<defs>

<rect id="xx-paper" width="480" height="360" fill="#f4f1ea"/>

, square, no

rx

Ink bounding box 78–82% of the card width and 73–80% of its height; margins 37–55 px (75–110 px on the 2x render).
Draw at 1:1 inside
```
<g id="xx-frame" transform="translate(dx dy)">
```
with a small nudge to centre (the shipped cards use ±4), or draw large and scale the frame by 0.86 as the first card does. Keep the 2.0 line after any scale.
One or two figures interacting with one piece of furniture or one device; the focal point is the hands on that object. Doodles go in the open paper above, never on top of a figure.
Balance the solid blacks: spread 3–5 black masses so no side of the card is all grey dots.
The floor sits at y 305–322; everything that stands touches it through a pool.

首先绘制纸张矩形，并放在
```
<defs>
```
之前：
```
<rect id="xx-paper" width="480" height="360" fill="#f4f1ea"/>
```
，保持直角，不使用
```
rx
```
。
油墨边界框应占卡片宽度的 78–82%、高度的 73–80%；边距为 37–55 px（2 倍渲染时为 75–110 px）。
在
```
<g id="xx-frame" transform="translate(dx dy)">
```
中按 1:1 绘制，并用小幅位移居中（已发布卡片使用 ±4）；也可以像第一张卡片那样先放大绘制，再将 frame 缩放到 0.86。缩放后仍须保持 2.0 的主线条。
安排一到两个人物与一件家具或设备互动，视觉焦点应是人物放在该物体上的手。涂鸦位于人物上方的开放纸面区域，绝不能叠在人物身上。
平衡纯黑色块：将 3–5 个黑块分散在画面中，避免卡片某一侧全部由灰色圆点占据。
地面位于 y 305–322；所有站立物体都要通过投影与地面建立接触。

Techniques

技术

Write a source, compile it. Author

card.src.svg

with

@P@

for the id prefix,

<!--DEFS-->

inside

<defs>

<stip>

tags for tones and

${…}

expressions, then:

node scripts/halftone.mjs card.src.svg card.svg --prefix oh- --seed 41

It writes the wobble filter, one clip path per stipple, the dots, and fails if any id lacks the prefix.

node scripts/halftone.mjs demo /tmp/halftone-demo.svg

writes the tone swatches (put it anywhere outside the skill folder). Every

${…}

is JavaScript (nested braces and object arguments are fine) with the built-in helpers

H.pool

H.E

H.shoe

H.hand

H.limb

H.head

and

H.hair.*

; a

<gen>…</gen>

block at the top of the source holds your own helpers, such as a pointing hand you reuse.

svg

<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--></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>

The toned-shape triple. Same
```
d
```
three times: paper fill, dots, open outline.
svg
```
<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"/>
```
A second, smaller
```
<stip … t="flat 0.36"/>
```
laid over part of the shape makes its shadow side. The first shipped card used flat 60-unit dot tiles instead (
```
fill="url(#@P@dl)"
```
light,
```
url(#@P@dm)
```
mid); the compiler adds a tile when a source references it. Prefer
```
<stip>
```
: it grades and stays crisp. Tone terms:
```
flat t
```
,
```
lin x1 y1 t1 x2 y2 t2
```
,
```
rad cx cy r t0 t1
```
,
```
noise a scale
```
(multiplies).
```
<stip>
```
paths take M L H V C S Q T Z, not arcs: use
```
${H.E(cx, cy, rx, ry)}
```
for ellipses.

Solid black with paper detail.

<path d="…hair…" fill="#111"/>

then

<path d="…" stroke="#f4f1ea" stroke-width="1.3"/>

for one highlight or crease.

Doodle squiggle (2.3, three loops):

<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"/>

编写源文件并编译。 使用

@P@

作为 id 前缀，在

<defs>

中放置

<!--DEFS-->

，使用

<stip>

标签表示色调，并使用

${…}

表达式，然后运行：

node scripts/halftone.mjs card.src.svg card.svg --prefix oh- --seed 41

它会写入抖动滤镜、每个点描形状对应的 clip path 和圆点，并在任何 id 缺少前缀时报错。

node scripts/halftone.mjs demo /tmp/halftone-demo.svg

会写入色调色板（可放在 skill 文件夹之外的任意位置）。每个

${…}

都是 JavaScript（支持嵌套大括号和对象参数），可使用内置 helper：

H.pool

、

H.E

、

H.shoe

、

H.hand

、

H.limb

、

H.head

和

H.hair.*

；源文件顶部的

<gen>…</gen>

块可用于定义自己的 helper，例如可重复使用的指向手势。

svg

<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--></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>

色调形状三元组。 同一个
```
d
```
写三次：纸色填充、圆点、开放轮廓。
svg
```
<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 点阵 tile（浅色使用
```
fill="url(#@P@dl)"
```
，中灰使用
```
url(#@P@dm)
```
）；当源文件引用 tile 时，编译器会自动添加它。优先使用
```
<stip>
```
，因为它支持渐变并能保持清晰边缘。色调术语包括：
```
flat t
```
、
```
lin x1 y1 t1 x2 y2 t2
```
、
```
rad cx cy r t0 t1
```
、
```
noise a scale
```
（乘法叠加）。
```
<stip>
```
path 支持 M L H V C S Q T Z，不支持弧线；椭圆应使用
```
${H.E(cx, cy, rx, ry)}
```
。

纯黑与纸色细节。 先用

<path d="…hair…" fill="#111"/>

，再用

<path d="…" stroke="#f4f1ea" stroke-width="1.3"/>

添加一处高光或褶线。

涂鸦波浪线（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"/>

。

Failure modes

常见问题

Dots too coarse. Train Ride stayed at 7 because its trousers used tone 0.52: the dots merged into blotches. Keep dotted areas at 0.38 or lighter; anything darker is solid black.
Stiff standing figure, mitten hands. Design Critique scored 6 with an upright figure and blob hands. Give standing figures contrapposto and a task for each hand; build every finger as its own outlined shape.
Echoing the reference set. Design Critique's first layout was rejected by two judges as too close to a reference image the style was studied from. Stage each scene around furniture and a real action of your own, and never borrow a reference image's layout (
```
references/craft.md
```
, Originality).
Thumbs on the wrong side. All three shipped cards needed handedness fixes. Write down left or right, palm or back and finger direction for each hand, then run the thumb proof (
```
references/craft.md
```
).
Closed, even outlines. A fully closed outline at one weight reads as clip art. Open 1–3 gaps per object and vary 2.0 / 1.6 / 1.3 by role.
Grey wash instead of dots. A dot pattern that is too fine (pitch under 2.2 or r under 0.4) reads as flat grey at 1x. Keep pitch 2.58.
Stray grey. Any
```
#888
```
,
```
opacity
```
or blurred shadow breaks the two-ink rule; lint with
```
--palette
```
catches the colours.
Floating feet and furniture. Every foot, leg and base needs its floor stroke and a dotted pool under it.
Helmet hair. In the self-test, two smooth hair caps with straight hairlines read as a beanie and a helmet at 1x. A bun, a ponytail, curls or a fringe notch fixed both; use the
```
H.hair
```
presets.
One double shoe. Feet set 14 apart overlapped into a single long shoe. Keep a figure's heels at least 26 apart, the far foot pulled back.
Doodles on the figures. Squiggles or ticks that overlap a head or hand read as mistakes. Keep 10 px of paper around each doodle.

圆点过粗。 Train Ride 的评分停在 7，因为其裤子使用了 0.52 的色调，导致圆点融合成斑块。点描区域应保持在 0.38 或更浅；更深的区域应使用纯黑。
站姿僵硬、手像连指手套。 Design Critique 因人物笔直站立且手呈块状而只获得 6 分。站立人物应采用对立式平衡姿势，并让每只手都有明确任务；每根手指都要绘制为独立的带轮廓形状。
与参考集过于相似。 Design Critique 的首个布局被两位评审认为过于接近学习该风格时所参考的图像。应围绕家具和自有的真实动作来构建每个场景，绝不能借用参考图像的布局（
```
references/craft.md
```
，Originality）。
拇指位于错误一侧。 三张已发布卡片都需要修正左右手。写明每只手是左手还是右手、手掌还是手背、手指朝向及其触碰对象，然后执行拇指检查（
```
references/craft.md
```
）。
轮廓封闭且粗细一致。 所有轮廓都闭合且只用一种线宽，会显得像剪贴画。每个物体应留出 1–3 个缺口，并按用途区分 2.0、1.6 和 1.3 的线宽。
灰色晕染取代圆点。 如果点阵过细（间距低于 2.2 或半径低于 0.4），在 1 倍尺寸下会看起来像平涂灰色。保持 2.58 的间距。
出现游离灰色。 任何
```
#888
```
、透明度或模糊阴影都会破坏双墨色规则；使用
```
--palette
```
lint 可检测这些颜色。
脚和家具悬浮。 每只脚、每条腿和每个底座都需要地面线条和点描投影。
头盔式头发。 在自测中，两种带笔直发际线的平滑发帽在 1 倍尺寸下看起来像毛线帽和头盔。发髻、马尾、卷发或刘海缺口可解决该问题；使用
```
H.hair
```
预设。
出现一只双头鞋。 相距 14 的双脚重叠后看起来像一只长鞋。人物两只鞋跟至少相距 26，并将远侧脚稍微后撤。
涂鸦压在人物上。 与头部或手部重叠的波浪线或短线会看起来像绘制错误。涂鸦周围应保留 10 px 的纸面空间。

Examples

示例

```
pair-programming.svg
```
: "Pair Programming". A man in a dotted beanie types at a desk monitor while a woman with a black ponytail leans in and points at a line of code with a pencil; plant with black leaves, stool, mug, braces, check and squiggle doodles. Shows the 60-unit dot tiles, the 0.86 frame scale, typing and pencil hands.
```
train-ride.svg
```
: "Train Ride". A woman with a black bun sits on a metro bench, laptop on her raised thigh, typing with both hands; train window with a passing landscape, hanging straps, black tote on the floor, chat-bubble and squiggle doodles. Shows a seated pose, graded stipple, and (on the trousers) the tone that was too dark.
```
design-critique.svg
```
: "Design Critique". A man in a black tee leans over a drafting table and circles a button on a printout; a woman in a dotted sweater and black trousers stands with her chin in her hand and a takeaway cup at her hip. Shows the leaning pose, a sheared table top, the chin-in-hand grip and solid black garments.

```
pair-programming.svg
```
：“Pair Programming”。一名戴点描毛线帽的男子在桌前对着显示器打字，一名黑色马尾女子俯身用铅笔指向一行代码；场景包含黑色叶子的盆栽、凳子、马克杯、花括号、对勾和波浪线涂鸦。展示了 60-unit 点阵 tile、0.86 frame 缩放、打字手和铅笔手。
```
train-ride.svg
```
：“Train Ride”。一名黑色发髻女子坐在地铁长椅上，笔记本电脑放在抬起的大腿上，用双手打字；场景包含列车窗外掠过的风景、吊环、地上的黑色托特包、对话气泡和波浪线涂鸦。展示了坐姿、渐变点描，以及裤子区域过暗的色调。
```
design-critique.svg
```
：“Design Critique”。一名穿黑色 T 恤的男子俯身越过制图桌，圈出打印稿上的一个按钮；一名穿点描毛衣和黑色长裤的女子站着，一手托腮，另一手在外带杯旁并将其放在髋部。展示了前倾姿势、斜切桌面、托腮抓握姿势和纯黑服装。

Workflow

工作流

Run commands from this skill's folder.

Brief. Name the subject and the one action that shows it ("a mentor explains a bug on a student's laptop").
Choose the pose and the hero object. One or two figures and one piece of furniture or device. For each hand write down LEFT or RIGHT, palm or back, finger direction, and what it touches.
Block. In
```
card.src.svg
```
, rough each figure as a stick skeleton (2.0 lines) plus the furniture outline; compile and render; check figure height, floor y and margins before detailing.
Draw. Back to front: floor pools and strokes, furniture, the far figure parts, near figure parts, hands last, then doodles. Paper fill →
```
<stip>
```
→ open outline for every toned shape.

Compile:

node scripts/halftone.mjs card.src.svg card.svg --prefix oh- --seed 41

Render:

node scripts/render.mjs card.svg card.png

Sheet next to the examples:
```
node scripts/render.mjs --sheet sheet.png examples/*.svg card.svg
```
. Same line weight, same dot size, same paper, same amount of bare paper?
Zoom every hand, face, foot and contact:
```
node scripts/render.mjs card.svg hand.png --zoom 180,170,60,50 --scale 8
```
. Thumb proof: in a throwaway copy of the source, set the thumb's paper fill to
```
#ff0000
```
and the index finger's to
```
#0000ff
```
, compile, zoom, check, delete. In an
```
H.hand
```
, the index is the first finger path after the palm.
Critique against the five criteria in
```
references/craft.md
```
, harshly; fix in the source, never in the compiled SVG; repeat 5–9. Expect four rounds.

Lint:

node scripts/lint.mjs card.svg --prefix oh- --palette style.json

. Any WARN is a stray colour: remove it.

从此 skill 的文件夹运行命令。

Brief。 明确主题，以及一个能够表现主题的动作，例如“导师在学生的笔记本电脑上讲解一个 bug”。
选择姿势和核心物体。 使用一到两个人物和一件家具或设备。为每只手写明左手还是右手、手掌还是手背、手指朝向，以及它触碰了什么。
搭建结构。 在
```
card.src.svg
```
中，先用火柴人骨架（2.0 线宽）粗略绘制每个人物和家具轮廓；编译并渲染；先检查人物高度、地面 y 坐标和边距，再开始细化。
绘制。 从后到前依次处理：地面投影和线条、家具、远侧人物部分、近侧人物部分，最后绘制手，再添加涂鸦。每个带色调的形状都按纸色填充 →
```
<stip>
```
→ 开放轮廓的顺序绘制。

编译：

node scripts/halftone.mjs card.src.svg card.svg --prefix oh- --seed 41

。

渲染：

node scripts/render.mjs card.svg card.png

。

与示例并排查看：
```
node scripts/render.mjs --sheet sheet.png examples/*.svg card.svg
```
。线宽是否一致、圆点大小是否一致、纸张是否一致、留白量是否一致？
放大检查每只手、脸、脚和接触点：
```
node scripts/render.mjs card.svg hand.png --zoom 180,170,60,50 --scale 8
```
。拇指检查：在源文件的一份临时副本中，将拇指的纸色填充改为
```
#ff0000
```
，食指改为
```
#0000ff
```
，然后编译、放大、检查并删除修改。在
```
H.hand
```
中，食指是掌部之后的第一个手指 path。
严格对照
```
references/craft.md
```
中的五项标准进行批评；始终在源文件中修复，绝不要修改编译后的 SVG；重复步骤 5–9，预计需要四轮。
Lint：
```
node scripts/lint.mjs card.svg --prefix oh- --palette style.json
```
。任何 WARN 都表示存在游离颜色，必须移除。

Verify

验证清单

Paper rect
```
#f4f1ea
```
is the first element, full-bleed, no
```
rx
```
.
Only
```
#111
```
and
```
#f4f1ea
```
appear; no opacity, gradient or blur besides the one wobble filter.
The wobble filter wraps the whole art group and nothing else.
Main line 2.0; secondary 1.6–1.7; creases 1.3–1.6; nothing under 1.1.
Every object's outline has at least one deliberate gap; lines stop short at joins.
Dotted tones are 0.19 or 0.36–0.38 (graded within 0.08–0.38); nothing dotted darker than 0.4.
3–5 solid black masses, spread across the card.
Heads in profile with nose wedge, dot eye, small smile; hair with a broken silhouette; figures 5.5–6 heads tall.
Each figure's heels at least 26 apart; feet rest on a floor stroke.
Each hand: separate outlined fingers, a thumb on the correct side, wrist and cuff connected to an arm.
Every foot and base has a floor stroke and a two-tone dotted pool; no continuous floor line.
2–4 doodles in open paper, clear of the figures.
Ink box 78–82% wide, 73–80% tall; margins 37–55 px (75–110 px on the 2x render); most of the card is open paper.
The subject reads at 1x without a caption.

scripts/lint.mjs

passes with

--prefix

and

--palette style.json

纸张矩形
```
#f4f1ea
```
是首个元素，铺满画布且不使用
```
rx
```
。
只出现
```
#111
```
和
```
#f4f1ea
```
；除唯一的抖动滤镜外，不使用透明度、渐变或模糊。
抖动滤镜包裹整个 art group，且不包裹其他内容。
主线条为 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（2 倍渲染时为 75–110 px）；卡片大部分区域保留纸面。
不使用说明文字也能在 1 倍尺寸下辨认主题。

scripts/lint.mjs

使用

--prefix

和

--palette style.json

后通过检查。