每天精通一个 Claude Code Skill：sketch-tech-illustration

今天我们来认识一个新的 Claude Code Skill：sketch-tech-illustration，中文可以叫它「手绘暖调科技风格」。

这个 Skill 主要用来解决一个很具体的问题：让 Claude Code 画出来的东西，风格能稳定统一。

平时我们让 Claude Code 帮忙做和「AI / 科技」相关的视觉——一张封面、一组讲解分镜、一份技术汇报的 slide——它当然画得出来，但每次的调性都不太一样。这次给你渐变加高光的商业风，下次又是冷冰冰的科技蓝，再下次变成一堆花花绿绿的矢量图标。功能上都「能看」，可放在一起就是不成体系，也谈不上什么气质。尤其是科技题材，默认产出往往又冷又模板化，很难有「有人在旁边给你边画边讲」的那种温度。

问题的根子在于：缺一份说得清、能照着做的风格规范。 你脑子里有个大概的样子，但没法一句话让 Claude 每次都对齐到同一个点上。

这时候，sketch-tech-illustration 就很有用了。

它本质上是一份写死的设计说明，把「手绘暖调科技叙事风格」这一种调性彻底讲清楚：用哪四种颜色、每种手绘元素具体怎么画、镜头怎么构图、什么该做什么别做。Claude 读完它，就不再是「凭感觉发挥」，而是有一套明确的执行标准可以照着落地，并且能把跑偏的产出拉回来。

name: sketch-tech-illustration
description: Use when creating illustrations, storyboards, slides, animations,
  or cover / visual assets for an AI / tech narrative and you want a hand-drawn,
  warm-toned, minimalist look — a four-color sand / terracotta / ink / paper
  palette, loose marker linework, flat fills, and cut-paper shapes rather than
  slick vector art.

效果图：

入门级玩法

最基础的用法，就是在你想要这种风格时，把它交给 Claude Code。

比如你要做一张公众号封面、一组产品讲解的故事板，或者一页技术汇报的 slide，只要让 Claude 用这套风格来画就行。因为里面的东西是写死的——

• 四种颜色，就四种。 沙米色 #E5DBCA 打底、陶土橙 #D2703F 唯一点睛、暖墨黑 #16140F 管描边和暗场、纸白 #F4EFE6 管面板。没有渐变、没有高光、没有第二个强调色。
• 每种元素怎么画都写好了。 思考气泡、剪纸风格的手、拟物界面、搜索框、手绘图表、工具箱卡片……连笔刷、线宽、收笔带钩、线条要抖多少都有交代。

所以不管你分几次让它画、还是团队里几个人分头画，风格都能对齐到同一个点上，而不是每次都重开一个「随机盲盒」。

这个能力可以很自然地引申出几个常见用途：

1. 技术汇报 slide。 让 Claude 生成单文件 HTML slide 时套这套配色和手绘元素，一份汇报下来每一页都是同一副「手绘讲义」的样子。
2. 连续分镜 / 讲解动画。 一组故事板要保持连贯，最怕第 3 帧和第 7 帧像两个人画的——把这份规范给它，帧与帧之间就能咬得住。
3. 统一插画风格。 把它当成团队的「风格底稿」，谁来生成都是同一套语言。

进阶玩法

规范本身只是「说清楚」，但我们可以把它用得更细一点。

一个很实用的进阶方式，是把这份规范当成「评审标准」来用。生成完一张图之后，让 Claude 拿着里面的 Do / Don't 清单逐条自查：陶土橙的面积是不是超过了画面一成？有没有不小心画上了人脸？线条是不是被拉成了完美闭合的矢量、把手绘感磨没了？暗场之外是不是也撒了星点？这样它就不只是「画完交差」，而是能自己发现跑偏、再回去修。

它还有一条很聪明的核心逻辑值得单独拎出来——状态靠填色，不靠位移。也就是说，表达「选中 / 激活 / 命中」这种变化时，不是把元素挪来挪去或者加新颜色，而是把同一个形状的填充从纸白翻成陶土橙。做交互演示或者 before / after 对照动画时，这一招特别干净。

如果你想要别的调性，也不用推翻重来：画法逻辑是通用的，改的只是那四个 hex。 保留「松弛线条 + 扁平色块 + 留白 + 手的痕迹」这套骨架，把颜色换成你自己的主题色，就能派生出一套「同宗但换肤」的风格。

