illustration-grainy-gouache

插画：颗粒感水粉画

温暖的编辑风格：一只可爱的动物正在做设计或编程相关的事，画面由没有描边、带柔和明暗变化并撒有细密深色颗粒的扁平形状构成，背景是一张饱和亮粉色卡片，点缀奶油色闪光和飘落的秋叶。适用于希望营造温暖迷人氛围的产品场景：空状态、引导流程、季节性博客标题，以及“我们正在处理”页面。

风格界限：如果需要没有纹理、没有动物的简洁扁平矢量图，请使用 illustration-flat。如果需要白色背景上带排线和凸出眼睛的手绘小动物，请使用 illustration-ink-sketch。如果需要带墨线描边的人物，请使用 illustration-outlined-cartoon。此风格不包含人物卡片；如果设计需求需要人物，请改用上述风格之一。

摘自一组包含 14 种风格、共 42 张原创设计与编程主题卡片的作品；examples/ 中的三张卡片就是此风格已发布的卡片。

一句话概括风格

没有描边的形状，每个形状都填充柔和的明暗渐变，再撒上细密的深色颗粒；颗粒在形状边缘和阴影处逐渐密集。背景是亮粉色 #FF81BE，下方带一片粉笔质感的紫色阴影。

去掉边缘聚集的颗粒，画面就会变成普通的扁平矢量图；换掉粉色，它就不再属于这一组作品。

调色板

根据示例测量得出。每个大型形状都使用渐变色阶，而非单一纯色。style.json 列出了所有合法值。

角色	十六进制	用途
卡片背景	#FF81BE	铺满画面的矩形、每张卡片，包括夜景和雨景
奶油色	#FDD5A8	闪光、爆发形、圆点、蒸汽、代码文本、雨滴、毛球、皮毛短线
浅奶油色	#FFF3E2	仅用于水滴和毛球上的微小高光
水池阴影 / 核心色	#B95A93 / #A04A80	粉笔质感的地面阴影；最重物体下方的不透明度为 0.8 的核心色
腮红色	#FF7FB0	不透明度为 0.6 的椭圆腮红
朱红色	#FF4816	平涂点缀：编辑器圆点、书签、提交节点
朱红色阶	#FF5A24 #F2440F #F0420E #B02B08 #9C2306	马克杯、花盆、狐狸皮毛（径向 #FF5A26→#FB4714→#D9380C→#9C2406）
珊瑚色	#FF6A3A	代码点缀、马克杯杯沿、便利贴
针织色	#EE430F+#C2320A，深色 #D2360B+#A42807，罗纹 #E03A0C+#A8290A	毛衣、袖子、针织帽、袖口
赭黄 / 金色	#E7A13A / #D88A1E	代码关键字、便利贴、饰带边框 / 镀金线条、流苏、猫头鹰脚趾
赭黄色阶	#E38C1E #C96E05 #9E5004	窗框、书封
木质顶面	#F0A23C→#D98418，边缘 #F6B860，接触阴影 #7A3A04 @0.38	桌面、窗台
栗色渐变	#8A220A #701001 #4A0901，深色 #5A0E02 #3A0601	书本、桌子和窗台正面、圆窗框、围裙
末端阴影	#1A0402	在盒子和书脊两端叠加不透明度为 0.4-0.5 的渐变
屏幕色	#8A2632→#621626→#3A0A14	屏幕；夜空 #3A1424→#1C0910；雨窗玻璃 #22090F→#4E1420
近黑色	#191113 边框，色阶 #3A2E31→#0D0809，边缘 #6A5A5F	笔记本电脑、显示器、台灯、爪子、耳尖
面部线条色	#0D0809 瞳孔 / 鼻子，#120A0B #1A0E0F 线条，#F7D6A6 眼圈	面部
奶油色皮毛	#FFE6C4→#FCD9AE→#F0BF88	口鼻部、胸部、尾尖（径向）
常春藤绿	#16592C #0F4A23 | #0C3F1D #082F15，叶脉 #06150A	常春藤叶、藤蔓
橄榄绿	#7A7318 #6A6416 | #524810 #3C350C，叶脉 #1C1804；马克杯 #5E5712	橄榄叶、植物、马克杯
橄榄绿点缀色	#A8B030 代码绿色，#8A9416 编辑器圆点，#545C01 围巾	仅用于小面积点缀
橡树叶色	#E08A1C #D47A0C | #C96E05 #A85A05，叶脉 #3A1404	橡树叶
皮毛，琥珀色	#E59240→#CF7426→#A9531A→#7A3510；四肢 #B85E1E→#5E280C；爪子 #6A3418→#32150A	棕色动物
皮毛，猫头鹰色	#F0962E→#DC7A14→#B85A08→#8A3E04；翅膀 #7E2A06→#461402	橙色动物

