illustration-line-interior

插画：线稿室内场景

沉静、富有编辑感的线稿风格：以小比例描绘整个房间，人物头身比约为七分之一；每个形状都用细靛蓝线描一遍并填充白色，再点缀少量纯色。适合希望展现「人们正在工作」但不想使用鲜艳色彩的产品营销场景。 如果需要大头角色、近黑色约 2.4 px 的描边和醒目填色，请使用 illustration-outlined-cartoon。如果需要将场景放在柔和色卡片上的彩色面板内，请使用 illustration-framed-panel。如果完全不需要描边，请使用 illustration-flat。

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

一句话概括风格

宽敞通透的房间里，白色填充的形状都用统一的 1.4 px 细靛蓝线条勾勒，卡片上纯色区域占比低于 7%。

调色板

根据三个示例测得（填充色和描边色，1x 渲染）。白色和卡片底色约占像素的 85%，靛蓝线条约占 2%，点缀色占 4–7%。

用途	Hex	使用位置
靛蓝线稿	#3a2d66	所有描边、地面线、眼睛圆点、靛蓝色头发（头发是填充的线稿色块）
墙面线条	#cfc9e0	仅用于背景装饰线条（砖块、灯具、海报、云朵、鸟、天际线、栏杆）。不可用作填充色
白色	#ffffff	所有物体的默认填充色：家具、衬衫、屏幕、花盆、书本、运动鞋、马克杯
桃木色	#f9c99a	木制物件：梯子横杆和踏板、柱子、凳子、木箱、条纹花盆
芥末黄	#f5c35a	一本书、鸭子、灯泡、运动鞋、便利贴、耳钉、上衣
橙色	#f6a85e	花盆、裤子、鸭嘴、棕发上的高光弧线、一段代码短线
珊瑚红	#ef5b5b	运动鞋或鞋底、标签、马克笔笔尖、马克杯环带、一段代码短线、窗户圆点
青绿色	#3fa58a	一本书、上衣、马克杯环带、吊床条纹、对勾
鼠尾草绿 / 叶绿	#8cc79b / #5fae7a	浅色和深色叶片，逐片交替
薰衣草紫	#ab9ee6	一本书、上衣、书页线、键盘线、运动鞋鞋底
紫色	#7f6cc4	一本书、裤子、靛蓝发上的高光弧线、一段代码短线
牛仔蓝	#7f9fdc	牛仔裤
棕色	#7b4b3a	棕色头发、杯中的咖啡
肤色	#f3cdb0 #e2a57c #b47852 #7a4b33	浅、中、深、暗；一张卡片中的两个人物应使用两种不同肤色

• 禁止使用：渐变、透明度、投影、排线、黑色、灰色填充、将墙面线条色用作填充色、彩色背景矩形。
• 每个物体只用一种点缀色。人物最多穿两种点缀色加白色：上衣、裤子和运动鞋中，运动鞋鞋面或鞋底应为白色。
• 不要让两个大块的同色点缀形状相接触（例如，珊瑚红鞋子贴着珊瑚红地毯）。大型形状（书架、板子、桌子、吊床）应为白色或桃木色。

线条与填充

• 分为两层。背景：<g id="xx-bg" fill="none" stroke="#cfc9e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">。前景：<g id="xx-fg" stroke="#3a2d66" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">。形状继承描边；每个形状分别设置自己的 fill。
• 轮廓使用填充形状的描边，绝不使用填充的轮廓形状。每个前景形状都要设置填充（若无其他要求则填白色），这样重叠部分会遮住后方内容。深度完全由重叠顺序决定：从后向前绘制，先画远处的四肢，再画躯干。
• 画布宽度为 480 时的线宽：所有轮廓均为 1.4；细节线（布料褶皱、叶脉、书带、蕾丝短线、耳朵内侧、眉毛、鼻子、嘴巴、蒸汽、x 标记、头发高光）为 1；手指分隔线为 0.9；白板示意图描边为 1.2；屏幕上的代码彩色短线为 1.7–1.8；项目符号圆点为 2.2（M190 146h0.1）。
• 阴影：无。不做色调层次、排线或高光。褶皱用一条长 4–8 px 的 1 px 曲线表示，每件衣服画 2–3 条。
• 纹理：小型 x 标记（xm()，3 px，描边为 1），每个花盆或盒子画 2–4 个。衣服上绝不添加纹理。
• 文字：font-family="ui-monospace, monospace" font-weight="700"，字号为 4.4–5.2 px，2–5 个字母（JS、CSS、UX、API、CACHE），放在小标签矩形上，设置 stroke="none"。
• 圆角：书本和砖块的 rx 为 0.6–1，家具顶部和框架的 rx 为 1.5–2.5。

