GradientDeck Guides

Implementation guides for CSS and interface work

Read practical notes on choosing visual treatments, building accessible interfaces, and using GradientDeck generators when a real project needs a clear design decision.

8 guidesCSS and UI surfacesAccessibility notes
Design Systems7 min·Published 2026-07-04·Updated 2026-07-20

Choosing Between Gradients, Mesh, and Liquid Glass

A practical guide to picking the right surface treatment for a hero, card, or dashboard. When to use each effect, what each one does well, and which mistakes make a page feel generic or hard to read.

Read implementation guide
Site Strategy8 min·Published 2026-07-03·Updated 2026-07-19

How to Make a Generator Page Feel Like Real Content

A checklist for turning a utility page into something Google and real users can understand: clearer intent, better examples, stronger internal links, and less filler around the widget.

Read implementation guide
Getting Started8 min·Published 2026-06-30·Updated 2026-07-18

Getting Started with GradientDeck MCP

Everything you need to connect GradientDeck to your AI agent — what it is, what you get, and how to set it up in under 30 seconds. Covers Claude Code, Cursor, Windsurf, Codex, OpenCode, and the OpenAI API.

Read implementation guide
Anti-Slop6 min·Published 2026-06-30·Updated 2026-07-16

Anti-Slop Design: Making AI-Generated UI That Doesn't Look AI-Generated

The 58 gates, how they work, what they catch, and why your agent's output should pass them before you ship. A deep dive into the anti-AI-slop system built into GradientDeck MCP.

Read implementation guide
Walkthrough7 min·Published 2026-06-30·Updated 2026-07-15

Building a Therapist Booking Landing Page with GradientDeck MCP

A real-world walkthrough: from a blank page to a production-ready therapist booking SaaS landing page — using only GradientDeck MCP tools. See the full process: recommend, generate, compose, audit.

Read implementation guide
Design Guide12 min·Published 2026-07-01·Updated 2026-07-14

Hero Section Layouts: A Complete Guide for Designers and Developers

Every hero layout pattern worth using, with inline HTML/CSS examples you can copy. Learn when to use a split hero vs a centered hero, why full-viewport centered heroes are the #1 AI-slop tell, and how to bias your layout for real impact.

Read implementation guide
Tailwind CSS8 min·Published 2026-07-01·Updated 2026-07-17

Glassmorphism in Tailwind CSS v4: A Practical Guide with Copy-Paste Examples

How to build real frosted-glass UI in Tailwind v4 — backdrop-filter, saturation, borders, shadows, and the accessibility pitfalls nobody talks about. With copy-paste code.

Read implementation guide
Accessibility9 min·Published 2026-07-01·Updated 2026-07-13

WCAG Contrast for Designers: A Practical Guide (Not Just a Ratio Calculator)

Contrast ratios explained without jargon. What 4.5:1 actually means, how to test it, the five most common failures, and accessible alternatives you can copy. With live examples.

Read implementation guide

Ready to connect?

Set up GradientDeck MCP in your agent in under 30 seconds.

Setup guide