How to Build a Landing Page With Claude and an MCP Server (2026 Guide)

Ask an AI assistant for “a landing page for my SaaS” and you get something that looks like every other landing page, with a pricing table that doesn’t quite line up and a hero that ignores your brand. The problem isn’t the model. It’s that the model is working from memory, with nothing real to build from.

An MCP server changes that. It gives the assistant a set of tools it can call while it works — in this guide, tools that search a library of production-ready sections, fetch their code and read your design rules. The result is a page assembled from parts that already work, styled with your tokens.

By the end of this guide you’ll have connected the server, handed over your brand, and built a complete landing page: hero, logos, features, pricing, testimonials and footer.

What is an MCP server, in plain English?#

MCP stands for Model Context Protocol, an open standard introduced by Anthropic in late 2024 for connecting AI applications to outside tools and data. Think of it as a universal adapter: the AI app (Claude, Cursor and others) is the laptop, the MCP server is the device, and the protocol is the plug they both understand.

An MCP server exposes tools. When you ask for something, the assistant decides which tool to call, calls it, reads the result and carries on. The Wondrstack server exposes four:

• search_sections — find sections by type, industry and style (“split hero, fintech, dark”).
• get_section — fetch one section’s code for your stack: React, Next.js, Vue, HTML and more.
• get_design_md — read the DESIGN.md and tokens that belong to a section or to your project.
• list_templates — browse complete page sets when you want a whole site, not one block.

Why build from a library instead of generating from scratch?#

Generating from scratch means the assistant invents spacing, breakpoints and component structure every time. Some of it will be good. Some of it will break on a phone or drift from your brand by the third section. A library turns that guesswork into selection: the sections are already responsive, accessible and consistent with each other.

The biggest difference isn’t speed. It’s how much of your time goes into reviewing rather than repairing.

Step 1 — Connect the server#

In Claude Desktop#

Open Settings → Developer → Edit config. This opens claude_desktop_config.json. Add the server under mcpServers, save, and restart Claude.

{
  "mcpServers": {
    "wondrstack": {
      "command": "npx",
      "args": ["-y", "@wondrstack/mcp"],
      "env": { "WONDRSTACK_API_KEY": "your-key-here" }
    }
  }
}

After the restart you’ll see the Wondrstack tools listed in the tools menu. Ask “What sections do you have for a fintech hero?” to check the connection.

In Cursor#

Create .cursor/mcp.json in your project (or use the global settings for every project) with the same entry. Cursor picks it up automatically; you can confirm under Settings → MCP.

{
  "mcpServers": {
    "wondrstack": {
      "command": "npx",
      "args": ["-y", "@wondrstack/mcp"],
      "env": { "WONDRSTACK_API_KEY": "your-key-here" }
    }
  }
}

Step 2 — Give the assistant your brand#

Before you ask for a single section, tell the assistant what your brand looks like — in writing. A DESIGN.md is a plain-text file with your colours, type, spacing and a few rules. Assistants follow it far more reliably than a screenshot or a link to a design file.

# Acme — DESIGN.md

## Colour
--brand: #5B4BDB
--ink: #14161A
--surface: #FAF8F5

## Type
Display: Manrope 700, tight tracking (-0.02em)
Body: Inter 16/1.6

## Rules
- One primary button per section.
- Radius 12px on cards, 999px on buttons.
- Never use pure black text.

Save it in your project and start your conversation with: “Read DESIGN.md and use it for everything we build today.” If you don’t have one yet, ask the server for the DESIGN.md of a section you like and edit it — that’s the fastest way to start.

Step 3 — Ask for the page, one section at a time#

It’s tempting to ask for the whole page in one prompt. Don’t. Ask for one section, review it, then move on. Each step stays small enough to check properly, and the assistant keeps the context of what you’ve already approved.

1. Hero: “Find a split hero for a B2B analytics product with a product screenshot. Use our DESIGN.md.”
2. Proof: “Add a logo strip under the hero — six logos, greyscale.”
3. Features: “Now a bento grid with four features. Keep the same card radius.”
4. Pricing: “Three tiers with a monthly/annual toggle. Highlight the middle tier.”
5. Testimonials and footer: “Finish with a testimonial wall and a footer with a newsletter field.”
6. Assemble: “Combine the approved sections into app/page.tsx, in this order.”

Here’s the hero prompt in full, the way we actually write it:

Search the Wondrstack library for a split hero for a B2B analytics SaaS.
Requirements:
- Headline on the left, product screenshot on the right
- One primary CTA ("Start free") and one quiet secondary ("Book a demo")
- Use our DESIGN.md for colour, type and radius
- Output React + Tailwind in components/sections/Hero.tsx
Show me two options before you write any files.

Asking for two options first is the single most useful habit in this workflow. It costs one extra message and saves you from rebuilding a section you didn’t want.

Step 4 — Review like an editor, not a spectator#

The assistant does the assembly; you’re the editor. Check each section against the same short list before you approve it:

• Does it follow DESIGN.md — colours, type, radius, one primary button?
• Does it hold up at 390px wide? Resize the preview; don’t trust the desktop view.
• Is the copy yours? Replace every placeholder line before moving on.
• Are images real, with alt text that describes them?
• Does the heading order make sense — one H1 on the page, H2s for sections?

Common mistakes and quick fixes
#

What this workflow is not good for#

It’s a fast way to build marketing pages, dashboards and app screens from proven parts. It isn’t a replacement for product thinking: the assistant can’t tell you what your headline should promise or which plan to highlight. It also won’t invent a truly novel layout — if your page needs something no library has, design that section yourself and let the assistant handle the rest.

Your next step#

Connect the server, write a ten-line DESIGN.md, and build one section today — just the hero. Once you’ve reviewed one section properly, the rest of the page goes quickly. If you want a head start, browse the section library or start from a complete template.

Connect the MCP server