illustration-framed-panel

插画：框架面板

一位卡通人物在紫罗兰色的“窗口”内工作，画在一张粉彩卡片上。面板为场景搭起舞台，而溢出边缘的 UI 气泡和灌木让画面显得生动，不会像被框住一样。适用于轻松友好的产品和团队场景：支持服务、直播、设计工作、入职引导。

适用边界：如果人物没有边框、置于纯白背景上，带有墨线轮廓和大头，请使用 illustration-outlined-cartoon。如果是没有轮廓、带有漂浮纸屑的扁平形状，请使用 illustration-flat。如果是没有人物的单个物体，请使用 illustration-teal-spot。

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

一句话概括风格

粉彩卡片上放置着带细海军蓝边框的固定紫罗兰色面板，面板内有轮廓云朵和薰衣草色虚线地面，场景中的白色气泡、UI 卡片和树叶则延伸至面板边缘之外。

配色

根据示例测量得出。每张卡片都使用海军蓝线条、面板配色和气泡配色；每张卡片任选一种柔和底色。

用途	十六进制颜色	使用位置
卡片：蜜桃色 / 兰花紫 / 天蓝色	#F7D8B5 / #DFA5D4 / #A7E0ED	整张卡片铺满，每张卡片选一种
括号和外部标记	#9C878C / #A3739B / #6E9FAD	与柔和底色匹配的括号
海军蓝线条	#2E2A5C	所有轮廓、云朵、排线、眼睛、粗体 UI 文本
面板	#8A80EA	面板填充色（也用作 UI 强调色：滑块、色块）
地面色带 / 地面短线	#D0CCF4 / #8F88D6	y 256–312 的地面矩形及其短线
接触阴影	#B5AEEA	脚、椅子、懒人沙发下方的扁平椭圆
灌木	#BACCA6，前景层为 #A9C094	地面线上的波浪边灌木
头发 / 头发高光	#433D71 / #7C74C4	所有头发、高光笔触；深色布料上的褶皱
肤色（三种色调）	#EDB0A2、#F0BFA4、#D49A80	脸、脖子、手
腮红	#E8878A，不透明度为 0.5–0.6（用于 #D49A80 肤色时：#C46A5C，不透明度为 0.55）	脸颊椭圆、舌头线条
嘴部	#9A3E52（用于棕褐色肤色时为 #8A3A48）	张嘴微笑
上衣	芥末黄 #EDB24F（袖口 #E0A23E）、薄荷绿 #95D1B3（阴影 #79BC9C）、橙色 #EE8A6E（阴影 #D9735A）	毛衣、连帽衫、开襟衫
长裤	#6A63B0（褶皱 #A29DDA）、#4A4488（褶皱 #7C74C4）	牛仔裤
奶油色 / 白色	#FCF6EA、#FCFAF3 / #FFFFFF	T 恤、袜子、鞋面、代码窗口 / 气泡和 UI 卡片
红色强调色 / 阴影	#E35D5B / #B8434A	鞋底、标签、按钮、爱心、错误
浅红色、粉色	#E9A3A0、#F8CCC8、#F4E0E8、#F29CA0	次要 UI 线条、错误行、放置槽、代码标记
绿色 / 深绿色 / 浅绿色	#5FA77A / #3E8E5E / #CDEBD6	勾选徽章、切换开关、成功行
薄荷绿、鼠尾草绿	#8FD0B0、#6FB585、#79C2A8	图标小块、图像占位符、头像上衣
黄色、橙色	#EDB24F、#F09A5E	色块、耳环、高亮代码
UI 灰色	#BDB8D6 线条，#6E6A8E / #7D79A0 深色线条，#C9C5DE 凸起阴影，#CFCBE0 行号	气泡内的文本占位符
设备	#C9C7DA 机身，#9F9CB8 / #B7B5CC / #A9A7C0 边缘，#DCDAE8 键盘，#A9A6C2 按键，#3A3570 屏幕，#524C98 活动行，深色背景代码使用 #6E68AA、#E8E6F8、#BDB8F0	笔记本电脑、显示器
家具	#C9C5E8 + #A9A4D8 接缝，#B9B4DE，#D8D3F0 网格，桌面 #F6E7D2 / 边缘 #E3B98E，灯光 #FFF4D6	椅子、抽屉、板子、桌子
单独道具的色调	例如梅子色 #B2679E（Support 懒人沙发）	每张卡片可以有一个大型道具使用自己的柔和色调；lint 会对此发出 WARN
头像	#FBE3CC 背景，#F1B9A2 肤色，#D9774E 姜黄色头发	气泡内的小脸

