Prompt

“A Scandinavian furniture maker's flat-pack oak chair: single-product page, exploded diagram, assembly steps.”

The agent invented Holmgren - A Malmö workshop selling one solid oak dining chair that ships flat and bolts together in twelve minutes.

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

The page it shipped - live, scaledOpen full page ↗

The move

The whole page is drawn from one set of SVG part definitions, a side elevation of the chair at one unit per millimetre. The hero shows it assembled and a single button pulls it apart with CSS transforms; the exploded section is the same parts translated and numbered; the dimension drawing reuses them with ticks and labels; the six assembly steps reuse them again with done / new / pending classes; and the timber and finish radios set data attributes on the body so every one of those drawings recolours at once and the price follows into the nav and buy card. It is a product page where the product is the diagram, which is the honest version of a flat-pack chair.

What Inspo gave it

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

fermliving-com - The only true single-product page in the furniture set: product name and price left, black full-width add-to-cart, accordion details, warm canvas ground (#f7f5ef in its own tokens). It gave the buy card its shape and the warm paper the page sits on.
Artek Fi - Scandinavian restraint: a lowercase wordmark, one chair as the whole hero, no shouting. It set the tone for the nav (wordmark, five plain links, one pill) and the decision to let a single drawing carry the fold.
Teenageengineering - Product floating in a void, tiny technical labels, "reads like a specification sheet". That register is why the hero is a measured side elevation rather than a lifestyle mood, and why dimensions get their own drawings with real ticks.
Hermanmiller - Sentence-case headline, ~3:1 display jump, black pill CTA, product-as-catalogue composition. Confirmed sentence case and pill buttons as the house convention for the category.
Casper - A furniture site that goes against the 63% grotesk gravity with a serif display over clean sans body. It licensed the Fraunces + IBM Plex Sans pairing.

How it was built

The actual MCP calls, in order.

recommend
```
brief: Scandinavian flat-pack oak chair product page, detail full
```
Feature Stack pick with SaaS exemplars (arrows-to, clay-com, puzzle-io, sourcegraph-com, dia-com); the useful part was the evidence packet: 63% grotesk display, mid/light paper, warm accent, plus the hero-fit and spacing guidance and the pricing table reference JSX.
search_screens
```
query "Scandinavian wooden furniture single product page chair oak", industry furniture, limit 8, detail full
```
artek-fi, branchfurniture-ca, hay-com, fermliving-com--products-muses-clio, casper-com, flos-com, gardinex-com, hermanmiller-com with fold autopsies and palettes.
search_screens
```
query "technical product page exploded diagram specifications dimensions", macrostructure specimen, limit 6, detail full
```
fellowproducts-com, kvs-services, price-pierce-co-uk, teenageengineering-com, render-com, arweave-org; Teenage Engineering was the one that fit.
find_components
```
type hero, industry furniture, limit 8
```
Hero crops for hermanmiller-com, branchfurniture-ca, floema-com, gardinex-com, parachutehome-com.
find_reference_components
```
type hero, macro Split
```
The split-screen hero JSX: typography one half, pure-CSS atmospheric panel the other, no image placeholder. The hero panel gradient is lifted from it.
get_screen
```
slug fermliving-com--products-muses-clio
```
Full record and hero capture: price under name, stepper, black add-to-cart, accordion, promo bar.
get_screen
```
slug teenageengineering-com
```
Full record: hardware centred in a gradient void, 8:1 scale jump, orange accent on a single dot.
get_screen
```
slug artek-fi
```
Full record: underscaled wordmark, chair-led photography, Futura-class geometric sans.
find_similar
```
slug fermliving-com--products-muses-clio, limit 6
```
snowpeak-com, marni-com--en-ca-new-in, cuyana-com--pages-about-us, maxsiedentopf-com, artek-fi--en-company-about, heatherwick-com--studio-about; confirmed the serif-display-over-sans-body pattern in warm ecommerce.
find_reference_components
```
type footer
```
Seven footer archetypes; took the Address card (Ft8) and its "no social icons" note, plus the colophon-style bottom line.
compare
```
artek-fi, fermliving-com--products-muses-clio, hermanmiller-com, teenageengineering-com
```
Shared minimalism + swiss, radius scales of 0 / 4-5 / 50 (square panels, pill buttons), Ferm's 8 / 24 / 32 / 128 spacing scale, five-step type ramps.
get_design_system
```
slug fermliving-com--products-muses-clio, live false
```
Ferm's real CSS tokens: canvas #f7f5ef, cream #fffefa, light beige #dcd3cb, cognac #61451d, orange #ca8a55; type ramp 32 / 18 / 16 / 14.

Palette, traced

Every token, and the reference it came from.

--paper#f5f1e9Page ground, tuned a touch warmer than Ferm Living's #f7f5ef canvas so untreated oak still reads as the warmest thing on the page.
--paper-deep#ebe4d6Base of the hero panel gradient and the section-card contrast, one step down from paper like Ferm's light beige.
--ink#1f1a14Text, chair outlines, the primary pill; a brown-black rather than pure black so strokes on the drawings sit with the oak.
--muted#6b6259Meta labels, dimension lines, table headers; from the same brown family as ink at roughly 46 contrast.
--rule#d7cdbdEvery hairline: nav, table rows, cards, the stat list; lifted from Ferm's parchment and light beige tokens.
--accent#b5482cOne rust for the buy button, nav dot, callout bolts in the step figures and the "new part" highlight; sits between Artek's #b84450 and Ferm's #ca8a55 and is deployed nowhere else.
--oak-base#d6b384The timber itself, driving every SVG fill through --oak; swapped by data attributes to #8c6646 smoked oak and #e7dbc0 ash, then mixed by finish with color-mix.

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