Deal your palette. Shape your architecture. Export your AI blueprint.
The structured visual design prompt generator for modern AI & web development. Lock in your brand's colors, typography, UI architecture, navigation, photography, and publication layouts to generate an executable master design blueprint ready for Antigravity, Astro, Cursor, or Claude Code.
Explore All Capabilities
AI coding tools produce disjointed, generic templates without strict design constraints. The Shuffle establishes unbreakable visual rules across all 6 core design pillars.
Scrape brand colors and logos directly from any live URL with AI vision. Upload vector logos (SVG, PNG, EPS, AI with automated conversion), describe your brand with AI, or Bring Your Own Colors (BYOC).
Battle-test 24 curated palettes across Light and Dark themes in King of the Hill elimination. Tweak any swatch in real-time with integrated color pickers, verified by automated WCAG AA contrast auditing.
Start with Serif vs. Sans. Compare 30 curated pairings in dynamic in-card UI mockups styled with your active colors, or search 1,700+ Google Fonts with granular weight controls.
Standardized comparison of 7 UI archetypes (Minimalist, Soft, Brutalist, Enterprise, Editorial, Neomorphic, Retro 90s) plus 12 responsive navigation layouts (Floating Island, Sticky, Mega-Menu, Dock, Utility).
Move far beyond single-card teasers. Select from 5 complete publication systems with paired specifications for both your Archive Feed (archive.php) and Single Post article reader (single.php).
Inspect your locked tokens inside realistic 16:10 desktop and 9:19.5 smartphone frames with 3D isometric tilt. Export production-grade Markdown and JSON tokens, or send shareable client review links with pre-rendered social cards.
The 8-Step Tournament
A fast, distraction-free King of the Hill elimination tournament. Make intuitive choices step-by-step to lock down a production-grade visual design prompt.
Discover your brand's true colors. Extract brand colors and visual logos directly from any live URL using AI vision, upload vector logos (SVG, PNG, EPS, AI with automated conversion), describe your brand with AI, or battle-test 24 curated palettes in our King of the Hill elimination deck. Fine-tune any swatch in real-time with integrated color pickers, backed by automated WCAG AA contrast ratio validation.
Typography defines your voice and credibility. Start with a vibe check: decide whether your brand leans toward the timeless authority of a serif or the modern clarity of a sans-serif. Compare 30 curated pairings in dynamic in-card UI mockups styled with your active colors, or search 1,700+ Google Fonts with granular font weight controls.
Buttons, corner radii, borders, and shadows. Test your locked colors and fonts against 7 distinct architectural styles—from stark Brutalist lines and soft Neomorphic pillows to Enterprise data tables and Retro 90s stampy buttons. All styles are rendered with standardized form copy for true apples-to-apples visual comparison.
Navigation anchors user orientation, site credibility, and conversion paths. Select from 12 conversion-tested navigation archetypes engineered for modern web applications: The Floating Island (detached rounded glass capsule), The Classic Sticky (universal SaaS edge-to-edge standard), The Multi-Column Mega-Menu (8+ pages with promo cards), The Vertical Sidebar Dock (web apps & dashboards), The Two-Tier Utility (enterprise announcement & portal bar), or The Fullscreen Minimalist (cinematic editorial takeover). Every style automatically adapts to mobile touchscreens.
A picture sets the emotional temperature before a visitor reads a single word. Pick from 12 curated visual aesthetics—such as Dark & Cinematic, High-End Editorial, Minimalist Architectural, Warm Vintage, Clean Corporate, Macro Textural, or Drone Aerial. Each direction establishes clear rules for lighting (ambient glow, high-key, chiaroscuro), mood, and composition so all your photography and generative imagery feels harmoniously on-brand.
Real brands publish content. Rather than leaving articles as an afterthought, The Shuffle includes 5 full-scale publication architectures: The Editorial Magazine (720px centered reading column with drop caps and pull quotes), The Tech & Dev Blog (monospace version tags, sticky Table of Contents, syntax-highlighted code blocks), The Bento Grid (visual masonry with category chips), The Minimalist Newsletter (clean Substack-style reading flow with subscribe box), and The Resource Hub (multi-tier filtering, search, and downloadable guides). Every publication ships paired specifications for both your Archive Feed (archive.php) and Single Post article reader (single.php).
How structured design prompts bridge the divide between AI hallucinations and enterprise front-end engineering.
ithout explicit constraints, AI generators produce discordant CSS. The master blueprint resolves this through strict design tokens.
Experience your complete design system before you seal your choices. The Shuffle renders your selected palette, typography, UI architecture, navigation, and publication layouts live inside a 16:10 desktop browser frame and a 9:19.5 smartphone bezel with interactive 3D isometric tilt and hover-flattening. Toggle effortlessly between Landing Page, Blog Archive Feed, and Single Post reader views to evaluate responsive behavior. Need a small adjustment? The Fine-Tune Studio gives you granular control to tweak any hex code, font weight, corner radius, or shadow before exporting.
Design tokens compile directly into production code.
Contrast 10.4:1
Lock in your design decisions with confidence. Export an exhaustive Master Design Blueprint in structured Markdown and JSON format. Feed it directly into modern AI tools like Claude Code, Antigravity, Cursor, Astro, or v0 to build a pixel-perfect, cohesive site on the very first try with zero hallucinated colors or broken contrast. Need stakeholder or client approval? Generate an instant public Client Share Link (/share/[token]) with 3D device previews and pre-rendered social unfurl cards.
The Problem & Solution
Prompting an LLM with "make it modern and clean" produces chaotic, unbranded websites. The Shuffle enforces strict boundaries so your AI build is cohesive on the first try.
The Clockwork Ecosystem
The Shuffle is the essential first phase of the Clockwork web platform. Lock in your visual rules here, generate your copy in Clairvoyance, and let Clockwork build the site.
Lock in your colors, typography, UI architecture, navigation, blog layout, and photography direction as an executable design blueprint.
A guided AI conversation that turns what you know about your business into production-ready copywriting for every page—tailored to your design blueprint.
Clockwork combines your design blueprint and content into a high-performance, modern Astro website—complete with responsive styling, SEO, and analytics.
Got Questions?
Everything you need to know about The Shuffle and design blueprints.
A Master Design Blueprint is an executable prompt formatted in Markdown and JSON. It includes exact CSS custom property definitions for your palette, typography scale, Google Font imports, UI button and border styles, navigation architecture, publication templates, and photography mood directives. You can feed it directly into AI coding assistants like Cursor, Claude Code, or Antigravity to guarantee visual consistency.
Yes! You can enter any website URL, and our AI vision system will locate your brand logo and extract the true visual palette. You can also upload your logo directly—we support SVG, transparent PNG, JPG, and GIF, plus automated vector conversion for Adobe Illustrator (.ai) and Encapsulated PostScript (.eps) files.
Yes. While The Shuffle ships with 30 battle-tested, curated pairings (including Pro Mixed pairs), you can also search our Google Fonts Studio covering 1,700+ Google Fonts and customize heading and body weights from 100 through 900.
Instead of generating single mock articles, The Shuffle defines paired publishing systems across 5 distinct styles (Editorial Magazine, Tech Changelog, Bento Grid, Minimalist Newsletter, and Resource Hub). Each style includes full specifications for both the Archive Feed (archive.php with search, topic pills with counts, and lead dispatches) and the Single Post reader (single.php with drop caps, key takeaways, and author bio cards).
Once your blueprint is complete, you can generate a clean public share link (/share/[token]) to send to clients, stakeholders, or teammates. It displays realistic 3D desktop and mobile previews with your active brand assets, accompanied by pre-rendered social unfurl cards for Slack, Twitter/X, and LinkedIn.
Yes! The entire tournament, preview studio, fine-tune controls, and master blueprint export are 100% free with an email address. There are no credit cards required and no trial periods.
Lock in your colors, typography, UI architecture, navigation, and publication layouts in under 5 minutes. Receive an executable design blueprint ready for any AI or modern web stack.
Free with email · No credit card required · Export Markdown & JSON