禁止：给形状加描边；除水池外使用蓝色、青绿色、紫色或灰色；除灯光锥外使用纯白色；使用 #FF81BE 以外的背景色；大型形状使用单一纯色；添加辉光或轮廓光。奶油色装饰不得落在奶油色皮毛上，朱红色头部不得只放在粉色背景上：应将其置于深色平面前方。

线条与填充

宽度为 480 时：

• 形状使用填充，绝不描边。 使用色值或色相的阶梯变化以及颗粒边缘来区分形状。杯子或头部周围出现描边，是风格发生变化的第一个迹象。
• 仅使用细暗色细节线条，端点圆角，绝不用 #000：叶脉 0.6-0.7，叶茎 0.9，胡须 0.75-0.8（#1A0E0F 或 #3A1A0C），嘴部和盖子线条 1.05-1.3（#120A0B），手指褶皱 0.7（#1A0A04），羽毛线条 0.9-1.1。
• 奶油色线条： 蒸汽 1.15-1.35，爆发射线 1.3，围巾括线 1.1，雨线 1.0，stroke-opacity 为 0.22-0.5，耳毛短线 1.1。
• 屏幕上的代码： 描边 2.2-2.6，端点圆角，行距 7-8.4，每行 2-3 段，颜色为赭色、奶油色、珊瑚色和橄榄绿。
• 渐变： 圆形使用径向渐变（cx 0.42-0.46，cy 0.30-0.34，r 0.72-0.78；色标依次为亮部 0、中间色 0.5、阴影 0.82、边缘 1）。板状物使用垂直线性渐变（顶部亮，底部暗）。圆柱使用水平 5 色标渐变（暗部 0、中间色 0.22、高光 0.45、中间色 0.75、最暗部 1）。
• 叠加层在不引入新颜色的情况下增加景深：在盒子上叠加 gEnds，在圆柱底部叠加 gBase（#5A0E02 0→0.5），将冠部色带（#7A3510 @0.3）裁剪到头部顶部，在躯干上叠加径向“汗渍”（边缘处 #5A0E02 0→0.55），袖子渐变（外侧深栗色 0.55 → 内侧 #FF8A50 0.12-0.22）。
• 角色内部的投影： 袖子路径填充 #4A0901，模糊 2.4（soft），偏移 3.5 px，裁剪到躯干范围内，不透明度 0.85。
• 颗粒： 将每个纯色形状组包裹在 filter="url(#p-grain)" 中；大型浅色平面（窗框、桌面）使用 grainL。面部细节、代码、奶油色装饰、胡须和叶脉保持清晰：将它们绘制在颗粒组外，并放在组之后。
• 图案（userSpaceOnUse）：针织 7x6 人字纹，罗纹 3.2x10 条纹，费尔岛纹带 12x11（栗色、奶油色圆点、赭色圆点），围巾 22x19，羽毛人字纹 8x7。

角色

示例中只出现动物：狐狸、水獭和猫头鹰。每张新卡片新增一种动物，也可以重复出现（兔子、刺猬、熊宝宝、浣熊、猫、獾都合适）。

