Native Design Prototyping

Design works in a loop: prototype on the design site, experiment in the lab, refine with Mark, push into the real app. The native app breaks the loop's tools: no DOM, no Vue, no Tailwind classes to transcribe, no capture.mts against a URL. Without a medium, native screens are either built blind in Rust or reviewed from someone else's screenshots. This cycle finds the medium and rebuilds the loop so native screens can be mocked, reviewed and pushed with the same rhythm, by designers who may not write Rust.

Two component systems now share one brand (the layer for the web, the kit for native). The token bridge is the seam that keeps them one.

Sketch: The design loop for native screens, drawn 2026-11-10 in the design system; Mark's own drawings may replace it.

Done means: the bake-off captured side by side with time and friction recorded per medium; Mark's pick recorded here; process.md for native screens; the token bridge generating a Qpoint kit theme (light and dark) from brand/design_tokens.md; a native capture mode feeding the cycle atlas; the kit's skills installed in design's .claude/skills plus /gpui-story; Status or Inventory taken through the loop and into c131; a design-site page where the other processes live.

• Design repo: cycles/c132.native-design-prototyping/, brand/design_tokens.md (source, unchanged) and a generator script, scripts/capture.mts (native mode), .claude/skills/ (kit skills, /gpui-story), a lab page for the bake-off, the process page
• Sister projects: ../qnative (stories, the theme file), ../q-nuxt-layer (read: tokens)
• Out: the pages themselves (c131); the layer cleanup (c135); Figma library building unless the bake-off says so

