Prompt

“A home weather station maker: product-led, spec numbers, dark, one device.”

The agent invented Anemo - A Bergen-built home weather station with nine sensors, an ultrasonic wind head and no subscription.

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

The page it shipped - live, scaledOpen full page ↗

The move

The hero is a technical drawing rather than a product photo: the S2 is built in SVG from its actual parts (two-plate ultrasonic wind head, rain funnel, solar collar, seven louvred shield plates, electronics bay with a glowing status light, pole clamp) and annotated with six hairline callouts in mono, each naming the part and one figure. The gauge ticks from 0.0 m to 2.0 m on the right edge and the three depth rings behind it turn the device into an instrument on a bench, and the live readout under the CTA drifts every three seconds so the fold behaves like the thing it sells.

What Inspo gave it

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

Analogue - The single device centred on a near-black field with a small model-name eyebrow above a sentence-case headline. The S2 hero takes the "one object, dark ground, no environment" stance and the tight-tracked medium-weight display from here.
Shure - Left text block at roughly a third of the width, one oversized product dominating the right, a model-name eyebrow over the headline and exactly one accent-filled CTA. That is the hero grid of this page, with the accent held to buttons, the status light and the eyebrow.
Digitalocean - The three stat cards (big figure, bold label, one explanatory paragraph) became the four-figure stat strip under the fold, and the vertical scale markers along the right edge of its terrain became the 0 to 2 m gauge ticks beside the device drawing.
Programmable Card Issuing and Money Movement | Lithic - Hairline concentric rings creating depth with no fill. Three faint rings sit behind the station in the hero and range arcs reuse the same idea in the power and range panel.
Scale - Light display weight on a #04040c ground with a cool text grey, plus the measured spacing scale (64, 96, 128, 160) that set the section rhythm at clamp(72px, 9vw, 120px).

How it was built

The actual MCP calls, in order.

recommend
```
brief "A home weather station maker: product-led, spec numbers, dark, one device", mode dark, pageType landing
```
Picked Marquee Hero; evidence over 24 sites: 83 percent dark paper, 71 percent grotesk display, accent hue split (chromatic-other 42, cool 29, warm 17); exemplars scale-com, lithic-com, deathandcompany-com, analogue-co, raycast-com; marquee hero JSX; hero and spacing guidance

search_screens

query "dark hardware product page with one device and spec numbers", paperBand dark, industry consumer-tech, limit 8

dolby-com, analogue-co, shure-com with fold autopsies; shure gave the left-text right-device grid

find_reference_components
```
type hero
```
Seven canonical hero shapes (documentary, manifesto, marquee, question, split-screen, stat-led, word-as-art); the stat-led note about tabular-nums on figures carried into every numeric column
get_screen
```
slug analogue-co
```
Full autopsy: #1a1a1a ground, 4:1 scale jump, accent only on the product itself, device at 60 percent of viewport height
get_screen
```
slug shure-com
```
Full autopsy: 5-step type scale, spacing 8/20/24/90, radius 0 to 8, accent lime on the CTA only, product breaking the text column
search_screens
```
query "technical spec numbers sensors accuracy dark product page stat-led", paperBand dark, macrostructure stat-led, limit 6
```
reactsummit-com, digitalocean-com, tinybird-co; digitalocean stat cards and gauge markers, tinybird accent-on-figures
find_components
```
type stat, mode dark, vibe technical, limit 6
```
Stat crops from lusion-co and reactsummit-com; confirmed the figure-then-micro-label stack
find_reference_components
```
type pricing
```
Comparison table (thin rules, no zebra, row hover) used for both the accuracy table and the S1 vs S2 table; single-plan JSX used for the price block
compare
```
slugs analogue-co, shure-com, scale-com, digitalocean-com
```
Shared register: minimalism plus dark-mode; type scales of 4 to 6 steps; scale-com spacing scale 16 to 160; container widths 1440
get_design_system
```
slug analogue-co, live false
```
Type ramp (53px h1 at weight 500, -2.6px tracking, 16px body at 1.5), radius 0 and 18, confirms tight negative tracking on the display

Palette, traced

Every token, and the reference it came from.

--paper#0b0e12Page ground. Cooler and slightly bluer than analogue-co's #1a1a1a so the amber accent has something to sit against; sits in the 83 percent dark band the evidence measured
--surface#12161cPanels, phone chrome, hovered cells; one step up from paper so raised things read as raised without a shadow
--ink#edf0f3Headlines, figures, table values; off-white rather than pure white to keep the tabular numerals from glaring on the dark ground
--muted#8b95a3Body copy, labels, S1 column, callout second lines; the cool grey text of scale-com's #bab9c1 pulled a little darker for hierarchy
--rule#242b34Every hairline: table rows, grid lines, depth rings, section seams; low enough contrast to structure without drawing
--accent#f0a93aEyebrows, the primary button, the status light, battery bars, sparkline; a warm instrument amber that reads as a needle or lamp, taking a position against the category's chromatic-other consensus
--accent-ink#1a1204Text on amber buttons, so the CTA stays legible without a white label

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