The Spec tab
Write and shape the spec on the Spec tab, from the vision and story map to releases, filters, story cards, the data model and design.
Spec is where you say what to build. It has its own row of sub-tabs: Vision, Story map, Data model and Design. On a phone the strip shows Vision, Story map and Design. Tap the page name at the top to switch sub-tab after the strip has scrolled away.
Vision
Five questions about who the product is for and why it should exist. A new project opens here, and the rest of Spec, Plan and Validate stay locked until all five have an answer. The tab shows how many you've answered, for example 3/5.
When they're done, Generate the story map drafts a map from your answers for you to review and publish. See Creating a project and Vision.
Story map
The story map lays out your product as the things people do in it.
- Activities run across the top, in the order a person goes through them.
- Stories sit under the activity they belong to, one card each.
- Releases group the stories into rows: release 1 first, then later releases, then Go live.
On desktop, the strip above the map switches between card and list views, groups stories into release lanes or shows them by activity alone, and opens Personas. Choose Add story to add one. Click a card to open the story beside the map.
The page may ask Does this cover everything?. Answer it, choose Help me to have the assistant interview you about what's missing, or Copy prompt to take the same job to your own agent. It asks again when stories change. See Working with agents.
Releases and filters
Two filters choose which stories you see. Spec, Plan and Validate share them, so a release you pick on one tab is the one the others show.
Releases lists every release by name.
- Pick one to see only that release, or tick several. All releases clears the choice.
- Each release shows how much of it is approved. A release whose every story is approved says Ready to ship; a shipped one says ✓ Shipped.
- New release adds the next release.
Filter by status lists the statuses in the order work flows: To do, Ready for dev, In progress, Needs rework, Dev complete, Approved, and Cancelled. With nothing ticked, you see every story except cancelled ones. Cancelled stories appear only when you tick Cancelled.
On a phone, both filters sit behind one pill at the top right, with a count of what's applied. The sheet also has a View option that hides activities with nothing to show, and Clear to reset everything.
Story cards
A card shows the story's key, its title and its status. It also shows at most one thing that needs you, in this order: a blocker, which agent is building it, Merged · waiting for its criteria to be reported, Spec changed since it was built, or Regressed.
On a phone the card's colour is the status, and a small word at the right says it in words too:
| Status | Card | Word |
|---|---|---|
| To do | Grey | to do |
| Ready for dev | Light blue | ready |
| In progress | Light blue, with a green left edge | in progress |
| Needs rework | Lavender, with an orange left edge | rework |
| Dev complete | Lavender, title struck through | dev complete |
| Approved | Green, title struck through | approved |
| Blocked | Light red, with a red left edge | blocked |
| Cancelled | Grey, title struck through | cancelled |
Blocked wins over any other status, because it's the one that needs you. On desktop, cards keep a status pill with the same words.
Data model
On desktop, Data model is a placeholder for now. It isn't on the phone's strip.
Design
Design gathers the screens attached to your stories, grouped by the activity they belong to. Each screen names the stories it covers. One screen attached to three stories shows once, covering all three.
With nothing attached yet, Design from your spec explains the loop:
- Pick an activity. The screens are designed against its stories, not from scratch.
- Ask the assistant here, or choose Copy prompt and paste it into your own coding agent.
- Approve a screen and it's saved to its stories. It appears here, by activity.
An agent attaches a screen with save_design and reads it back with get_design. You can attach one yourself from a story's Plan tab. A screen can be a Figma frame, a Claude design, an image, a Storybook story, or a path in the repo. See The story page.