• **比例：**头部宽度与躯干相同或更宽（84-92 px）；头部高度为躯干高度（肩部到臀部）的 0.8-1.0 倍；从头顶到臀部为 110-150 px，如果腿伸到地面则再加 30-40 px。四肢要短，不露出脖子：下巴与肩部重叠 8-10 px。在 SVG 中测量：头部与躯干的比例若为 0.6，放在这组角色旁边会显得身形修长。
• **头部：**使用径向毛色渐变绘制一条平滑闭合路径；顶部裁剪一条较深色的头顶色带；奶油色口鼻部（gCream）下方 1.6 px 处叠加一个深色副本作为阴影，不透明度为 0.55；耳朵内侧绘制较深色形状（#C2300A 或 #5A2408）；狐狸耳尖通过 clipPath 设为黑色。将头部组朝动物注视的方向倾斜 5-9 度。
• **眼睛（标志性特征）：**奶油色眼圈 #F7D6A6，r 为 10-12；瞳孔为 #0D0809，半径为眼圈的 0.81 倍，并朝注视方向偏移眼圈半径的 0.22 倍；在注视方向一侧、中心上方放置奶油色四角星（缩放比例 0.52-0.78）；另一侧下方放置奶油色圆点，r 为 1.35-1.6。两眼中心相距 29-37 px，几乎相触。要绘制困倦表情，可在眼睛上方裁剪一层毛色眼皮，眼皮线宽为 1.3，并在外眼角添加短挑线。
• **鼻子和嘴：**圆角倒三角形，宽 10-17 px，颜色为 #0D0809；添加一个 #6A5A5C 高光椭圆，再绘制一个从鼻子下方垂下的 1.05 粗细的“w”形嘴。水獭的口鼻部添加 #7A4A30 色圆点，r 为 0.9。
• **胡须：**每侧两根，粗细为 0.75-0.8，长度为 28-75 px，略微呈扇形展开。**腮红：**颜色为 #FF7FB0，不透明度为 0.6，rx 为 4.4-6.6，ry 为 2.6-3.4，位于每只眼睛外眼角下方。
• **爪子是这种风格中的手。**抓握（水獭拿杯子）：毛色前臂管状结构宽度从 12 收窄至 9.5，从肋纹袖口（17 → 15.5）露出；深色爪子（#6A3418→#32150A）的掌部约为 9 x 15，三个手指管状结构宽度从 4.6 收窄至 4.2、长度为 5.8-6.8，彼此间隔 4.7，横跨杯子正面；拇指管状结构宽度从 5.6 收窄至 4，沿侧面拱起；手指排之间绘制 0.7 粗细的褶皱线。休息姿势：将带脚趾缺口的爪子（宽 19 px，使用 gBlack）平放在表面上。栖息姿势：每只脚用三个宽度从 4.6 收窄至 3.8 的脚趾管状结构缠住横杆，每根末端都以 1.3 粗细的深色钩状爪收尾，并向下弯曲。拇指管状结构的朝向遵循 references/craft.md 中的左右手规则。爪子使用动物自身的毛色渐变（或深色爪子渐变）；奶油色爪子放在奶油色物体上（纸火箭、奶油色杯子）会消失。
• **衣物：**针织毛衣（躯干使用 pKnitD、袖子使用 pKnit，配肋纹领口、袖口和下摆），可选用 Fair-Isle 图案饰带，并加上 1.3 粗细的赭色边框；围巾配 7-8 px 长的金色流苏；针织帽（针织圆顶、肋纹帽檐、奶油色毛球，r 为 8.6，并加上 #FFF0DC 高光）。褶皱用阴影叠层表现，不要画线。
• **坐姿：**臀部与台沿顶部重叠 4-6 px；腿部管状结构（19 → 13）垂在台沿正面，延伸至带蹼的脚掌（脚垫加四个 #3E1A0A 色脚趾椭圆，rx 为 2.35、ry 为 3.3），脚掌向外转 8-20 度；尾巴管状结构（17 → 4.6）从后方弯出。坐在矮座位（坐墩、凳子）上时，大腿应朝向画面前方，合成一个不比臀部更宽的腿部整体，并有两个膝部隆起；小腿（30 → 25）垂在座位正面，双脚踩在地面上，并加上 #7A3A04 色的接触阴影椭圆。
• **可行的姿势：**蜷坐在笔记本电脑底座上，双爪向前（狐狸）；坐在窗台上，双爪捧着杯子（水獭）；栖息在台灯支臂上，头朝屏幕倾斜（猫头鹰）；坐在坐墩上，一只爪举起小道具高举过头顶，另一只爪放在笔记本电脑的按键上（自测中的兔子）。

装饰与道具