• 不使用渐变、滤镜或图案。不透明度仅用于腮红椭圆（0.5–0.6）和眼镜镜片（fill-opacity 0.18）。
• 紫色面板后方不得放置紫色上衣或紫色长裤，除非两者之间有海军蓝轮廓线；人物必须通过明度与面板区分开来（芥末黄、薄荷绿、橙色和奶油色都可以）。
• 卡片的柔和底色不得出现在面板内部，面板紫色也不得填充卡片。

线条和填充

• 统一使用一种描边颜色：海军蓝 #2E2A5C；始终为平涂填充添加描边，并采用圆角端点和连接。
• 宽度为 480 时：面板描边 1.35；身体、衣物、家具、气泡 1.25；手、鞋、灌木、脖子 1.05–1.15；云朵和地面线 1.2；褶皱曲线 0.9–1.1；成对排线和耳内线条 0.85–0.9；手指分隔线 0.75–0.8；角括号使用括号颜色，宽 1.25。
• 纹理通过绘制呈现，不使用滤镜：成对的短平行斜线（每条长 3–4，第二条向右 1、向下 5，斜向右上，海军蓝 0.9），每件衣物上散布 2–4 对；再添加几条较长的褶皱曲线；深色长裤和头发上的褶皱与高光使用较浅的色调（#A29DDA、#7C74C4），宽度为 1.0–1.2。
• 阴影采用平涂的深色调，不加描边，沿形状的一侧绘制在内部（#EE8A6E 连帽衫内的 #D9735A 面板；薄荷色毛衣上的 #79BC9C 袖口）。
• 凸起的 UI 部件（按钮、开关、标签、芯片）下方 3 px 处绘制一份颜色较深的副本（红色下方用 #B8434A，绿色下方用 #3E8E5E，白色下方用 #C9C5DE）。
• 每个白色气泡和卡片都要在顶部一个角内侧 5–7 px 处添加一条简短的内角标记（Q 曲线，1.0），营造“手绘感”。
• 文本：ui-sans-serif, system-ui, sans-serif，字重 700–800，字号 10–16 px，颜色为海军蓝或白色。每张卡片最多三个词（“修好了！”，“+1”，“直播”，“Aa”）。

人物

