§02

Nutrons

Awesome Nuts GmbH · 2026

Blank canvas → on‑brand generation.The whole trail, in public.

Nutrons is a comic-book snack brand with a world behind every pack. I designed and built the hub: scan the QR code on a pack, collect Seeds, fly Canopy Run, grow the World Tree. Fixed fee, hard launch — AI in every phase, a human owning every decision.

Stack
Next.js · TypeScript · Postgres with RLS
Economy
QR-scan rewards, levels and a leaderboard
Codes
20,000 unique, generated and validated
Play
Canopy Run — one input, three worlds, 15 levels
Camp
XP, streaks, factions and a community World Tree
Nutrons hub hero: four nut superheroes surf leaves past the World Tree of Nu-Terra under the Nutrons logo.
Fig. 2.0 Hub, desktop 1728 — built from the Nutrons design system v0.1

In motion — Nutrons films · 07 films · 0:58

Generated in Higgsfield and directed through the Nutrons bible, my canon plugin: character sheets, style clause and camera grammar travel with every prompt, so the crew stays on-model from shot to shot.

01 / 07 World Tree — through the crown — Seedance 2.0 · watercolour storybook, one continuous shot

Watch the full cut · 1:02 · 1080p ↗

Shipped — early access, live now. Pick a hero, fly three worlds, bank Seeds, come back to Base Camp.

Fig. 2.1 Canopy Run, played: pick a hero, fly Nu-Terra Path, Junkropolis and Venus-City, bank the Seeds at Base Camp.
Canopy Run, Junkropolis — hold to rise, release to dive; Ghost Glow active
Fig. 2.2 Canopy Run, Junkropolis — hold to rise, release to dive; Ghost Glow active
Venus-City — world two, levels 6–10
Fig. 2.3 Venus-City — world two, levels 6–10
Run over — Seeds banked, chain bonus, one more run
Fig. 2.4 Run over — Seeds banked, chain bonus, one more run
Base Camp — XP, streaks, heroes, worlds and the community World Tree
Fig. 2.5 Base Camp — XP, streaks, heroes, worlds and the community World Tree
Heroes — four Nutrons, stats per hero
Fig. 2.6 Heroes — four Nutrons, stats per hero
  1. 01

    Discover & decide

    Discovery in FigJam: decisions and milestones logged as we went, style directions generated broad, then cut to a shortlist.

  2. 02

    Explore style

    Generative exploration, curated into a direction deck — the taste decisions everything downstream inherits.

  3. 03

    Systematise

    Tokens, components and responsive variants assembled agentically through the Figma MCP, then refined by hand.

  4. 04

    Build

    The design system driven straight into a working app — agent-coded, human-reviewed, deployed.

  5. 05

    Codify the canon

    The character and world bible shipped as an installable Claude Code plugin: canon rules, reference sheets, camera grammar, 7 skills and an image-gen server.

  6. 06

    Stress-test

    20 unsupervised generations, QA’d against each character’s canon at full zoom. The misses taught the bible new rules.

Designed — the hub in Figma, three breakpoints, one component library.

Also: three sessions coaching the client’s in-house AI designer, from watching the workflow to running it herself.

Contact — open application, always

Send me the brief.I’ll send back receipts.

Base
Graz, Austria · CET — an hour ahead of London
Languages
English (mother tongue) · German (Grundkenntnisse, improving)
CV — Senior Engineer ↓CV — Creative Technologist ↓

Same person, two lenses. Both are A4 drawing sheets in the Blueprint theme.

One design system, five themes. The CV wears the first, the letters the second. The other three are here — try them, the whole site follows.