Create Mockup — UI From Scratch, Matched to Your Stack

A skill that builds UI mockups from scratch — no Figma file needed — after a short interview, in the style your project already uses. Ask an agent for "a landing page" and you tend to get the same centered hero, the same purple gradient, and code that ignores how your project is set up. This skill puts a few batched questions in front of the build (site type, look, pages, sections, images), detects your stack first, follows your project files, and finishes by checking the result and starting the dev server.

What it does

• Detects the framework, router, icon library, style utilities and linter from package.json (Astro, React, or plain HTML with Vite), then reads only the reference for that mode
• Asks about site type, design style, page type and sections in one or two batched questions, not a long form
• Defines your colors as Tailwind CSS v4 @theme tokens, and avoids token names that collide with built-in utilities
• Treats DESIGN.md as the source of truth when you have one, and uses BRIEF.md as requirements context when it exists
• Builds accessible markup: nav lists, labelled inputs, uppercase applied as a style instead of typed in the HTML, no dangling aria references
• 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 to an existing one, and how much creative direction you want.
3. Asks about the design: site type, colors and mood, images, pages and sections.
4. Builds: cleans up starter demo content, then implements the pages.
5. Checks and runs: class checks, lint and build, then starts the dev server and gives you the URL.

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
• Escape AI Slop (cognitive-ui-design): layouts that break the centered-hero default
• Japanese Web Guideline and Japanese LP Seasoning: typography, carousels, scroll reveals and vertical text for Japanese sites
• Code to Figma: export the finished page to Figma
• 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

A page built with this skill from one short request, a landing page for a fictional coffee roaster: https://create-mockup-demo.gaspanik.workers.dev/

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