再往外，它还可以和别的 Skill 配合。比如生成完 HTML slide 后，用 Playwright CLI 把页面截图下来，让 Claude「亲眼看看」渲染出来的效果到底对不对味——文字规范、留白、橙的占比，光读代码是判断不出来的，得看图。

一些小坑

不过，用这个 Skill 也有几个点要提前想清楚。

首先，它是「风格规范」，不是「出图引擎」。 它约束的是审美和画法，真正把图画出来还得靠图像模型、手绘或者 SVG / HTML。别指望「装上它就自动出图」——它的价值在于把风格说清楚、把每次产出拉回同一条线上。

其次，最容易翻车的地方是那抹橙。 陶土橙是全片唯一的强调色，一旦面积超过画面一成，温暖感立刻就塌成廉价的「警示色」。这是最常见的失手点，所以每次生成完，最好专门盯一眼橙的占比，克制才是这套风格的灵魂。

再次，四色写死既是它的灵魂，也是它的边界。 它只擅长这一种暖调手绘调性，你要是想要冷色科技蓝、赛博霓虹或者多彩扁平风，它是给不了的。真要换，就改 hex 或者另写一份 spec，别硬让它兼容。

最后一点是好消息： 它是一份纯文本 Skill，不像那些要不停跑命令、开浏览器的 Skill，本身几乎不额外烧 token（当然，调用图像模型出图的成本是另算的）。装上也简单，一行命令：

npx skills add babyGao/agent-pilot-skills -g -y

整体来说，sketch-tech-illustration 很适合用来给「AI / 科技」题材的插画、slide、故事板定一个稳定统一的调性。如果说 Playwright CLI 是给 Claude Code 加了一双「眼睛」，那这份规范更像是给它交了一份「审美底稿」——让它画科技，也能画出人情味。

# 手绘暖调科技叙事风格 · 设计说明

> 取样自 13 帧故事板缩略图（GPT 讲解课）。本文用文字完整说明这套视觉风格的构成，并重点拆解**每一种手绘元素的画法**，可作为插画 / 动画落地的执行规范。

---

## 一、一句话定调

**把冷冰冰的科技，画成一张有人情味的手绘讲义。**

这套风格服务于「AI / 科技」叙事。它刻意回避矢量的精确与商业插画的光鲜，转而用**松弛的马克笔线条 + 扁平纯色块 + 大量留白**，把抽象的「思考、搜索、生成、协作」翻译成温暖、可亲近、像有人在旁边给你边画边讲的画面。

核心气质关键词：**手绘 · 温暖 · 极简 · 叙事 · 纸感**。

---

## 二、色彩系统

整套画面只靠四种颜色支撑，没有渐变、没有第二强调色。

| 角色 | 名称 | 取值 | 用途 | 画面占比 |
|---|---|---|---|---|
| 主背景 | 沙米色 Sand | `#E5DBCA` | 铺满绝大多数镜头的底色，温暖、低饱和、略带米黄 | ≈ 72% |
| 唯一强调 | 陶土橙 Terracotta | `#D2703F` | 标记焦点、状态、情绪与「人」的痕迹 | ≈ 8% |
| 暗场 / 线条 | 墨黑 Ink | `#16140F` | 暗场景背景 + 所有手绘描边（偏暖的近黑，不是纯黑 `#000`） | ≈ 11% |
| 面板 / 气泡 | 纸白 Paper | `#F4EFE6` | 气泡、卡片、界面面板的填充，是带暖调的米白而非纯白 | ≈ 9% |

### 用色铁律
1. **先铺沙米色，再决定橙落在哪一个点。** 背景永远是沙米色或墨黑，橙永远是后置的「点睛」。
2. **陶土橙永远是少数派。** 一旦它的面积超过画面一成，温暖感就会塌成廉价的「警示色」。克制是这套风格的灵魂。满幅橙只用于极少数高潮 / 转场帧。
3. **没有渐变、没有高光、没有第二强调色。** 体积与层次只靠「橙 / 黑 / 白」三种硬色块的并置切出来。
4. **黑是暖黑。** 描边与暗场用 `#16140F` 这类带一点褐的近黑，配在沙米色上比纯黑更柔和、更像墨水而非数码黑。

---

## 三、插画总原则：手的痕迹，故意留着

这套画风的全部「质感」都来自**对不完美的刻意保留**。落地时反复回到四条原则：

