Prompt

“A satellite imagery service for farmers: dark, field-map led, crop health index, seasonal timeline.”

The agent invented Overpass - Satellite passes over your farm become a crop health map, a season timeline and an alert on your phone.

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 fold is a working field map rather than a picture of one. The selected field is drawn pixel by pixel in JavaScript from a smooth index surface with a headland drag along the road and a Gaussian stress patch in the south-east corner, clipped to the field polygon, so hovering any 10 m cell reads its NDVI into the readout card and flips the value amber when it falls under 0.45. The same colour ramp drives the legend, the index band cards and the season timeline, where fifty-four passes are plotted with cloudy ones hollow, last year dashed underneath and the June stress alert called out, so the story told in the fold is the same story told in the timeline and the pricing calculator further down.

What Inspo gave it

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

Unkey | The Developer Platform for Modern APIs - The dark, map-diagram exemplar: near-black ground with one lime accent and a diagram that bleeds behind the type. Gave the accent temperature (vegetation lime on charcoal) and the idea of the visual carrying the fold.
Digitalocean - Wireframe terrain with floating data points and a scale gauge along the edge, plus stat cards riding the bottom edge of the hero. Gave the readout overlays, the scale bar and the four-up proof strip directly under the fold.
Dovetail - 45/55 copy-to-product split with the product panel vertically centred and sentence-case headline at ~72px. Gave the hero grid ratio and the left-anchored copy stack.
Tinybird - Data-proof card with a client name and one oversized green metric embedded in flowing copy. Gave the grower quote block with a three-up farm stats row underneath.
Featurebase – Modern Support & Feedback Platform - Dashboard mockup filling the lower half of a dark fold, two pills (white and dark). Confirmed the two-CTA pairing and the framed product card treatment.

How it was built

The actual MCP calls, in order.

recommend
```
brief + mode dark, detail full
```
Feature Stack pick, evidence packet (67% dark paper, 71% grotesk display, cool/other accent), five exemplars, pricing table JSX, hero and spacing guidance
find_examples_for_macrostructure
```
map-diagram, limit 6, full
```
Only two sites embody it (moderntreasury-com, unkey-com); unkey-com autopsy became the main dark reference
search_screens
```
"satellite earth observation data platform dark map dashboard technical", paperBand dark, limit 8, full
```
mage-ai, unkey-com, featurebase-app, diffusion-studio, digitalocean-com, dovetail-com, turso-tech, tinybird-co with autopsies
find_reference_components
```
type hero
```
Seven canonical hero shapes; split-screen (type one half, atmospheric panel the other) informed the copy-plus-map split
get_screen
```
digitalocean-com
```
Full record: terrain-as-hero signature, scale markers, stat cards overlapping the visual
get_screen
```
unkey-com
```
Full record: lime accent placement (hub nodes, primary pill), radius scale 0/2/6, spacing scale up to 200px
find_components
```
type pricing, mode dark, limit 5
```
artek-fi, astro-build, audius-co, audocph-com crops; none were true plan grids so I leaned on the reference JSX instead
search_screens
```
"agriculture farm land earth green data timeline", accentHue chromatic-other, paperBand dark, limit 5
```
mage-ai, modal-com, thoughtbot-com, turso-tech, resend-com; confirmed green-on-charcoal is a well-worn register and that the archive has no agriculture site, so the field map had to be invented
compare
```
unkey-com, digitalocean-com, dovetail-com, tinybird-co
```
Shared dark-mode minimalism, 5 to 6 type steps, section seams around 64 to 96px, radius 0 to 8px; used for the type scale count and the seam rhythm
get_reference_jsx
```
pricing, three-card
```
The plan trio with the featured tier raised by a thin accent rule instead of a badge; copied the structure and the middle-dot bullets

Palette, traced

Every token, and the reference it came from.

--paper#0b0e0bPage ground; near-black with a green cast so the map card does not read as a foreign object on a neutral black
--panel#121712Cards, timeline, plans and pipelines; one step up from paper so borders can stay faint
--ink#ecefe8Headlines and body; warm off-white rather than pure white to sit with the vegetation greens
--muted#98a295Secondary copy, mono readout keys, axis labels; green-grey so it belongs to the same family as the accent
--accent#b6f04aVegetation lime: selected field outline, clear passes, the primary pill, the index value in the readout; it is the colour of a healthy canopy in the ramp
--stress#e6a23cAmber for the stress patch, alert passes and dropped fields; the one warm puncture, reserved for things that need walking
--soil#8a5a3cBare-soil end of the vegetation ramp and the first index band swatch

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