手繪墨水素描是做什麼的？

繪製一張獨立的動畫 SVG：粗細不一的抖動墨水線條，略為偏離線條的馬克筆渲染，在奶油色紙張上。平面 2D，正面或側面視角。線條會「沸騰」（每 2 幀重新繪製抖動），因此即使是靜止的主體也顯得有生命力，且場景可以透過 t 加入一個小動作。如需 3D 等角版本，請改用 handdrawn-3d 技能。標籤和標題使用內建的手繪筆劃字型，支援拉丁文和越南文。

套件：assets/kit.js · 渲染器：assets/render.mjs · 所有函式：references/kit.md（撰寫場景前請先閱讀） · 範例：examples/（杯子、蘋果、貓、植物、房子、餐點）。

設定（僅需一次）

PNG/GIF 匯出需要 @resvg/resvg-js。如果 render.mjs 顯示缺少該套件，請在此技能資料夾中執行 npm install。SVG 輸出則不需要任何套件。

繪製前

是否可以繪製？ 如果主題是抽象的（「希望」、「生產力」、「經濟」），請勿繪製模糊的圖像。直接說明，並建議一兩個具體的場景來呈現它（「一棵幼苗從人行道裂縫中鑽出」），然後繪製使用者選擇的那個場景。
圖表、圖表、UI、按鈕、互動式內容： 非此技能範圍。
動畫： SVG 永遠循環（線條沸騰）。加入一個屬於該主題的小動作（蒸氣、尾巴甩動、眨眼、樹葉搖晃），當它合適或使用者要求時；否則僅依靠沸騰效果即可。只有當使用者要求靜止圖片時（--still）才使用單幀 SVG。

工作流程

部件與視角。 列出主題的真實部件並選擇視角：正面或側面。一個茶壺：壺身、蓋子、蓋鈕、壺嘴、把手、壺腳；側面視角。根據真實部件繪製（邊緣、把手、蓋子、莖、板、瓷磚），而不是一個帶有名稱的通用色塊。
規劃草稿。 在場景頂部的註解中撰寫一個小表格：部件、形狀呼叫、方框 (x, y, w, h)、顏色。主題佔據版面的約 65–80%，居中，並留有呼吸空間。地面/桌面線條位於約 80–88% 處。
從後往前繪製 在 scene.js 中使用套件：陰影 → 後方物體 → 主體 → 頂部細節 → 標籤。優先使用現成的零件（k.cat、k.person、k.tree、k.house、k.window、k.leaf……）並更改其選項，而不是重新繪製它們。對於任何可以在車床上車削的圓形物體（杯子、壺、花瓶、瓶子、碗、燈具），請使用 k.turned。對於把手、莖、尾巴、手臂和樹枝，請使用 k.tube。
渲染並查看：
```
node <skill>/assets/render.mjs scene.js -o out/scene.svg --png out/scene.png --thumb --grid
```
使用「讀取」工具開啟 out/scene.png 並查看它。--grid 疊加層會印出座標，讓您可以讀出物體的實際位置。同時查看 out/scene-128.png：在 128 像素下，它仍然必須能被辨識為該主題。
修正並重新渲染。 檢查：
- 一眼看去，以及在 128 像素下，它是否看起來像該主題？首先看剪影：如果輪廓看不出是「茶壺」，再多細節也無法挽救。
- 比例和重疊：把手連接壺身，物體放置在地面上，沒有物體漂浮或重疊不當。
- 光源皆來自左上角（右下角的陰影/陰影線）。
- 標籤不要壓在圖畫上或穿越其他線條。重複步驟 4–5，直到正確為止（通常 2–4 輪）。然後渲染最終版本不要加上 --grid。

絕對不要在沒有查看 PNG 的情況下交付。 交付 SVG（動畫圖片）和 PNG 路徑，並展示 PNG。如果場景會動，請同時檢查幾幀（請參閱《動畫》）。

風格規則