• 背景装饰： 2 个奶油色放射形图案（8 条射线，缩放比例 0.75-0.9，其中一个旋转 12-14 度）、6-7 个奶油色四角星（缩放比例 0.55-0.95）、18-21 个奶油色圆点，半径 r 1.0-1.4。仅放在边缘区域，与场景至少相距 8 px。
• 叶子： 每张卡片放 7-8 片，分为三种（常春藤、橡树、橄榄），缩放比例 0.55-1.4，带纹理，分成 2-3 个松散簇，位于 x < 80 和 x > 400 处，顶部附近最多再放一片零散的叶子。每片叶子沿叶脉分成浅色和深色两半。
• 道具： 笔记本电脑（边框为 #191113，rx 4-8，酒红色屏幕，带代码，三个编辑器圆点，半径 r 1.5-1.9）、黑色支架上的显示器（7 px 等宽字体的 02:14 是唯一可使用的文字）、杯子（朱红色、橄榄色或奶油色圆柱体，2-3 条奶油色蒸汽曲线，搭配新月或圆环与横杠等奶油色图案）、书堆（酒红色、常春藤绿、赭色；烫金线条宽 1.6；点状边框，半径 r 0.9，每隔 7 px 一个点）、窗户（拱形赭色或圆形酒红色窗框；雨、月亮和星星只能出现在窗格内）、书桌（赭色桌面、酒红色桌前板、黄铜拉手）、台灯（黑色管状灯臂、带斑点的光锥）、盆栽（朱红色花盆、5 片扇形橄榄色叶子、一根常春藤藤蔓）、便签（赭色或珊瑚色，带折角）。
• 每张卡片： 一只主角动物，加 3-5 件道具。不得出现人物、UI 套件面板、徽标、图标、蓝天，或超过几个字符的文字。

构图

• 卡片： <rect width="480" height="360" fill="#FF81BE"/>，然后是装饰、叶子，最后是场景组。
• 场景尺寸： 宽 330-360 px（卡片宽度的 70-75%），高 250-290 px，水平居中，中心点与 x 240 的偏差不超过 10 px。地面色块的下缘位于 y 310-330，并比两侧家具各多延伸 10-20 px。
• 焦点： 动物的脸，位于中上部（y 100-190），前方是深色平面（屏幕、窗格、圆窗，或夜空渐变中的黑板），以衬托橙色。
• 地面： 不画地面线；粉笔质感的色块就是地面。书桌或窗台上的物体需添加 #7A3A04 @0.38 接触椭圆（ry 1.7-2），边缘加一条 #F6B860 0.9 高光线。
• 组变换： 先绘制场景，再用一个包装组将其居中：translate(0 -20) 或 translate(0 10)，或 translate(240 178) scale(1.07) translate(-240 -178)。不得连同装饰或叶子一起缩放。
• 密度： 中等。每个象限都有装饰；场景周围留出清晰的粉色区域。

技巧

scripts/gouache.mjs 会添加带有自定义前缀的共享 defs，并包含可重复使用的构建器。从技能文件夹运行：

node scripts/gouache.mjs defs wk-          # filters, leaves, sparkles, common ramps, knit patterns
node scripts/gouache.mjs --demo /tmp/g.svg # a test card using every builder

import fs from 'node:fs';
import * as G from '/abs/path/to/illustration-grainy-gouache/scripts/gouache.mjs'; // relative to THIS file, not the cwd
const p = 'wk-';
const extraDefs = '';   // your fur ramps, clothing gradients and clipPaths
const body = [
  G.background(p, { seed: 3 }),                                  // pink + bursts, stars, dots
  G.leaves(p, [['ivy', 40, 112, -20, 1.15], ['oak', 436, 60, 22, 0.95]]),
  G.shadow(p, 70, 410, 312, { core: [90, 330] }),                 // chalky pool
  G.grained(p, `<path d="${G.tube([[201, 260], [200, 271], [198, 281]], [19, 16, 13])}" fill="url(#${p}gMaroon)"/>`),
  G.eye(p, 197, 143, 10.8, [1, 0.3]),                             // glossy eye, looking right
].join('\n');
fs.writeFileSync('card.svg', G.card(p, G.defs(p) + extraDefs, body, 'Title, Grainy gouache style'));