- **线（Line）—— 松弛的马克笔线条。** 描边粗细不均、收笔带勾，刻意不闭合、带轻微抖动。拒绝矢量的精确。
- **面（Fill）—— 扁平纯色填充。** 没有渐变与高光，色块边缘允许微微溢出或留白，像手涂的马克笔。
- **形（Shape）—— 有机的剪纸轮廓。** 主体是圆润的 blob，边角柔软、略微歪斜，像手撕出来的纸片，没有正圆和直角。
- **空（Space）—— 留白即是构图。** 一帧一个主体，主体居中，四周大量空背景，让信息有呼吸的节奏。

---

## 四、手绘元素怎么画（核心）

下面逐一拆解每种元素的**构造方法与参数取向**。所有元素共享同一支「笔」：一支带轻微纹理、压感不均的马克笔 / 蜡笔质感的黑色画笔。

### 0. 通用笔触规范（所有元素共用）

- **笔刷**：模拟马克笔 / 油性蜡笔，笔尖略钝，边缘带极轻微的颗粒纹理（不是光滑矢量描边）。
- **线宽**：同一根线里粗细要变化（压感笔），主轮廓线大致是细节线的 1.5–2 倍粗。整体偏粗、敦实，不要纤细。
- **收笔**：圆头收尾（round cap），转角处常**带一个小钩 / 出头**，线条端点不必精确对齐，允许交叉出头 2–4px。
- **闭合**：轮廓**故意不完全闭合**，留出小缺口；矩形四角不闭口、略微出头，是「手画感」的关键。
- **抖动**：每条直线都带 1–3px 的微抖，绝不用纯几何直线 / 正圆 / 标准圆角。
- **填色**：纯色平涂，色块边缘**可略微不与描边对齐**（溢出或退让 1–2px），强化手涂感。无描边的纯色块（如 blob）也可以单独成立。

### 1. 思考 / 对话气泡（img, img_1）

- **形状**：圆润的云朵状 blob，轮廓由几段外凸的弧线拼成，**不是规整椭圆**，每个气泡的胖瘦都略不同。
- **拖尾**：气泡一角朝主体方向，跟 2–3 个**由大到小的小圆点**作为「思考」尾巴（对话气泡则是一条小三角尾）。
- **内容**：气泡里不写真字，用**手绘波浪线 / 涂鸦笔迹**代替（见第七节「占位涂鸦」），表示「这里有内容 / 正在思考」。
- **状态表达**：默认是**纸白填充 + 黑描边**；当它被「选中 / 激活 / 命中」时，整只气泡**填充翻成陶土橙**（描边可保留或转白）。这是全片的核心动效逻辑——**用填色变化表达状态，而不是移动或加新颜色**。

### 2. 剪纸的手（img_11, img_12）

- **造型**：陶土橙的手掌 + 手指，**剪纸 / 扁平**处理，没有指甲、关节、阴影等细节，靠轮廓剪影识别动作。
- **画法**：先用黑线勾一个简化的手势剪影（握笔、伸食指点击、张开鼓掌、比划），再整体平涂橙色；手腕处常**断开 / 出画**，暗示画外有人。
- **角色**：手是这套风格里**「人」唯一的在场方式**——不画完整人物、不画脸。需要表现「使用、创造、协作、鼓掌」时，就让一只或几只手入画。
- **组合**：多只手时呈**向心 / 对话式**排布（如三只手围着中心的橙色点会合），传达「协作 / 连接」。

### 3. 界面拟物（浏览器 / 文档 / 卡片）（img_3, img_4, img_5, img_6）

- **外框**：用**黑色手绘矩形**表示一块「屏幕 / 窗口」，四角不闭合、略微出头、边线带抖。
- **内容块**：窗口里用**实心色块**代替真实 UI——标题栏、图片位、文本行分别用橙色块、纸白块、黑色短线（代表文字行）摆出来，**不画任何真实文字与图标细节**。
- **配色**：界面通常是「纸白底 + 黑描边 + 橙色重点块」；放在暗场（墨黑）里时，窗口本身可整块翻成橙色以跳出来。
- **层叠**：多个窗口 / 卡片时轻微错位叠放，制造「一堆素材」的随手感。

### 4. 联网搜索条（img_6）

