Prompt

“A marine weather service for offshore sailors: forecast dashboard, data-dense, tide and wind, live.”

The agent invented Halyard - Offshore marine weather that blends three models, live buoys and your destination's tide table into one live board.

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

The page it shipped - live, scaledOpen full page ↗

The move

The fold is the product. Instead of a headline plus a screenshot, the headline cluster is compressed into the top 140px and the live board takes the rest of the viewport: four mono readouts (wind, pressure, wave, tide) each carrying three secondary figures, a 48 hour wind chart with gust envelope and direction arrows, and a 24 hour pressure and tide overlay, all drawn in SVG from real-looking arrays and stretched with preserveAspectRatio none so the plots fill whatever height the fold gives them. A ticking UTC clock and a countdown to the 12Z publication keep the board honest about being live without inventing changing measurements. Below, the same discipline continues in a seven-day table where wind and gust are drawn as inline bars beside the digits, and a Camaret departure-window track that turns the area forecast into sixteen three-hour blocks a skipper can act on.

What Inspo gave it

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

Digitalocean - The register for the whole page: deep teal paper, stat cards sitting on the hero surface, a vertical scale gauge as a technical motif, and the Plus Jakarta Sans plus Inter pairing that became Plus Jakarta Sans plus JetBrains Mono here. Its measured type ramp (48 / 36 / 18 / 16) set the ratio for the five-step scale.
Dovetail - Navy-on-dark data visualisation with a single cool electric accent and a warm peach secondary inside charts. That two-hue chart logic became cyan for mean wind and pressure, amber for gusts and warnings.
Tinybird - The oversized mono metric embedded in a dark proof card, with tags in tight mono. The readout row on the board (24 kn, 1004.2 hPa, 2.8 m, 4.1 m) is set the same way: number in mono at display size, unit small and muted beside it.
Diffusion Studio — The creative platform for video and motion graphics. - Fold composition: compact headline cluster upper-left, product surface filling the lower 55 percent of the viewport. The Halyard fold is that shape with the dashboard as the product surface, so the numbers are visible without scrolling.
Unkey | The Developer Platform for Modern APIs - Studied for the map/diagram macrostructure; the network diagram bleeding behind text was not used directly, but its restraint (one lime accent on near-black, everything else grey) confirmed a single-accent rule for the board.

How it was built

The actual MCP calls, in order.

recommend
```
brief: marine weather service for offshore sailors, forecast dashboard, data-dense, tide and wind, live; detail full
```
Picked bento-grid with feature-stack and marquee-hero runners-up; evidence packet said the genre leans light paper, grotesk sans, chromatic-other accent; exemplars brightful-me, campaignmonitor-com, hypereffekt-com, canvasapp-com, novu-co; the Bento features JSX; hero and spacing guidance (96px median seam, padding-inline only on the container)
search_screens
```
query dark data-dense dashboard with live numbers, charts and telemetry; paperBand dark; vibe technical; limit 8; detail full
```
liveblocks-io, lithic-com, vimcal-com, portalone-studio, sourcegraph-com, novu-co, diffusion-studio, dovetail-com with fold autopsies; diffusion-studio and dovetail-com were the useful ones
search_screens
```
query weather, ocean, sailing, marine, maps, forecast; limit 8; detail full
```
explorajourneys-com, becomeautonomous-com, oysterhr-com, canvasapp-com, polar-sh, pusher-com, middle-finance, brightful-me; nothing marine in the archive, confirmed the build would have to borrow from dark data products instead
find_examples_for_macrostructure
```
name stat-led; limit 6; detail full
```
Four sites (thin coverage): digitalocean-com, reactsummit-com, tinybird-co, instituteofhealth-com; digitalocean-com and tinybird-co became primary references
find_examples_for_macrostructure
```
name map-diagram; limit 6; detail full
```
Two sites (thin coverage): moderntreasury-com, unkey-com; used for the single-accent discipline only
get_screen
```
slug digitalocean-com
```
Full record: palette #31bacd / #144c54 / #b4d4dc / #648c90 / #a3b5b5, Plus Jakarta Sans + Inter, stat-led, fold autopsy with stat cards over terrain and the vertical scale markers
get_screen
```
slug dovetail-com
```
Full record: palette #0444fb / #092667 / #f49c6c / #7f7f7f / #aeacab, Inter, chart bars in blue with peach secondary, 45/55 text-to-visual hero split
get_screen
```
slug tinybird-co
```
Full record: #24f494 on #0a0a0a, oversized green metric inside a dark proof card, mono tag row
get_design_system
```
slug digitalocean-com; live false
```
DESIGN.md: type ramp h1 48/800, h2 36/700, h3 18, body 16; spacing 16/32; radius 0/64; source CSS variables including --background-card #000f0f and --primary-teal-200 #00afce
find_reference_components
```
type nav
```
Seven nav archetypes with JSX; took the N1 Inline shape (wordmark left, links centre, tighter utility cluster right) for the top bar
find_reference_components
```
type footer
```
Seven footer archetypes; used the Ft3 Sitemap warning as a prompt to keep the link map to three short columns plus a colophon-style statement and a status line instead of a four-column map
find_reference_components
```
type stat
```
Six stat archetypes; the 4-stat row with hairline rules and tabular-nums became the data-sources strip (6 min, 0.1 deg, 127, 14 days)
compare
```
slugs digitalocean-com, dovetail-com, tinybird-co, diffusion-studio
```
Shared register: minimalism, dark-mode, monochrome; all five-step type scales; spacing scales 24 to 128; confirmed the dark data register was consistent across the picks

Palette, traced

Every token, and the reference it came from.

--paper#071a22Page ground. Sits between DigitalOcean's #144c54 teal and Dovetail's #092667 navy, pushed darker so mono readouts at 52px stay crisp and the cyan traces have room.
--panel#0c2531Board, table, tide and pricing card surfaces. One step up from paper so the dashboard reads as a lifted instrument rather than a border on the ground.
--rule#b5d4dc24Every hairline: nav bottom, readout dividers, table rows, stat strip. Derived from DigitalOcean's pale cyan text #b4d4dc at low alpha so rules feel like the same light, not grey.
--ink#e7f1f4Primary text and the now markers on the charts. Slightly cyan-tinted white so it belongs to the teal ground.
--muted#8fb0baMeta labels, units, axis ticks and the tide trace. Pulled from DigitalOcean's #648c90 / #a3b5b5 support tones, lightened for 12px mono legibility.
--accent#35c3d6Mean wind bars, pressure trace, tide fill, primary button, featured tier border. One cool accent, as in every reference studied.
--warn#f2a25cGusts, falling pressure trends, gale tags and the gale chip. Dovetail's chart peach #f49c6c, used only where a number should make a skipper pause.

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