G.defs(p) 会定义以下 id（全部带前缀）：滤镜 grain、grainL、chalk、speck、soft；符号 ivy、oak、olv、star、burst、drop；渐变 gBlack、gMaroon、gOchre、gTop（木质桌面）、gEnds、gBase、gScreen、gDeck、gCream、gVerm、gOliveCyl、gCreamCyl、gCone，以及叶片渐变；图案 pKnit、pKnitD、pRib。在自己的 extraDefs 字符串中添加动物毛发渐变、衣物渐变和任何 clipPaths。构建器：background、leaves、shadow、grained(p, svg, 'grain' | 'grainL')、tube、smooth、eye、blush、use、card。

1. 边缘纹理。 分形噪声（基础频率为 2.1）会变成深棕紫色斑点；蒙版 2.0 x alpha - 1.8 x blur(alpha, 3.2) 会在每条边缘内侧形成一条带状区域；第二项会根据填充色的深浅对其加权；斑点会与形状相乘。辅助函数中的 grainFilter() 负责实现这一效果。通过调整 dens（1.0-1.08）来改变密度，绝不要改动 baseFrequency。

2. 立体明暗。 先绘制基础渐变，再在同一裁剪区域内叠加图层，最后在组上添加纹理：

<g filter="url(#wk-grain)">
  <path d="M74 288 L314 288 C318.5 293 319 309 314 314 L74 314 C69.5 309 69.5 293 74 288 Z" fill="url(#wk-gMaroon)"/>
  <path d="M74 288 L314 288 C318.5 293 319 309 314 314 L74 314 C69.5 309 69.5 293 74 288 Z" fill="url(#wk-gEnds)"/>
</g>
<path d="M174 299.5 L204 299.5 M174 303 L196 303" stroke="#701001" stroke-width="1.2" stroke-linecap="round"/>

3. 四肢和尾巴 使用 G.tube(points, widths)：沿平滑中心线绘制带圆头的填充渐细管状形状（肢体伸入袖子处使用 cap0/cap1: false）。

4. 地面阴影 使用 chalk 滤镜（置换、斑驳 alpha）处理两块色斑：先用 #B95A93，再叠加不透明度为 0.8 的 #A04A80 核心色。

失败模式

• 背景改变时，整组设计会失衡。 Night Shift 和 Rainy Refactor 最初以靛蓝色和青绿色为背景绘制，评委给两者都打了 7 分。换回 #FF81BE 后，分数分别为 8.5 和 9。夜色、雨景和天气效果只放在窗户和屏幕内。
• 颗粒看起来像脏兮兮的电视雪花。 初稿在所有元素上都均匀铺了颗粒。让颗粒集中在边缘和暗部（使用上面的滤镜）；大面积浅色平面使用 grainL；奶油色毛发、面部细节和装饰保持清晰。
• 光晕看起来很数码。 夜景中移除了径向光晕和轮廓光渐变。光线使用不透明度为 0.5 的白色光锥，通过 speck 滤镜处理，并加上斑点状光池。
• 主体不突出。 橙色毛发在亮粉色背景上对比度很低。将头部安排在深色屏幕、窗格或画框前。
• 手套爪。 用一团深色形状表示爪子，会让它看起来像手套。用掌心 + 手指管状结构 + 拇指管状结构 + 0.7 的褶皱来构建，让手指位于物体前方，拇指则环绕物体。
• 腿部看起来像裙子。 自测中，腿部形状比臀部宽，细小的小腿又藏在里面，看起来像绿色芭蕾舞裙。腿部保持在臀宽范围内，小腿尽量与膝盖一样宽。
• 动物像是浮在空中。 坐着的动物如果刚好止于边缘，会显得悬空。让臀部与表面重叠 4-6 px，脚垂在边缘前方，并在整个主体下方放置光池阴影。
• 轮廓线悄然出现。 在道具周围描一圈 1 px 的描边，会让它变成另一种风格。改用明度层次。
• 杂乱。 场景框内的叶片或装饰超过 8 个，就会让卡片显得拥挤。将叶片留在边缘。
• 文字。 字标或标签会破坏绘画感。屏幕上最多放一个 7 px 的等宽时钟。

示例

