安装命令

🤖在 AI Agent 中使用

Claude Code

# 安装 Skill（会下载 SKILL.md 到 .claude/skills/）
clawhub install svg-artist

# 之后直接对 Claude 说"用 SVG Artist 帮我…"即可

OpenAI Codex / Cursor / Windsurf

# 同样的安装命令，兼容所有支持 SKILL.md 的 AI 编程工具
clawhub install svg-artist

OpenClaw 生态

此 Skill 兼容 OpenClaw 标准。安装后自动生成 SKILL.md 文件，任何支持 OpenClaw 协议的 AI Agent（Claude Code、Cursor、Windsurf 等）均可直接调用。

环境与依赖

🟢

零门槛

完全免费本地运行，无需账号，无需 GPU

纯本地运行

无需网络连接，数据不离开本机

纯本地LLM文本生成SVG，无需API和GPU，完全免费

SKILL.md

Generate images by writing SVG code with the text model. No image generation API needed.

How It Works

User describes the image → "画一只可爱的小猫" / "create a cartoon cat"
LLM writes SVG code → Calculates coordinates, shapes, colors
Convert to PNG → Using rsvg-convert or convert

Quick Start

User: 给我画一只小狗
You: [Generate SVG code] → Send the PNG

SVG Drawing Guide

Canvas Setup

Default size: 400x400 pixels. Origin (0,0) is top-left.

<svg width='400' height='400' xmlns='http://www.w3.org/2000/svg'>
  <!-- Background -->
  <rect width='400' height='400' fill='#87CEEB'/>
  <!-- Your shapes here -->
</svg>

Basic Shapes

Circle

<circle cx='200' cy='200' r='50' fill='#FF6B6B' stroke='#333' stroke-width='2'/>

Ellipse (great for bodies, heads)

<ellipse cx='200' cy='200' rx='80' ry='50' fill='#D2691E' stroke='#8B4513' stroke-width='3'/>

Rectangle (legs, buildings)

<rect x='100' y='300' width='50' height='80' rx='10' fill='#666'/>

Polygon (ears, stars)

<polygon points='150,50 130,100 170,100' fill='#8B4513'/>

Path (curves, tails, mouths)

<!-- Arc -->
<path d='M 100 200 A 50 50 0 0 1 200 200' stroke='#333' stroke-width='3' fill='none'/>
<!-- Bezier curve -->
<path d='M 100 200 Q 150 150 200 200' stroke='#333' stroke-width='3' fill='none'/>

Proportional Design Tips

Use percentages of canvas size (400px):

Head: rx='70' ry='60' (about 15-20% of width)
Body: rx='100' ry='70' (about 25% of width)
Eyes: r='15' (about 4% of width)

Position using fractions:

Center X: 200 (50%)
Head Y: 140 (35%)
Body Y: 250 (62%)

Color Palette

Warm colors: #D2691E (chocolate), #FF6B6B (coral), #FFB347 (orange) Cool colors: #87CEEB (sky blue), #98FB98 (pale green), #DDA0DD (plum) Neutrals: #8B4513 (saddle brown), #808080 (gray), #F5F5DC (beige)

Common Patterns

Eyes (cute style)

<!-- Eye white -->
<ellipse cx='180' cy='130' rx='15' ry='15' fill='white' stroke='black' stroke-width='2'/>
<!-- Pupil -->
<ellipse cx='183' cy='132' rx='7' ry='7' fill='black'/>
<!-- Highlight -->
<ellipse cx='186' cy='130' rx='3' ry='3' fill='white'/>

Blush/cheeks

<ellipse cx='150' cy='160' rx='15' ry='10' fill='#FFB6C1' opacity='0.6'/>

Smile

<path d='M 180 170 A 25 25 0 0 0 220 170' stroke='#8B4513' stroke-width='3' fill='none'/>

Tongue

<ellipse cx='200' cy='190' rx='10' ry='15' fill='#FF69B4'/>

Step-by-Step Workflow

When user asks for an image:

Step 1: Understand the Subject

What animal/object? → dog, cat, house, car, etc.
What style? → cute, realistic, minimalist, cartoon
What pose? → sitting, standing, happy, sad

Step 2: Plan the Composition

Head position: cy = 35% (140)
Body position: cy = 62% (250)
Legs: cy = 78% (310)
Background: soft gradient or solid color

Step 3: Write SVG Code

Use Node.js inline to generate:

node -e "
const fs = require('fs');
const svg = \<svg>...</svg>\;
fs.writeFileSync('/tmp/image.svg', svg);
"

Step 4: Convert to PNG

rsvg-convert /tmp/image.svg -o /tmp/image.png
# or: convert /tmp/image.svg /tmp/image.png

Step 5: Send the Image

<qqimg>/tmp/image.png</qqimg>

Example: Drawing a Cat

