Every check passed. The screens still had nothing to look at.

Personal project, 2026. Design and build, solo.

I built a tool that turns a written brief into a design system and example screens. Its checks all passed on screens my own eye rejected.

The story in four pictures

Name

Itinerary Visualizer

One line

One outing with friends or family, planned as a timeline.

Must-haves

12 components

Three fields in. A design system and five linked screens out.

13 led the eye

9 let it wander

I labeled all 22 screens by eye before trusting my own check.

0 of 5 measures beat the floor

The floor is what you score by calling every screen a lead, 13 of 22. The bar I set was 80%.

No check I wrote could see what my eye saw.

Run 1

Run 2

The foot of the same screen in both runs. Run 2 marks where the missing tab bar belongs.

Premise

Starting a design system is slow.

You need colors, type, spacing and components in every state before you can design anything. I wanted to see how much a tool could generate from a short brief, and whether I could steer it by pointing at things.

What I built

Landfall turns a three-line brief into a working design system and five linked example screens.

It offers four visual directions, one that follows convention and three that depart from it. You pick one, pin a comment on anything you want changed, and it edits only what you pinned.

A pin on a color token

My pin: “accent, focus, and error colors seem too close to each other. For accessibility purposes, may need revisiting”

Landfall: “Four options, A applied. … focus #B04300→#141717, the ink … error #A3164B→#7A0D37, same 337° hue one step darker”

A pin on a component

My pin: “Hover is unnecessary, since this is just for a mobile app. Remove this variant entirely.”

Landfall: “Removed hover from Card: meta.states is now default, focus, active … Card only, as pinned.”

Two pins from the second run, in my words and the tool’s. Each changed one file: the tokens, then the Card.

I ran the same brief twice, eight days apart, and changed only the tool. The brief never asked for navigation, and the second run said so.

The judgment moment

Both runs passed every check.

Then I clicked through the second prototype and my eyes wandered all over the page. Nothing led. I wanted the tool to catch that itself, so every screen it makes has a clear visual hierarchy.

My first explanation was that the type scale had no size above the section heading, so I built a check on it and made it a gate. Before trusting it, I labeled all 22 screens. Four of the first run’s five screens led without any larger size. The explanation was wrong, and I turned the gate into a warning the same day.

Then I scored five measures against my labels, with the bar set before the first score. None beat calling every screen a lead.

Proof

Both runs cost about the same and finished in under half an hour.

The second had twice as many links between screens.

Cost per run

$16.27to$16.31

Run time

25 minto28 min

Prototype links

13to26

Run 1 to run 2. Same cost, same time, twice the links.

Constraints

The validator rejects any raw color or pixel value, so a component can only use the system’s tokens.

It does not check contrast yet, and a green validator only says the files are well formed.

On four of the five screens where the main button was the heaviest thing, I said the screen wanders.

A third run tests that. My labels are one person’s, and I built the tool.

wanders

leads