• 每张卡片一个人物，采取坐姿或跪姿：面板内部高 266 px，每个示例人物从发顶到地面均为 195–215 px。站立的成年人（约 5.5 个头身）放不下；请采用蹲姿、坐姿、跪姿，或在桌边裁切人物。
• **头部：**使用 scripts/panel-kit.mjs 中的 face()；三个示例中的脸保持一致。采用 3/4 视角，宽 36、高 46（从眉毛到下巴），变换前下巴位于 (232, 166.5)。近侧眼睛为一个海军蓝椭圆，rx 1.8、ry 2.1，带上眼睑弧线和向外侧延伸的睫毛挑线；远侧眼睛较小（rx 1.5、ry 1.9）；拱形眉毛，线宽 1.2；脸部远侧一个钩状鼻子；张开的笑嘴填充 #9A3E52，带一条粉色舌头线；近侧眼睛下方画一个 7.6 × 4.2 的腮红椭圆，远侧脸颊边缘画一个较小的腮红；耳朵内侧画一条弧线；佩戴金色耳环。
• **头部摆放：**将脸部、脖子和头发包在一个 <g transform="translate(dx dy) rotate(a 232 166)"> 中。头部朝动作方向倾斜 4–8°。用 scale(-1 1) 镜像，使人物看向左侧。不要缩放头部，否则线条粗细会改变。
• **头发：**使用海军蓝紫色 #433D71 块面，描边宽 1.25：先画后部发块，再画脸，最后画刘海或帽状发块。沿头发走向添加 3–5 条 #7C74C4 高光线（线宽 1.1–1.2）和 1–2 条海军蓝内侧线（线宽 0.9–1.0）。示例分别展示了带侧刘海的波波头、高发髻配发圈，以及短卷发。
• **身体：**躯干宽 60–70，呈柔和的梯形；袖子单独绘制，并与躯干重叠。领口和下摆向内 3–4 px 再画一条线（罗纹下摆：一条线，每隔 6–7 px 加一条短竖线）。开衫有 2 颗纽扣（r 1.5）；连帽衫配奶油色抽绳（1.6），末端带小矩形。
• **手部：**长约 22–26 px，比脸略短。按袖口带（袖子的阴影色，宽 5–6，中间一条线，线宽 0.8）→前臂（肤色）→手腕→手掌→手指的顺序绘制；手指用线宽 0.75–1.0 的短内侧弧线分开，轮廓上画出指关节的小凸起。拇指单独绘制成小块。模板：typeHand()（平放或打字姿势，手背朝外）、pointHand() + pointCuff()（食指伸出，其他手指弯曲，拇指横搭）、gripHand()（右手握住把手的拳头，手背朝向观者，拇指压在顶部的工作端上）和 kneeHand()（面朝右坐姿人物的远侧手臂，手掌朝下搭在膝盖上）。摆放前，先确定左右手、掌心或手背朝向、手指方向，并根据 references/craft.md 中的表格检查拇指所在的一侧；如果表格要求拇指位于另一边，用 scale(1 -1) 镜像模板。
• **腿部和脚部：**牛仔裤从臀部向脚踝收窄，并在膝盖处弯曲；双腿重叠时，后侧腿用较深的牛仔布颜色 #4A4488（褶皱用 #7C74C4），位于 #6A63B0 的近侧腿后方；裤脚只画一条线；袜子或裸露脚踝长 2–3 px；白色运动鞋配 3-px 红色鞋底（sneaker()），跪姿时使用脚尖内收的鞋（tuckedShoe()）。鞋子始终接触地面带或脚踏板，鞋底下方加一个接触椭圆。
• **合适的姿势：**盘腿坐在懒人沙发上，身体前倾使用笔记本电脑（身体以臀部为中心旋转 −5°）；单膝跪地，正把一个按钮按进板子；坐在椅子上指向显示器，同时回头看向观者。每种姿势都包含前倾、扭转或弯曲的膝盖。

装饰与道具

• 面板内部： 2 朵云朵涂鸦（一个约 50 px 宽，另一个约 44 px 宽，每朵右侧都有一条 3 px 的短线），可选一朵较小的（约 17 px 宽），再加上 2–4 条小小的单弧线短纹（约 9 px 宽）；全部仅勾勒轮廓，位于天空区域，绝不出现在头部后方；墙面道具最多 1 件（代码窗口、环形灯、网格板）。
• 地面： y 256 至 312 的带状区域，在 y 256 处有一条海军蓝线，顶部角落附近及底边上有 6–7 条短线（长 10–26 px，其中一些后面跟着一条 4 px 短线，中间间隔 5 px）。
• 灌木： 1–2 丛，立在底部角落的地面线上；至少有一丛跨过面板侧边。
• 越框元素： 恰好 2 个白色 UI 元素（对话气泡、UI 卡片、字体样张）跨出画框：一个在左上方，跨过左边缘（x 约 62–166，y 58–134）；一个在右侧，跨过右边缘（x 约 336–436，y 150–250）。可选第三个：一个跨过左上角的小红色标签。每个元素都包含一个图标或头像，以及 2–4 行文字；不要使用段落。
• 面板外部： 两个角括号（右上和左下，坐标固定）以及 2–3 个括号形标记：一侧有双弧线，另一侧有单弧线，颜色与括号相同。越框元素旁可有 0–2 组海军蓝闪光短线（三条短放射线，ticks()）。
• 禁止： 彩纸屑、星星、渐变、投影、第二个人物、任何非海军蓝颜色的边框，以及括号和标记之外卡片边缘处的装饰。

构图

