There is a reason AI-built interfaces all look related. Every model trained on the same stock of SaaS templates, so skip the guidance and you get the same tells every time: Inter for everything, a purple-to-blue gradient, cards nested inside cards, a rounded icon tile above every heading.
The fix is not a better prompt. It is giving Claude the context a good designer would carry in their head: a concrete design system, real references, rules that fit the specific thing you are building, and a way to look at its own output. These four tools each supply one of those. A quick note on what they are, because it matters: these are skills and CLIs, not magic. They load structured design knowledge into Claude's context and give it commands to act on. That is exactly why they work.
One: Skill UI, Clone Any Site's Design System
Skill UI is a command-line tool that crawls any website, repo, or local codebase and extracts its complete design system: colours, typography, spacing, animations, components, even screenshots. It writes that into a folder Claude Code reads automatically, so Claude can build in that exact visual language. Notably, the core extraction is pure static analysis, so it needs no AI and no API key.
npm install -g skillui # Extract a design system from any URL skillui --url https://linear.app # Then open the folder in Claude Code and build cd linear-design && claude
Inside that folder Claude finds a CLAUDE.md and SKILL.md it loads on its own, so you just ask it to "build a landing page that matches this design system" and it uses the real tokens. There is an optional "ultra mode" that adds Playwright to capture scroll screenshots and detect animations, if you want the full visual capture rather than just the CSS. Requires Node 18+.
The honest version of the claim: it does reverse-engineer a site's design system into files Claude reads. What it captures is the visual system (colour, type, spacing, components), not the site's code architecture. Point it at sites you admire, not competitors you want to copy wholesale.
Two: Impeccable, Give Claude Design Taste
Where Skill UI copies one site, Impeccable installs general design judgement. It is a skill for AI coding agents built to kill exactly the "vibe-coded" look described above. It began from Anthropic's own frontend-design skill and adds a shared design vocabulary: one setup command plus a set of commands you run as you build.
npx impeccable install # Then, inside your AI coding tool: /impeccable init /impeccable polish
/impeccable init asks whether you are building a marketing surface or a product UI, then writes design-context files every later command reads. From there you get a working vocabulary with Claude: polish, critique, audit, bolder, quieter, animate, and more. Part of what makes it reliable is that it ships dozens of deterministic detector rules that run with no LLM at all, so the boring, checkable mistakes get caught mechanically rather than left to the model's mood.
Skill UI gives Claude a specific look to match. Impeccable gives it the judgement to know when a design is good.
Three: UI/UX Pro Max, Rules That Fit What You're Building
This one is a design-intelligence skill that reasons about your specific project. You tell it what you are making, a mobile app, a SaaS dashboard, a landing page, and it generates a tailored design system: colour palette, typography, and the design rules that actually suit that category, rather than a generic set. It carries a large library of reasoning rules and UI styles, and it works across many coding agents, not just Claude.
# Option A: Claude Code plugin marketplace /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill # Option B: CLI (works with many agents) npm install -g ui-ux-pro-max-cli cd /path/to/your/project uipro init --ai claude
The CLI route (uipro init --ai claude) also supports Cursor, Windsurf, Copilot, Gemini CLI and a long list of others, and you can add --global to install it once for every project. It is free and open source, with the maintainer taking optional donations.
Four: Playwright CLI, Let Claude See Its Own Work
The first three shape what Claude builds. This one lets it check the result. Playwright CLI, from Microsoft, gives a coding agent a browser it can drive: open a page, click, type, and take screenshots. So Claude can render what it just built, look at it, and catch broken layouts or errors before you ever see them.
One correction worth making, because it is the thing people get wrong: for driving a browser from an AI agent you might reach for the Playwright MCP server, but Microsoft now ships a CLI built specifically for coding agents, and its own docs recommend it over MCP for this use. The reason is token cost: the CLI exposes concise commands instead of forcing large tool schemas and full accessibility trees into the model's context. For a coding agent that is also juggling your codebase, that efficiency matters.
npm install -g @playwright/cli@latest playwright-cli --help # Install the agent skills playwright-cli install --skills
Once installed, Claude Code picks up the skills automatically. You can then say something like "build this page, then use playwright-cli to screenshot it and fix anything that looks broken," and it will run the browser itself. Requires Node 18+ and any coding agent. The MCP server still has its place for long-running, stateful automation, but for build-screenshot-fix loops the CLI is the leaner tool.
How They Stack
- 01Skill UI, the specific look. Extract a design system you admire so Claude has an exact target.
- 02Impeccable, the taste. General design judgement and a critique vocabulary so output stops looking generic.
- 03UI/UX Pro Max, the fit. Palette, type, and rules matched to the kind of thing you are building.
- 04Playwright CLI, the eyes. Claude screenshots its own work and fixes what is broken before you look.
You do not need all four to start. If I had to pick one, it would be Impeccable, because taste generalises across every project. Add Skill UI when you have a specific look to hit, UI/UX Pro Max when you are starting something new from zero, and Playwright CLI the moment you are tired of catching visual bugs by hand. Together they turn Claude from a model that produces plausible-looking UI into one that produces UI you would actually ship.
Want this kind of agentic setup for your own brand or product?
I help founders and brands build generative AI systems that actually ship: content engines, agentic workflows, and AI-built sites that are production-grade down to the schema layer. If you want a second pair of eyes on your setup, book a session.
Book a Growth Chat
Install commands and capabilities were taken from each project's own README and documentation as of July 2026: Skill UI (github.com/amaancoderx/npxskillui), Impeccable (github.com/pbakaus/impeccable), UI/UX Pro Max (github.com/nextlevelbuilder/ui-ux-pro-max-skill), and Playwright CLI (github.com/microsoft/playwright-cli). Open-source tools change quickly, so confirm the current command on each repo before running it. None of these are sponsored placements.