Pixeled

Your brand, pixeled. Describe a subject, and Claude draws it as clean, grid-perfect pixel art — rendered in the browser in four styles: Line, Flat, Shaded, and Riso.

The visual language borrows from monochrome pixel line art and Risograph printing: flat shapes, warm limited palettes, paper grain, and a slight ink misregistration.

Built with Next.js 15 and the Anthropic API. The interesting part isn't the prompt — it's that the model never returns an image.

Features

• Icon generator — subject, category, personality, detail level, and shape, in one form.
• Four render styles with swappable palettes, switchable instantly and for free.
• Large canvas mode — 48–64px icons via a draft → upscale → refine pipeline.
• Wordmark builder — pixel-font text and icon lockups, with zero API calls.
• Vector and raster export — true SVG for the clean styles, PNG for everything.
• Live cost counter — every generation reports its actual token spend.

How it works

The model generates grid data, not images. Each generation returns { plan, title, w, h, grid }, where grid is h×w role integers:

0	1	2	3	4	5
empty	outline	fill A	fill B	accent	shade

Three things follow from that choice:

• Restyling is free. Rendering is a pure function — (grid, palette, styleOptions) → SVG — so changing style, palette, or Riso texture never touches the network. Only Generate, 3 variations, and Regenerate spend tokens, and each is marked with a USES AI badge in the UI.
• Output is verifiable. A grid can be checked. Deterministic polish runs on every generation: defensive parse, orphan-cell removal, recentering, and a flood fill to catch outlines that leak. A leaked outline triggers exactly one repair call, which bounds the worst-case cost per generation.
• Results are editable. Grids compose. The wordmark builder lays text out through a hand-built 5×7 bitmap font into the same structure the model produces, so lockups restyle and export like any generated icon.

Model routing lives in a single config map, not scattered string literals:

Pipeline	Model	Used for
standard	claude-sonnet-4-6	grids ≤ 32px on the longest side
large	claude-opus-4-8	48–64px draft → upscale → refine

One server route, app/api/generate/route.ts, is the only code that reads the API key or talks to Anthropic. It stays a thin model proxy — prompt building, parsing, and polish all live in lib/, where they can be tested without a network call.

Running it locally

There's no hosted demo — every generation spends real API tokens, so this runs locally against your own key. You'll need Node 18+.

From the project directory:

npm install

cp .env.example .env.local   # then add your key: ANTHROPIC_API_KEY=sk-ant-...

npm run dev

Open localhost:3000. Get a key at console.anthropic.com.

Nothing is tied to a specific host — it deploys to Vercel as-is if you'd rather run it there, with ANTHROPIC_API_KEY set in the project's environment variables.

Things to try

Two prompts that show off the parts worth seeing:

• A subject with an add-on detail. Subject a matcha bowl, add-on a clover leaf resting on the rim, category plant, shape square, detail balanced. The add-on field is bound to a specific color role, so the clover comes back green and three-leafleted rather than blended into the bowl.
• The large canvas pipeline. Subject flowers in a tall glass vase, then pick the 64×64 chip. The indicator moves through drafting… → refining…, and both the blocky draft and the smoothed result land in the history strip. Toggle Hand-drawn shading in the detail view to see the checker dither at the base.

Project layout

app/
  api/generate/route.ts   # the only Anthropic touchpoint
  page.tsx                # session state, tabs, token counter, localStorage
lib/
  config.ts               # model map, pricing, palettes, shape sizing
  compilePrompt.ts        # the only place prompt text exists
  polisher.ts             # parse / orphan / recenter / enclosure / upscale
  render.ts               # pure (grid, palette, styleOptions) -> SVG
  generate.ts             # orchestration: single / variations / large / repair
  examples.ts             # verified few-shot masks
  pixelFont.ts            # 5x7 bitmap font -> grid
  exportPresets.ts        # SVG + PNG export presets
components/               # Header, Form, Results, DetailView, WordmarkTab, ...
scripts/verify-examples.ts

Scripts

npm run dev              # dev server
npm run build            # production build
npm run verify:examples  # validate the hand-made few-shot examples

The few-shot examples are load-bearing prompt content, so a malformed one would quietly degrade every generation. verify:examples checks each one parses, matches its declared dimensions, and uses only valid role integers.

Notes

• Token pricing is defined in lib/config.ts and may lag the current rates. The session counter itself uses the exact usage figures returned by each API response.
• Riso exports as PNG only, since the grain is raster. The clean styles export as true vector SVG as well.
• Departure Mono is self-hosted under public/fonts/ under the SIL Open Font License.