<svg width='400' height='400' xmlns='http://www.w3.org/2000/svg'>
  <rect width='400' height='400' fill='#E6E6FA'/>

  <!-- Body -->
  <ellipse cx='200' cy='250' rx='100' ry='70' fill='#FFB347' stroke='#FF8C00' stroke-width='3'/>

  <!-- Head -->
  <ellipse cx='200' cy='140' rx='70' ry='60' fill='#FFB347' stroke='#FF8C00' stroke-width='3'/>

  <!-- Ears -->
  <polygon points='130,110 110,50 160,90' fill='#FF8C00'/>
  <polygon points='270,110 290,50 240,90' fill='#FF8C00'/>

  <!-- Eyes -->
  <ellipse cx='170' cy='130' rx='15' ry='20' fill='#90EE90' stroke='black' stroke-width='2'/>
  <ellipse cx='230' cy='130' rx='15' ry='20' fill='#90EE90' stroke='black' stroke-width='2'/>

  <!-- Pupils (vertical slits) -->
  <ellipse cx='170' cy='130' rx='4' ry='12' fill='black'/>
  <ellipse cx='230' cy='130' rx='4' ry='12' fill='black'/>

  <!-- Nose -->
  <ellipse cx='200' cy='160' rx='8' ry='5' fill='#FF69B4'/>

  <!-- Whiskers -->
  <line x1='120' y1='155' x2='165' y2='160' stroke='#666' stroke-width='1.5'/>
  <line x1='120' y1='165' x2='165' y2='165' stroke='#666' stroke-width='1.5'/>
  <line x1='235' y1='160' x2='280' y2='155' stroke='#666' stroke-width='1.5'/>
  <line x1='235' y1='165' x2='280' y2='165' stroke='#666' stroke-width='1.5'/>

  <!-- Mouth -->
  <path d='M 190 170 Q 200 180 210 170' stroke='#FF8C00' stroke-width='2' fill='none'/>

  <!-- Legs -->
  <ellipse cx='150' cy='310' rx='20' ry='30' fill='#FFB347' stroke='#FF8C00' stroke-width='2'/>
  <ellipse cx='250' cy='310' rx='20' ry='30' fill='#FFB347' stroke='#FF8C00' stroke-width='2'/>

  <!-- Tail -->
  <path d='M 300 250 Q 340 200 320 150' stroke='#FFB347' stroke-width='20' fill='none' stroke-linecap='round'/>
</svg>

Script: generate_svg.js

Use the helper script for common subjects:

node scripts/generate_svg.js "cute puppy with big eyes" /tmp/puppy.png

The script provides templates and the LLM fills in details.

Limitations

Best for: cartoons, icons, simple illustrations, stylized art
Not ideal for: photorealistic images, complex scenes, detailed textures
Works well with: animals, characters, objects, simple backgrounds

Tips for Better Results

Start simple - Basic shapes first, add details after
Use layers - Background → body → head → features → highlights
Add character - Big eyes, blush, expressive features
Keep proportions - Cute style = big head, small body
Test incrementally - Generate, check, adjust

使用场景

创建网站图标和LOGO设计

制作教育内容的示意图和流程图

生成卡通人物和角色插画

设计信息图表和数据可视化

代码示例

```bash
clawhub install svg-artist
clawhub run svg-artist --prompt "一个月亮上的火箭" --style cartoon --width 400 --height 400
# 输出: ./svg_output/rocket_moon.svg
# 可直接用浏览器打开或嵌入网页
```

SVG Artist

安装命令

🤖在 AI Agent 中使用

环境与依赖

SKILL.md

How It Works

Quick Start

SVG Drawing Guide

Canvas Setup

Basic Shapes

Proportional Design Tips

Color Palette

Common Patterns

Step-by-Step Workflow

Step 1: Understand the Subject

Step 2: Plan the Composition

Step 3: Write SVG Code

Step 4: Convert to PNG

Step 5: Send the Image

Example: Drawing a Cat

Script: generate_svg.js

Limitations

Tips for Better Results

使用场景

代码示例

视频编辑的热门 Skills

Openai Whisper

Mlx Whisper

🖥️ Canvas-OS

Blender

Transcribe

Canvas Design

SVG Artist

安装命令

🤖在 AI Agent 中使用

环境与依赖

SKILL.md

How It Works

Quick Start

SVG Drawing Guide

Canvas Setup

Basic Shapes

Proportional Design Tips

Color Palette

Common Patterns

Step-by-Step Workflow

Step 1: Understand the Subject

Step 2: Plan the Composition

Step 3: Write SVG Code

Step 4: Convert to PNG

Step 5: Send the Image

Example: Drawing a Cat

Script: generate_svg.js

Limitations

Tips for Better Results

使用场景

代码示例

视频编辑 的热门 Skills

Openai Whisper

Mlx Whisper

🖥️ Canvas-OS

Blender

Transcribe

Canvas Design

视频编辑的热门 Skills