Blueprint Mode: design before you code

The most expensive mistake in software is building the wrong thing. You spend three days writing a dashboard layout, show it to a stakeholder, and hear "that's not quite what I had in mind." Blueprint Mode is designed to catch that before a line of code is written.

How Blueprint Mode works

When you describe a significant UI change — a new page, a multi-section layout, a component tree with four or more new components — Dubleu renders a visual wireframe in the chat before writing any code. Each section of the UI is a labeled rectangle. Navigation flows are shown as arrows.

You can approve the blueprint as-is, ask for changes ("move the sidebar to the right", "add a header above the table"), or start over with a different description. Once approved, Dubleu builds exactly what the blueprint shows — component by component.

Blueprints are saved

Every approved blueprint is saved to .tasks/blueprints/ in your project. Future agent sessions can reference them — so if you ask to "add a notifications panel like the one in the dashboard blueprint", the agent knows exactly what that means.

When to use it

Blueprint Mode activates automatically for large UI changes. For small changes — adding a button, fixing a style, changing a color — Dubleu skips the blueprint and writes the code directly. You can also invoke it explicitly with /design if you want a wireframe for a smaller change.