單一風格： 墨水 + 平坦的馬克筆渲染。無紋理或顆粒感。無漸層、光暈、投影、模糊、透明度技巧或 SVG <text>（請使用 k.text / k.label / k.title）。不要加入原始 SVG。
顏色： 色板名稱（red, coral, orange, ochre, yellow, sage, green, leaf, teal, sky, blue, navy, lilac, plum, pink, wood, brown, chocolate, grey, stone, charcoal, white, cream, sand, skin, tan）。每張圖片 3–5 種顏色加上墨水。任何十六進位色碼會自動柔化，但使用色板名稱效果最佳。
陰影： 主要體積使用 shade: true（或 0.15–0.35）；最多對一兩個大物體使用 hatch: true。光源始終來自左上角。
線條粗細： 輪廓使用 'outline'（預設），內部細節使用 'detail'，小標記和引導線使用 'fine'。
可愛圓潤： 動物和植物柔軟圓潤，大頭、點狀眼睛和小小的腮紅橢圓。沒有鋒利寫實的解剖結構。
構圖： 一個清晰的主題，置中，填滿大部分版面。任何站立在物體上的東西下方都要有地面陰影 (k.shadow)。
文字： 可選擇在左上角使用 k.title(...)，以及在空白邊緣區域使用帶有引導線的短小寫邊緣標籤 (k.label)。絕對不要使用覆蓋在圖畫上的方框或對話氣泡。標籤請使用使用者的語言。完整支援越南文。
版面： 預設為 1000×1000。若場景較寬，請使用 export const sheet = { width: 1200, height: 900 }。--transparent 會移除紙張背景。

場景範本

// 茶壺，側面視角。部件：壺身 (turned)、蓋子、蓋鈕、壺嘴 (tube)、把手 (tube)、陰影
export const sheet = { seed: 1 };
export function draw(k, t = 0) {
  k.shadow(500, 820, 300, 34);
  k.tube([[690, 540], [810, 520], [810, 650], [700, 710]], 34, { fill: 'teal' });           // 把手（末端被壺身遮擋）
  k.tube([[330, 640], [250, 560], [200, 470]], [60, 26], { fill: 'teal', shade: 0.3 });    // 壺嘴
  const pot = k.turned([[150, 0], [230, 70], [250, 180], [210, 300], [170, 330]],
                       { cx: 500, y: 480, fill: 'teal', hatch: true });                    // 壺身
  k.ellipse(500, 480, 150, 22, { fill: 'teal', weight: 'detail' });                        // 壺蓋
  k.blob(500, 445, 30, { squash: 0.8, fill: 'ochre' });                                   // 蓋鈕
  k.label('好茶壺', { x: 640, y: 300, to: [560, 440] });
}

動畫（始終啟用）

out.svg 預設是循環動畫 SVG：透過 CSS 切換幀，無需腳本，可在瀏覽器和 <img> 標籤中播放（不支援 CSS 動畫的渲染器會顯示第 0 幀）。場景會收到 t ∈ [0, 1)，亦即一個循環。保持簡單：除了自動的線條沸騰效果外，最多一兩個移動的物體（蒸氣、尾巴甩動、眨眼、樹葉搖晃、煙霧）：線條沸騰會每 2 幀重新繪製抖動，因此即使是靜止的主體也顯得有生命力。使用 Math.sin(2 * Math.PI * t) 讓動作無縫循環。現成的零件會接收 t 參數：k.steam(x, y, { t })、k.cat(..., { animate: true, t })、k.person(..., { wave: true, t })。

node <skill>/assets/render.mjs scene.js -o out/scene.svg --png out/scene.png          # 動畫 SVG + PNG 靜止圖
node <skill>/assets/render.mjs scene.js -o out/scene.svg --gif out/scene.gif          # + GIF，隨處播放
node <skill>/assets/render.mjs scene.js -o out/scene.svg --still                      # 單幀 SVG
     --frames 8 --fps 10 --boil 2 --gif-size 560

透過查看幾幀來檢查 GIF：ffmpeg -i out/scene.gif -vf "select='not(mod(n\,3))',scale=300:-1,tile=4x1" -frames:v 1 out/frames.png （或檢查 PNG 靜止圖，即第 0 幀）。GIF 是 256 色：將其寬度保持在 ≤ 600 像素。

手繪墨水素描