brycewang-stanford/pixel-art

Pixel Art SVG Generator

Create a pixel art SVG illustration: $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

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)

Character Template (7px grid)

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

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

SVG Structure

<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

<!-- 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

<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

• 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)

Step 2: Generate SVG

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

Step 3: Iterate with User

• 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

Step 4: Finalize

• Ensure no personal info in the SVG
• Clean up: remove unused defs, tighten viewBox
• Suggest adding to 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