Exercise

Replace Lexicon Duel's Placeholder Art with Real Pixel Art

Module 8 · Exercise 1 · ~2 hours · capstone visual pass

You've been staring at gray rectangles for weeks. This exercise transforms the game from "programmer art" to "this looks like a real thing." You'll do it almost entirely via prompts to Claude + the PixelLab MCP.

Deliverables

  1. A consistent visual style across your game — one palette, one resolution, one "look"
  2. A style guide at assets/STYLE.md that future-you (or future-Claude) can match against
  3. At minimum: card faces for all 26 letters, a goblin enemy sprite, a background, a title screen logo

Steps

1Define the style first. Before generating anything, write assets/STYLE.md:

# Lexicon Duel Style Guide

Resolution: 128x128 for cards, 64x64 for icons, 256x256 for portraits
Palette: 16 colors, warm-dark fantasy (deep purples, old parchment,
         gold accents, muted greens)
Style: clean pixel art, visible outlines, dithered shading,
       readable silhouettes at 1x scale
Viewpoint: cards are face-on, enemies are 3/4 front-facing
Vibe: "well-worn spellbook" — slightly grimy, inviting, not grim-dark

This paragraph goes into every PixelLab prompt. Consistency is half the battle.

2Generate a palette reference. Prompt Claude:

Generate a single 16-color palette image via PixelLab that matches
the style guide at assets/STYLE.md. Layout: 4x4 grid of color swatches,
256x256 output. Save to assets/palette.png. Treat this as the
canonical palette — reference it in all future generations.

Look at it. If it's off, regenerate. You want to love this palette — you're going to see it in every asset.

3Generate the 26 letter cards. Do NOT do 26 separate prompts — that's a guaranteed inconsistency disaster. Batch:

Using PixelLab and the style guide at assets/STYLE.md,
generate 26 letter-card faces.

Spec for each:
- 128x128, transparent background
- A central letter (A through Z) rendered in a stylized serif
- A decorative border matching the style guide palette
- Subtle parchment-texture fill behind the letter
- Naming: assets/cards/letter_a.png, letter_b.png, ..., letter_z.png

Same border, same font, same fill across all 26 — only the letter
and its point-value glow color change. Color the glow by rarity:
common letters (ETAOIN) = warm gold, uncommon (SHRDLU) = cool blue,
rare (JKQXZ) = purple.

Generate in batches of 5 so I can stop you if the style drifts.

Watch the first batch. Reject if needed. Then let it rip.

4Enemy portraits. Generate goblin first (your tutorial enemy), then stretch to 2-3 more:

Generate via PixelLab (256x256, transparent background, style from STYLE.md):
1. "Goblin wordsmith" — small green goblin, scribe robes, holding a
   quill, mischievous grin. Save to assets/enemies/goblin.png.
2. "Grammar lich" — undead wizard, tattered robes, floating books
   orbiting head, glowing eyes. assets/enemies/grammar_lich.png.
3. "Thesaurus dragon" — small dragon perched on a dictionary,
   tongue made of scrolls. assets/enemies/thesaurus_dragon.png.

For each, also generate a "hurt" frame that tilts back slightly
with a small sparkle overlay — suffix _hurt.png.

5Background and UI elements. 

Generate:
- Battle background: 1080x1920 portrait, tavern study interior,
  warm candlelight, blurred to not distract. assets/bg/tavern.png
- End Turn button face: 240x80, parchment with "End Turn" in
  calligraphic font. assets/ui/btn_end_turn.png
- Submit button face: 240x80, similar style, "Submit Word".
  assets/ui/btn_submit.png
- HP icon: 32x32 heart in the style. assets/ui/heart.png
- Block icon: 32x32 shield. assets/ui/shield.png

6Title screen logo. The most important single asset:

Generate via PixelLab: a title-card logo for "Lexicon Duel".
- 512x256, transparent background
- Ornate serif lettering, letters slightly dueling (L and D leaning
  toward each other)
- Color scheme from STYLE.md palette
- A subtle decorative flourish — laurel? crossed quills? your call
- Should read clearly at thumbnail size for Play Store icon use

Generate 4 variants. I'll pick one.

Pick one, back it up, use it everywhere.

7Wire the assets into Godot. Now ask Claude to do the wiring:

Using the Godot MCP:
1. For each CardData resource in data/cards/, set its `texture`
   field to the matching assets/cards/letter_X.png
2. In enemies/goblin.tres, set portrait to assets/enemies/goblin.png
3. In scenes/Main.tscn, replace the placeholder ColorRect background
   with a TextureRect using assets/bg/tavern.png
4. In scenes/Card.tscn, replace the ColorRect with TextureRect
   using letter texture
5. Run the project. Report any errors.

Review the diff carefully. Claude is good at this but will sometimes mis-wire a resource.

8Playtest. Play three duels. Does the new art add to the feel, or just cover up jankiness? If something clashes, regenerate it. Iterate.

Stretch goals

Cost awareness PixelLab generations cost credits. Before batching 26 cards, burn 2-3 single generations to validate the style. Once style is locked, batch efficiently. A full art pass for Lexicon Duel should land in the how.3–how.8 range — cheaper than one hour of a freelance artist.

The meta-lesson

Notice what you just did: you defined the style, the naming, the wiring strategy, the playtest protocol. Claude executed. This is the division of labor that works. The human holds the vision and quality bar; the AI holds the 26 cards worth of pixel-pushing. Neither could do this alone in two hours.

Do this now

  1. STYLE.md first. Don't skip this step.
  2. Palette reference. Love it before moving on.
  3. Letters in a small batch, review, then full batch.
  4. Enemy + background + UI + logo.
  5. Wire. Playtest. Celebrate.
  6. Commit an "art pass 1 complete" tag so you can diff against later passes.
Capstone checkpoint At this point, Lexicon Duel has systems, UX, juice, and a cohesive visual identity. It is shippable. Everything from here is polishing an actual game, not building a tech demo.
← Previous lesson