Building a Therapist Booking Landing Page with GradientDeck MCP

This is a real-world walkthrough of building a complete landing page using only GradientDeck MCP tools. The product: a therapist booking SaaS called 'Serenity'. The goal: a calm, trustworthy, accessible landing page that doesn't look AI-generated.

Step 1: Get a design recommendation

First, ask the agent to recommend a design direction:

Ask: "Use GradientDeck to recommend a design direction for a therapist booking SaaS. Audience: people seeking therapy. Mood: calm, trustworthy, warm."

The agent calls recommend_design. It matches the brief to the 'health-wellness-app' recipe and returns:

• Palette: teal (#14b8a6), mint (#86efac), mint-50 (#f0fdfa), dark teal (#0f766e).
• Background: mint-50 wash with a soft teal radial.
• Pattern: soft dots, very low contrast (0.08 opacity, 24px grid).
• Typography: rounded, medium weight, teal-800 headings, relaxed leading.
• Motion: slow ease-in-out (300-500ms), breathing-pace.
• Radius: 20-28px cards, pill buttons.
• Do: use progress rings/breathing animations, keep contrast soft but AA.
• Don't: use red (except alerts), sharp corners, or heavy shadows.

Step 2: Generate the design system

Next, generate a full token system from the seed color:

Ask: "Use GradientDeck to generate a design system from #14b8a6 in CSS format."

The agent calls generate_design_system. You get an 11-step brand scale (50-950), semantic colors (success/warning/danger/info), neutrals, radius/typography/motion/elevation tokens, and component treatments (button, card, input, modal). The CSS output defines :root variables you can paste directly.

Step 3: Generate the assets

Now generate the individual assets the page needs:

Pattern background

Ask: "Use GradientDeck to generate a dots pattern background. Background: #f0fdfa, foreground: #14b8a6, opacity: 0.08, size: 24px, CSS format."

Returns: background-color: #f0fdfa; background-image: radial-gradient(rgba(20, 184, 166, 0.08) 1.5px, transparent 1.5px); background-size: 24px 24px;

Glassmorphism

Ask: "Use GradientDeck to generate glassmorphism. Light background, blur 10px, opacity 0.7, radius 16px, shadow md, CSS format."

Returns: background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; — used for the booking card and feature cards.

Box shadow

Ask: "Use GradientDeck to generate a soft box shadow at elevation 3, CSS format."

Returns: box-shadow: 0 3px 6px -1px rgba(0,0,0,0.1); — soft, never heavy or clinical.

Step 4: Compose the full page

Now ask the agent to compose the full treatment:

Ask: "Use GradientDeck to compose a hero UI treatment. Use case: hero. Brand color: #14b8a6. Dark mode: false."

The agent calls compose_ui_treatment. The output is a production-ready React component with:

• A <style> block with :root tokens (--gd-accent, --gd-bg, --gd-text, etc.).
• A solid headline (no gradient text — passes gate 2).
• A left-biased hero (min-h-[70vh], items-start — passes gate 6).
• A glass booking card on the right with therapist profile + time slots.
• Pill buttons with :focus-visible, :active, :disabled states (passes gate 26).
• @media (prefers-reduced-motion: reduce) (passes gate 27).
• overflow-x: clip (passes gate 34).
• overflow-wrap: anywhere on headings (passes gate 51).
• white-space: nowrap on buttons (passes gate 49).
• No fabricated metrics — em-dash placeholders (passes gate 46).

Step 5: Build the remaining sections

The page needs more than a hero. Here's how each section was built — all anti-slop compliant:

How it works — vertical steps (not a 3-col grid)

Instead of the AI-default 3-column icon-tile grid (gate 3), the steps are a vertical numbered list. Each step has a number badge + title + body. This is categorically different from the template every LLM reaches for.

Features — asymmetric grid (not equal cards)

Instead of 4 equal-width feature cards, the features use a 1.3fr/1fr asymmetric grid that alternates. Glass cards with soft shadows. No icon-tile-above-heading pattern.

Testimonial — single quote (no fabricated metrics)

One real-sounding quote with a name. No 'trusted by 50,000+ teams' strip. No 5-star rating grid. Just a sentence that sounds like a human said it.

CTA — solid, not gradient

A solid teal pill button. No gradient CTA. No aurora-blob background. Just a clean call to action on the dots-pattern surface.

Footer — single-line (not the AI 4-column)

Instead of the AI-default 4-column link grid + social row + tiny copyright (gate 43), the footer is a single-line layout: logo + tagline + inline links + copyright.

Step 6: Audit the final page

Run the slop test on the finished code:

Ask: "Use GradientDeck to run a slop test on this code." and paste the full page.

All auto-checked gates pass. The verdict is 'clean'. The 33 manual-review gates (accent area %, hero fold fit, nav/footer fingerprints, etc.) are marked for review — they need a rendered viewport, which the MCP can't provide.

The result

The finished page is live at gradientdeck.com/mcp/example-1. It's a complete therapist booking SaaS landing page — hero with a glass booking card, vertical how-it-works steps, asymmetric feature grid, single testimonial, CTA, and a clean footer. Every section uses the health-wellness recipe's palette, pattern, glass, and shadow — all generated by GradientDeck MCP tools.

This walkthrough used 6 MCP tools (recommend_design, generate_design_system, generate_pattern_background, generate_glassmorphism, generate_box_shadow, compose_ui_treatment) and the slop_test audit. The entire page was built with AI agent assistance — and it doesn't look AI-generated. That's the point.