inspo

Design research and page building for Claude Code. Tell it your idea and agree on the page sections. It gathers about 50 references per section (navbar, hero, about, catalog, footer…) from Awwwards, Dribbble, Siteinspire, footer.design, navbar.gallery, and real award-winning sites that it cuts into sections automatically. It renders your page in several visual styles with real photos, and opens a board where you vote on all of it, live 3D components included. Then it hands you a PDF report, builds the page from what you picked, and iterates on your feedback section by section.

/inspo a subscription for Mexican specialty coffee, roasted weekly

What you get

• 50+ references per section. A background harvest fills every section you need (19 types: navbar, hero, logos, features, services, catalog, work, about, process, stats, team, testimonials, pricing, FAQ, blog, CTA, newsletter, contact, footer). Its sources:

  • Dedicated galleries: footer.design, navbar.gallery.

  • Dribbble.

  • Real sites cut into sections. It visits hundreds of Awwwards and Siteinspire winners, removes cookie banners and discount popups, finds each section, follows links to /about, /shop and /pricing when a section has its own page, and screenshots just that part.

  Around 250 references across 5 sections takes about 6 minutes, and the board fills live while it runs.

• Galleries on demand. Awwwards, Dribbble, Land-book, Siteinspire, One Page Love, Lapa Ninja and Mobbin. Live sites are analyzed for fonts, palette, radii, type scale and tech (three.js, GSAP, Lenis, Webflow, Framer, Spline…).

• Styles. Your own landing page, with your copy, rendered in 4–6 distinct directions. Each one gets its own palette, Google Fonts, layout, texture and image treatment, and real CC0 photos. 16 presets included, and Claude can tune them or invent new ones.

• Lab. 18 live, production-grade components (WebGL shaders, a dot globe, a glass knot, particle galaxies, sticky stacks, magnetic buttons…), plus custom ones Claude writes for your idea. You can re-tint all of them with a style you liked.

• The board. A local page where you 👍 / 👎 / ★ section by section, tag why (layout, type, color, motion, 3D…), write notes, and hit Send to Claude. ⚡ Quick vote goes one by one with 1 / 2 / S. It autosaves and runs in English or Spanish.

• Only the right thing in each section. Gallery cards must be tagged with the section (no whole landing pages or app screens under "footer"), and crops only come from confident detections. Then Claude checks every section visually on numbered contact sheets, removes what doesn't belong (it never comes back), and refills. You also get a ✕ Not a footer button (key X).

• Plan. After you vote, Claude analyzes your favorites and writes the plan for each section: the leading reference, alternates, and what to take for layout, type, color, imagery and motion, plus the components. In the Plan tab you swap the reference for any of your likes or any reference in that section, change the style or components, leave notes and approve. Claude builds from that plan.

• PDF report. A studio-style deliverable: cover, direction, the winners of every section with your notes, styles, components, and the current page.

• The page. Claude builds it from your votes. The Page tab shows every version in desktop, tablet and mobile. You vote and note each section, or switch on Comment and click anything to pin a note. Claude reads the comments, with the exact element, rebuilds, and publishes v2, v3…

• Rounds. Claude reads your votes, including the thumbnails you liked, and runs a sharper second round.

• Brief. The final direction: concept, principles, palette, type, page outline, components, do/don't, and CSS tokens. It shows on the board and is written to DESIGN.md.

Related MCP server: claude.design-mcp

Websites, web systems and apps

inspo adapts to what you're making:

App screens come from SaaS Interface (real products like Grafana, Ahrefs, Mixpanel, Qonto), Dribbble filtered by platform (no mobile shots in a web system, and the other way around), and Mobbin when you log in once.

Install

In Claude Code:

/plugin marketplace add brunovareliuu/inspo
/plugin install inspo@inspo

That installs the inspo skill (the workflow) and the inspo MCP server (the tools). The server installs its own dependencies the first time it starts. It uses your installed Google Chrome; with no Chrome, run npx playwright install chromium.

Requires Node 20+.

git clone https://github.com/brunovareliuu/inspo ~/inspo && cd ~/inspo && npm install

{
  "mcpServers": {
    "inspo": { "command": "node", "args": ["/absolute/path/to/inspo/src/server.js"] }
  }
}

The tools work in any client. The workflow lives in skills/inspo/SKILL.md; paste it into your client's rules or project instructions.

Use it

Just describe what you're making. The skill triggers on its own, or you can call it with /inspo:

/inspo portfolio for an architecture studio in Monterrey, very minimal
/inspo redesign this app — it looks like a template
/inspo landing for my AI note-taking app, I love linear.app and stripe.com

The conversation:

1. The idea. Claude reflects back what it understood and asks only what's missing: audience, the feeling, sites you love, brand assets. If there's a repo or running app, it looks at it.

2. Sections. It asks which sections the page needs.

3. Recommendation. It proposes a section list for your kind of page, one line of why each, and you adjust it.

4. Research and votes. A harvest of about 50 references per section, 4–6 style directions and live components, all on the board. You vote and hit Send to Claude. Claude summarizes what you picked per section, publishes the brief, and exports the PDF.

5. The page. Claude builds it from your votes (style, per-section references, components, your copy) and publishes it to the Page tab.

6. Feedback loop. You vote and comment section by section, and Claude rebuilds. Repeat until it's right, then integrate it into your stack.

Everything for a project lives in <project>/.inspo/<session>/, which is git-ignored automatically.

Tools

Sources

Galleries change their markup. If one breaks, node bin/inspo.js doctor tells you which, and a PR to src/sources/index.js is usually a two-line fix.

Style presets

Every preset can be overridden (palette, fonts, layout, texture, image treatment), and Claude can pass fully custom specimen HTML.

Component library

Each one is a single self-contained HTML file in components/. They read --bg --fg --muted --accent --accent2 from the URL, so the board can re-tint them with any style. When you pick one, Claude ports it to your stack (React/Next with R3F, GSAP, Motion…). skills/inspo/references/components.md has the conventions.

CLI

node bin/inspo.js serve          # open the board for the latest session in ./.inspo
node bin/inspo.js sessions       # list sessions
node bin/inspo.js login mobbin   # log in to Mobbin once
node bin/inspo.js doctor         # check browser, network and every source

Config

Responsible use

inspo is for private design research, like a designer saving screenshots to a moodboard. It reads public gallery pages at human pace, stores screenshots locally, and links back to every source. Don't redistribute other people's work, and don't clone a site. Take the principles, not the pixels. Openverse photos keep their license credits; for production, commission or license proper photography. Respect each site's terms: Mobbin in particular requires your own account.

Development

npm install
npm test          # offline unit tests
npm run e2e       # drives the real MCP server end to end (needs network + Chrome)
node bin/inspo.js doctor# checks every scraper

Layout:

src/server.js          MCP server (tools)
src/sources/           gallery scrapers
src/capture.js         live screenshots, design-DNA analysis, Openverse images
src/styles/            style presets + specimen renderer
src/board/             local board (server + single-file UI)
components/            live component library
skills/inspo/          the Claude Code skill (workflow + playbooks)
.claude-plugin/        plugin + marketplace manifests

PRs are welcome, especially new sources, style presets and Lab components.

License

MIT © Bruno Varela