• 卡片：正方形满幅矩形，不使用 rx。面板：x 110 y 46 w 262 h 266（占宽度的 55 %、占高度的 74 %），填充色为 #8A80EA，海军蓝描边 1.35，每张卡片均相同。
• 绘制顺序：卡片 → 括号和标记 → 面板填充 → 云朵 → 墙面道具 → 地面带、线条、短线 → 完全位于面板内的道具 → 面板描边 → 跨越边缘的灌木 → 家具和人物 → 越框气泡和卡片 → 闪光短线。任何跨出画框的元素都在描边之后绘制，使其覆盖在描边上方。
• 人物中心线位于 x 205–235，略偏面板中心（241）左侧，面朝右侧的道具；头部位于面板上半部，头发上方留有 30–60 px 的天空。
• 分量分布：左侧越框元素靠上，右侧越框元素位于中部，灌木靠近底部角落，使三个非人物主体大致呈松散的对角线分布。
• 越框元素跨出画框 40–65 px（示例测量值为 44–64 px）。卡片若仅有 10–20 px 超出边缘，会显得位置不当，而非真正越框。
• 下半部分需要一个宽 120–200 px 的家具主体（懒人沙发、书桌、组件板，或座椅加边桌）。如果人物只坐在细腿凳上，右侧越框元素下方会留下一块紫色空洞。
• 边距：所有内容都须位于 x 40–450 和 y 30–325 范围内。

技巧

scripts/panel-kit.mjs 保存了从示例中提取的所有重复部分（无依赖、结果确定）。先生成框架，再在其中手绘人物和道具。运行 node scripts/panel-kit.mjs demo "$WORK/kit.svg"，即可在一张卡片上绘制所有部件，方便在使用前查看。

1. 框架。 scaffold({ prefix, bg, label, clouds, wall, inside, front }) 会按上述图层顺序返回整张卡片。cloud(x, y, 'big'|'mid'|'small'|'tick') 和 bush(x, 'big'|'mid'|'small', { mirror }) 用于放置涂鸦；floorShadow(cx, cy, rx) 会在地面上绘制接触椭圆。

   node scripts/panel-kit.mjs scaffold "$WORK/card.svg" --bg orchid --prefix xx- --label "Card Name"
   

2. 突出框外的元素。 bubble({ x, y, w, h, tail: 'down'|'left'|'right', at }) 会绘制带角标的白色对话气泡（圆角半径 8，尾巴长 11 px）；请将它包在 <g stroke="#2E2A5C" stroke-width="1.25"> 中。使用 raised(x, y, w, h, rx, face, under) 和 textLine(x, y, len, colour) 为其填充。
3. 头部和鞋子。 在模板坐标中使用 face({ skin, blush, blushOpacity, mouth, earring, smile }) 和 neck(skin)；使用 sneaker(x, y, { mirror }) 和 tuckedShoe(bx, by) 绘制鞋子。
4. 纹理。 hatch(x, y) 会返回一对斜线：<path d="${hatch(186, 214)} ${hatch(214, 196)}" stroke="#2E2A5C" stroke-width="0.9" fill="none" stroke-linecap="round"/>。
5. 手持物品。 先绘制手持物，再在其上绘制 gripHand()，让弯曲的手指和拇指覆盖把手；旋转拳头，使手指顺着前臂的方向，并让把手相对于拇指轴向上倾斜最多 45°，以表现手腕弯曲。要表现镜头或屏幕放大其后方内容的效果，请在镜头的 clipPath 内重新绘制该内容，以镜头中心为基点缩放至 1.6 倍；然后叠加 fill-opacity 为 0.18 的白色玻璃层和两道短白色反光线；镜框使用浅金属色 #C9C7DA。
6. 移动描摹路径。 xf(d, { ox, oy, tx, ty, s, sx, sy }) 可以移动、缩放或镜像路径数据，同时保持描边宽度精确；对于任何带描边的内容，请使用它代替 transform="scale()"。

失败模式

