---
title: See it before you build it
description: "22 canvases and review pages: why I need to see a design first, what the boards caught and missed, and how my reviews became 15 rules."
url: https://secretocho.design/notes/see-it-before-you-build-it/
type: BlogPosting
published: 2026-10-19
---

# See it before you build it

> 22 canvases and review pages: why I need to see a design first, what the boards caught and missed, and how my reviews became 15 rules.

2026-10-19 · 11 min

*Part 3 of 7 in the [Building Novi Kvadrat](#the-series) series.*

Between the research in Part 2 and the implementation plans, there was a step I wouldn’t skip. Planning this series, I put it like this (my own prompts and words are quoted with the spelling fixed): “Claude Design is one of the main parts as I am a designer, I want to see, and make comments and see the bigger picture before implementation plan.”

This part is about that step, and what my reviews became after it.

## I need to see it first

A written plan tells me what will be built. It can’t tell me whether a page feels calm or crowded, whether a number fits its box on a tablet, or whether a new screen sits well beside the old ones. I notice those things by looking.

Agents make that gap wider: a builder agent builds what the words say, so wrong words make a wrong build, fast. The order became research, then a canvas, then my pick, and only then the plan.

## What a canvas is

A canvas in Claude Design is a web page of boards, private unless I share it: HTML drawings at a fixed size, arranged on pages, with sticky notes beside them. A whole feature fits on one canvas, and each board can be read at 1:1.

The canvases settled into one anatomy. The 3D Buildings Studio canvas shows the pages: 25 boards on four, called why, studio, public and spec, with 3, 11, 6 and 5 boards.

- **Why** comes first, and it’s research: what is wrong today, beside a capture of the current screen. For the 3D studio, a scout had “verified 88 issues (17 high)”.
- **The recommended direction** follows, drawn 1:1 at 1440 px and at 390 px for a phone, with a dark band. Where a direction was still open, as on the homepage, the admin dashboard, the listing hero and the floor-plan editor, **the alternatives** got a page of their own.
- **Spec** comes last: what builds each part, what feeds each number, and the open decisions. On the Site Plan Studio canvas they sat on a note titled “DECISIONS FOR THE OWNER (recommendation after the arrow)”.

The boards aren’t drawn by hand. They come from generators in the repository: a brief that binds the builders, one script per board, and a gate that checks every board for emoji, shadows, left strokes, the wrong fonts and any icon that isn’t from Phosphor. Builder agents draw, and on most canvases reviewer agents check the boards before I see them. Where real numbers exist, the boards use them: the homepage boards drew on one file of facts, “the ONLY numbers/names/copy — all real, counted 2026-09-20”.

## Twenty-two canvases

Between 26 July and 18 October 2026, Novi Kvadrat got 22 canvases and design review pages. Twelve are canvases proper; the rest are viewers, review pages such as the first logo concepts, one options board for the blog editor, and the press page’s option boards.

The biggest is a capture of the whole interface, with the design-system pages that grew beside it: 145 boards on 11 pages in the copy I can still open; the fullest copy reached 151 boards on 12 pages. Then the email system with 55, sign-up with 34, the listing page hero with 30 artboards in its second round, Site Plan Studio and 3D Buildings Studio with 25 each, the component library with 19, the floor-plan editor with 17, the press page with 16, the admin dashboard and the path editor with 10 each, the homepage with 9 and the drawing tools with 8.

- **interface capture and design-system pages**: 145 · the fullest copy: 151
- **email system**: 55
- **sign-up**: 34
- **listing page hero**: 30 · artboards, round two
- **Site Plan Studio**: 25
- **3D Buildings Studio**: 25
- **component library**: 19
- **floor-plan editor**: 17
- **press page**: 16
- **admin dashboard**: 10
- **path editor**: 10
- **homepage**: 9
- **drawing tools**: 8

The diagram, step by step:

1. The biggest is a capture of the whole interface, with the design-system pages beside it: 145 boards in the copy I can still open, 151 at its fullest.
2. Then the email system with 55, and sign-up with 34.
3. The listing page hero’s second round: 30 artboards.
4. Site Plan Studio and 3D Buildings Studio: 25 each.
5. The component library: 19. The floor-plan editor: 17. The press page: 16.
6. The admin dashboard and the path editor: 10 each. The homepage: 9. The drawing tools: 8.

*a whole feature fits on one canvas, from 8 boards to 55; the whole interface took 145.*

On the capture, on 2 and 3 September, I made the calls for the design system’s second version, such as Phosphor as the one icon library: “it is my favourite … we should definitely use this library.” The 19-board component library followed, and the code layer landed on 9 September. The [design-system case study](https://secretocho.design/work/novi-kvadrat-design-system/) tells that story.

The transcripts, from 14 September to 18 October, show about 31 hours of design-only sessions, as an estimate. That’s a floor: looking at a canvas leaves no trace.

## Fast, when it was right

All times here are UTC.

On 2 October at 09:17 I asked for every email we send, redrawn in our design language: “create a Claude Design file with all email variations we need.” Its audit page said what we had: “23 emails go out … Four looks”, none with the logo, the brand blue or our typeface, and “None has an unsubscribe link.” The other pages drew every email by audience, 55 boards in all. At 10:14 I wrote: “these are all good, please prepare all of these, thank you.” That was 57 minutes after the ask, and six builder agents built it the same day (`f5ac91124`). Later that day, sign-up went the same way: asked at 16:52, approved at 17:57 with “yes this is much better”, shipped on 4 October.

The closest pair came on 20 September. At 20:50 and 20:53 I asked for two canvases, the homepage and the admin dashboard, each analysed and redrawn on our updated design system, with alternatives asked for the homepage. At 22:08 I typed, about the homepage: “option A is much better, please prepare implementation plan for it.” At 22:28, twenty minutes later, I typed the same sentence about the admin dashboard.

Both times, A was the canvas’s own recommendation: “The Market Paper” and “the Command deck”. The code landed the next day, 21 September: the homepage’s first phases in `87e018635`, the deck’s first phase in `4dc7f3a74`. On 22 September the deck replaced the old dashboard: “AD4 cutover: the deck is the admin dashboard, and v1 is gone”.

| utc | homepage | admin dashboard |
| --- | --- | --- |
| 20:50 | canvas asked, with alternatives |  |
| 20:53 |  | canvas asked |
| 22:08 | “option A is much better …” |  |
| 22:28 |  | the same sentence |
| 21 Sep | first phases land: 87e018635 | first phase lands: 4dc7f3a74 |
| 22 Sep |  | the deck replaces the old dashboard |

The diagram, step by step:

1. 20:50 UTC: I ask for a homepage canvas, analysed and redrawn on our updated design system, with alternatives.
2. 20:53: the admin dashboard, analysed and redrawn the same way; alternatives were asked for the homepage only.
3. 22:08, about the homepage: “option A is much better, please prepare implementation plan for it.”
4. 22:28, twenty minutes later: the same sentence, about the admin dashboard. Both times, A was the canvas’s own recommendation.
5. 21 September: the homepage’s first phases land in 87e018635, the deck’s first phase in 4dc7f3a74.
6. 22 September: the deck replaces the old dashboard.

*with the options side by side, each pick took one line.*

## How I actually reviewed

Mostly, I didn’t review with comments pinned to boards: I looked at the canvas in the browser and typed one line into the session. Every canvas I can still open has no comment threads, and of my roughly 600 typed prompts in the five weeks the transcripts cover, only 13 short ones, pasted briefs aside, name Claude Design, a canvas or an artifact. The review lived in lines like “For all open question or decision we can go with recommended decisions.”

I also want to watch a design form: “while you are working you can update the Claude Design artifact, so I can see progress” (14 October). Two team members can open the canvases too, and they review the design work as well.

The exception was Admin Bars, on 18 October. At 18:44 I asked to “collect all navbars, bars and place them in Claude Design”. The canvas gathered 124 crops of every bar and drew options A, B and C. At 19:30 I picked B with eight numbered changes, and asked: “for each page add current and recommended bar designs so I can comment and approve.”

So I commented in the canvas. Six times, on a table’s title-and-count row, I wrote “why we need this bar”. The first replies in those six threads were posted automatically, and they guessed from the labels: “Going by its label, …”. They were wrong. The session said so, “the auto-replies there guessed wrong”, and corrected each thread: “It’s removed on every page now.” The plan dropped that row above every table: the tabs already carry the counts. After “now you can implement” at 20:31, the program reached main the next morning, squashed from 61 commits (`191c6f3d7`).

## What the canvases caught

Most feature canvases carry an audit of the current screen, so a lot was caught before any code:

- the 23 emails with no unsubscribe link, and a lease email that opened the landlord portal instead of the tenant’s page;
- a project page that said “20 buildings in this project”, where “The 20 rows are the 20 OpenStreetMap ways of 7 touching clusters; the developer sells 8 buildings”. The fix landed on 29 September (`63febd702`);
- on the homepage, totals that contradicted each other, dark-mode text at 2.9:1 and a phone page 9,051 px tall;
- in the interface capture, “FIVE card languages coexist”, and four places with the coloured left stroke I’d banned in August.

## Where the canvas was wrong

**A board can be wrong about the data.** The admin dashboard board drew an activity feed with verbs like `blog_posts.publish` that the database never writes. In the build, four of the seven activity rows read “Event recorded”, yet “in production 999/1000 resolve”: the test fixture had been built to match the board. “The FIXTURE was.” A probe of the real schema found a dozen more places where “the BOARD was wrong”, among them a table that doesn’t exist. The plan carries a rule for this, “The canvas ≠ live data”, and memory got a sharper one: “A fixture must not be wrong in order to keep a test honest.”

**A drift can hide at the widths you drew.** On 21 September I gave four corrections to the new homepage’s first screen, as screenshots of the live page beside its board. Three were places where the build had drifted from the plan’s own words. The note on one says why nobody saw it: “At 1440 and 390 the two are identical, which is why the deviation was invisible on the board, in the gallery and in every gate”. My own screen is 2,544 px wide, and there it showed. The fix commit: “Measured at 2544: fills 0→2544, inner columns 552→1992.” Today a rule says every changed screen is shot at 1920, 1440, 1100, 768 and 390 before anyone reports it done.

|  | the finding | the canvas |
| --- | --- | --- |
| emails | 23 go out, and none has an unsubscribe link | caught before any code |
| a project page | “20 buildings”, where the developer sells 8 | caught before any code |
| the admin activity feed | verbs the database never writes; in the build, 4 of 7 rows read “Event recorded” | wrong: the board invented its data |
| the homepage’s first screen | a drift from the plan, identical at 1440 and 390 | missed: it showed at 2,544 px |

The diagram, step by step:

1. The email canvas’s audit: 23 emails go out, and none has an unsubscribe link. Caught before any code.
2. A project page says “20 buildings in this project”, where the developer sells 8. Caught, and fixed on 29 September.
3. The admin dashboard board draws activity verbs the database never writes. In the build, four of seven rows read “Event recorded”: the test fixture was built to match the board.
4. The homepage’s first screen drifts from the plan, invisibly at 1440 and 390. My 2,544 px screen shows it.

*an audit catches what is there; a board can’t vouch for its own data or the widths it didn’t draw.*

## When the canvas lost

A canvas is a proposal, and three times it lost.

**To my own eye.** On 14 September the listing hero canvas recommended B, “Split stage”. I picked C, “Immersive”: “other options looks more generic. We don’t want to be generic. I didn’t see point cloud (lidar) – it might be another level for us.” The point-cloud board had been on page 2, where I missed it. Round two came the same day, with 30 artboards and the point cloud moved to page 1.

**To the stakeholders.** The homepage’s Option A had a Market pulse chart at its heart. On 25 September I passed on the stakeholders’ feedback: “homepage needs to more clean. They don’t want long texts, and want it to keeping it simple and short possible. We don’t need Market pulse chart as well. … they want something behind.” The fold became a heading and a search card over a backdrop. The stakeholders’ feedback beats a board.

**To a model city.** The backdrop had its own contest: six options, three finalists and, on 25 September, a committed test: “Homepage backdrop A/B/C test: a random finalist on every visit, with results in the admin”. The same day I sent in a short clip someone had posted on X, and a model city came out of it. I wrote: “yes this is really another level. We can go with this one. No need A B testing.” Two hours and twenty minutes after the test, by commit time: “Home hero: the model city backdrop wins outright; the A/B/C test is cancelled”. The backdrop that shipped was on no canvas.

## From the board to the code

The plans cite boards as binding: the homepage plan names the board HomeOptionA as its “Design source (binding)”, and kickoffs name boards down to the section. The design-system code goes further. Its plan says every component file starts with a comment naming its board and section, and 199 of the layer’s 209 source files, not counting the gallery pages, do (the ten that don’t are the listing-stage media parts):

```
// DS · Buttons §2 Variant × size matrix · §3 States · §4 Leading icon …
```

1. **research, then a canvas** · why · direction · alternatives · spec
2. **my pick** · one typed line
3. **a plan** · cites boards as binding
4. **code** · names its board and section
5. *my review* · **a written rule** · 15 numbered rules

the rules file wins over a board

The diagram, step by step:

1. Research first, then a canvas: why, the recommended direction, the alternatives where a direction is open, and the spec.
2. I look at it in the browser and pick, in one typed line.
3. Only then the plan, and it cites the boards as binding.
4. In the design-system code, 199 of the layer’s 209 source files, not counting the gallery pages, start with a comment naming their board and section.
5. After the builds I review, and the same corrections keep coming back. They become 15 numbered rules.
6. When a plan, a board or a builder brief disagrees with the rules file, the file wins.

*the plan comes after the pick, and the rules from my reviews outrank the boards.*

## From reviews to rules

After the builds, I kept giving the same corrections.

On 24 August, looking at cards in the portal inbox, I wrote: “Cards never should have this colored thick border. This shows that it was made by Claude. It is OK. But everybody complain about this approach.” It became a rule, and the memory note behind it calls the colored edge the single most recognizable tell of AI-generated UI, “decoration standing in for hierarchy”.

On 14 October I reviewed the new analytics screens, designed on a canvas and shipped that day:

- “the top part really need complete re-design. Everything is everywhere.”
- “Never show data number like 1,… – it should adapt the size.”

Earlier that day, on the old analytics page, I had written “I really hate this layout shift”, because the scrollbar on the longer tab pushed the whole layout sideways. That line became a standing rule in the rules file too.

The “1,…” had a board behind it: a design-system part had followed an old board rule, “the value truncates second, the delta never truncates”, so tablets showed “1,…” next to a full “+228%”.

The next morning I asked: “set a rule so when we make a re-design, Claude has the memory.” That day, 15 October, the repository got its first `CLAUDE.md`, about ten months in, and `docs/design-system/REDESIGN-RULES.md`: 15 numbered rules, grouped under headings that quote the review lines they came from. The same layout mistakes had kept coming back, and each fix cost me a review round. The file settles who wins: “When a plan, a board or a builder brief disagrees with this file, this file wins unless the owner rules otherwise.” A program called Admin Bands then put 144 admin routes in line with it on main, by 18 October.

| when | from review to rule |
| --- | --- |
| 24 Aug | coloured card borders: “This shows that it was made by Claude.” |
| 14 Oct | the old analytics page: “I really hate this layout shift” |
| 14 Oct | the new analytics screens: “Everything is everywhere.” “Never show data number like 1,... -- it should adapt the size.” |
| 15 Oct | the next morning: “set a rule so when we make a re-design, Claude has the memory.” |
| that day | REDESIGN-RULES.md: 15 numbered rules, and the file wins over a board |
| by 18 Oct | Admin Bands: 144 admin routes in line with it, on main |

The diagram, step by step:

1. 24 August, on cards in the portal inbox: “Cards never should have this colored thick border. This shows that it was made by Claude.” It becomes a rule.
2. 14 October, on the old analytics page, where the scrollbar pushes the layout sideways: “I really hate this layout shift.”
3. Later that day, on the new analytics screens: “Everything is everywhere.” And: “Never show data number like 1,... -- it should adapt the size.”
4. 15 October, the next morning: “set a rule so when we make a re-design, Claude has the memory.”
5. That day, REDESIGN-RULES.md: 15 numbered rules. When a plan, a board or a builder brief disagrees, the file wins.
6. By 18 October, Admin Bands has put 144 admin routes in line with it, on main.

*a correction given twice belongs in a file that outranks the boards.*

Two smaller stories belong here. New screens were built as twins, shown only when a cookie, `nk_shell`, said v2. I saw the new interface in Safari and the old one in every Chromium browser, because nothing in the app had ever written that cookie: it had only ever been set by hand, in a browser’s developer tools. On 21 September one line made v2 the default, and 44 pages flipped.

And on 10 August a voxel terrain background went onto the homepage hero at my request, committed at 17:04 UTC. At 17:20, sixteen minutes later by commit time, it was reverted: “I don’t like it.” The memory got one line, “Don’t propose the voxel look again”. That’s a rule too.

## What I’d pass on

**Draw the alternatives, even when you expect to pick the recommendation.** Twice in one night I picked the recommended option A, and I could say “much better” only because the others sat beside it. On the listing hero, an alternative won.

**Put the audit on the canvas’s first page.** The missing unsubscribe link and the “20 buildings” were caught there, before a plan existed.

**Ask which numbers on a board are real.** A board with invented data is worse than none, because the fixture copies it and the tests agree with it.

**Look at the widths you didn’t draw.** 1440 and 390 hid a drift that my own 2,544 px screen showed. Five widths is now our minimum.

**When you give the same correction twice, write it where every builder reads it, and let it outrank the boards.** Our rules file came mostly out of one night of reviews, with two older rules folded in and two sharpened the next morning, and it lives in the repository, where every session and teammate sees it.

Every one of those screens ships in five languages, because the platform is for foreigners like me. That’s Part 4.

## The series

1. [Three flats and a platform](https://secretocho.design/notes/three-flats-and-a-platform/)
2. [Research before anything](https://secretocho.design/notes/research-before-anything/)
3. See it before you build it
4. [Five languages, five of every mistake](https://secretocho.design/notes/five-languages-five-of-every-mistake/)
5. [Drawn, not recognized](https://secretocho.design/notes/drawn-not-recognized/)
6. [Silently](https://secretocho.design/notes/silently/)
7. [More hours than I should](https://secretocho.design/notes/more-hours-than-i-should/)

[cd ..](https://secretocho.design/notes/)