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.

Related MCP server: @designjs/mcp-server

Tools

Install

Register with Claude Code (no clone needed):

claude mcp add saaspo -- npx -y saaspo-mcp

Or in any MCP client config:

{
  "mcpServers": {
    "saaspo": {
      "command": "npx",
      "args": ["-y", "saaspo-mcp"]
    }
  }
}

To hack on it from source instead:

git clone https://github.com/doziben/Saaspo-MCP.git && cd Saaspo-MCP
npm install && npm run build
claude mcp add saaspo -- node /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:

mkdir -p ~/.claude/skills/saaspo-designer
curl -fsSL -o ~/.claude/skills/saaspo-designer/SKILL.md \
  https://raw.githubusercontent.com/doziben/Saaspo-MCP/main/skills/saaspo-designer/SKILL.md

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.