sundanian1991/.claude/skills/hand-drawn-svg

Hand-Drawn SVG — 手绘风格 SVG 生成器

生成具有手绘质感的 SVG 图标，达到 Quiver API（李诞虾、SVG 1-10）的质量标准

---

触发词

手绘 SVG、手绘图标、手绘风格、Quiver 风格、陶土色图标

---

核心质量标准

必须达到以下所有标准才算合格：

1. 线条自然度：贝塞尔曲线控制点有真实的手绘不规则性（不是机械抖动）
2. stroke-linecap="round"：所有描边必须使用圆头端点
3. 双层结构：填充层 + 描边层清晰分离
4. 色彩系统：陶土色（#D6654B/#B03A21） + 米白（#FEFFFE） + 墨黑描边（#140A05）
5. 线条分层：主轮廓（1.8-2px）、中等线条（1.5-1.6px）、细节纹理（1-1.3px）
6. 视觉平衡：左右对称自然，重心稳定

---

输入格式

[图标主题] - 手绘SVG

示例：

• 小镜子 - 手绘SVG
• 药品盒 - 手绘SVG
• 沙发 - 手绘SVG
• 扇子 - 手绘SVG

---

输出格式

单文件 SVG（默认）

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250">
  <!-- 填充层 -->
  <g id="fill-layer">
    <!-- 主体填充 -->
    <path d="..." fill="#FEFFFE"/>
    <!-- 陶土色点缀 -->
    <path d="..." fill="#B03A21"/>
  </g>

  <!-- 描边层 -->
  <g id="stroke-layer" fill="none" stroke="#140A05" stroke-linecap="round" stroke-linejoin="round">
    <!-- 主轮廓（1.8px） -->
    <path d="..." stroke-width="1.8"/>
    <!-- 中等线条（1.5px） -->
    <path d="..." stroke-width="1.5"/>
    <!-- 细节纹理（1.3px） -->
    <path d="..." stroke-width="1.3"/>
  </g>
</svg>

---

核心技术要点

1. 贝塞尔曲线的手绘不规则性

错误做法（机械抖动）：

<!-- 这里的偏差太规律，看起来像"故意抖动" -->
<path d="m85.27 45.27c12.37-1.83 25.18-0.91 37.62-0.87..."/>

正确做法（真实手绘感）：

<!-- 控制点有自然的不规则性，每段"性格"不同 -->
<path d="m68.79 5c-6.51 6.51-9.57 12.07-8.64 20.12 1.13 10.11 8.73 16.69 11.82 21.72..."/>

关键原则：

• 长曲线：控制点间距大（20-30px），方向有轻微随机偏移
• 短曲线：控制点间距小（5-10px），用于关节转折
• 避免完美对称：左右对应部分的曲线要有差异
• 微抖动：每段曲线的控制点不要"太整齐"

2. 线条粗细分层

| 层级 | 宽度 | 用途 | |------|------|------| | 主轮廓 | 1.8-2px | 整体外形、主要结构 | | 中等线条 | 1.5-1.6px | 内部结构、连接线 | | 细节纹理 | 1-1.3px | 纹理、装饰线 |

必须使用 stroke-linecap="round" 和 stroke-linejoin="round"

3. 色彩系统

| 用途 | 色值 | RGB | 说明 | |------|------|-----|------| | 主填充（米白） | #FEFFFE | (254, 255, 254) | 接近白，略带暖 | | 主填充（陶土） | #D6654B | (214, 101, 75) | 明亮陶土色 | | 点缀（深陶土） | #B03A21 / #B1341D | (176, 58, 33) | 深色点缀 | | 描边（墨黑） | #140A05 / #0B0500 | (20, 10, 5) | 近乎黑的深褐 |

4. 结构模式

简单图标（10-20 path）：

• 主体：1-2 个大块填充
• 描边：3-5 条主轮廓线 + 5-10 条细节线

中等图标（20-40 path）：

• 主体：3-5 个填充块
• 描边：5-10 条主轮廓线 + 10-20 条细节线

复杂图标（40+ path）：

• 主体：5-10 个填充块
• 描边：10+ 条主轮廓线 + 20+ 条细节线

---

生成流程

Phase 1: 分析主题

1. 识别主体结构：有哪些主要部分？
2. 确定复杂度：简单/中等/复杂
3. 规划点缀色：哪里用陶土色突出？

Phase 2: 构建填充层

1. 主体轮廓：用大块贝塞尔曲线勾勒外形
2. 点缀填充：陶土色部分（通常 1-2 处）
3. 避免过度分割：填充块宁少勿多

Phase 3: 构建描边层

1. 主轮廓：粗线条（1.8-2px）描边主体
2. 结构线：中等线条（1.5-1.6px）连接各部分
3. 纹理线：细线条（1-1.3px）增加细节

关键：每条线的贝塞尔曲线都要有"手绘不规则性"

Phase 4: 质量检查

生成后必须检查：

• [ ] 所有 stroke 都有 stroke-linecap="round"？
• [ ] 填充层和描边层是否清晰分离？
• [ ] 色彩是否使用了标准色值？
• [ ] 贝塞尔曲线是否有自然的不规则性？
• [ ] 线条粗细是否分层明显？

---

反模式（避免）

❌ 机械对称

<!-- 左右完全对称，看起来像用尺子画的 -->
<path d="m85 45h80v120h-80z"/>

❌ 规律抖动

<!-- 偏差值太一致，看起来像"故意抖动" -->
<path d="m85.27 45.27c12.37-1.83 25.18-0.91 37.62-0.87 14.73 0.05 28.91-1.21..."/>

❌ 缺少分层

<!-- 所有线条都是 1px，没有层次感 -->
<path d="..." stroke-width="1"/>

❌ 错误色彩

<!-- 使用了非标准色值 -->
<rect fill="#FF0000"/>

---

参考基准

达到以下质量算合格：

| 案例 | Path 数 | 复杂度 | 特征 | |------|---------|--------|------| | 李诞虾 | 32 | 简单-中等 | 陶土色+墨黑，双层分离，自然曲线 | | SVG-4（猫） | 9 | 简单 | 极简但完整，手绘感强 | | SVG-5（狗） | 26 | 中等 | 曲线自然，色彩丰富 | | SVG-1 | 61 | 高 | 复杂但结构清晰 |

目标：生成的图标在视觉上与这些案例"难以区分"。

---

版本历史

• v1.0 (2026-04-04): 初始版本，基于李诞虾/SVG 1-10 分析

---

最后更新：2026-04-04