• 打字的手没有拇指。 两位评审都指出了 Support 卡片中第一只打字的手。每只手都要露出拇指，或者转到拇指明显藏在手掌后面；用拇指验证法检查。
• 拇指在错误的一侧。 一位设计师因此否决了整套手部图稿。画每只手之前，先写明左右手、手掌/手背朝向和手指方向。
• 在柔软座椅上坐得笔直。 “她坐得笔直，身体没有陷进懒人沙发”：躯干朝工作方向倾斜 5°，让臀部低于坐垫边缘，并在臀部周围画出坐垫轮廓的凹陷。
• 线条太干净。 评审认为线条“比这套图的粗略线稿更干净、更均匀”。混用不同线宽（按列表使用 0.75–1.35），添加气泡角落的小短线、成对排线和接缝处的短刻线。
• 画成 UI 工具包，而不是涂鸦。 画成完整迷你界面的分镜会让人觉得是 UI 工具包。每个分镜只保留一个图标、一个头像，或一个大字形，再加 2–4 行占位线。
• 气泡太多。 Live Coding 的早期草稿在左侧堆了一个爱心气泡和一个“+1”气泡；最终卡片（得分 9）将它们合并成一个“+1 ♥”气泡，并在底部两角各放一丛灌木以保持平衡。
• 孤零零的道具让地面显得杂乱。 Live Coding 中桌旁的 PC 主机被删掉了；地面只保留人物使用的家具和灌木。
• 交叉双腿画得过于简化。 Support 卡片中的交叉双腿和袜子被认为画得过于简单：画出远侧脚收在近侧膝盖下方、近侧小腿交叉在前、清晰可见的袜口，以及近侧脚的鞋底。
• 人物与面板融为一体。 紫色衣服放在紫色面板上会让人物轮廓消失；让人物穿芥末黄、薄荷绿、橙色或奶油色的衣服，并在地面色带较浅的地方让深色裤子延伸到地面线以下。
• 脚悬空。 鞋子需要一个 #B5AEEA 接触椭圆，并且必须落在地面色带内 y 295–304 的位置，或明显踩在脚踏上。
• 一只脚伸向凳子的脚圈。 凳子的脚圈位于座面下约 35 px 时，膝盖离前方太远，脚够不到脚圈；把远侧腿收起并画在那里，会让小腿像是插进了鞋尖。双脚都要着地：远侧小腿从近侧大腿下方垂下，鞋子藏在近侧鞋子后面，鞋底约高 3 px。脚圈要画成真正的椭圆（由两段三次曲线组成，而非两段在尖点相接的二次曲线），后半段画在立柱之前，前半段画在立柱之后。
• 深色镜片看起来像煎锅。 自测中的第一个放大镜使用了发丝般细的海军蓝边框和灰色镜片；改用浅色 #C9C7DA 边框，并在镜片下方放大显示卡片内容后，一眼就能看出它是放大镜。
• 字形变成了数字。 10 px 的开口钩形引号看起来像“66”（自测中发现）；将引号画成两个填充的水滴形，并在 1x 尺寸下检查每个小字形。
• 把手贴在拳头上。 如果在手之后画把手，它就会盖在手指上，让握持看起来像贴纸；先画把手，再把手指和拇指画在它上面。

示例

• examples/support.svg：Support（蜜桃色）。她盘腿坐在李子色豆袋沙发上，把笔记本电脑放在腿上打字，身体前倾；一个用户提问气泡从左侧探出，一个“修好了！”回复气泡从右侧探出；墙板上挂着一个代码窗口，显示一行有 bug 的代码和一行修复后的代码。展现打字的手、交叠的双腿、豆袋沙发的凹陷和踢掉的运动鞋。
• examples/design-system.svg：Design System（兰花紫）。她单膝跪地，把一个红色按钮按进组件网格板上标出的虚线槽位；网格板上有色板、切换开关、滑块和头像标签；一张带控制柄的选中组件卡片和一个光标从左上方探出，一张“Aa”字体卡片从右侧探出。展现跪姿双腿、脚趾蜷起的鞋、双手按压的动作和凸起的 UI 部件。
• examples/live-coding.svg：Live Coding（天青色）。她坐在办公桌前的转椅上，指着显示器上的代码，笑着看向观众；桌上有一支吊臂麦克风、一盏环形灯和一个马克杯；红色 LIVE 标签横跨左上角，一个“+1 ♥”聊天气泡从左侧探出，一段代码气泡从右侧探出。展现指向屏幕的手、戴眼镜的镜像头部、带抽绳的连帽衫和桌柜抽屉。