• examples/cozy-commit.svg（Cozy Commit）：一只狐狸蜷缩在打开的笔记本电脑上，电脑放在一摞书上；狐狸戴着印有 { } 图案的围巾，旁边有一杯可可。展示了躺姿、放松的爪子、半闭的困倦眼睛、围巾图案、使用 gEnds 的书本阴影，以及屏幕上的提交图。
• examples/rainy-refactor.svg（Rainy Refactor）：一只穿着针织毛衣的水獭坐在雨天的窗台上，用双爪捧着茶杯。展示了抓握爪的构造、针织／罗纹／费尔岛图案、袖子投下的阴影、双脚垂过边缘的坐姿、裁剪到窗格内的雨景，以及小笔记本电脑上的差异内容。
• examples/night-shift.svg（Night Shift）：一只戴着毛线帽的猫头鹰栖在台灯臂上，注视着显示 02:14 的显示器。展示了栖枝脚趾、分层羽翼、斑点状灯光锥、圆形夜景窗、便利贴、带桌腿的桌子和接触阴影。

工作流

在 skill 文件夹（包含此文件的文件夹）中运行命令。选择一个前缀，例如 wk-。

1. **简述：**用 3 个词说出主题，并指出一个能体现主题的动作（“兔子发布一个副业项目”：按下部署按钮、一枚小火箭贴纸）。选择动物，并为它的头部选一个深色背景。
2. **姿势与主角：**选择一种可用姿势或相近的变体；确定每只爪子的用途（抓握、休息、支撑），并对每只抓握的爪子，确定是左爪还是右爪，以及拇指的位置（references/craft.md）。
3. **构图：**在你自己的工作文件夹中编写生成器（gen.mjs），通过绝对路径导入 scripts/gouache.mjs（ES import 相对于生成器文件而非 cwd 解析）；先用平涂色块摆放家具、池状阴影和动物的大形状；然后渲染。
4. **绘制：**将平涂替换为渐变和叠加，添加图案、面部、爪子、道具；最后在边缘空白处添加装饰和叶子。
5. 渲染：node scripts/render.mjs card.svg card.png。
6. 对照图：node scripts/render.mjs --sheet sheet.png examples/*.svg card.svg。问自己：“手法一致吗？属于同一套吗？”
7. **放大检查：**对面部、每只爪子、脚和每个接触点（臀部靠在搁板上、杯子放在表面上）运行 node scripts/render.mjs card.svg z-face.png --zoom x,y,w,h --scale 8。
8. **评审：**严格按照 references/craft.md 中的五项标准评审；修复问题；重新渲染。预计需要 4 轮。
9. Lint 检查：node scripts/lint.mjs card.svg --prefix wk- --palette style.json。修复每个 ERROR；每个 WARN 都必须是有意设计的毛发或色调渐变。

验证

• 背景是一个铺满画布的 #FF81BE 矩形，且没有 rx。
• 没有形状带描边；仅细节线（宽度为 0.6-1.3）、奶油色装饰线和代码线条可以描边。
• 每个大形状都有渐变，并位于 grain 或 grainL 组内；放大到 8x 时，其边缘处的斑点会变粗。
• 面部细节、胡须、代码和奶油色装饰清晰锐利（位于 grain 组外）。
• 眼睛：奶油色眼圈、偏置的瞳孔、朝向视线一侧的星形高光、另一侧的小圆点；两只瞳孔朝向相同。
• 腮红透明度为 0.6；哺乳动物有胡须；鼻子带高光。
• 每只爪子都由手指或脚趾状管形组成，每个拇指的位置都符合对应的左右手要求。
• 动物的头部位于深色平面前方。
• 整组下方有一个粉笔质感的 #B95A93 池状阴影；没有悬空元素；接触处重叠几 px。
• 7-8 片叶子、2 个爆裂形、6-7 颗星、18-21 个圆点，全部位于边缘空白处，均不触碰场景或卡片边缘。
• 场景宽 330-360 px，中心位于 x 240 附近，误差不超过 10 px；池状阴影底部位于 y 310-330。
• 除了一个微小的等宽字体屏幕标签外，没有其他文字；灯光锥外没有蓝色、灰色或纯白色。
• 头部宽度至少与躯干相同，头部高度至少为躯干高度的 0.8 倍（测量路径）。
• 每个 id 都以此前缀开头；lint 检查通过。