• stage 1 (2026-11-09): prompt and plan written from c130's split; the five candidate media tabled with a default (C if it renders our screens, else B, A for ideation). CYCLE.md written before kick-off at Mark's request (c130 clarifying question 6). c130 D10 ruled the same day: the medium is decided here.
• 2026-11-09, later: Mark on who mocks: both he and agents, at different times; being able to mock is crucial to any plan. So the medium must serve a person without a Rust toolchain and an agent with one, and every page state must end as a captured, reviewable artifact. Type ruled: Inter (c131 D14). Committed the same day.
• sketch and story (2026-11-10): the loop drawn in the design system (app/pages/cycles/design/sketches/c132-loop.vue: the five steps, the medium under each, the five candidates against the criteria, the token bridge), to be captured as /cycles/design/c132-sketch-loop.png and referenced under Why; the story module app/data/stories/c132.ts (D1–D5 and the who-mocks ruling as decisions, two outcomes); the section The shape added above.
• 2026-11-11: Mark ruled that the lab adopts the native app's named synthetic worlds in Phase 0 (c131's synthetic data, D15): useNativeWorld(name) over ../qnative/crates/fixtures/world/, D6 added to the plan; mocks stop inventing rows.
• Phase 0 (2026-11-11): the worlds in the lab. app/data/worlds/*.json are copies of ../qnative/crates/fixtures/world/ (scripts/sync-worlds.sh; the deploy builds here, so the copies live here). app/composables/useNativeWorld.ts: useNativeWorld(name) loads one world by dynamic import (only the named one is bundled; on the client, so the server renders the loading state and the payload carries no rows) and exposes the manifest and get(route, params?), which builds the nozzle's request key as types::Request::key does (route?sorted-query, period=all dropped, quote_plus encoding) and returns the served JSON; describe says the footer's words as Synthetic::describe does. The plan's Phase 0 records what each medium needs installed (A: the design repo; B: Rust 1.95+, the workspace, stories for captures; C, D, E as found) and the bake-off page: Inventory, ruled.
• Phase 1 (2026-11-11): the bake-off on Inventory, at the review stop.
  • Medium A, built here: three Inventory views in a native skin, each in fresh, minimal and meridian-day90: the landing (twenty micros), Harnesses (band and ledger, fleet → personal as c2's six rules) and the merged harness page (header with the install's long tail, tiles, Sessions, Configured here, Surface). Rows only from useNativeWorld; the rollups ported from landing.rs, harnesses.rs and harness.rs into app/data/native-inventory.ts. The skin mirrors the kit's chrome in our tokens and Inter (c131 D14, D18): app/components/native/ (Window with the title bar, the 212 px rail and the footer data: synthetic · <world> · <host>; PageHeader, Period, LabBar, Skeleton, Icon); everything else is the layer (DataIndexSection, DataMachineMicro, DataMachine, DataRankedBars, DataSegmentBar, DataTable, DataListingBar, ActorHeader, NavJumpPills, DataSurfaceSection, UxPill, AgentAvatar). Pages under app/pages/pages/native/, the native phase in page-registry.ts (collapse c132-native), subjects page/native-<view> in subjects.ts, a card on /pages.
  • Medium B is c2's: the real app on GPUI, captured off-screen on priya-x1 (thread p2-harnesses in the qnative atlas). Not built here.
  • The bake-off page /pages/native/bake-off: A beside B per view and state (UxImageCompare, wipe · onion · side), the time and friction per medium (A: this session's log, bake-off-log.md; B: c2's commit times and record), and what the evidence suggests. A's eleven captures are in the design atlas (thread p1-bake-off-a, scripts/shot-programs/c132-bake-off.json), cropped to the window B was photographed at (1120 × 720). B has no capture of fresh or minimal yet; the page says so.
  • Figures: A, 12 minutes to the three views in three worlds, about 40 to the verified bake-off page, one agent, no build loop. B, about 60 minutes for the three views on 2026-11-10 once the layer in Rust existed, after a day of groundwork (the world cut, the types, the nozzle, the token bridge, the layer crate, the stories crate). Friction per medium on the page and in review.md.
  • What the evidence suggests (review.md; the pick is Mark's): B of record (the real thing; the stories are the tests; captures solved), A for ideation and for a person's review, honest by D6 (a mock names its world, and the wipe checks it row for row); Phase 3 should give B its per-world captures first. The plan's default confirmed, with A promoted from "ideation only" to the person's review medium.
  • Verified on :3000 with curl and headless Chromium (no console errors in any world) and in the browser pane. Committed; not pushed.
• Phase 2 (2026-11-11, evening): Mark picked from review.md. B, the stories crate in ../qnative, is the medium of record for a native screen, because it is the real thing, its stories are the page's tests and its captures are solved; A, the Vue mocks in a native skin, is the medium to sketch and to review, for a person without a toolchain and for an agent sketching before Rust, honest by D6 (a mock names its world; the story is checked against it row for row). Two rulings beside the pick: the skin's chrome stays an imitation in app/components/native/, re-checked at each review stop by a wipe against a real shell capture (D7); a page's mock outlives its story as the person's medium (D8). Phase 3 opened the same evening.
• Phase 3 (2026-11-11, evening): the loop built, at its review stop (review-phase3.md).
  • The native capture mode (D3): scripts/capture.mts --native <program.json> runs qnative's stories binary once per shot with QPOINT_WORLD set, into a scratch dir, and merges the PNGs into the atlas with surface: native, subject: native/<story>, variant: world=<name>, world and the thread; nothing is written in the native checkout. scripts/shot-programs/c132-native-worlds.json took the overview, Harnesses and the harness page (with Sessions and Surface landed) in fresh, minimal and meridian-day90: 13 captures in public/cycles/qnative/ (thread worlds), so the bake-off has B's side for every state. The stories read the world through a one-line patch to app_shell_at, applied in a scratch copy for the first run and built into qnative's shared target dir; the tree was not edited and the patch was handed to qnative c2, which landed it (b4cbc23, adapted for Synthetic::new returning an Option). The first build failed on a closure's arity and the old binary quietly captured the default world three times, caught by reading the PNGs (the skill now says so).
  • capture.mts gained scale and clip (program, page, shot and single-shot --clip / --scale): A is captured as the window at the app's 2× instead of a 1× viewport cropped by hand. The eleven bake-off captures retaken.
  • /gpui-story (.claude/skills/gpui-story/SKILL.md): a page state into a Story (name, size, build at a route or a section), its headless test, the per-world capture into the atlas, and the path from a Vue mock in the native skin to a story.
  • process.md: the five steps and who does which with what, the two media exactly, the native capture mode, the token bridge documented (scripts/tokens-to-kit.mjs, built in qnative c2, not rebuilt), the review stop as a page, what is not in the loop yet (the kit's own skills, a dark variant per world for A, /figma-to-gpui).
  • The bake-off page now shows both sides for every state and says A and B are both at 2×. Found on the way: the app's rail has grown a Help › Getting started group since c2's first captures and the skin has not; the D7 wipe is for exactly this.
  • The recut landed while Phase 3 ran (qnative 71dd21a: meridian-day90 is nina-mbp, priya's cut is pilot; b4cbc23: the stories honour QPOINT_WORLD, the hand-on landed by c2). The lab re-synced (scripts/sync-worlds.sh, four worlds), the stories binary was rebuilt from qnative proper (no scratch copy needed any more), and both media were recaptured with pilot added: A 14 captures, B 18 (thread worlds). The bake-off page reads meridian-day90 as nina's laptop and pilot as the cut the first bake-off showed. The patch file was removed from the tree once c2 had applied it; the lab's world copies (app/data/worlds/, four files) are committed with this.
  • Follow-up at the review stop: the wipe had shown the app's rail with a Help › Getting started group (the tour launcher's place, c131 D20) that the skin lacked; the skin took the group the same evening (app/components/native/Window.vue, inert) and A was recaptured, so the wipe is clean on the chrome again. D7 working as ruled.
• Phase 3 review (2026-11-11, evening): Mark ruled from review-phase3.md. D9: the native capture mode also copies each native capture into design's own atlas under the cycle's thread (the qnative atlas keeps the originals), retro-applied to the worlds thread so the bake-off's B side is in public/cycles/design/. Phase 4 is Status through the whole loop, A then B, captures per world into both atlases, the page into c131; the six endpoint-only shapes get a clearly marked bridge fixture per world beside the world copies, typed from synthetic-data.md (D10), named as a bridge in the footer and the record, feeding the story in qnative too. Editing qnative is allowed once c2 has closed, for Status's own paths, with small commits and a message to the other sessions (c3, c4) on shared files; never a push there.
• Phase 4 (2026-11-11): Mark picked Status as the worked example at the Phase 3 review stop. The brief (status-brief.md) is written from c131's page table (on / off, local / connected, CPU and RAM, workers, plugins, logs, effective config; the states off · starting · on-local · on-connected · degraded; D12's grant line) and from what the four worlds carry: /api/stats, /api/endpoints?host=, /api/installations, /api/agents. The mock in A draws those honestly; the sensor's own shapes (c131 D17: SensorState, Resources, EffectiveConfig, LogLine) have no route and no world, so the page shows that gap as its honest state until the routes land or Mark rules a bridge.
  • Built the same day, on Mark's word to forge ahead: /pages/native/status in the native skin (the sensor's sentence and facts; what it has found: Sessions, Events, Tokens, Spend, Harnesses here, Out of sight, The record; the log tail) on the four worlds, with a lab knob for the states no world carries (?state=, ?plane=) and degraded derived from /api/stats coverage; the rail takes a Status item on this mock only (S1). Eight captures (thread p4-status-a, scripts/shot-programs/c132-status.json). The calls taken by default are tabled in the brief and in review-phase4.md (S1–S6); the push into c131 is handed to qnative c2 as a story per state. Found: a page state no world carries is where D6 bends, and the loop's answer is a world per state once D17's routes exist; written into the review note for process.md.
  • Through to B, after the Phase 3 review's rulings (the same evening): the bridge of D10 written per world beside the world copies (app/data/worlds/bridge/, typed in types.ts from synthetic-data.md; scripts/sync-bridge.sh copies it into ../qnative/crates/fixtures/bridge/), read by useNativeWorld as fromBridge(route); the mock's sensor band and log now come from it and the footer says sensor: bridge (S2 narrowed to starting · off · connected, S3 overturned). The native capture mode mirrors into design's atlas (D9) and the worlds thread was retro-applied (c132-native-<story>-<world>-light.png), the bake-off's B side reading from it. Then Status in B, in qnative (c2 closed): types/src/bridge.rs (the six shapes, marked a bridge), fixtures/src/bridge.rs (the bundled bridge per world, with a test that every file matches its types), the synthetic nozzle answering /api/sensor, /api/config and /api/plane from the bridge and saying sensor: bridge in its description, Repo::sensor/config/plane/endpoints, Route::Status first in the rail (S1), pages/status.rs (the three bands as the mock draws them), four stories (app-status, -starting, -off, -connected: the states no world carries as a story parameter, as the brief says), and the app's own asset source composing the kit's icons with the Activity glyph the default set lacks. Captured per world by the native capture mode into design's atlas (thread p4-status-b); the bake-off page gained a Phase 4 section with A beside B for seven states. The shared files touched in qnative (router, shell, pages/mod, the two mains, the nozzle, types and fixtures lib files) got small commits and a message to the c3 and c4 sessions.
  • Mark's rulings on S1–S6 (c131 D21, the same evening), in the lab: Status is the landing (the state line and the plane line, what it has found, the Inventory overview's twenty micros below; Inventory keeps its own index), the rail gets a "This machine" group (Status, Sensor, Activity) before Inventory, a Sensor page shows the five facts in full with the configuration file, the plane connection and the log tail, and an Activity page shows sessions over time by harness with the window's totals and the ledger (as qdash's /monitor/activity). Built as /pages/native/status (reshaped), /pages/native/sensor and /pages/native/activity on the four worlds (useNativeSensor.ts shares the state, the sentence and the fact rows between Status and Sensor), recaptured (threads p4-status-a, p4-this-machine-a). The push is qnative c5's, on design's first cut; design makes no further edits in ../qnative.
  • c5 landed D21 in B (the same night): Status as the landing, Sensor and Activity in qnative main, captured per world with the clock frozen (threads p2-status, p2-activity, mirrored into design's atlas as c131-native-app-*), and the lab's world copies re-synced by c5 (39953031a8: every 30-day session's detail and Surface). The bake-off page's Phase 4 section now wipes the lab's Status, Sensor and Activity over c5's build for every world and state; design's first cut stays in the atlas under p4-status-b. The app shifts a synthetic clock to today (· clock +Nd); the lab keeps the world's own dates, as the captures do (recorded in process.md).
• Phase 5 (2026-11-11): the loop documented where the other processes live: a section of CLAUDE.md after Sketches and stories, and /pages/native as the design-site page; process.md stays the full text. CYCLES.md brought in line; c130's record is the parent session's (a line suggested to it).

Documents: the plan · Mark's prompt · the review stop · the Phase 3 review stop · the process · the Status brief · the Phase 4 review stop · medium A's time log · the lab: the bake-off · Status · the native mocks

The problem. The loop's tools assume a DOM: Vue to draw, Tailwind classes to transcribe, capture.mts against a URL. GPUI draws its own pixels, and one medium cannot serve, because both Mark and agents will mock, at different times (ruled 2026-11-09).

The core idea. The five steps stay: brief, mock, experiment, refine, push. The medium splits by who mocks: A, Vue mocks in a native skin, for a person without a Rust toolchain; B, a stories crate in the app repo, for an agent with one. Both end as a captured, reviewable artifact per page state in the same atlas, and the token bridge keeps the two drawings one brand.

The pieces.

• The loop: process.md here, who does which step and with what.
• Medium A: a native skin on the design site (app/pages/pages/; c137's /pages/phase4/messaging-inbox is the precedent, a web rendering standing in for the native app).
• Medium B: ../qnative/crates/stories, one story per page state, run as headless tests (c131 R6).
• The token bridge: brand/design_tokens.md → a generator script → the kit theme, light and dark, in ../qnative (D2); Inter and Geist Mono bundled (c131 D14).
• Captures: a native mode for scripts/capture.mts, the same manifest with surface: native (D3).
• Skills: the kit's, installed from the repo at our pinned tag, plus /gpui-story (.claude/skills/).
• The bake-off and the pick: a lab page with A and B side by side on Inventory, three states each; the pick recorded here.

The pattern we follow. The demo is the test (stories as both the design site and the tests); tokens generated from one file (the seam between two component systems); replicate first (A is today's loop in a new skin, before anything is invented); the primer's verdict as the gate (the kit's wasm build is showcase-only on nightly, so C does not carry the loop; Native Shell's desktop features live on main, so E does not either).

What stays open. Mark's pick, formally Phase 2 after the bake-off (the evidence's suggestion is in review.md); the native capture mode's shape (B's screenshots are taken: c2 renders each story off-screen with Window::render_to_image, 2×, no Screen Recording; what is open is capturing every story per world into the atlas); whether a kit-shaped Figma library is worth building (Q2); how the brand's one accent maps onto the kit's 134 roles (primer Q14; the token bridge c2 built answers it for the kit's slots).