!每天精通一个 Claude Code Skill：sketch-tech-illustration_claude( https://s2.51cto.com/images/blog/front/202607/b90c10b948830617f80146f7490b10cf0f7607.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_claude code_02( https://s2.51cto.com/images/blog/front/202607/e6d7778857ab786c34a02276836b1b93cfa93d.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_claude code_03( https://s2.51cto.com/images/blog/front/202607/493aa7401b7bdcfae26285e6f96d10eddd109f.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_claude_04( https://s2.51cto.com/images/blog/front/202607/c9073e4555312cd564a9916b53165bea515131.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp)
!每天精通一个 Claude Code Skill：sketch-tech-illustration_claude code_05( https://s2.51cto.com/images/blog/front/202607/71dcdd230d7992a0daf1538aa4af052b766dd4.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_web_06( https://s2.51cto.com/images/blog/front/202607/a1fe2fa82d3c4358bd06847ff9a82bfa8ebdaa.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_claude code_07( https://s2.51cto.com/images/blog/front/202607/c8c98d892bced3bcd9a991b85af3e345edf1d9.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_claude code_08( https://s2.51cto.com/images/blog/front/202607/79be270988b2b4db0506210dab4d294238ce1b.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp)
!每天精通一个 Claude Code Skill：sketch-tech-illustration_claude code_09( https://s2.51cto.com/images/blog/front/202607/c67b2f441bed1021446116c2716bdd17beb6b4.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_web_10( https://s2.51cto.com/images/blog/front/202607/61a737a37bf8d5c334017057475af8490f2f98.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_claude code_11( https://s2.51cto.com/images/blog/front/202607/e1ec75b73569c3d723a187f9047f93ce8a0cc7.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_claude code_12( https://s2.51cto.com/images/blog/front/202607/e1f074f39a5f28890dd96141a37dbd0c1f959a.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp)
今天我们来认识一个新的 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 Skill：sketch-tech-illustration_claude_13( https://s2.51cto.com/images/blog/front/202607/d5eafb204cc07ae1301053c7269e1f32c88c98.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp) !每天精通一个 Claude Code Skill：sketch-tech-illustration_claude code_14( https://s2.51cto.com/images/blog/front/202607/a8b9bb873bb68954307000778fd55f724be6a7.png?x-oss-process=image/watermark ,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184/format,webp)
入门级玩法
最基础的用法，就是在你想要这种风格时，把它交给 Claude Code。
比如你要做一张公众号封面、一组产品讲解的故事板，或者一页技术汇报的 slide，只要让 Claude 用这套风格来画就行。因为里面的东西是写死的------
- 四种颜色，就四种。 沙米色
#E5DBCA打底、陶土橙#D2703F唯一点睛、暖墨黑#16140F管描边和暗场、纸白#F4EFE6管面板。没有渐变、没有高光、没有第二个强调色。 - 每种元素怎么画都写好了。 思考气泡、剪纸风格的手、拟物界面、搜索框、手绘图表、工具箱卡片......连笔刷、线宽、收笔带钩、线条要抖多少都有交代。
所以不管你分几次让它画、还是团队里几个人分头画，风格都能对齐到同一个点上，而不是每次都重开一个「随机盲盒」。
这个能力可以很自然地引申出几个常见用途：
- 技术汇报 slide。 让 Claude 生成单文件 HTML slide 时套这套配色和手绘元素，一份汇报下来每一页都是同一副「手绘讲义」的样子。
- 连续分镜 / 讲解动画。 一组故事板要保持连贯，最怕第 3 帧和第 7 帧像两个人画的------把这份规范给它，帧与帧之间就能咬得住。
- 统一插画风格。 把它当成团队的「风格底稿」，谁来生成都是同一套语言。
进阶玩法
规范本身只是「说清楚」，但我们可以把它用得更细一点。
一个很实用的进阶方式，是把这份规范当成「评审标准」来用。生成完一张图之后，让 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 讲解课）。本文用文字完整说明这套视觉风格的构成，并重点拆解**每一种手绘元素的画法**，可作为插画 / 动画落地的执行规范。
## 二、色彩系统
整套画面只靠四种颜色支撑，没有渐变、没有第二强调色。
| 角色 | 名称 | 取值 | 用途 | 画面占比 |
|---|---|---|---|---|
| 主背景 | 沙米色 Sand | `#E5DBCA` | 铺满绝大多数镜头的底色，温暖、低饱和、略带米黄 | ≈ 72% |
| 唯一强调 | 陶土橙 Terracotta | `#D2703F` | 标记焦点、状态、情绪与「人」的痕迹 | ≈ 8% |
| 暗场 / 线条 | 墨黑 Ink | `#16140F` | 暗场景背景 + 所有手绘描边（偏暖的近黑，不是纯黑 `#000`） | ≈ 11% |
| 面板 / 气泡 | 纸白 Paper | `#F4EFE6` | 气泡、卡片、界面面板的填充，是带暖调的米白而非纯白 | ≈ 9% |
### 用色铁律
1. **先铺沙米色，再决定橙落在哪一个点。** 背景永远是沙米色或墨黑，橙永远是后置的「点睛」。
2. **陶土橙永远是少数派。** 一旦它的面积超过画面一成，温暖感就会塌成廉价的「警示色」。克制是这套风格的灵魂。满幅橙只用于极少数高潮 / 转场帧。
3. **没有渐变、没有高光、没有第二强调色。** 体积与层次只靠「橙 / 黑 / 白」三种硬色块的并置切出来。
4. **黑是暖黑。** 描边与暗场用 `#16140F` 这类带一点褐的近黑，配在沙米色上比纯黑更柔和、更像墨水而非数码黑。
## 四、手绘元素怎么画（核心）
下面逐一拆解每种元素的**构造方法与参数取向**。所有元素共享同一支「笔」：一支带轻微纹理、压感不均的马克笔 / 蜡笔质感的黑色画笔。
### 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 / 主体旁边画**几道短促的黑色小划线 / 弧线**（类似漫画的动作线）。
- **作用**：表示动作、声音、强调或「弹出」，让静止的扁平画面立刻有了动静与方向感。
## 六、字体与文案
画面里几乎没有正经排版，文字分两类：
- **占位涂鸦（不需要被读）**：思考内容、文档正文等用**手绘波浪线**代替真实文字，只表示「这里有字」，不增加阅读负担。波浪线一般 2--4 行、长短错落，可混入一行橙色。
- **界面文案（需要被读）**：真正要读的微文案（如 `Look`、`Check this one`、`Searching the web...`、`I created an interactive Artifact`）用**中性无衬线（Grotesque）**，小写、简短、口语化，字重不抢戏，像产品截图里的 UI 标签。
> 字体取向：原片为中性无衬线。若需在文档 / 衍生物料中还原，推荐 **Space Grotesk**（拉丁 / 数字）+ **Noto Sans SC**（中文）保持利落感，手写注解用 **Caveat**。
*配套可视化版本见 `设计风格分析.dc.html`。*