Speed Up Concept Development With Information Architecture Mode

I designed the entire information architecture of Tiny Cinema — my AI video editor — as 41 self-contained HTML mocks. No Figma. No design tool. A conversation with Claude and one reusable prompt.

The loop is the whole trick:

idea → a rendered sheet in seconds → react → refine → commit.

You describe a screen or a flow in a sentence. Claude renders it as a calm, dark wireframe sheet. You look at it, say what's wrong in plain words — "the rail should be sectioned", "kill the title bars", "show it as four states" — and the next render lands seconds later. When a sheet is right, it gets a number and a row in the gallery README. The gallery becomes the build spec.

Why low-fi HTML beats a design tool here

One file per idea. Inline styles, no build step. Opens in any browser, diffs in git, lives next to the code it specifies.
Monochrome forces the right argument. One accent color, hairline borders, placeholder line-art. Nobody debates the button color — the only thing left to react to is structure.
It's a storyboard, not a screenshot. Each sheet shows how screens and states relate and where information lives. Pixel-final UI comes later, and by then the hard decisions are already made.

The prompt — steal it

Fill the two {{SLOTS}}, paste, and you get a sheet back. Everything else is a design system Claude holds constant across every render, so twenty sheets from twenty conversations still read as one document.

You are designing a low-fidelity IA (information-architecture) mock for
{{PRODUCT — one line of what it is and who uses it}}. Output ONE self-contained
HTML file (inline <style>, no build step) that renders a calm, dark, monochrome
wireframe sheet. This is a STORYBOARD of structure and flow — not pixel-final UI.
Show how screens/states relate and where information lives, not final visual design.

WHAT TO DEPICT:
{{The screens / flow / states. e.g. "the core loop as 3 calm frames left-to-right:
sign in → main list → detail, each with a one-line caption of what the user sees
and does" OR "one screen's IA: top nav, primary region, side rail — each labeled".}}

VISUAL SYSTEM (use these exact tokens):
- Page background #0a0a0b. Surfaces #1b1b1d / #121214 / #0d0d0f. ONE accent only,
  declared once as --accent (default violet #9a7fd0) and used ONLY for the active /
  selected / primary element. Never introduce a second hue.
- Text: primary #ededee, secondary #a6a6a8, tertiary #717174.
- Borders are HAIRLINES ONLY — rgba(255,255,255,0.08) to 0.18 — or dashed/dotted.
  No hard 1px borders, no drop shadows, no gradients. Frame things with tint fills
  and negative space. Corner radius 6–10px.
- Fonts (load from CDN):
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Manrope:wght@400;500&family=JetBrains+Mono&display=swap" rel="stylesheet">
  Manrope = body/UI. JetBrains Mono = ALL labels, chips, numbers, data.
  Instrument Serif = an optional display title only. Tabler webfont = any glyphs.
- Labels: mono, 8.5–10px, UPPERCASE, letter-spacing .08–.1em, tertiary color.
- Captions: mono ~10.5px, tertiary, with key words wrapped in <b> promoted to
  secondary. One short, plain-spoken, lowercase line under each frame.

LAYOUT GRAMMAR:
- A centered stage, max-width ~1100px, generous whitespace, dark void around it.
- Each frame is a rounded surface (radius 8, panel bg) sized to its content —
  a card, a device-ish rect, a list, a chart region. Keep frames quiet and full-bleed;
  no hard title bars over them.
- Chrome lives as tiny mono chips positioned INSIDE a frame's corners (absolute,
  background rgba(0,0,0,.5), 8.5px mono, radius 6; an --accent variant marks the
  active chip). Use for status/context, not decoration.
- Show tabs / steps / segments as a thin strip of small cells beside a frame:
  solid cell = done/real, dashed border = pending/draft, dotted border = empty/todo,
  and an --accent inset-ring (box-shadow: inset 0 0 0 1.5px var(--accent)) = the
  current/selected one. A 1.5px --accent line can mark a position/playhead.
- Flow between frames = a thin --accent arrow, or a dim mono connector label
  ("next →", "on submit →", "esc ←").

WIREFRAME CONTENT (crude, generic, hand-drawn — inline SVG or plain divs):
- Placeholder line-art in muted grays (#5d6167–#93979e): boxes for content blocks,
  a circle for an avatar, short bars for text lines, a few connected points for a
  chart/sparkline, a pill for a button, a rounded rect for an input. Terse mono
  labels only — never real copy, never photos, never any color but the single --accent.
- Depict actual STRUCTURE: nav, primary region, secondary rail, list rows, a stat
  tile, a form field — whatever this screen's IA is — each labeled in mono.

TONE: calm, spacious, confident, understated. Lots of negative space, hairlines not
boxes. Add one dim mono header line at the very top stating the sheet's thesis in a
single sentence.

The grammar is the point

The prompt isn't long because it's fussy. It's long because it defines a shared vocabulary, so every sheet answers questions the same way:

Tiny mono chips inside a frame's corners = context and status, never decoration.
Strip cells beside a frame: solid = done, dashed = draft, dotted = empty, accent ring = selected. Progress and position at a glance.
One accent = the answer to "what's active here?" on every single sheet.
Connector labels ("next →", "esc ←") = flow without flowchart noise.

Once you and the model share that vocabulary, feedback gets absurdly cheap. "Make the third cell dashed" is a complete design instruction.

A few sheets from the run

Four-state sheet: one canvas re-dressing across Watch, Cut, Shot and Stage — one canvas, four states — watch ⇄ cut ⇄ shot ⇄ stage. the dress changes, the room doesn't. esc walks back out the same path.

The calm 3D blocking storyboard — full-width stage, chrome as corner chips, thin filmstrip below — the 3D shot composer, distilled — a quiet full-width stage, chrome living inside the frame edges as mono chips, a thin filmstrip below. two cluttered versions died so this one could ship.

The project scaffold rail — a big player plus a sectioned rail where every item is the same card — the core idea of the whole app — the project as a fractal playlist: big player + one sectioned rail where concept, script, cast, seasons and sizzle are all the **same card**.

Six project formats shown as one scaffold dialed differently — six formats, one scaffold dialed — series to one-shot. each card shows its spine and which shelves it lights up. this sheet settled a week's worth of "should formats be different apps?" in one look.

The Marquee search bar shown in four resting states — one element, four contexts — the top-bar search at rest, drilled into a shot, on the timeline, and on hover. the resting-states sheet is the cheapest way to test whether a component survives its contexts.

The last three picked up Tiny Cinema's real dark/bone theme as the project hardened — same method, same one-file-per-idea discipline, higher fidelity. The prompt is where every one of them started.

How a session actually goes

Fill the two slots. Ask for a sheet.
Look at it. React in plain language — structure, not pixels.
When it's right, save it as the next numbered file and add one row to a README table.
Repeat. The numbered gallery is the design record — and later, the build spec.

Forty-one sheets came out of a handful of sessions this way. Two got rejected and superseded on the way (the sheets say so, right in their README rows) — rejection costs nothing when the next version renders in seconds.

Speed here isn't typing faster. It's collapsing the distance between an idea and a thing you can look at. Most people iterate on descriptions of designs. Describe less. Render more. Steal the prompt.

And just for fun, send the prompt the Claude Design or Claude Code and get magic out.

Brought to you by our friends at Reinforce42 for sponsoring our GPU workloads. https://reinforce42.com/