English · 简体中文

Six pixel-art progress trackers for any task. Any agent that can write JSON makes one yours from ≈1.6k tokens of input.

Quick start · Made by Haiku · Themes · PROMPT.md · SCHEMA.md · 简体中文

Tip

Why a cheap agent is enough

The agent reads one schema and one short prompt, then writes two JSON files. It never opens the theme code.

TOKEN MART · receipt                    tiktoken cl100k, all ≈
--------------------------------------------------------------
SCHEMA.md, English half ................................ 1,400
prompt + your one-line task .............................. 160
6 theme files (132,000 tokens of code) ..................... 0   never read
--------------------------------------------------------------
TOTAL IN ............................................... 1,600   ≈80× less
  + your own item list, only if you paste one
TAKEAWAY  config.json 700-1,100 + items.json (grows with list)

✓ Tested: Claude Haiku wrote a working config.json + items.json for 3/3 brand-new tasks, and all three open in all six themes. See them ↓

Quick start

1. Copy. Copy the prompt from PROMPT.md, fill in one sentence about your task, and paste the English half of SCHEMA.md under it. The live demo's Copy prompt button copies both in one click.
2. Send. Paste it into any agent that can write JSON. Save the two JSON blocks it returns as data/config.json and data/items.json.
3. Play. Run the server and pick any theme. Edits you make on the page are saved back to data/items.json.

git clone https://github.com/laulauraluo/pixel-progress-tracker.git
cd pixel-progress-tracker && python3 server.py   # → http://127.0.0.1:8770

Made by a cheap model

Claude Haiku wrote these three datasets from SCHEMA.md, for tasks it had never seen. Each one passes the schema check and opens in all six themes with no console errors.

• Half-marathon plan, 12 weeks: 20 sessions, 7 stages, grouped by session type, distance as score · examples/haiku-running-plan/
• Wedding vendors: 25 vendors, 6 stages, vendor type + priority, quote as score, a reply log · examples/haiku-wedding-vendors/
• 20 open-source PRs: 24 issues and PRs, 6 stages, by language, repo stars as score, a maintainer-feedback log · examples/haiku-oss-contributions/

_{Haiku's wedding-vendor data in the arena theme}

Six themes, one data file

wuxia · cultivation quest board · ♀ / ♂ styles	surf · surf beach	arcade · arcade leaderboard
werewolf · werewolf game table	climb · bouldering gym kanban	arena · esports arena (modern)

Why it's cheap on tokens

The six themes are about 380 KB of code (≈132k tokens), and an AI never needs to read them. To make the tracker yours:

1. Give any AI assistant the prompt from PROMPT.md and the English half of SCHEMA.md (≈1.6k tokens together) plus one sentence about your task. Any item list you paste in comes on top.
2. Ask it to write data/config.json (stages, goal, groupings) and data/items.json (your entries).
3. Open any theme.

A copy-paste prompt is in PROMPT.md. For a tested run with Claude Haiku, see Made by a cheap model.

Three ways to run

Mode	How	Where edits go
Local server (recommended)	python3 server.py → http://127.0.0.1:8770	Written to data/items.json, with conflict protection across tabs
Static hosting (GitHub Pages…)	push the repo	Kept in your browser; click Export to download items.json
Double-click	open themes/<name>/index.html	Same as static. After editing the JSON, run python3 tools/build_datajs.py to regenerate data.js

The server uses only the Python standard library, with no npm and no build step.

• To view another dataset, open themes/<name>/?data=../../examples/reading-list/.
• The default UI language comes from lang in the config, and every page has a 中 / EN toggle.

Concepts

• stages: your pipeline, in order. Each stage has a kind: todo, doing, waiting, done, bonus (done plus an extra win), dropped, frozen. Themes draw by kind, so you can name stages anything.
• goal: the progress-bar target, plus which kinds count toward it.
• category / group / score: all optional. Category (up to 6 options) drives colours and icons. Group (up to 4) drives regions and lanes. Score is a number split into up to 6 buckets, which become cultivation realms, wave heights, ranks or climbing grades depending on the theme.
• log: a per-item event log (replies, interview feedback, reading notes).

New themes

See THEMES.md. A theme is one HTML file that uses the core/tracker-core.js API. PRs are welcome.

---

All art is drawn in code (SVG / CSS / canvas), with no image assets and no copyrighted game or novel art. Demo data is fictional. MIT License.