pixel-art

name pixel-art description 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. argument-hint [description of what to draw] allowed-tools Write, Edit, Read, Bash(open *) 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