inspo: design research that ends in a built page

Tell your agent what you're making. inspo gathers about 50 references for every section of your page, renders your own product in several visual styles with real photos, opens a local board where you vote on all of it, and then builds the page. It works for websites, web systems (SaaS, dashboards, admin panels) and mobile apps.

Why it's different

• References from your industry. A restaurant gets food sites. 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 (Awwwards, Siteinspire, Sites of the Day), 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). The agent reads your votes and looks at the images you liked.
• It ends in a page. The agent 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.

How it works

1. The idea. The agent 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 a running app, it looks at it first.
2. Sections or screens. It recommends a list for your kind of project (19 website sections, 22 app screens), one line of why each, and you adjust it.
3. Research. A background harvest of ~50 references per section from galleries (Dribbble, footer.design, navbar.gallery, Collect UI, SaaS Interface…) and live sites. The agent reviews every section on numbered contact sheets and removes anything that doesn't belong.
4. Styles and components. 4–6 style directions rendered with your copy and CC-licensed photos (16 presets: Swiss Minimal, Editorial Serif, Neo-Brutalist, Tech Noir…), plus 18 live 3D and motion components (WebGL shaders, a dot globe, particle galaxies, magnetic buttons, sticky stacks…).
5. Votes → plan → brief → PDF. You vote and press Send. The agent analyzes your favorites, publishes a plan per section that you can edit and approve, writes the brief with CSS tokens (DESIGN.md) and exports a studio-style PDF report.
6. The page. A responsive HTML page (or a clickable prototype for apps), published to the board in desktop, tablet and mobile. Click anything to pin a comment, attach a reference, and choose tweak, replace, add above or add below. The agent applies each one and publishes the next version.

What's in the package

• SKILL.md: the full workflow plus setup for Claude Code, Cursor, VS Code Copilot, Windsurf, Claude Desktop, Codex CLI and Gemini CLI.
• A local MCP server (Node.js) with 21 tools, the voting board, the PDF report, 16 style presets and 18 live components.
• Two playbooks: research recipes per niche, and how to port components to React / R3F / GSAP.

Requirements

• An agent that supports MCP servers.
• Node.js 20+ and Google Chrome (or Playwright's Chromium).
• Internet access while researching. Mobbin is optional and needs your own account.

What it accesses, and why

Everything runs on your machine. On first start it runs npm install for its three dependencies (the MCP SDK, Playwright and zod). While researching, it drives your local Chrome to read public design galleries and live sites at human pace, and fetches CC-licensed photos from Openverse. The board is served on localhost. Sessions, screenshots and votes are saved in .inspo/ inside your project. It sends nothing to any server of its own, needs no API keys, and only reads the INSPO_DIR, INSPO_PORT and INSPO_HOME settings.

Good to know

References are for inspiration: the skill takes principles, never pixels, and never clones a site. Open source under the MIT license.