Design mode.
A fullscreen session for working out a UI with an agent, grounded in the code you already have. You get one prototype and one written spec, iterated in place, and the spec folds into the idea when you approve it.
01What design mode is
Design mode is a session mode of its own. It never appears in the workflow list, and it always binds to exactly one backlog idea.
The agent gets a deliberately small toolset: read the linked idea, save the spec draft, acknowledge a feedback batch, report the prototype artifact, and mint at most one follow-up backlog task. It also reads files and runs shell commands in the session’s checkout, which is how it grounds a design in the real code, and it holds no board, backlog, or sprint tools.
02Getting in
Three ways in.
-
From the session wizard
Pick the Design card. The idea picker opens in single-select mode, and Start design session launches against the idea you chose.
-
From an idea’s home session
Press Open on a backlog idea card, then choose the Design tile on the idea’s canvas.
-
From Planner’s approve-idea gate
When the context agent flags the idea for design, the plain Approve option is replaced by Approve → design mode and Approve → keep planning. The first ends the Planner run there and hands the idea to a design session. Ship never offers this fork, even when its own context agent flags the idea.
An idea runs one thing at a time. While its home session is mid-turn, or a session it launched is still running, the tiles gray out and say waiting on clarify… or a session for this idea is running. The guard is server-side as well as in the UI, so the launch is refused either way.
To get back into a design session you already have, open its prototype artifact tab and press Design mode.
03The canvas
Design mode takes over the app shell. The top bar carries ← Exit design mode, the DESIGN MODE wordmark, and the session name.
On the right sit the controls that apply to the prototype you have. Make it interactive shows while it is static, Comment once it is interactive, Open in browser once a prototype exists, and Approve design once a spec draft does.
The session’s own chat sits in a narrow left rail. The prototype fills the center.
Exiting does not end or archive the session. The fullscreen state lives in memory only and is not restored after an app restart, so re-entry is always an explicit click.
The first turn fires on its own and shows up as an ordinary user message. The agent reads the idea, asks one round of clarifying questions if the idea leaves decisions open, then produces the first prototype and the first spec draft.
The stage shows pending clarifying questions ahead of anything else. Once a prototype exists it stays on stage through every regeneration, under a translucent working overlay, so it never blanks between turns. Before the first one lands, the whole stage is a working animation.
04Prototype tiers
Make it interactive shows in the top bar while the current prototype is static. The agent is told never to promote the tier on its own judgment and never to go back to static once promoted.
A promotion is a tier change, not a redesign. The agent rebuilds the same design at the interactive tier with the same layout, the same content, and the same element ids, adding only the interaction layer. After it lands, the superseded static tab is hidden.
A session iterates exactly one prototype. Every turn re-reports the same artifact rather than spinning up a second one, and the prototype inlines the style kit’s CSS verbatim.
A kit in .cyboflow/design/, or any kit derived from other source files, drifts as those files change. The agent re-reads those sources each time it grounds a design, and refreshes the kit in place when they have moved. A project’s own live token CSS is read directly and needs no refresh.
An interactive prototype renders in its own isolated process, served over a token-gated local server. Prototype JavaScript cannot reach the app shell. One that busy-loops or leaks memory has its frame killed by a watchdog, and the canvas then offers a respawn instead of wedging.
05Comment mode
Comment mode works on an interactive prototype. A static one has no Comment button at all. On an interactive one the button grays out while a clarifying-question card holds the stage, and reads Entering comment mode… while it loads.
The prototype freezes while you are in it. Click an element, pick how specific the target is from a breadcrumb of its ancestors, and type a note. Drafts collect in a Comments rail on the right, where you can edit or delete them before sending. The composer reads What should change here?
Send feedback (N) hands the whole batch to the agent as a revision turn in the same session. The agent applies the comments, re-reports the prototype, and acknowledges the batch. Until it acknowledges, the comments stay open no matter what changed on the stage.
A sent batch is durable. It survives an app restart and comes back on boot with a note that it may already have been applied. A batch whose session, idea link, or prototype has gone away ends up blocked with a reason, and is never re-delivered.
06Approving a design
Only you can approve. The agent has no approve tool.
The prototype and the written spec advance together. The top bar shows how far apart they are. Before the agent saves a spec there is no Approve design button at all, only the line No design-spec draft yet.
After that the line reads Draft r4 · in sync, or names the revision each one sits at and what to ask for. Ask for a refreshed draft when the prototype has moved ahead, and for a prototype when none is bound yet. Approve design stays disabled until the pair is in sync.
Approve design itself is a two-step in-place confirm, not a modal.
Approving does three things. It folds the spec into the idea’s body as a ## Design spec section. It snapshots the prototype HTML outside the run’s storage, so the design outlives the session, and it stamps the idea’s prototype component complete.
Then design mode exits and offers to start Planner on that idea: Not now, In a new session, or In this session. The last one is disabled when the design session works directly in the checkout or is busy with another run, and the modal says which.
07Where an approved design shows up
A Design button appears on epic and task cards, in the task detail modal, and on sprint lane headers. It opens the approved design for that item’s originating idea.
On an item with no approved design the button is absent rather than disabled. Idea cards on the board do not get it, because an idea’s own design is reached through its home session.
Whatever it opens is labeled with where the design came from. Design Mode means you approved it in a design session. Concept prototype means a Launch, Planner, or Ship run produced it and you approved it at that run’s design gate.
Implementation agents read the same object. Asking for an idea returns its approved design with an on-disk path to the approved prototype, so a sprint lane can open the exact design it is meant to match.
A design you approved in design mode outranks a later flow-produced prototype, and a design gate will not overwrite it.
08The design pass inside a flow
Launch, Planner, and Ship each build a prototype or an architecture design, run an adversarial reviewer over it, and stop at an Approve design gate. All three steps are skipped when neither a prototype nor an architecture design was produced. See the design pass for where it sits in each flow.
The critique gets its own Adversarial review artifact tab. The gate opens with a summary of it: how many blocking defects and advisory findings it raised, and the blocking ones listed by their AR-n ids.
The gate is a decision card on the review queue, with two buttons.
- Continue, log as findings files every reviewer entry as a non-blocking accepted-risk finding and carries on with the run.
- Rerun planning with findings re-runs the design steps with the critique as feedback.
Revisions are bounded at five. A sixth ends the run as rejected instead of looping again, and the gate says so once any revision has been used.
Approving also makes the prototype durable. It is snapshotted and bound to the ideas that run owns, so it stays reachable from the tasks the run produced long after the run is gone.
When a Planner batch carries more than one idea with an architecture design, the inline gate is replaced by an Approve designs artifact tab. There you approve or deny each idea’s design one at a time.