Create Multi Mockup — Compare Layout Patterns of One Page

A skill that builds several genuinely different layouts of the same page in one run, so you can compare design directions before you commit to one. Ask an agent for "three layout options" and you often get one template in three colors. This skill gives each pattern its own structure (where the eye lands, how sections are arranged, where the main button sits) while the palette, sections and content stay the same, so the comparison is about layout alone. It detects your stack first, follows your project files, and finishes with a comparison page, class checks, a build and the dev server.

What it does

• Detects the framework, router, icon library and linter from package.json (Astro, React, or plain HTML with Vite), then reads only the reference for that mode
• Asks about the palette, images, page type, sections and how many patterns (default 3) in a few batched questions
• Defines one shared set of colors as Tailwind CSS v4 @theme tokens, and avoids token names that collide with built-in utilities
• Shows a short structural sketch of each proposed layout before building, then builds the ones you choose
• Works on a whole page or on a single section: add testimonials, pricing or an FAQ to a page you already have in several layouts, labelled in the page so you can scroll and compare
• Builds accessible markup: nav lists, labelled inputs, uppercase applied as a style instead of typed in the HTML, no dangling aria references
• Generates a comparison page that links to every pattern, checks for duplicate and conflicting classes, runs your linter and build, and starts the dev server

How it works

1. Reads your project: package.json, CLAUDE.md, and DESIGN.md / BRIEF.md if present, then reports the stack it found.
2. Asks the setup questions: new project or an addition, and how much creative direction you want.
3. Asks about the design: palette, images, page type, sections and the number of patterns.
4. Proposes and builds: a sketch of each layout, then the patterns you pick, each as a self-contained page.
5. Checks and runs: a comparison page, class checks, lint and build, then the dev server and the URL to open.

Afterwards you can mix sections across patterns, continue with one pattern in Create Mockup, or capture the patterns into Figma.

Works with (all optional)

If one of these is installed, the skill offers the matching question. If it is not, the question is skipped.

• Brief Me (brief-me): a requirements interview that writes BRIEF.md first, shared by all patterns
• Escape AI Slop (cognitive-ui-design): gives each pattern a different eye-tracking structure so the layouts really differ
• Japanese Web Guideline and Japanese LP Seasoning: typography, carousels, scroll reveals and vertical text for Japanese sites
• Create Mockup: continue with the pattern you picked
• Anthropic's frontend-design plugin: a bolder design direction

Requirements

Tailwind CSS v4 is required. The skill stops and points you to the install guide if the project uses Tailwind v3 or no Tailwind at all. You also need a project with a package.json and a CLAUDE.md in the project root (run /init first if it is missing), and Node.js. Stock photos are downloaded from Unsplash to your image folder, which needs internet access; you can choose solid-color placeholders instead. It does not set up a new project for you.

Live demo

Three layouts of one landing page for a fictional coffee roaster, built from one short request: https://create-multi-mockup-demo.gaspanik.workers.dev/comparison/

The questions it asked and the decisions it made are in the example session above.

More from KMRVID

The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills