Inspo.
← All examples

Prompt

“An indie studio's hand-painted puzzle game: storybook, whimsical, release date, wishlist-led.”

The agent invented Pennyfold - A hand-painted puzzle game where you fold, turn and stitch a storybook town back into order.

Toolchain
pure + inspo
Register
light mode
Build effort
9+ MCP calls · 5 sites studied
Self-score
7.5 / 10
The page it shipped - live, scaledOpen full page ↗

The move

The standout move is treating the game's three verbs as the page's visual grammar. The hero art is a painted hillscape with one segment of hill literally folded over as a paper corner, dashed crease line and all, sitting in the band that fly-io taught me to sweep across the upper fold. The same dashed crease becomes the stitch border on the mechanic cards and the page card, the swoosh under "Mend" is the same hand-drawn stroke lookback uses, and every scene in the chapters rail, the story card and the studio avatars is drawn from a single tin of eleven pigments declared as tokens, so a page built with no screenshots still looks like one painter made it.

What Inspo gave it

The captures it studied, and exactly what each one contributed.

  • Fly - Gave the hero its shape: a painted band sweeping across the upper viewport with the headline nesting in the calm gap beneath it, a soft serif display with one italic word, and the type ramp ratio (120 / 48 / 19 / 16) that became the five tokens.

  • Pi - Warm cream paper instead of white, the filled-plus-outline pill pairing for the two calls to action, and a row of rounded cards that bleeds off both edges, which became the chapters rail.

  • Lookback - The hand-drawn accent swoosh under the emphasised headline word and the small scattered stars around the headline, both redrawn in SVG.

  • Ponpon Mania - Interactive Comic - Permission to let a full-bleed painted scene carry the fold with a single centred pill; the lamplighter and lantern glow motif sit in that spirit.

  • Kelseydake - Dashed stitch borders framing tiles into a quilt; reused as the dashed outlines on the mechanic cards, the page card and the footer rule to echo the game's stitch verb.

How it was built

The actual MCP calls, in order.

  1. recommend
    brief: hand-painted indie puzzle game, storybook, wishlist-led; detail full

    Picked Bento Grid with SaaS-heavy exemplars (brightful-me, hex-tech, ponpon-mania-com, canvasapp-com, cofounder-co), evidence packet (mid paper, warm accent at 33%), a bento features JSX and the hero and spacing guidance.

  2. search_screens
    query indie game landing wishlist release date; industry gaming; limit 10; detail full

    itch-io, xbox-com, gog-com, epicgames-com, brightful-me, analogue-co, store-steampowered-com, twitch-tv, discord-com. Mostly dark storefronts; confirmed the genre gravity to push against and gave the warm beige of itch-io as a counterpoint.

  3. search_screens
    query hand-drawn illustrated storybook whimsical painterly; style playful; limit 10; detail full

    kelseydake-com, duolingo-com, fly-io, oliverjeffers-com, buttondown-email, lookback-com, ethereum-org, doodles-app, lottiefiles-com, basecamp-com. This is where the build's composition came from.

  4. get_screen
    slug ponpon-mania-com

    Full record and autopsy: full-bleed cartoon hero, no headline block, centred lowercase pill CTA, palette #fbac15 / #7c7cfb.

  5. find_reference_components
    type hero

    Seven canonical hero JSX shapes (documentary, manifesto, marquee, question, split-screen, stat-led, word-as-art); took the italic-emphasis and marginalia habits, not a shape.

  6. get_design_system
    slug fly-io; live false

    Type ramp (Mackinac 120px h1 at 0.95 line-height, 48px h2, 16px body), spacing scale 32 / 64 / 80 / 96, radius set up to 20px, palette roles.

  7. find_components
    type cta; style playful; limit 6

    brilliant-org and bunny-net crops; the filled green pill beside an outlined pill confirmed the two-button pairing.

  8. find_components
    type footer; vibe playful; limit 6

    Returned zero components, so the footer was composed from the page's own system.

  9. find_similar
    slug fly-io; limit 6

    amazon-com, canva-com, pi-ai, ethereum-org, capacities-io, bird-co--about. pi-ai was the useful neighbour: cream paper and the edge-bleeding card row.

Palette, traced

Every token, and the reference it came from.

  • --paper#f3ecdfPage ground. Warm cream after pi-ai and itch-io rather than white, so the gouache shapes look painted on paper; a fractal-noise grain overlay sits on top at 16% multiply.
  • --paper-2#eae0cfTile and card surfaces, the alternating mechanics section; one step deeper than the paper so cards read as cut sheets without borders.
  • --ink#2e2440Text, strokes, the lead bento tile. A plum-ink rather than black, following fly-io's #36265f, so type sits inside the painted world.
  • --accent#d9642bThe one loud colour: wishlist buttons, the swoosh, the mechanic step numbers, apples in the orchard. Warm accent matches the genre evidence (33% warm) and reads as marmalade against the cream.
  • --moss#6f8f5aHills in every scene and the green stroke motifs on the mechanic glyphs; the painted world's dominant pigment.
  • --dusk#b9a6cfFar hills and the muted meta text on the dark band; lavender air borrowed from fly-io's paper.
  • --gold#e9c46aLantern light, the moon, hero stars, the folded page of hill; the storybook's light source and the only warm highlight allowed on the night band.
Built with the Inspo MCP - try it on your own brief.← All examples