pixel-art

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Pixel Art SVG Generator

像素艺术SVG生成器

Create a pixel art SVG illustration: $ARGUMENTS

创建像素艺术SVG插图：$ARGUMENTS

Design Principles

设计原则

Pixel Grid

像素网格

Each "pixel" is a
```
<rect>
```
with width/height of 7px
Grid spacing: 7px (no gaps between pixels)
Characters are typically 8-10 pixels wide, 8-12 pixels tall
Use
```
<g transform="translate(x,y)">
```
to position and reuse character groups

每个“像素”是一个宽度/高度为7px的
```
<rect>
```
元素
网格间距：7px（像素间无间隙）
角色通常宽8-10像素，高8-12像素
使用
```
<g transform="translate(x,y)">
```
来定位和复用角色组

Color Palette

调色板

Keep it simple — 3-5 colors per character:

Skin:
```
#FFDAB9
```
(light),
```
#E8967A
```
/
```
#D4956A
```
(blush/shadow)
Eyes:
```
#333
```
Hair:
```
#8B5E3C
```
(brown),
```
#2C2C2C
```
(black),
```
#FFD700
```
(blonde),
```
#C0392B
```
(red)
Clothes: use project's brand color (e.g.
```
#4A9EDA
```
for blue,
```
#74AA63
```
for green)
Shoes/pants:
```
#444
```
Accessories:
```
#555
```
(glasses frames),
```
#FFD700
```
(crown)

保持简洁——每个角色使用3-5种颜色：

肤色：
```
#FFDAB9
```
（浅肤色）、
```
#E8967A
```
/
```
#D4956A
```
（腮红/阴影）
眼睛：
```
#333
```
头发：
```
#8B5E3C
```
（棕色）、
```
#2C2C2C
```
（黑色）、
```
#FFD700
```
（金色）、
```
#C0392B
```
（红色）
服饰：匹配项目品牌色（例如蓝色用
```
#4A9EDA
```
，绿色用
```
#74AA63
```
）
鞋/裤：
```
#444
```
配饰：
```
#555
```
（眼镜框）、
```
#FFD700
```
（皇冠）

Character Template (7px grid)

角色模板（7px网格）

Row 0 (hair top):     4 pixels centered
Row 1 (hair):         6 pixels wide
Row 2 (face top):     6 pixels — all skin
Row 3 (eyes):         6 pixels — skin, eye, skin, skin, eye, skin
Row 4 (mouth):        6 pixels — skin, skin, mouth, mouth, skin, skin
Row 5 (body top):     8 pixels — hand, 6 shirt, hand
Row 6 (body):         6 pixels — all shirt
Row 7 (legs):         2+2 pixels — with gap in middle

Row 0 (hair top):     4 pixels centered
Row 1 (hair):         6 pixels wide
Row 2 (face top):     6 pixels — all skin
Row 3 (eyes):         6 pixels — skin, eye, skin, skin, eye, skin
Row 4 (mouth):        6 pixels — skin, skin, mouth, mouth, skin, skin
Row 5 (body top):     8 pixels — hand, 6 shirt, hand
Row 6 (body):         6 pixels — all shirt
Row 7 (legs):         2+2 pixels — with gap in middle

Scene Composition

场景构图

Chat Dialogue Layout (like our hero image)

对话场景布局（如我们的首图示例）

Two characters on left/right sides, vertically centered
Chat bubbles between them, alternating left/right
Bubble tails point toward the speaking character
Arrows between bubbles show direction of communication
Use
```
orient="auto"
```
markers for arrow heads
Bottom: tagline or decoration

两个角色分别位于左右两侧，垂直居中
对话气泡位于两者之间，左右交替
气泡尾巴指向说话的角色
气泡间用箭头表示对话方向
箭头使用
```
orient="auto"
```
标记
底部添加标语或装饰元素

Single Character with Label

带标签的单个角色

Character centered
Label text below
Optional: speech bubble above

角色居中
标签文本位于角色下方
可选：角色上方添加对话气泡

Group Scene

群组场景

Characters spaced evenly
Optional: ground line, background elements
Keep viewBox tight — no wasted space

角色均匀分布
可选：添加地面线条、背景元素
严格控制viewBox范围——避免多余空白

SVG Structure

SVG结构

xml

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 W H" font-family="monospace">
  <defs>
    <!-- Arrow markers if needed -->
  </defs>

  <rect width="W" height="H" fill="#fafbfc" rx="12"/>  <!-- Background -->

  <!-- Characters via <g transform="translate(...)"> -->
  <!-- Dialogue bubbles: <rect> + <polygon> tail + <text> -->
  <!-- Arrows: <line> with marker-end -->
  <!-- Labels: <text> with text-anchor="middle" -->
</svg>

xml

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 W H" font-family="monospace">
  <defs>
    <!-- Arrow markers if needed -->
  </defs>

  <rect width="W" height="H" fill="#fafbfc" rx="12"/>  <!-- Background -->

  <!-- Characters via <g transform="translate(...)"> -->
  <!-- Dialogue bubbles: <rect> + <polygon> tail + <text> -->
  <!-- Arrows: <line> with marker-end -->
  <!-- Labels: <text> with text-anchor="middle" -->
</svg>

Chat Bubble Recipe

对话气泡制作示例

xml

<!-- Blue bubble (left character speaks) -->
<rect x="110" y="29" width="280" height="26" fill="#e8f4fd" stroke="#4a9eda" stroke-width="1.5" rx="8"/>
<!-- Tail pointing left toward character -->
<polygon points="108,41 99,47 108,46" fill="#e8f4fd" stroke="#4a9eda" stroke-width="1.5"/>
<rect x="107" y="40" width="3" height="7" fill="#e8f4fd"/>  <!-- covers stroke at junction -->
<text x="123" y="46" font-size="13px">📄 Message here</text>

