saaspo-designer

saaspo-designer is a skill for Claude Code, Codex from doziben/Saaspo-MCP. It costs 91 tokens per session (1,442 once invoked), scanned A, original, MIT.

A design skill for creating SaaS landing pages, which are web pages that introduce software products. It bases design choices on visual references from saaspo.com, a library of product and marketing design examples.

In plain words
What is it for?
Use it to plan or build a product landing page, select relevant references, and shape its layout, theme, colors, typography, and messaging.
Why use it?
It helps avoid generic layouts by requiring real reference screenshots and by matching the page to the product, audience, copy, and visual direction.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to plan or build a product landing page, select relevant references, and shape its layout, theme, colors, typography, and messaging.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/doziben/saaspo-mcp/saaspo-designer
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add doziben/Saaspo-MCP --skill saaspo-designer
Clone the repo
git clone --depth 1 https://github.com/doziben/Saaspo-MCP

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for saaspo-designer

README.md
[![agentmods](https://agentmods.dev/badge/skills/doziben/saaspo-mcp/saaspo-designer/github.svg)](https://agentmods.dev/skills/doziben/saaspo-mcp/saaspo-designer)
Your own site
<a href="https://agentmods.dev/skills/doziben/saaspo-mcp/saaspo-designer"><img src="https://agentmods.dev/badge/skills/doziben/saaspo-mcp/saaspo-designer/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for saaspo-designer

Your own site · 80×15
<a href="https://agentmods.dev/skills/doziben/saaspo-mcp/saaspo-designer"><img src="https://agentmods.dev/badge/skills/doziben/saaspo-mcp/saaspo-designer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 91 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,442 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00091 $0.01442
Opus 5 $0.00046 $0.00721
Sonnet 5 $0.00018 $0.00288
Haiku 4.5 $0.00009 $0.00144

Measured 10d ago against content hash ac8f15807cf8, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

saaspo-designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/saaspo-designer/SKILL.md · 118 lines

How it starts

The opening of the file, as written. The whole thing — 118 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Saaspo Designer — steal like an artist

You are acting as a senior product designer with high taste. Your job is not to generate a landing page from training-data averages — that produces AI slop. Your job is to ground every design decision in real, shipped, world-class references pulled from the saaspo library, deconstruct why they work, then recombine them into something original that fits the user's product.

Non-negotiable rule: never design from tags or memory alone — always LOOK at screenshots before making visual decisions. If the saaspo MCP tools are not available, tell the user to connect the saaspo MCP server and stop.

Phase 0 — Read the brief

From the user's copy/brief extract before touching any tool:

  • Product: what it is, who it's for, price point, seriousness (fintech ≠ meme tool)
  • Copy inventory: headlines, subheads, feature bullets, social proof, CTAs they gave you
  • Vibe: explicit adjectives they used, plus 3-5 you infer ("confident, technical, warm") — write these down, they drive the reference search
  • Theme: light, dark, or decide yourself from positioning
  • Constraints: brand colors, fonts, framework, existing design system

If copy is missing for a section you'll need (e.g. no testimonials), note it and write placeholder copy in the product's voice — never lorem ipsum.

Phase 1 — Translate vibe → vocabulary

Call get_design_vocabulary. Map your vibe adjectives onto its actual styles (e.g. "premium + technical" → Dark Mode, Ultra-detailed, Scroll Animations; "friendly + simple" → Playful, Colorful, Simple). Pick:

  • 2-3 style filters (primary direction + a wildcard that could subvert it)
  • the closest industry (for relevance) — but do NOT only search the user's industry; the best steals often come from adjacent ones

Phase 2 — Gather references

  1. search_pages 2-4 times with different style combos (pageType "Landing" unless building something else). Pull 8-15 candidates total.
  2. get_screenshot (desktop variant) on the 6-8 most promising. Actually look.
  3. Choose 3-4 references and state why each earns its place — one should usually come from outside the obvious style/industry lane.
  4. For your top 1-2 references, walk the full variant segment by segment to learn the complete section sequencing and how the page's energy is paced from hero to footer.
  5. For each section you'll build, search_sections by sectionType (Hero, Pricing, Testimonials, FAQs, CTA, Footer…) and view the best 2-3. Sections are where you mix and match: hero rhythm from one company, pricing table anatomy from another, footer from a third.

Read the full file on GitHub · 118 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 10d ago First seen · 118 lines · 91 tokens per session scan A ac8f15807cf8

Subscribe to this mod's changes

saaspo-designer is a skill published in the GitHub repository doziben/Saaspo-MCP (0 stars, last pushed 2mo ago), licensed MIT. It adds 91 tokens to every session and 1,442 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

xxd-color-brief

Turn vague visual direction into a practical Chinese traditional color brief. Use when a user has mood words, client feedback, audience positioning, references, or an unclear Chinese traditional color direction that must become palette constraints before choosing colors.

nevertoday/zhongguo-traditional-colors · 50 tokens

xxd-ui-token

Convert Chinese traditional colors into practical UI design tokens. Use when a user asks for CSS variables, Tailwind theme colors, Figma variables, light and dark modes, semantic color roles, component states, or designer developer handoff based on Chinese traditional colors.

nevertoday/zhongguo-traditional-colors · 56 tokens

xxd-accessible-color

Check and repair Chinese traditional color combinations for readability and accessibility. Use when a user asks whether text, buttons, UI states, charts, light mode, dark mode, or traditional color palettes meet contrast and non-color-cue requirements.

nevertoday/zhongguo-traditional-colors · 52 tokens

xxd-brand-system

Build a reusable brand color system from Chinese traditional colors. Use when a user needs brand palette governance, color rules, identity consistency, usage ratios, forbidden combinations, cross-channel guidance, or long-term visual rules based on Chinese traditional colors.

nevertoday/zhongguo-traditional-colors · 52 tokens

xxd-content-series

Design reusable Chinese traditional color systems for content series. Use when a user needs color rules for Xiaohongshu covers, WeChat articles, video thumbnails, course slides, newsletters, recurring columns, editorial series, carousels, or multi-part content that must stay recognizable over time.

nevertoday/zhongguo-traditional-colors · 62 tokens

xxd-data-viz

Create chart and data visualization palettes from Chinese traditional colors. Use when a user needs categorical, sequential, diverging, highlight, dashboard, map, ECharts, D3, Chart.js, or colorblind-aware data palettes with Chinese traditional color identity.

nevertoday/zhongguo-traditional-colors · 56 tokens