Generate pixel art SVG illustrations for READMEs, docs, or slides. Use when user says "画像素图", "pixel art", "make an SVG illustration", "README hero image", or wants a cute visual.

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) 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 Chat Bubble Recipe Arrow Recipe 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

pixel-art