- **造型**：一条**大圆角的胶囊输入框**（圆角是这套风格里唯一接近规整的形状，但仍带手感），黑色细描边、纸白填充。
- **元素**：框内左侧一个**地球 / 放大镜小图标**（同样手绘简化），后面跟一行表示「输入文字」的真实小字或波浪占位。
- **语义**：是「检索 / 联网 / 搜索网页」动作的固定符号。

### 5. 手绘数据可视化（img_8, img_9）

- **统一手法**：饼图、柱状图、折线图**全部手绘**，给冰冷的「分析 / 数据」补上体温。
- **折线图**：黑色手绘坐标轴（L 形，线带抖、不接死角），橙色折线连接几个**手点的圆点**数据点，线条松弛、转折不规整。
- **柱状 / 饼图**：橙色实心块表示数据，扇形 / 柱子边缘手绘、不用精确角度。
- **承载**：图表通常画在一张**纸白卡片**上，卡片本身也是手绘矩形。

### 6. 工具箱卡片（img_7）

- **结构**：一个大的纸白 / 米色 blob（圆角多边形）里，**并排放几张小卡**，每张卡一个手绘小图标——代码 `</>`、饼图、文档。
- **语义**：象征「一组能力 / 工具面板」。图标都是**极简剪影**，黑 / 橙双色，无细节。

### 7. 暗场星点（img_3, img_4）

- **用法**：只在**墨黑暗场景**里出现——背景散布**大小不一的白色小圆点**（少量、随机分布，不成阵列）。
- **作用**：制造空间感、夜空感与转场时的「呼吸」；亮场（沙米色）里不用。

### 8. 动势短线（img_2）

- **用法**：在 blob / 主体旁边画**几道短促的黑色小划线 / 弧线**（类似漫画的动作线）。
- **作用**：表示动作、声音、强调或「弹出」，让静止的扁平画面立刻有了动静与方向感。

---

## 五、构图：用色块摆镜头

在 16:9 画框里，节奏主要靠「色场」来调度：

- **单主体居中**：默认构图。沙米色铺底，一帧只讲一件事，主体居中、四周全空。宁空勿满。
- **对角分割**：把墨黑与沙米**沿对角线切开**，一半藏一半亮，瞬间制造戏剧张力与「虚 / 实」对比，常用于「展示成果、强调对比」的镜头。
- **满幅色场**：整屏铺成陶土橙，留给**强调 / 高潮 / 转场**帧——情绪一次拉满，也给沙米色场景一个反差喘息。极少用。
- **状态对照（before / after）**：同一构图、连续两帧，用「纸白 → 陶土橙」的填色变化表达变化与进展。**动效不靠移动，靠填色。**

---

## 六、字体与文案

画面里几乎没有正经排版，文字分两类：

- **占位涂鸦（不需要被读）**：思考内容、文档正文等用**手绘波浪线**代替真实文字，只表示「这里有字」，不增加阅读负担。波浪线一般 2–4 行、长短错落，可混入一行橙色。
- **界面文案（需要被读）**：真正要读的微文案（如 `Look`、`Check this one`、`Searching the web…`、`I created an interactive Artifact`）用**中性无衬线（Grotesque）**，小写、简短、口语化，字重不抢戏，像产品截图里的 UI 标签。

> 字体取向：原片为中性无衬线。若需在文档 / 衍生物料中还原，推荐 **Space Grotesk**（拉丁 / 数字）+ **Noto Sans SC**（中文）保持利落感，手写注解用 **Caveat**。

---

## 七、复刻清单（Do / Don't）

**该做**
- ✓ 先满铺沙米色，再决定陶土橙落在哪**一个**点上
- ✓ 所有线条手绘，保留抖动、开口、出头与不均的笔压
- ✓ 用填色变化（白 → 橙）表达状态，而非引入新颜色或位移
- ✓ 只有暗场景才上墨黑，并撒几颗白色星点
- ✓ 一帧一个主体，宁空勿满
- ✓ 形状用圆润 blob 与剪纸轮廓，避免正圆 / 直角

**别做**
- ✕ 别用渐变、投影体积或第二个强调色
- ✕ 别让陶土橙的面积超过画面一成
- ✕ 别把线条拉成完美闭合的矢量
- ✕ 别在同一帧里塞进两件事
- ✕ 别加 emoji、卡通高光或花哨贴纸
- ✕ 别画人脸 / 完整人物——需要「人」时只用手

---

*配套可视化版本见 `设计风格分析.dc.html`。*