7 references · 60 captured

Features

Bento grids, feature trios, product blocks.

01 · Bento

Bento Grid

Six tiles, irregular spans. The largest carries the lead idea; smaller ones extend it.

Lead

Study, then build. Never the other way around.

Every reference here was traced from a real production site - then rebuilt fresh, distilled, stamped with the macrostructure it embodies.

Patterns

named macrostructures, each one a complete page-shape.

Sites filed

784

published rows, palettes extracted, queryable from MCP.

For your agent

An MCP tool surface that returns URLs, not base64.

Read the API →

License

MIT, owned by Together AI.

Free to fork. Free to self-host.

02 · Numbered triplet

Process triplet

Three equal columns prefaced by big mono ordinals. Variety comes from type, not layout.

How to use it

Three steps, no signup.

Step 01
Browse
Open the archive. Filter by mood, paste a URL, scroll until something stops you.
Step 02
Study
Each tile lifts to a site detail page - palette, type ramp, components, designer credit.
Step 03
Build
Hand the design system to your agent over MCP - or copy DESIGN.md to clipboard yourself.

03 · Alternating

Vertical with side flip

Three feature rows alternating side per row. The shape comes from the alternation.

A
Section A
Search the way you think
Type a mood. Paste a URL. Hit ⌘K. The catalogue answers however you ask it - lex, vector, hostname. Hybrid retrieval is the unsexy choice that works.
B
Section B
Tag, but only what's true
Tags live behind a hard allow-list. Style, industry, vibe, color words. A pricing card that isn't pricing is worse than no pricing card.
C
Section C
Return URLs, not base64
The MCP hands back image URLs your agent's vision model can fetch directly. No context bloat. No 200KB of base64 in the tool result.

04 · Long-form

Essay rows

Features written as paragraphs with marginal headings. Read, not scanned.

Three notes

How this is meant to be used.

On reading the page

Inspo treats the catalogue as a magazine archive: every site has a credit line, every plate sits at full resolution, every detail page reads like a back-of-the-issue colophon. Scroll the gallery slowly. Open the ones that stop you.

On talking to your agent

The MCP server hands the same catalogue to Claude Code, Cursor, Codex, and Zed as tool calls. Search by mood, paste a URL, pull a DESIGN.md - the agent sees what you see, and writes from that reference instead of from training-data averages.

On the reference layer

The components page is the second surface: twenty-eight Disciplined sections, each one stamped with its macrostructure. Copy the markup, study the rule, and your output stops looking like every other AI page.

05 · Compare

Before / with

Capability comparison framed categorically (before / with) - no competitor names.

Before / with

What changes when your agent has Inspo.

CapabilityBeforeWith Inspo

Visual reference

Browse a screenshot site by hand

search_screens via MCP - agent gets URLs

Design tokens

Read the source and translate by eye

get_design_system - palette, type ramp, spacing

Component patterns

Hunt Storybook or copy from competitors

find_components - real crops + canonical code

Cost

Pay per seat, per export, per token

Free, open source, MIT

06 · Icon trio

Three primitives

Three features each carrying a typographic mark inside a hairline square. No SVG iconography.

Three primitives

Search, Crop, DESIGN.md.

S
Search
Type a mood, paste a URL, hit ⌘K. Hybrid lex + vector retrieval over the catalogue.
C
Crop
Every captured page has its component regions cropped - heroes, pricing, footers - addressable from the MCP.
D
DESIGN.md
Per-site design system extracted from the DOM. Palette roles, type ramp, spacing. Your agent reads it directly.

07 · Workbench

Copy + demo

Explanatory copy left, working demo right. Real strings, no faux chrome.

From the bench

One MCP call gets your agent a real reference.

search_screens returns hosted image URLs your agent's vision model can fetch directly. No base64 in the tool result. No context bloat.

> search_screens("editorial dark agency hero", { mode: "dark" })

  ┌── 8 results
  │
  │  · linear-app             dark · agency · marquee
  │  · vercel-com             dark · saas   · stat-led
  │  · atelier-mira           dark · agency · specimen
  │  · raycast-com            dark · saas   · workbench
  │  · arc-net                dark · agency · manifesto
  │  · …
  │
  └── each carries: hero URL, palette, type ramp, designer credit

Run from any MCP-capable editor.

From the archive

The same pattern, cropped from real production sites.