inspo

English · Español

Tell Claude your idea. inspo gathers about 50 references for every section of your page, renders it in several styles with real photos, opens a board where you vote on all of it, and then builds the page. For websites, web systems and mobile apps. Open source, and it runs on your machine.

Install in 30 seconds · Use it · What it does · Tools · How it's built · Contributing

Why inspo

References from your industry. A restaurant gets food. About 40 of every 50 references come from your industry, and the other 10 come from anywhere, for ideas you wouldn't have looked for.

Real sites, cut into sections. It visits award-winning sites, closes the cookie banners, finds the hero, the catalog or the footer, and screenshots just that part. You compare footers with footers.

You vote instead of describing. 👍, 👎 or ★ on every reference, style and component, plus why (layout, type, color, motion…). Claude reads the votes and the images you liked.

It ends in a page. Claude builds the page from your votes, and you keep commenting section by section until it's right. v1, v2, v3… all on the same board.

/inspo a subscription for Mexican specialty coffee, roasted weekly

Related MCP server: claude.design-mcp

What it does

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) from dedicated galleries (footer.design, navbar.gallery), Dribbble, and real sites cut into sections: it visits hundreds of Awwwards and Siteinspire winners, removes cookie banners and discount popups, and follows links to /about, /shop and /pricing when a section has its own page. Around 250 references across 5 sections take about 6 minutes, and the board fills live while it runs.

Styles

Your own landing page, with your copy, in 4–6 distinct directions. Each one gets its own palette, Google Fonts, layout, texture 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. Re-tint all of them with a style you liked.

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. You swap the reference for any of your likes, change the style, leave notes and approve. Claude builds from that plan.

The page

Claude builds it from your votes and publishes it to the Page tab, in desktop, tablet and mobile. Vote and note each section, or switch on Comment and click anything to pin a note. Any comment can carry a reference (one of your saved images or an upload) and an action: tweak, replace this section with the reference, add above or add below. Claude sees the images, applies each action, and publishes v2, v3…

PDF report

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

The board

👍 / 👎 / ★ section by section, why tags, notes, and Send. ⚡ Quick vote goes one by one with 1 / 2 / S, and ✕ Not a footer (key X) removes a misfit for good. It autosaves and runs in English or Spanish.

Claude also checks every section on numbered contact sheets, removes what doesn't belong and refills, so each section only holds that section.

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. 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

How it's built

flowchart LR
    YOU([You]) -- idea --> CC[Claude Code<br/>+ the inspo skill]
    CC -- MCP tools --> MCP[inspo MCP server]
    MCP -- Playwright + your Chrome --> WEB([Awwwards · Dribbble · Siteinspire<br/>galleries · live sites])
    MCP --> DATA[(.inspo/&lt;session&gt;<br/>references, votes, builds)]
    DATA -- live --> BOARD[The board<br/>localhost:4777]
    BOARD -- Send --> CC
    CC -- builds --> PAGE[Your page<br/>v1, v2, v3…]
    PAGE --> BOARD

• One local server. The MCP server gives Claude the tools and serves the board on localhost. Nothing leaves your machine except the page visits it makes to research.

• Your Chrome, driven by Playwright. It reads galleries, crops live sites into sections and renders the PDF.

• Files you can read. Every session is a folder in <project>/.inspo/ with the references, your votes (feedback.json), the page versions and DESIGN.md.

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

Contributing

PRs are welcome, especially new sources, style presets and Lab components. Start with CONTRIBUTING.md; questions go to Discussions, and security issues to a private report.

License

MIT © Bruno Varela