saaspo-mcp

An MCP server that gives AI coding agents access to saaspo.com — the SaaS web design inspiration library — plus a companion skill that makes the agent design landing pages like a senior designer: pull real references, deconstruct why they work, then mix and match.

3,000+ real SaaS pages · 700+ individual sections · tagged by style, industry, page type, section type and stack · with screenshots the agent can actually see.

Why

Coding agents produce visually average pages when they design from training data alone. Great designers steal like artists: they study world-class work, break down what makes it work, and recombine it. This server gives your agent that reference library, and the skill gives it the workflow — give the agent your copy, tell it the vibe, and it grounds every visual decision in real shipped designs instead of hallucinating.

Tools

| Tool | What it does | | --- | --- | | get_design_vocabulary | All searchable styles (Dark Mode, Bento, Neobrutalism…), industries, page types, section types, stacks — with example counts. Translates a "vibe" into filters. | | search_pages | Search full pages by style/industry/page type/stack/free text. | | search_sections | Search individual sections (Hero, Pricing, Testimonials, Footer…) for mix-and-match stealing. | | get_page_details | Full record: live URL, tags, screenshot variants, the company's other pages and captured sections. | | get_screenshot | Returns the actual screenshot as an image the agent can look at. Tall full-page captures are served in readable vertical segments. | | get_random_pages | Random references for divergent exploration. |

Install

npm install
npm run build

Register with Claude Code:

claude mcp add saaspo -- node /path/to/saaspo-mcp/dist/index.js

Or in any MCP client config:

{
  "mcpServers": {
    "saaspo": {
      "command": "node",
      "args": ["/path/to/saaspo-mcp/dist/index.js"]
    }
  }
}

The skill

skills/saaspo-designer/SKILL.md encodes the senior-designer workflow (brief → vocabulary → references → deconstruction → section plan → design tokens → implementation → self-critique). Install it for Claude Code:

cp -r skills/saaspo-designer ~/.claude/skills/

Then just give the agent your copy: "Design a landing page for my product with this copy — dark, technical, premium vibe." The skill triggers, pulls references through the MCP, and designs from them.

Dataset

The server ships with a pre-scraped index (data/). Saaspo adds new pages continuously; refresh whenever you like:

npm run scrape

Screenshots are never bundled — they're fetched on demand from saaspo's public CDN at view time.

How it works

Saaspo is a Webflow site. The scraper walks the public sitemap and parses each page's metadata (page type, styles, industries, stack, section tags, screenshot URLs) into a compact JSON index. At runtime the server searches the index in memory and fetches screenshots from the Webflow CDN, resizing and segmenting them (via sharp) so even 13,000px-tall full-page captures arrive as readable images.

Please be a good citizen: the scrape is a few thousand light HTML requests with modest concurrency. All content belongs to saaspo and the respective site owners — this tool is for design study, in the spirit of saaspo itself.

This project is not affiliated with or endorsed by saaspo. If you find the library useful, submit your sites and support them.