# saaspo-mcp

An MCP server that gives AI coding agents access to [saaspo.com](https://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

Register with Claude Code (no clone needed):

```bash
claude mcp add saaspo -- npx -y saaspo-mcp
```

Or in any MCP client config:

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

To hack on it from source instead:

```bash
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:

```bash
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:

```bash
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](https://saaspo.com/submit) and support them.