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