Prompt

“The documentation home for an open-source Postgres extension: docs-led, sidebar, code-first.”

The agent invented pg_strata - An open-source Postgres extension that ages cold rows onto object storage and keeps them queryable as one table.

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

The page it shipped - live, scaledOpen full page ↗

The move

The first viewport is the docs shell itself, not a landing hero: sidebar, breadcrumb, a two-line title, a lede, a meta row with versions and licence, two buttons, and then a tabbed install window that is the only picture on the page. Every section below keeps that promise, with syntax-coloured SQL doing the work that screenshots usually do, output tables typed as they would appear in psql, and a changelog whose version pills sit in the margin like a printed manual's revision marks.

What Inspo gave it

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

Render - The shell: a fixed left sidebar with collapsible groups, a top bar with wordmark, search in the middle and a version pill, and a left-aligned page title with a short subhead. The docs home reads as page one of the manual, not a marketing hero.
E2b - Code as the only imagery. Tabbed install blocks with an accent underline on the active tab and a copy button, placed directly under the intro so the first viewport ends on runnable text.
Circleci - A dark navy code panel dropped into an otherwise light page, syntax coloured, sitting inside the prose flow. That contrast became the page's one strong visual move.
Cleanshot - Inline code chips with a light fill and hairline border set straight into body copy, and a strict sentence-case, text-dominant column with no hero picture.
Raycast - The version badge as marginalia: a filled pill and a date in a narrow left column, with the release title and bullets to its right. Reused as the changelog entry layout.

How it was built

The actual MCP calls, in order.

recommend
```
brief plus pageType docs
```
Picked feature-stack; evidence over 24 docs sites: light paper 92%, grotesk sans 63%, accent mostly green or teal; exemplars cleanshot-com--docs-api, netlify-com--docs, posthog-com--docs, github-com--docs, bun-com--reference; a pricing-table reference JSX and hero and spacing guidance.
search_screens
```
query "developer documentation home with sidebar and code blocks, open source database", pageType docs, limit 8
```
ollama-com--docs, lucide-dev--guide-vue, e2b-dev--docs, liveblocks-io--docs, github-com--docs, circleci-com--docs-guides-execution-managed-using-macos, netlify-com--docs, render-com--docs with fold autopsies.
get_screen
```
render-com--docs
```
Full autopsy: fixed sidebar, top bar with search and version, black primary and outlined secondary buttons, purple accent kept to icons and pills.
get_screen
```
e2b-dev--docs
```
Full autopsy: dual-language tabbed code blocks with an orange active underline and copy button as the primary visual, sticky right rail with "On this page".
find_reference_components
```
type nav
```
Seven nav archetypes; the inline and search-first shapes informed the top bar (wordmark left, search input, quiet links and a mono utility right).
find_reference_components
```
type footer
```
Seven footer archetypes; the sitemap note (reserve the four-column map for genuine docs roots) and the colophon shape were combined into the footer.
search_screens
```
query "changelog release notes developer tool version list", pageType changelog, limit 4
```
gitbutler-com--changelog, circleci-com--changelog, raycast-com--changelog, cursor-com--changelog; Raycast's version badge marginalia was taken.
compare
```
render-com--docs, e2b-dev--docs, cleanshot-com--docs-api, circleci-com--docs-guides-execution-managed-using-macos
```
All four sit at five type-scale steps, three of four on light paper, minimalism the only shared style; confirmed the five-token scale and the light mode choice.

Palette, traced

Every token, and the reference it came from.

--paper#fbfbf9Page background. Measured paper lightness in the docs genre sits at 96 to 98, so this is a hair off white rather than pure white.
--ink#15201dHeadings, body, primary button fill. A green-black instead of neutral black so it belongs to the accent family.
--muted#5f6b67Supporting copy, sidebar links, table descriptions, footer text. Same hue as ink, lifted for a two-level text hierarchy.
--rule#e3e6e2Every hairline: sidebar border, table rows, section heads, cards, code chip borders.
--accent#0f7b6cActive sidebar item, active tab underline, latest version badge, notes, section-tracking rail. One accent, a deep teal-green in the genre's chromatic-other band, never used for large fills.
--accent-soft#e3f1edActive sidebar background, tip callout fill, text selection. The accent at tint strength.
--code-bg#101b18Dark code windows on the light page, the CircleCI move. Green-black so the panels read as part of the same palette rather than a pasted terminal.

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