The design loop for native screens
c1322026-11-10Brief, mock, experiment, refine, push, with the media that can carry each step now that there is no DOM.
Source: c132 plan.md §Candidate media, Deliverables 1–3, D1–D5, clarifying question 1 (answered 2026-11-09: both Mark and agents mock); c130 research/README.md surprises 6 and 8 (the kit's wasm build is showcase-only on nightly; Native Shell's desktop features live on main) and gpui-kit.md (134 theme roles); c131 R6 and D14; c137's inbox page (/pages/phase4/messaging-inbox) as the precedent for A.
the page, its states and the world it runs on; the kit's design guides as the brief every mock is held to
the screen drawn in a medium: A by a person, B by an agent
states and worlds: empty, minimal, typical, overflow, error
the review stop with Mark; Illustrator from a capture if hand work is wanted (D5)
the port into c131, the story as the page's test, the record in the cycle
the brief in the cycle; the kit's design-guides skill installed in .claude/skills (exists)
A: a Vue page in a native skin on the design site, no toolchain; B: a Rust story in ../qnative/stories, one per page state
A: the lab's visit states and worlds; B: each state a headless test (c131 R6)
A: capture.mts against the lab URL, unchanged; B: the stories' screenshots collected into the same manifest, surface: native (D3). The native mode is planned
A is transcribed into a story; B is already the page's test; the pattern recorded for the engineers (c131 D11)
| Medium | The real thing? | Reviewable in a browser? | Needs a Rust toolchain? | Captures into the atlas? | Verdict from the primer (2026-11-09) |
|---|---|---|---|---|---|
| A · Vue mocks in a native skina design-site theme that mirrors the kit's tokens and chrome | No: a second drawing of what the kit can draw; it can drift | Yes, like every lab page | No | Yes, capture.mts unchanged | In, as the person's medium. c137's inbox page is the precedent: a web rendering standing in for the native app |
| B · A stories crate in ../qnativeone Rust story per page state, run as a headless test | Yes: the kit draws it | No: a CI artifact or a screenshot | Yes (Rust 1.95 or later; a three-minute clean build) | Yes, once the native capture mode collects the screenshots (D3) | In, as the agent's medium; the stories double as the tests (c131 R6). The spike could not screenshot without Screen Recording |
| C · The kit's wasm build in the labthe real UI in a canvas on a design-site page | Yes, if it renders our screens | Yes, in a canvas | Nightly, to build it | Yes, unchanged | Weak: “Showcase only” on nightly (surprise 6); fidelity of text input, tables and fonts unknown |
| D · Figma with a kit-shaped librarythe designers' tool, through the Figma MCP | No | Yes | No | As an input only | An input, not the medium: no Figma library for GPUI Kit is known and Figma → Rust has no skill (Q2) |
| E · Native Shell's playground / TSXTSX over a Rust core, targeting GPUI among others | No: a second framework's rendering | Yes, a browser playground | No | No | Weak: the GPUI target and the desktop features live on main only, four breaking minors in 18 days (surprise 8) |
the source, unchanged (D2); the layer's Tailwind tokens already come from it
light and dark, the kit's 134 roles from one accent, Grape; font.family “Inter Variable” and Geist Mono, bundled (c131 D14)
the same values as CSS on the design site, so the mock and the app cannot drift on colour or type
loaded with Theme::update in ../qnative; the app and its stories share it