Pixel art

Skill brycewang-stanford/Auto-Empirical-Research-Skills/skills/42-wanshuiyin-ARIS/skills/pixel-art

🔬 A curated collection of 23,000+ agent skills for empirical research across 8 social science disciplines. | 精选 23,000+ AI Agent 技能库，覆盖8大社会科学学科的实证研究。CoPaper.AI 20分钟完成一篇可复现的规范实证论文，并支持用户上传 Skills。-- Maintained by CoPaper.AI from Stanford REAP.

Install

npx -y skills add brycewang-stanford/Auto-Empirical-Research-Skills --skill pixel-art

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

5.2 KB, as published. Nobody here has run it

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