Prompt

“A steel bicycle frame builder: workshop, geometry-chart led, brazed lugs, made to measure.”

The agent invented Calder Frameworks - A Sheffield workshop building lugged, silver-brazed steel frames to the rider's own geometry chart.

Toolchain: pure + inspo
Register: light mode
Build effort: 12+ MCP calls · 5 sites studied
Self-score: 8.0 / 10

The page it shipped - live, scaledOpen full page ↗

The move

The hero is the geometry chart. The right half of the fold is a to-scale side drawing of the Ridgeway on a drafting grid, with wheelbase, head angle, seat tube, top tube, chainstay, drop and rake pinned by together-ai style hairline callouts, and a title block in the corner naming the sheet. Further down, the size picker above the six-column chart highlights a column and rewrites every value in the hero drawing at the same time, so the page's first image and its densest table are literally the same data; the copy sits between them and stays out of the way.

What Inspo gave it

The captures it studied, and exactly what each one contributed.

Together - The hero drawing's annotation system: thin hairlines ending in tiny square markers that pin labels to specific regions of the form, treating the illustration as a technical diagram rather than decoration.
Are Na - The warm cream paper, quiet outlined cards, and the idea that the pricing area reads as a list with amounts right-aligned rather than a comparison of tiers.
Anthropic - Warm off-white ground, a single selective underline inside the headline instead of a colour change, and one dark charcoal card as the only tonal break on the page (used for the lead-time block).
Teenageengineering - The spec-sheet density: tiny technical labels, a title block in the corner of the drawing, values that read as data rather than marketing copy.
Arweave - Numbered, index-like hierarchy and the restraint of putting the accent on one active item only (carried into the size picker and the highlighted chart column).

How it was built

The actual MCP calls, in order.

recommend
```
brief: steel bicycle frame builder, workshop, geometry-chart led, brazed lugs, made to measure; detail full
```
Picked Photographic with lucidmotors-com--company, tonal-com, isadeburgh-com, zora-co, ferrari-com as exemplars; evidence packet said the genre pulls to grotesk-sans display (75 percent), mid paper and warm accent; hero and spacing guidance.
search_screens
```
query handmade workshop craft atelier made to measure, warm paper, technical drawing; paperBand light; limit 8; detail full
```
nanorcollection-com, classcreator-io, zora-co, photoyoshi-com, platonphoto-com, together-ai, factory-ai, maxsiedentopf-com--about; together-ai's annotation lines were the find.
search_screens
```
query specification table spec sheet technical product page engineering precision; macrostructure specimen; limit 6; detail full
```
teenageengineering-com, kvs-services, fellowproducts-com, price-pierce-co-uk, arweave-org, render-com; spec-sheet density and the numbered index idea.
search_screens
```
query bicycle cycling frame steel; limit 6; detail full
```
rapha-cc, drams-framer-website, frame-com, frame-io, framer-com, freitag-ch; confirmed the cycling category leans on full-bleed photography, which this page deliberately replaces with a drawing.
find_examples_for_macrostructure
```
name split-studio; limit 5; detail full
```
anthropic-com, apple-com, are-na, area17-com, atomixnyc-com; settled the hero as a split with type left and a drawn panel right.
get_screen
```
slug together-ai
```
Full record with autopsy: square-marker annotation lines, accent kept out of the chrome and inside the illustration.
get_screen
```
slug are-na
```
Full record: cream #fcf4e4 paper, dark brown ink, outlined price cards with amounts flush right, no filled buttons.
compare
```
slugs anthropic-com, are-na, teenageengineering-com, together-ai
```
Shared register light and minimalism; anthropic-com five type steps and spacing scale up to 179; together-ai spacing steps 80 to 136, which set the section rhythm.
find_reference_components
```
type pricing
```
Seven archetypes; took the per-use line-item menu (name, note, amount) and the comparison table's thin rules with no zebra striping for the geometry chart.
find_reference_components
```
type footer
```
Seven archetypes; took the address card (find us, write, hours, telephone) with a single colophon line beneath.
find_reference_components
```
type hero; macro Split
```
The split-screen hero: typography one half, a pure-CSS atmospheric panel the other, which became the drafting-grid panel holding the frame drawing.
find_components
```
type faq; mode light; style editorial; limit 4
```
buly1803-com, effectivealtruism-org, functionhealth-com, nike-com crops; used only to confirm a plain list of questions with a right-hand toggle glyph.

Palette, traced

Every token, and the reference it came from.

--paper#f3ede3Page ground; warm cream between anthropic-com's #f4ece4 and are-na's #fcf4e4 so the page reads as drawing paper rather than screen white.
--paper-2#e9e1d3The drafting panel, the lug figure and the map; one step darker so drawn elements sit in a tinted field.
--ink#1d1915Text, tube outlines, the dark lead-time card and the solid pill button; a warm near-black that keeps the brass and rust from clashing.
--muted#6f655aMeta lines, table headers, notes and annotation labels; the secondary voice of the spec sheet.
--rule#d5cbbcEvery hairline, table rule and the 24 px drafting grid inside the hero panel.
--accent#b4471fFlux-rust used only where attention is earned: the head-angle value, the highlighted chart column, hover states and the workshop pin.
--brass#b57f49Lugs and shells in the drawings, the step numerals and the headline underline; the colour of the joint itself, lifted from anthropic-com's palette.

Built with the Inspo MCP - try it on your own brief.← All examples