工作流

在此技能的文件夹中运行命令。WORK 是你自己的工作文件夹（任意路径）；卡片路径为 $WORK/card.svg，ID 前缀为 xx-。

1. 简述。 写明主题，并各用一行描述：人物的动作（动词 + 对象）、姿势（坐、跪、蹲）、墙上道具、两个探出边框的元素及各自的文字、卡片的柔和底色。
2. 先画姿势和手。 在纸上或注释中用方框勾勒人物：髋部点、膝盖、地面区域上的脚、肩线，以及双手落点。根据 references/craft.md，为每只手记下左手还是右手、手掌还是手背朝向、手指方向和拇指所在一侧。
3. 搭建框架： mkdir -p "$WORK" && cp scripts/panel-kit.mjs "$WORK/" && node scripts/panel-kit.mjs scaffold "$WORK/card.svg" --bg peach --prefix xx- --label "Card Name"。如果要绘制空白框架之外的内容，就在 $WORK 中编写一个小型生成器，导入 ./panel-kit.mjs，并调用带有你的人物的 scaffold({ ..., front })。
4. 先搭出家具、躯干、腿和头部（通过 face()），渲染并检查 1x 缩放下的轮廓和身体倾斜，然后再添加任何细节。
5. 绘制衣物、手、头发、道具和探出边框的元素；然后添加褶皱、成对排线和角部短线。
6. 渲染（无头模式，2x）：node scripts/render.mjs "$WORK/card.svg" "$WORK/card.png"
7. 将卡片与示例放在同一张图中： node scripts/render.mjs --sheet "$WORK/sheet.png" examples/*.svg "$WORK/card.svg"。自问：“手的画法一致吗？属于同一套风格吗？”检查画框、线条粗细、探出边框的程度和面部。
8. 放大检查每只手、面部、双脚和每处接触点；从矢量图重新渲染至 5–8x：node scripts/render.mjs "$WORK/card.svg" "$WORK/hand.png" --zoom x,y,w,h --scale 8。根据 references/craft.md，在临时副本上验证拇指。
9. 评审是否符合 references/craft.md 中的五项标准，修正后重复。预计至少迭代四轮。
10. Lint 检查： node scripts/lint.mjs "$WORK/card.svg" --prefix xx- --palette style.json。修复所有 ERROR；每个 WARN 都必须是有意使用的色调。

验收

• 卡片是一个铺满画布的柔和色调矩形（桃色、兰花紫或天蓝色），不带 rx。
• 面板位置和尺寸准确为 110, 46, 262 × 266，填充色为 #8A80EA，带深蓝色 1.35 宽描边；绘制顺序在内部道具之后、溢出卡片边缘的元素之前。
• 右上角和左下角有卡片括号的颜色的角括号，左右两侧外各有一个双括号和一个单括号标记。
• 面板内有两朵带尾部短线的轮廓云，以及 2–4 个细小弧形刻线；天空中没有填充色块。
• 地面带位于 y 256–312，有深蓝色线条和 6–7 条短线；每只脚和椅子腿都落在地面带上，并带有接触椭圆。
• 恰好有两个白色溢出元素穿过左右画框边缘，每个都有角刻线；至少有一丛灌木穿过侧边缘。
• 所有描边均为深蓝色 #2E2A5C；宽度符合列出的范围（刻意绘制的 UI 横条除外，描边不得超过 1.35）。
• 脸部使用共享模板（眼睛尺寸、睫毛挑线、钩形鼻子、腮红），仅通过平移和旋转进行放置。
• 每只手都有袖口带，手腕窄于手掌，手指彼此分开；拇指所在一侧符合惯用手对照表。
• 姿势带有倾斜、扭转或弯曲的膝盖；座椅或地面能明显承受身体重量。
• 每件服装有 2–4 对排线，头发有高光线条，并且至少有一块平面阴影或较深色袖口。
• 文字不超过三个词，字重为 700–800，颜色为深蓝色或白色。
• lint.mjs --palette style.json 检查通过；任何 WARN 都应是你有意选择的色调。