Pixel Face

---
name: pixel-face
description: Create or improve a 32×32 pixel-art persona face for the Frontier Faces demo (examples/04-frontier-faces/personas.mjs) — the animated agent avatars rendered by face-term.mjs / the browser <cotal-face> / the gallery. Use when the user asks to add a new persona/face/avatar, improve an existing one (hair, eyes, likeness, expression), make it "look more like" someone, or fix a face that "doesn't read". Drives the example's own tools (img2rows.mjs, render-png.mjs) and follows FACE-DESIGN.md; uses a multi-agent variant loop for likeness.
---

# pixel-face — author & refine the Frontier Faces pixel art

A persona face is pure data in **`examples/04-frontier-faces/personas.mjs`** (one entry per
persona). The same data drives the terminal renderer (`face-term.mjs`), the browser element
(`web/cotal-face.js`), and the PNG tool — so edit `personas.mjs` once and it's live everywhere.
**Always work from `examples/04-frontier-faces/`.**

## Where things are
- `personas.mjs` — the entries (rows, colors, glow, mouths, expr, eyes, lines). Single source of truth.
- `FACE-DESIGN.md` — the full conventions (grid zones, color keys, eye recipe, visemes). **Read it first.**
- `tools/img2rows.mjs` — rough a reference photo into a 32×32 `rows`+palette.
- `tools/render-png.mjs` — render a 7-state contact sheet (PNG) for review. **This is the validator.**
- `tools/face-template.mjs` — copy-me starter entry that encodes the conventions.
- `gallery.html` (all personas, original-vs-pixel) and `preview.html?p=<key>` (one persona) — served
  via `python3 -m http.server` or `tools/serve-wall.mjs`; for visual QA.
- `assets/<persona-key>.<ext>` — reference photos. **Gitignored / local-only — never commit them.**

**Persona key ≠ agent name.** The roster uses agent-file basenames; the face comes from each agent's
`face:` frontmatter: `elon`→`musk`, `steve`→`jobs`, `rayan`→`ray` (others match). Persona keys:
`neon david ray sven garry jobs musk dario mira bernie michelle`.

## Conventions (condensed — full detail in FACE-DESIGN.md)
- **Grid 32×32**, `.` = transparent, face centered ~col 15. Zones: hair **1–9** · brows **10–11**
  (drawn by `expr`, not `rows`) · eyes **12–13** (drawn by `eyes()`) · nose **14–16** · mouth
  **18–20** (drawn by `mouths`) · chin **21–24** · collar **26–31**.
- **Color keys:** skin `P` light / `S` mid / `s` shadow · `E` pupil · `W`/`w` catchlight · `R` lip ·
  `m` lip-shadow · `b` brow · `h` hair · **`L` cyan + `M` magenta** = the cotal glow ribbon
  (`glow: { L: 8, M: 6 }` blurs them). Use `rng(row, c1, c2, key)` (exported from personas.mjs) for runs.
- **Eye recipe:** 2-wide iris (`E`) on the iris row; row below = catchlight (`W`/`w`, OUTER corner)
  + lid-shadow (`s`, INNER). `jobs` is the "alive" benchmark — match its eye, don't use flat black blocks.
- **Surprise = raised brows + open mouth, eyes stay `open`** (growing the iris behind glasses looks
  wrong). Don't reintroduce a `wide` eye style.
- The face renders at a **fixed 32×16** (not scaled to the pane), so faces look the same size as long
  as the pane is ≥ ~32 cols.

## Tools (exact)
```sh
# rough a reference photo → 32×32 rows + palette (macOS: uses sips)
node tools/img2rows.mjs --in assets/<key>.png --w 24 --h 30 [--colors 12] [--x0 4] [--y0 0]

# render a 7-state contact sheet (neutral·happy·sad·angry·surprised·talking·blink) to review
node tools/render-png.mjs --file <draft>.mjs --out /tmp/<key>.png --scale 8     # draft: export const entry = {…}
node tools/render-png.mjs --file personas.mjs --persona <key> --out /tmp/<key>.png --scale 8   # existing
```
A draft module must `export const entry = {…}` and (if it uses `rng` in expr/mouths)
`import { rng } from '/abs/path/examples/04-frontier-faces/personas.mjs'`.
**After every render, Read the PNG and compare it to `assets/<key>.<ext>`.** Iterate.

## Create a new persona
1. Pick a `key`. If you have a photo, save it as `assets/<key>.png` and `img2rows` it for a rough base;
   otherwise copy `tools/face-template.mjs`.
2. Hand-edit a `/tmp/<key>-draft.mjs` (`export const entry`) following the conventions above.
3. `render-png` → Read the PNG → compare to the reference → iterate until all 7 states read well.
4. Splice the finished entry into `personas.mjs` (keep the file's style; reuse color keys).
5. Review in the gallery; confirm no other persona changed.

## Improve an existing persona
1. Read its entry in `personas.mjs` + its reference `assets/<key>.<ext>` and the current render.
2. Edit **only the in-scope rows** (e.g. hair = rows 1–9). **Preserve** `eyes()`, glasses/beard,
   `expr`, `mouths`, `colors` of other features, and the collar/glow — change the minimum.
3. `render-png` the draft → Read → compare → iterate (≥3 passes). Then splice the rows back into
   `personas.mjs` and confirm the diff is limited to that entry.

## Multi-agent variant loop (use for likeness — "doesn't look like them")
When matching a real person, generate options instead of guessing:
1. Spawn ~3 subagents **on the main working tree** (NOT git worktrees — `assets/` is gitignored, so
   reference photos are absent from a fresh worktree). Give each: the reference path, the current
   entry, the conventions, and a distinct direction.
2. Each agent writes its OWN `/tmp/<key>-<n>.mjs` draft (never edits `personas.mjs` — avoids
   conflicts), renders it, Reads the PNG, compares to the photo, iterates, and **returns the final
   `rows`**.
3. You pick the best, splice it in, review in the gallery. Refine **one axis per pass** (e.g. head
   shape, then hair). This is the loop used for garry/musk.

## QA bar
- Always review **visually** — the `render-png` contact sheet and the `gallery.html` original-vs-pixel
  view — never blind. Judge: does it **read** / look like the person across all 5 expressions + blink?
- `jobs` is the reference standard. Keep faces front-facing/symmetric unless intentional.
- Don't commit `assets/` (reference photos stay local). Persona edits to `personas.mjs` ARE committable.