Native Design Prototyping
Next: qnative c5 lands D21 in B (Status as the landing, Sensor, Activity) and the bake-off page wipes A over the new B; c131 D17's routes replace the bridge; a world per state retires the knob and the story parameter; Events, Config and Connect next through the same loop.
The way we sketch and review screens today depends on web pages, and the new desktop app is not a web page.
The five-step loop stays. The bake-off put a web look-alike of three screens beside the real desktop app on the same sample data: the look-alike took an agent twelve minutes, the real screens an hour on a day of groundwork, and the two agree row for row. Mark picks which one is the medium.
Documents
With file names, on their own page →Start here
Documents
Reviews
What changed
The seven changes that matter most, in plain words. Open any one to see it.
- 1
We drew the same three screens two ways, a quick web look-alike and the real app, on the same sample data, and put them side by side so the way to draw screens can be chosen on evidence.
A beside B on the same rows · came from Mark Parsonopen →
- 2
The desktop app's frame now exists as a web page we can fill with our usual parts, so anyone with a browser can sketch a native screen.
The native skin on the design site · came from Mark Parsonopen →
- 3
The real app can now be photographed in every sample world automatically, so no comparison has a missing side.
Every story per world, into the atlas · came from Mark Parsonopen →
- 4
The desktop app's first screen, the one that says whether the sensor is on and what it found, now exists both as a sketch and for real, in every sample world, and the two agree.
Status through the loop · came from Mark Parsonopen →
- 5
The desktop app's first group of screens is settled: a landing that says whether the sensor is on and what it found, a page for the sensor itself, and a page of sessions over time.
This machine: Status, Sensor, Activity · came from Mark Parsonopen →
- 6
The five steps we use today stay; what changes is the tool used to draw and photograph each screen.
The design loop for native screens · came from Mark Parsonopen →
- 7
Real screens are drawn in the app itself; the web look-alike is for quick sketches and for people without the tools, and it stays around as the place to review.
The medium, picked · came from Mark Parsonopen →
- There is now a written way to draw, try, review and ship a desktop screen, and a tool that turns a sketch into a real, tested, photographed screen. In words
- Both the look-alike and the real app read the very same sample data, so when they differ it is the drawing that differs, never the numbers. In words
How we got here
Each change, traced back to the conversation it came from. A solid mark means the record names the source; a dashed one was matched by the draft and waits for review.
“we move the entire. UI that you have been working on out of Qcontrol... the control plane is something you connect to, Qcontrol is the thing you deploy.”
market-analyst /calls/1b21a3ce… (local)c132-D1 The medium, ruled from the bake-off: B, the stories crate in qnative, is the medium of record for a native screen (the real thing, the stories are the tests, captures solved); A, Vue mocks in a native skin on the design site, is the medium to sketch and to review, for a person without a toolchain and for an agent sketching before Rust. The plan's default had been C if it works, else B, A for ideation only; the primer removed C and the bake-off promoted A to the person's review medium. — Mark Parson
c132-D6 Rows in mocks are never invented: the lab reads the same named synthetic worlds as the native app through useNativeWorld(name), and a mock names its world the way a story does, so a lab capture and a native capture show the same rows (c131 D15). — Mark Parson
c132-Q1 Who mocks native screens: both Mark and agents, at different times, and 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. — Mark Parson
We drew the same three screens two ways, a quick web look-alike and the real app, on the same sample data, and put them side by side so the way to draw screens can be chosen on evidence.
From the record: no recorded conversation behind this one.
c132-D6 Rows in mocks are never invented: the lab reads the same named synthetic worlds as the native app through useNativeWorld(name), and a mock names its world the way a story does, so a lab capture and a native capture show the same rows (c131 D15). — Mark Parson
The desktop app's frame now exists as a web page we can fill with our usual parts, so anyone with a browser can sketch a native screen.
From the record: no recorded conversation behind this one.
c132-D3 Native captures live in the same manifest and atlas as web captures, with a surface: native field. Default; to rule at kick-off. — Mark Parson
c132-D6 Rows in mocks are never invented: the lab reads the same named synthetic worlds as the native app through useNativeWorld(name), and a mock names its world the way a story does, so a lab capture and a native capture show the same rows (c131 D15). — Mark Parson
The real app can now be photographed in every sample world automatically, so no comparison has a missing side.
“we move the entire. UI that you have been working on out of Qcontrol... the control plane is something you connect to, Qcontrol is the thing you deploy.”
market-analyst /calls/1b21a3ce… (local)c132-D1 The medium, ruled from the bake-off: B, the stories crate in qnative, is the medium of record for a native screen (the real thing, the stories are the tests, captures solved); A, Vue mocks in a native skin on the design site, is the medium to sketch and to review, for a person without a toolchain and for an agent sketching before Rust. The plan's default had been C if it works, else B, A for ideation only; the primer removed C and the bake-off promoted A to the person's review medium. — Mark Parson
c132-D6 Rows in mocks are never invented: the lab reads the same named synthetic worlds as the native app through useNativeWorld(name), and a mock names its world the way a story does, so a lab capture and a native capture show the same rows (c131 D15). — Mark Parson
c132-D8 When a page exists as a story, its Vue mock stays as the person's medium, naming its world so the story stays checkable against it. — Mark Parson
c132-D10 Until the sensor's six endpoint-only shapes have qdash routes (c131 D17), they get a clearly marked bridge fixture per world beside the world copies, typed from synthetic-data.md, named as a bridge in the footer and the record; the same bridge feeds the story in the native app. — Mark Parson
The desktop app's first screen, the one that says whether the sensor is on and what it found, now exists both as a sketch and for real, in every sample world, and the two agree.
From the record: no recorded conversation behind this one.
c132-D6 Rows in mocks are never invented: the lab reads the same named synthetic worlds as the native app through useNativeWorld(name), and a mock names its world the way a story does, so a lab capture and a native capture show the same rows (c131 D15). — Mark Parson
c132-D10 Until the sensor's six endpoint-only shapes have qdash routes (c131 D17), they get a clearly marked bridge fixture per world beside the world copies, typed from synthetic-data.md, named as a bridge in the footer and the record; the same bridge feeds the story in the native app. — Mark Parson
The desktop app's first group of screens is settled: a landing that says whether the sensor is on and what it found, a page for the sensor itself, and a page of sessions over time.
“we move the entire. UI that you have been working on out of Qcontrol... the control plane is something you connect to, Qcontrol is the thing you deploy.”
market-analyst /calls/1b21a3ce… (local)c132-D1 The medium, ruled from the bake-off: B, the stories crate in qnative, is the medium of record for a native screen (the real thing, the stories are the tests, captures solved); A, Vue mocks in a native skin on the design site, is the medium to sketch and to review, for a person without a toolchain and for an agent sketching before Rust. The plan's default had been C if it works, else B, A for ideation only; the primer removed C and the bake-off promoted A to the person's review medium. — Mark Parson
c132-D3 Native captures live in the same manifest and atlas as web captures, with a surface: native field. Default; to rule at kick-off. — Mark Parson
c132-D4 The review stop is the lab's review walk for a browser medium and a captures page for the stories crate. Default; to rule at kick-off. — Mark Parson
c132-Q1 Who mocks native screens: both Mark and agents, at different times, and 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. — Mark Parson
The five steps we use today stay; what changes is the tool used to draw and photograph each screen.
“we move the entire. UI that you have been working on out of Qcontrol... the control plane is something you connect to, Qcontrol is the thing you deploy.”
market-analyst /calls/1b21a3ce… (local)c132-D1 The medium, ruled from the bake-off: B, the stories crate in qnative, is the medium of record for a native screen (the real thing, the stories are the tests, captures solved); A, Vue mocks in a native skin on the design site, is the medium to sketch and to review, for a person without a toolchain and for an agent sketching before Rust. The plan's default had been C if it works, else B, A for ideation only; the primer removed C and the bake-off promoted A to the person's review medium. — Mark Parson
c132-D6 Rows in mocks are never invented: the lab reads the same named synthetic worlds as the native app through useNativeWorld(name), and a mock names its world the way a story does, so a lab capture and a native capture show the same rows (c131 D15). — Mark Parson
c132-D7 The native skin's chrome stays an imitation in app/components/native (the kit's shell drawn with our tokens), re-checked at each review stop by a wipe against a capture of the real shell; no Vue port of the kit's Shell, no compositing of mocks into shell PNGs. — Mark Parson
c132-D8 When a page exists as a story, its Vue mock stays as the person's medium, naming its world so the story stays checkable against it. — Mark Parson
c132-Q1 Who mocks native screens: both Mark and agents, at different times, and 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. — Mark Parson
Real screens are drawn in the app itself; the web look-alike is for quick sketches and for people without the tools, and it stays around as the place to review.
Thanks to
People outside Qpoint first. Every thank-you points at something they said or made.
Picked the medium: the stories crate of record, the native skin to sketch and review
Answered the cycle's first question on 2026-11-09: a person without a Rust toolchain and an agent with one must both be able to mock, and every page state must end as a captured, reviewable artifact. Ruled Inter bundled (c131 D14), which the token bridge carries. On 2026-11-11 ruled the lab adopts the native app's named worlds (D6), kicked the bake-off off and, the same evening, picked from it: B of record, A to sketch and review (D1), the chrome an imitation checked by a wipe (D7), a mock outliving its story (D8).
Chose the framework the loop has to reach
The decision to build the app on GPUI is what takes the DOM away from design's tools; the loop is rebuilt because of it.
“we move the entire. UI that you have been working on out of Qcontrol... the control plane is something you connect to, Qcontrol is the thing you deploy.” internal
All images
Every picture from this cycle. Click any one to step through them all.
The pairs
Everything captured · 16
The full record 11 decisions · 13 key-change entries · 5,600 words · 76 captures
The record stays as written, for agents and for audit: Key Changes, every decision, the artifacts and the visual record.
Open the record for c132 →