<!-- Orange bubble (right character responds) -->
<rect x="490" y="71" width="280" height="26" fill="#fdf2e8" stroke="#da8a4a" stroke-width="1.5" rx="8"/>
<!-- Tail pointing right toward character -->
<polygon points="772,83 781,89 772,88" fill="#fdf2e8" stroke="#da8a4a" stroke-width="1.5"/>
<rect x="770" y="82" width="3" height="7" fill="#fdf2e8"/>
<text x="503" y="88" font-size="13px">🤔 Response here</text>

xml

<!-- Blue bubble (left character speaks) -->
<rect x="110" y="29" width="280" height="26" fill="#e8f4fd" stroke="#4a9eda" stroke-width="1.5" rx="8"/>
<!-- Tail pointing left toward character -->
<polygon points="108,41 99,47 108,46" fill="#e8f4fd" stroke="#4a9eda" stroke-width="1.5"/>
<rect x="107" y="40" width="3" height="7" fill="#e8f4fd"/>  <!-- covers stroke at junction -->
<text x="123" y="46" font-size="13px">📄 Message here</text>

<!-- Orange bubble (right character responds) -->
<rect x="490" y="71" width="280" height="26" fill="#fdf2e8" stroke="#da8a4a" stroke-width="1.5" rx="8"/>
<!-- Tail pointing right toward character -->
<polygon points="772,83 781,89 772,88" fill="#fdf2e8" stroke="#da8a4a" stroke-width="1.5"/>
<rect x="770" y="82" width="3" height="7" fill="#fdf2e8"/>
<text x="503" y="88" font-size="13px">🤔 Response here</text>

Arrow Recipe

箭头制作示例

xml

<defs>
  <marker id="ar" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
    <polygon points="0 0, 8 3, 0 6" fill="#4a9eda"/>
  </marker>
</defs>
<!-- Right arrow (→): x1 < x2 -->
<line x1="392" y1="42" x2="465" y2="42" stroke="#4a9eda" stroke-width="2" marker-end="url(#ar)"/>
<!-- Left arrow (←): x1 > x2 -->
<line x1="488" y1="84" x2="420" y2="84" stroke="#da8a4a" stroke-width="2" marker-end="url(#ar-o)"/>

xml

<defs>
  <marker id="ar" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
    <polygon points="0 0, 8 3, 0 6" fill="#4a9eda"/>
  </marker>
</defs>
<!-- Right arrow (→): x1 < x2 -->
<line x1="392" y1="42" x2="465" y2="42" stroke="#4a9eda" stroke-width="2" marker-end="url(#ar)"/>
<!-- Left arrow (←): x1 > x2 -->
<line x1="488" y1="84" x2="420" y2="84" stroke="#da8a4a" stroke-width="2" marker-end="url(#ar-o)"/>

Workflow

工作流程

Step 1: Understand the Request

步骤1：理解需求

What characters/objects to draw?
What's the scene? (dialogue, portrait, group, diagram)
What colors/brand to match?
What size? (compact for badge, wide for README hero)

需要绘制哪些角色/物体？
场景类型是什么？（对话、肖像、群组、图表）
需要匹配哪些颜色/品牌？
尺寸要求？（徽章用紧凑尺寸，README首图用宽幅）

Step 2: Generate SVG

步骤2：生成SVG

Write to a temp file or project directory
Open with
```
open <file.svg>
```
for preview
Keep viewBox tight — measure actual content bounds

写入临时文件或项目目录
使用
```
open <file.svg>
```
命令预览
严格控制viewBox范围——测量实际内容边界

Step 3: Iterate with User

步骤3：与用户迭代优化

User provides feedback on screenshot
Common fixes: overlap, arrow direction, spacing, sizing
Use
```
Edit
```
for small tweaks,
```
Write
```
for major redesigns
Typical: 2-4 iterations to get it right

用户通过截图提供反馈
常见调整：重叠问题、箭头方向、间距、尺寸
小修改用
```
Edit
```
，大改版用
```
Write
```
通常需要2-4次迭代才能达到满意效果

Step 4: Finalize

步骤4：最终定稿

Ensure no personal info in the SVG
Clean up: remove unused defs, tighten viewBox
Suggest adding to README:
```
![Alt text](filename.svg)
```

确保SVG中无个人信息
清理内容：移除未使用的defs，收紧viewBox
建议添加到README：
```
![Alt text](filename.svg)
```

Common Pitfalls

常见误区

Arrow direction:
```
orient="auto"
```
follows line direction. Line going right→left = arrowhead points left
Bubble overlap: keep 38-44px vertical spacing between rows
Text overflow: monospace 13px ≈ 7.8px/char, emoji ≈ 14px. Measure before setting bubble width
Character overlap with bubbles: keep character x-zone and bubble x-zone separated by ≥10px
viewBox too large: match viewBox to actual content, add ~10px padding
Tail stroke artifact: always add a small
```
<rect>
```
at the bubble-tail junction to cover the stroke line

箭头方向：
```
orient="auto"
```
会跟随线条方向。线条从右到左时，箭头指向左
气泡重叠：行与行之间保持38-44px的垂直间距
文本溢出：等宽字体13px≈7.8px/字符，表情符号≈14px。设置气泡宽度前先测量
角色与气泡重叠：角色X区域与气泡X区域需保持≥10px的间距
viewBox过大：viewBox需匹配实际内容，添加约10px的内边距
气泡尾巴描边瑕疵：务必在气泡与尾巴的连接处添加一个小
```
<rect>
```
来覆盖描边线