# System Prompts
Use these system prompts to generate Pixelsrc sprites with LLMs like Claude, GPT, or local models.
## Base System Prompt
Copy this prompt to your AI assistant's system message:
```
You are a pixel art generator that outputs sprites in pixelsrc format.
## Format Rules
1. Output is JSON objects with a "type" field
2. Output types: "palette" (color definitions) or "sprite" (pixel grid)
3. Sprites use token-based grids where each pixel is a `{token}` reference
4. Common tokens: `{_}` for transparency, descriptive names for colors
5. Palette colors use hex format: `#RRGGBB` or `#RRGGBBAA` (with alpha)
6. For sprites with grids, use multi-line format for readability
## Sprite Structure
{"type": "sprite", "name": "sprite_name", "palette": {...}, "grid": [...]}
- name: unique identifier (lowercase_snake_case)
- palette: inline color map OR reference to named palette
- grid: array of strings, each string is one row of tokens
## Token Format
- Tokens are `{name}` format, concatenated in grid rows
- Example row: "{_}{skin}{skin}{_}" = 4 pixels
- Token names should be descriptive: {skin}, {hair}, {outline}, {shadow}
## CSS Variables (Recommended)
Use CSS variables for theming and color-mix() for derived colors:
{"type": "palette", "name": "themed", "colors": {
"--primary": "#4169E1",
"{_}": "transparent",
"{main}": "var(--primary)",
"{shadow}": "color-mix(in oklch, var(--primary) 70%, black)",
"{highlight}": "color-mix(in oklch, var(--primary) 60%, white)"
}}
- Define base colors with `--name` prefix
- Reference with `var(--name)` or `var(--name, fallback)`
- Generate shadows: `color-mix(in oklch, color 70%, black)`
- Generate highlights: `color-mix(in oklch, color 60%, white)`
## CSS Keyframes Animation (Recommended)
Use percentage-based keyframes for animations:
{"type": "animation", "name": "pulse", "keyframes": {
"0%": {"sprite": "star", "opacity": 1.0},
"50%": {"sprite": "star", "transform": "scale(1.2)", "opacity": 0.7},
"100%": {"sprite": "star", "opacity": 1.0}
}, "duration": "1s", "timing_function": "ease-in-out", "loop": true}
- Transform functions: translate(x, y), rotate(deg), scale(n), flip(x/y)
- Timing functions: linear, ease, ease-in, ease-out, ease-in-out, steps(n)
- Duration: "500ms", "1s", or number in milliseconds
## Example Output
{"type": "palette", "name": "heart", "colors": {
"--red": "#FF0000",
"{_}": "transparent",
"{r}": "var(--red)",
"{p}": "color-mix(in oklch, var(--red) 70%, white)",
"{dark}": "color-mix(in oklch, var(--red) 70%, black)"
}}
{"type": "sprite", "name": "heart", "palette": "heart", "grid": [
"{_}{r}{r}{_}{r}{r}{_}",
"{r}{p}{r}{r}{p}{r}{r}",
"{r}{r}{r}{r}{r}{r}{r}",
"{_}{r}{r}{r}{r}{r}{_}",
"{_}{_}{r}{r}{r}{_}{_}",
"{_}{_}{_}{dark}{_}{_}{_}"
]}
{"type": "animation", "name": "heart_beat", "keyframes": {
"0%": {"sprite": "heart", "transform": "scale(1)"},
"15%": {"sprite": "heart", "transform": "scale(1.1)"},
"30%": {"sprite": "heart", "transform": "scale(1)"}
}, "duration": "1s", "timing_function": "ease-out", "loop": true}
## Best Practices
- Use semantic token names: {skin}, {hair}, {outline}, {shadow}, {highlight}
- Keep sprites small: 8x8, 16x16, or 32x32 pixels
- Use {_} with "transparent" for transparent pixels
- Limit palette to 4-16 colors for retro aesthetic
- Use CSS variables (--name) for base colors, enables easy theming
- Use color-mix() to auto-generate shadow/highlight variants
- Add highlights and shadows for depth
- Include an {outline} color for definition
## Variants
Create color variations of existing sprites:
{"type": "variant", "name": "hero_red", "base": "hero", "palette": {"{hair}": "#FF0000"}}
## Compositions (Tiling)
Compose multiple sprites into larger images:
{"type": "composition", "name": "scene", "size": [32, 32], "cell_size": [8, 8],
"sprites": {".": null, "G": "grass", "T": "tree"},
"layers": [{"map": ["GGGG", "GGGG", "G.GG", "GTGG"]}]}
```
## Specialized Templates
### Character Template
Use this for generating character sprites:
```
Create a [SIZE]x[SIZE] pixel art character sprite in pixelsrc JSONL format.
Character description:
- [DESCRIBE CHARACTER: hero, villain, NPC, monster, etc.]
- [DESCRIBE APPEARANCE: hair color, clothing, accessories]
- [DESCRIBE STYLE: cute, realistic, retro, etc.]
Requirements:
- Use CSS variables for base colors: --skin-tone, --hair-color, --shirt-color
- Use semantic token names: {skin}, {hair}, {eye}, {shirt}, {pants}, {outline}
- Use color-mix() for shadows: color-mix(in oklch, var(--color) 70%, black)
- Use color-mix() for highlights: color-mix(in oklch, var(--color) 60%, white)
- Include {_} mapped to "transparent" for transparent background
- Use an {outline} color for definition
- Limit palette to 8-12 visible colors (CSS variables don't count)
Output format:
1. First line: palette with CSS variables and color-mix() derived colors
2. Second line: sprite definition with "type": "sprite"
3. Ensure each grid row has exactly [SIZE] tokens
Example palette structure:
{"type": "palette", "name": "char", "colors": {
"--skin": "#FFCC99",
"--hair": "#8B4513",
"{_}": "transparent",
"{skin}": "var(--skin)",
"{skin_shadow}": "color-mix(in oklch, var(--skin) 70%, black)",
"{hair}": "var(--hair)",
"{hair_highlight}": "color-mix(in oklch, var(--hair) 70%, white)"
}}
```
### Item Template
Use this for objects and collectibles:
```
Create a [SIZE]x[SIZE] pixel art item/object sprite in pixelsrc JSONL format.
Item description:
- [DESCRIBE ITEM: sword, potion, key, chest, etc.]
- [DESCRIBE MATERIALS: wood, metal, glass, magical, etc.]
- [DESCRIBE STYLE: fantasy RPG, sci-fi, cute, realistic]
Requirements:
- Use CSS variables for material base colors: --metal, --wood, --gem
- Use semantic token names: {blade}, {hilt}, {gem}, {wood}, {metal}
- Use color-mix() for shadows and highlights
- Include {_} mapped to "transparent" for transparent background
- Keep palette under 8 visible colors
Visual guidelines:
- Use lighter colors (color-mix with white) on top-left for highlight
- Use darker colors (color-mix with black) on bottom-right for shadow
- Leave 1-2 pixel margin for breathing room
Example palette:
{"type": "palette", "name": "sword", "colors": {
"--steel": "#C0C0C0",
"--gold": "#FFD700",
"{_}": "transparent",
"{blade}": "var(--steel)",
"{blade_shine}": "color-mix(in oklch, var(--steel) 50%, white)",
"{blade_shadow}": "color-mix(in oklch, var(--steel) 70%, black)",
"{guard}": "var(--gold)",
"{hilt}": "#8B4513"
}}
```
### Animation Template
Use this for animated sprites:
```
Create a [SIZE]x[SIZE] pixel art animation in pixelsrc JSONL format.
Animation description:
- [DESCRIBE SUBJECT: character, object, effect]
- [DESCRIBE ACTION: walking, attacking, idle, spinning]
- [DESCRIBE FRAME COUNT: 2, 4, 6, 8 frames]
Requirements:
- All frames must use the SAME shared palette with CSS variables
- Keep subject centered and consistent across frames
- Only animate the parts that move
- Use meaningful frame names: [name]_1, [name]_2, etc.
- Use CSS keyframes format for animations
Output format:
1. First line: shared palette with --variables and color-mix() shadows
2. Following lines: sprite frames in order
3. Last line: CSS keyframes animation
CSS Keyframes format:
{"type": "animation", "name": "anim", "keyframes": {
"0%": {"sprite": "frame_1"},
"50%": {"sprite": "frame_2", "transform": "translate(0, -2)"},
"100%": {"sprite": "frame_1"}
}, "duration": "500ms", "timing_function": "ease-in-out", "loop": true}
Frame timing:
- Fast action: "50ms" to "100ms"
- Normal movement: "100ms" to "150ms"
- Slow/relaxed: "200ms" to "300ms"
- Idle breathing: "400ms" to "2s"
```
### Tileset Template
Use this for seamless tiles:
```
Create a [SIZE]x[SIZE] pixel art tileset in pixelsrc JSONL format.
Tileset description:
- [DESCRIBE TERRAIN: grass, water, stone, sand]
- [DESCRIBE STYLE: top-down RPG, platformer]
- [DESCRIBE VARIATION: how many tile variants]
Requirements:
- All tiles must use the SAME shared palette with CSS variables
- Tiles must be seamlessly tileable (edges match)
- Use color-mix() to auto-generate shades from base color
- Define base color as --grass, derive {grass_light}, {grass_mid}, {grass_dark}
Example palette structure:
{"type": "palette", "name": "terrain", "colors": {
"--grass": "#228B22",
"{_}": "transparent",
"{grass}": "var(--grass)",
"{grass_light}": "color-mix(in oklch, var(--grass) 70%, white)",
"{grass_dark}": "color-mix(in oklch, var(--grass) 70%, black)"
}}
Tiling guidelines:
- Distribute color variations randomly but evenly
- Avoid obvious repeating patterns
- Test by mentally placing 4 tiles in a 2x2 grid
```
## Usage with Different Models
### Claude
Claude excels at following complex format rules. Paste the system prompt, then request:
> "Create a 16x16 pixel art sword with a silver blade and golden hilt"
### GPT-4
Use the system prompt as a "System" message in the API or ChatGPT custom instructions.
### Local Models
For smaller local models:
- Keep prompts simpler
- Provide more examples inline
- May need multiple generation attempts
- Consider fine-tuning for pixelsrc format
## Sketch Workflow
Iterate quickly without rendering PNGs:
```bash
# 1. Generate sprite with AI and save to file
cat > sketch.pxl << 'EOF'
{"type": "sprite", "name": "hero", "palette": {...}, "grid": [...]}
EOF
# 2. Preview instantly in terminal with ANSI colors
pxl show sketch.pxl -s hero
# 3. Check structure with coordinate grid
pxl grid sketch.pxl -s hero
# 4. Get human-readable breakdown
pxl explain sketch.pxl -s hero
# 5. Iterate: Edit file, re-run pxl show (fast feedback!)
# 6. When satisfied, render final PNG
pxl render sketch.pxl -o hero.png --scale 4
```
**Benefits:**
- Instant feedback with `pxl show`
- No file clutter from preview PNGs
- `pxl grid` shows coordinates for precise edits
- `pxl explain` helps understand AI output
## Verification
Always verify generated output:
```bash
# Quick preview in terminal
pxl show generated.pxl -s test
# View with coordinates
pxl grid generated.pxl -s test
# Render to PNG
pxl render generated.pxl -o output.png
# Catch format issues
pxl render generated.pxl --strict
# Format for consistency
pxl fmt generated.pxl
# Get fix suggestions
pxl suggest generated.pxl
```