人物

• 比例：站立人物从头顶到脚底为 229–235 px；头部（下巴至头顶）为 33–36 px，因此比例约为 1:7。身形修长：肩宽约 30，腿部髋部半宽为 9.6–11，至裤脚收窄到 5.6–5.8。
• 头部：使用工具包中的 head() 绘制。它会绘制一个朝左或朝右的 3/4 侧面轮廓：一条包含鼻子和下巴轮廓的面部路径、后侧的一只耳朵、一近一远两个眼点（近眼半径为 1.15，远眼半径为 1.0，两眼相距 4.9）、两条 1 px 眉毛、一笔鼻孔线和一段短嘴角弧线。不加脸颊颜色，不画瞳孔，不画张开的嘴。表情平静，略带微笑。
• 头发：用靛蓝色 #3a2d66 绘制一块纯色形状（加 1–4 条紫色 #7f6cc4 高光弧线），或用棕色 #7b4b3a 绘制（加橙色 #f6a85e 高光）。预设：afro、bun、side、crop（另有 beard、glasses、earring）。afro 的后侧发团通过 behind 返回：要在躯干之前绘制。
• head(x, y, rot, opts) 使用屏幕角度旋转（正值 = 顺时针）。右向头部会因此低头，左向头部则会抬头。朝人物注视的方向倾斜 4–9°。
• 颈部和躯干：torso(hx, hy, { style: 'tee' | 'top', facing, fill, skin }) 会绘制颈部、宽 30–34 的柔和衬衫形状（圆领 T 恤或带小 V 领的修身上衣），以及两道 1 px 褶皱，所有部分均以头部中心定位。TORSO_ANCHORS[style] 给出相对于头部中心的肩部、髋部和腰带点。左向人物需将这些点的 x 坐标镜像。上衣使用白色或一种强调色。
• 袖子：sleeve(S, arm.u, 13, 5.8) 用于覆盖上臂；在手臂绘制完成后再绘制。较平坦的袖子（半宽小于 6）可以避免肩垫般的外观。
• 手臂：使用 bentArm()，半宽分别为肩部 4.4–5、肘部 4–4.4、腕部 3.2–3.4。它会形成尖角状外肘；从 arm.I 添加 3 px 的褶皱线。上臂长 27–40，前臂长 24–33。使用 solveElbow(S, wrist, 35, 30, flip)，并尝试两个 flip 值：正确的值会让肘部低于肩部与手腕的连线。手腕与肩部相距 45–60 px。距离更近时，手臂会折成鸡翅状。
• 使用 wristFor(HANDS[name].tip, target, angle, scale, flip) 将指尖放到目标上。它会返回用于求解手臂的腕部点。
• 侧面人物要画出远侧手臂。让它向后摆到髋部后方（或向前摆到手持物体后方），并在躯干之前绘制，这样前臂和一只 rest 手会露在躯干下方。只画一条手臂会让人觉得“少了一条手臂”。
• 手（工具包 HANDS）：局部长度为 17，缩放比例为 1.05–1.15，因此长 18–20 px，约等于脸部从下巴到眉毛的长度。手指由 3–4 条圆润的带状形状组成，间隔线宽 0.9；中指最长，小指最短。形状：type（掌心朝下放在按键上）、cup（环绕杯子，拇指搭在杯沿上）、wrap（相同姿势，但拇指藏在物体后方）、marker（握笔的拳头，配合 HANDS.marker.pen() 使用）、point（伸出食指，拇指收起）、rest（放松）。
• 所有手形的拇指都位于局部 −y 方向。根据 references/craft.md 中的表格判断 LEFT 或 RIGHT，以及 PALM 或 BACK；当拇指应位于 +y 方向时，传入 flip = true。
• 腿和脚：站立姿势使用 trouserLeg() 绘制裤腿（逐渐收窄、裤脚平直、5.2 px 翻边，以及 4–10 px 裸露的脚踝皮肤）；坐姿或迈步姿势使用 bentLeg() + cuffAndAnkle()。sneaker() 的尺寸为 25 × 10.6，带有 3 px 鞋底条和两道鞋带线；鞋跟位于地面点，通过 scale(-1 1) 镜像。每条裤腿都要在鞋的 shoeOpening(heel, rot, mirror) 位置结束。
• 脚尖着地的后脚：heel = liftedHeel(toeX, 22–28, mirror)，然后使用 sneaker(\translate(heel) rotate(deg)`)。镜像鞋使用 rotate(-deg) scale(-1 1)和shoeOpening(heel, -deg, true)`。
• 可行的姿势：伸手去拿架子或写字板上的东西，或按按钮；上身倾斜 4–9°（使用 rotAbout() 将上半身组绕髋部旋转，并旋转肩部点）；后脚抬起脚跟，仅脚尖触地；躺在吊床上，笔记本电脑放在大腿上；坐在凳子上，一只脚踩在横档上，手里拿着杯子。

装饰与道具

• 背景层（墙面线条，不填充），整体采用浅色，作为次要元素：2–3 簇砖块，每簇 3–5 块（bricks()，14 × 6，行距 7），1–2 盏挂在卡片顶边的吊灯（lampDome()、lampCone()），1 张钉在墙上的带框海报（poster()），内含简单图标。户外场景：2–3 朵轮廓云、2–3 只鸟、一条天际线和一段栏杆，替代砖块。
• 前景，每张卡片：中间放一个承载主题的主道具（梯架书架 98 × 203、带轮白板 160 × 256、两根柱子之间的吊床，宽 260）；一端放一株高大的盆栽（宽 60–68，高 150–185）；另一端放一件次要物品（带显示器和马克杯的书桌、一株矮虎尾兰、一个配有同事的凳子）；再放 2–4 件小道具（带两道 1 px 蒸汽卷曲线的马克杯、带横线和标签的书、橡皮鸭、便签、带窗口圆点和彩色代码短线的显示器）。
• 植物：leaf()（带叶脉的披针形叶片）、figLeaf()（琴叶榕）、blade()（虎尾兰）；茎从花盆伸出，绘制为 1.4 px 的开放曲线；叶片交替使用鼠尾草绿和叶绿色。花盆：pot()，可选带 x 标记的白色花盆、带 1 px 条纹的桃色花盆或橙色花盆。
• 切勿使用：闪光、彩纸、悬浮图标、对话气泡、物体下方的阴影、地毯；主道具旁的地面物品不得超过两件。

构图

• 不要添加背景矩形：卡片为白色（示例中没有背景矩形）。如果宿主页面不是白色，先添加一个铺满画面的正方形 #ffffff 矩形。
• 地面线位于 y 308：M56 308H424M40 308h10M430 308h10。所有脚、花盆、桌腿和脚轮都要落在这条线上。下方区域（y 308–360）保持空白。
• 内容范围为 x 33–445。只有吊灯线可以触及边缘（顶部）。其他所有内容的 y 坐标都须 ≥ 25。
• 从左到右：高大盆栽（x 33–121）| 主道具及在其上进行操作的人物（x 115–335）| 次要家具或植物（x 330–445）。可自由镜像，但主道具须位于中央。
• 人物：宽 94–190 px，站立时高 235 px。只安排一个焦点动作，表现于人物手部。
• 密度：前景约有 10–14 件物品，包括植物叶片；各组之间留出充足的空白。此处不宜拥挤。
• 示例中使用的组变换：用 translate(-8 0) 微调整个人物的位置；对上半身组（颈部、躯干、头部、袖子）应用 rotate(-7 284 180)，使人物俯身于臀部上方。

技巧

1. 部件工具包。 scripts/interior.mjs（无依赖项）包含示例中用到的所有重复部件及其数值：图层、地板、砖块、灯、海报、云、叶子、花盆、limb、bentArm、solveElbow、sleeve、torso、trouserLeg、bentLeg、cuffAndAnkle、sneaker、shoeOpening、liftedHeel、rotAbout、HANDS + hand() + place() + wristFor()、head() 和 mirrorPath()。在技能文件夹中运行 node scripts/interior.mjs --demo /abs/work/demo.svg（请将文件写入你的工作文件夹，而不是技能文件夹），然后渲染它以查看所有部件。演示输出是一张部件图：四个头、六只竖起拇指的手、两株植物、灯、砖块，以及一个由这些部件组成的站立人物。

一个经过测试的完整人物：一位面朝左的女性正指着一张图表。将其保存为卡片旁边的 card.mjs，修正导入路径，然后运行 node card.mjs。

import fs from 'node:fs';
import * as LI from '/abs/path/to/illustration-line-interior/scripts/interior.mjs';
const { W, C, SKIN, FL, P, f } = LI, id = 'sn-', sk = SKIN.medium;
const HC = [300, 102], A = LI.TORSO_ANCHORS.top, rel = q => [HC[0] - q[0], HC[1] + q[1]];  // facing left: mirror x
const LEAN = -5, PV = [300, 188];                                   // lean toward the left, about the hips
const h = LI.head(HC[0], HC[1], -4, { hair: 'bun', facing: 'left', skin: sk, hairColor: C.brown, earring: true });
const heelB = LI.liftedHeel(300, 24, true);                         // rear heel up, toe on the floor
const legF = LI.trouserLeg([[296, 188], [293, 230], [291, 270], [290, 291]], [10, 8, 6.2, 5.8], LI.shoeOpening([297, FL], 0, true), C.denim, sk);
const legB = LI.trouserLeg([[306, 188], [309, 230], [313, 262], [316, 282]], [10.6, 8.4, 6.4, 5.8], LI.shoeOpening(heelB, -24, true), C.denim, sk);
let fg = LI.floor(id);
fg += `<rect x="150" y="96" width="70" height="54" rx="2" fill="${W}"/><path d="M158 138l14-16 10 9 12-15 16 12" fill="none" stroke="${C.teal}" stroke-width="1.8"/>`;
fg += legB.skin + LI.sneaker(`translate(${P(heelB)}) rotate(-24) scale(-1 1)`, C.coral, W) + legB.leg;
fg += legF.skin + LI.sneaker(`translate(297 ${FL}) scale(-1 1)`, C.coral, W) + legF.leg;
fg += `<rect x="284" y="${HC[1] + A.waistTop}" width="33" height="5" rx="0.8" fill="${C.denim}"/>`;
fg += `<g transform="rotate(${LEAN} ${P(PV)})">${LI.torso(HC[0], HC[1], { style: 'top', facing: 'left', fill: C.lav, skin: sk })}${h.front}</g>`;
// near arm = LEFT (she faces left); back of the hand visible, index pointing left -> thumb UP.
// HANDS.point keeps its thumb on local -y; at 186 deg local -y points DOWN, so flip = true.
const S = LI.rotAbout(rel(A.nearShoulder), LEAN, PV), ang = 186, tip = [221, 124];
const Wr = LI.wristFor(LI.HANDS.point.tip, tip, ang, 1.1, true);
const arm = LI.bentArm(S, LI.solveElbow(S, Wr, 36, 30), Wr, 4.6, 4.2, 3.3);
fg += `<path d="${arm.d}" fill="${sk}"/><path d="M${P(arm.I)}l${f(-arm.u[0] * 3)} ${f(-arm.u[1] * 3)}" fill="none" stroke-width="1"/>`;
fg += `<path d="${LI.sleeve(S, arm.u, 13, 5.8)}" fill="${C.lav}"/>` + LI.place(LI.hand('point', sk), Wr[0], Wr[1], ang, true, id + 'hand', 1.1);
const bg = LI.bgLayer(id, LI.bricks(60, 80, [[0, 0], [15, 0], [7, 7]]) + LI.lampDome(380, 40));
fs.writeFileSync('card.svg', LI.svgWrap(bg + LI.fgLayer(id, fg), 'Snippet test, Line interior style'));

它仍然需要远侧手臂、一株植物、主角道具和房间。它展示了绘制顺序：腿 → 腰带 → 倾斜的躯干和头部 → 近侧手臂 → 袖子 → 手。

2. 不带手腕楔形块的手。 将手的轮廓绘制两次：一次填充并设置 stroke="none"，一次绘制为开放路径（移除 Z），然后绘制 0.9 的手指线，最后绘制拇指。hand() 会执行这些操作。在手腕处绘制闭合描边，会在前臂与手的连接处形成深色楔形块。

3. 通过组旋转实现倾斜。 将躯干（包括脖子）、任何背包或肩带以及头部放入同一个 <g transform="rotate(-7 hipX hipY)"> 中。根据 rotAbout(shoulder, -7, [hipX, hipY]) 在卡片坐标中求解手臂，使手仍能落在物体上；然后在组外绘制手臂、袖子和手。

4. 屏幕和板上的内容用彩色线条，而非墨色。 显示器上的代码由 4–6 行圆头短线组成，设置 stroke-width="1.8"，每条短线使用一种强调色（紫色、青绿色、珊瑚色、薰衣草色、橙色），绘制在带有三个窗口圆点（珊瑚色、芥末黄、青绿色，r 0.9）的白色屏幕上。图表使用 1.2 px 的墨色方框和箭头，其中一个方框为珊瑚色，另一个为青绿色。

失败模式

• 颜色过多。 第一版 Books 草稿（得分 6）用了芥末黄的上衣、棕色书架、橙色花盆，还在衣服上画了叉号。修改后得分达到 8 的版本用色更加克制。大面积保持白色或桃色，点缀色占比低于 7%（白色 ≥ 83%）。
• 主体看起来像别的东西。 开发者站在桌前，读起来像“站立式办公桌”，而不是“Books”。人物必须通过动作体现主题：从书架上抽书，或在白板上画画。
• 人物像直挺挺的剪贴画。 上半身倾斜 4–9°，重心放在一条腿上，抬起后脚跟。正面朝向的对称姿势得分低 1 分。
• 手腕处出现深色楔形。 这是手腕上闭合的轮廓线。使用 hand()（先填充，再绘制开放轮廓）。
• 拇指在错误的一侧。 已发布的两只手都是把右手模板复制到左臂上（Remote Work 的远侧打字手、Whiteboard 的拿杯手），两者都必须镜像。先判断每只手的左右，再使用 flip。
• 手像连指手套或耙子。 手指必须是长短不同、末端圆润的分组条带，长度为 18–20 px。再大就会像手套。
• 手臂没有肘部。 从肩膀直通物体的管状手臂看起来像假肢。使用 bentArm() 和褶皱线。
• 手臂像鸡翅。 目标距离肩膀 33 px，导致 66 px 长的手臂向上弯折，肘部突出。移动道具或人物，直到手腕距离肩膀 45–60 px，并尝试另一种 flip。
• 人物只有一只手臂。 侧面人物的远侧手臂被遮住时，看起来像缺了一只手臂。让远侧手臂向后摆，使前臂和手露在臀部后方。
• 多余的短线。 距肢体边缘 4 px 以内的 1 px 褶皱线，或从袖子下方伸出 2 px 的带子末端，看起来都像画偏了。被遮盖的形状至少要在遮盖它的形状内侧 3 px 处结束，并让褶皱线远离其他轮廓。
• 脚或花盆悬空。 运动鞋后跟恰好位于 y 308。旋转后的后脚鞋尖要接触地面。以 8x 放大检查每个接触点。
• 衣服上的叉号。 看起来像污渍。叉号只放在花盆和箱子上。
• 背景与人物争抢视觉焦点。 用靛蓝色绘制或填充的装饰看起来像前景杂物。墙上线条使用 #cfc9e0，宽 1 px，不填充，并且与人物头部至少相隔 8 px。
• 线条粗细不统一。 2 px 的轮廓线或 0.6 px 的细节线都会立刻破坏风格。只使用 1.4、1 和 0.9。

示例

• examples/books.svg：“Books”。人物采取伸手姿势，身体倾斜 −7°，靠近一侧的手臂弯曲，握住书架上的一本书（拇指在上）。另一只手在臀部位置拿着一本打开的书。蓬松的后侧头发画在躯干后方。梯形书架上有带标签的书、鸭子、带显示器的桌子和披针叶植物。
• examples/remote-work.svg：“Remote Work”。人物躺在吊床上，双手放在笔记本电脑上（type 手，左右手镜像）。户外风格的背景（云、鸟、天际线、栏杆），串灯，放着杯子的木箱，龟背竹叶片和虎尾兰。使用 clipPath 将双腿隐藏在吊床边缘后方。
• examples/whiteboard.svg：“Whiteboard”。两个人物：一人举起手臂，用 marker 握笔手，在杯子上握着一只 wrap 手；另一人坐在凳子上，使用 cup 拿杯手，留着胡须并戴着眼镜。图表内容使用 1.2 px 墨线和点缀线条，配有便签、地面线上的脚轮和榕树盆栽。

工作流

从此技能的文件夹运行每条命令。卡片路径可以是绝对路径。

1. 简述。 用几个词点明主题，并写出能体现主题的一个动作（谁对哪个道具做什么）。选定主角道具和姿势。
2. 规划布局，使用 480 × 360 网格：地面 y 308，植物放在一端，主角道具居中，次要物件放在另一端。选定肤色、发型预设，以及每个人佩戴的 2 种点缀色。选择一个 ID 前缀（ob-）。
3. 编写生成器（card.mjs），通过绝对路径导入 scripts/interior.mjs，并写入 card.svg。从 Techniques 代码片段开始。查看一次 --demo 部件表。手动放置人物和主角道具；重复元素全部使用工具包中的内容。打印计算出的肩、肘和腕点，以便放大时查找。
4. 先画手，落到纸上。 对每只手，写下 LEFT 或 RIGHT、PALM 或 BACK，以及手指方向，然后写下拇指所在的一侧（参见 references/craft.md）。选择 HANDS 形状和 flip。
5. 渲染： node scripts/render.mjs card.svg card.png。
6. 与示例拼成图表： node scripts/render.mjs --sheet sheet.png examples/books.svg examples/remote-work.svg examples/whiteboard.svg card.svg。询问“手法一致、风格一致吗？”：线条粗细、白色占比、密度、地面、装饰。
7. 放大检查每只手、脸、脚和接触点：node scripts/render.mjs card.svg z-hand.png --zoom x,y,w,h --scale 8。按照 references/craft.md 中的方法逐只验证拇指。
8. 根据 references/craft.md 中的五项标准和下方的验证清单进行评审。修正后重新渲染、重新拼图。预计至少迭代四轮。
9. 检查： node scripts/lint.mjs card.svg --prefix ob- --palette style.json。修正所有 ERROR。每个 WARN 都必须是有意选择的色调。

验证清单

• 所有前景轮廓均为 #3a2d66，粗细为 1.4；细节线为 1，手指线为 0.9；除代码虚线（1.8）和图表描边（1.2）外，不得使用其他粗细。
• 背景装饰为 #cfc9e0，粗细 1 px，不填充，且绝不与头部重叠。
• 在拼图中，整体颜色看起来不能比示例更重（示例白色像素占 84–86%，点缀色占 4–7%）。大色块为白色或桃色，不使用渐变、不透明度或阴影。
• 地面线位于 y 308，两端都有短划线；每只脚、花盆、桌腿和脚轮都与其接触。
• 吊灯从 y 0 悬挂；其他内容均不接触卡片边缘；y 308–360 区域保持空白。
• 站立人物高约 230 px，头部约 34 px（比例为 1:7）。
• 每个人最多佩戴两种点缀色，白色不计；两个人物的肤色不同。
• 每只手长 18–20 px，有 3–4 根成组手指，间隔线粗细为 0.9，拇指位于手艺对照表指定的一侧（已完成拇指验证）。
• 每条手臂都有肩部、带褶皱的尖肘，以及比手窄的手腕。即使是侧面视角，也要能看到双臂。
• 上半身有前倾或扭转；重心落在一条腿或座位上。
• 即使没有标签，仅凭人物动作，在 1 倍大小下也能看懂主题。
• 衣服上没有 x 标记；花盆或盒子上的标记最多 2–4 个。
• lint.mjs --palette style.json 检查通过，且没有未说明的 WARN。