On this page
AI Strategy7 min · 29 Sept 2026
Design tools & Claude skills for great results
A curated map of Claude Code skills, MCP tools, and a workflow that stops AI-generated UI from looking like every other AI-generated UI.
Geddy
Senior Web Engineer / Lead
0:00
TL;DR30 sec
- Claude Code writes generic UI by default — the fix isn't better adjectives, it's ground truth (Figma MCP, reference URLs, design tokens) plus a way for the agent to check its own work
- Load an aesthetic skill (Anthropic's frontend-design, Taste Skill, Hallmark) before the first prompt; patching AI slop afterwards never works as well as overriding the defaults up front
- The most effective "taste" skills are just lists of banned defaults — purple gradients, centered heroes, Inter everywhere — because the gap isn't capability, it's the model reaching for the statistical average
- Figma MCP is the single highest-leverage tool here: exact hex codes and spacing beat eyeballing a screenshot by a full quality tier
- The screenshot-and-visual-diff loop (Playwright + compare against reference + iterate) is the step everyone skips and where most of the quality actually lives
- Build on primitives like shadcn/ui or Astryx so the agent assembles components instead of inventing buttons from scratch every time
Stop describing "premium" and start handing the model something to match — then make it verify the match itself.
This article contains affiliate links. If you sign up through one I may earn a commission, at no extra cost to you. It never changes what I recommend.
I've been saving screenshots for months. Design tips, skill repos, prompt libraries — anything that looked like it might fix the problem I kept running into: Claude Code writes decent UI by default, and generic UI if you let it default.
This is that archive, cleaned up. The skills that fix "AI slop" aesthetics, the tools that pull real design data into your session, and the workflow that ties them together.
Fair warning: I haven't battle-tested every line of this. Some of it is genuinely useful, some of it is probably hype with good marketing. I'm publishing it as a map, not a gospel. You'll know within ten minutes which half is which for your stack.
TL;DR — install these first
If you read nothing else, this is the shortlist.
- frontend-design skill — Anthropic's own skill for aesthetic direction and typography. Load it before any UI work so output stops looking templated.
- Figma MCP — pulls exact hex codes, spacing, and font weights from a Figma file straight into your session instead of guessing from a screenshot.
- shadcn/ui — production-ready component primitives to build on, so Claude isn't inventing buttons and cards from scratch.
- Taste Skill — bans the purple/blue gradient, centered-hero, Inter-everywhere "AI aesthetic" outright. Tunable dials for variance and density.
- Playwright (MCP or CLI) — closes the loop: screenshot the live app, compare against reference, iterate until it matches.
The through-line: give the model ground truth instead of adjectives, and give it a way to check its own work.
Claude skills & plugins for design
| Name | What | Value |
|---|---|---|
| frontend-design | Anthropic's skill for aesthetic direction, typography, distinctive UI choices | Default starting point — stops output reading as generic/templated |
| Pix | Claude skill combining Figma MCP + Chrome screenshots in an autonomous loop | Claude pulls exact design specs, then verifies its build against Figma until pixel-close |
| UI/UX Pro Max Skill | 50+ UI styles, 97 color palettes, 57 font pairings bundled as a skill | Fast, varied starting points instead of one default look; one of the most-starred design skills |
| Taste Skill | Bans "AI aesthetic" defaults (purple/blue gradients, centered heroes, Inter); tunable dials for variance, motion, density | Forces deliberate design choices instead of the model's defaults |
| Hallmark | Separate anti-AI-slop ruleset; can run alongside Taste Skill | A second opinion on "does this look AI-generated" |
| Awesome Claude Design | Curated directory of Claude-related design skills and resources (3.4k stars) | One place to browse before adding more skills |
The interesting thing about Taste Skill and Hallmark is that they're both essentially lists of things not to do. That tracks with my experience. Most of the gap between AI-generated UI and good UI isn't missing capability — it's the model reaching for the statistical average every single time.
Design tools & generators
| Name | What | Value |
|---|---|---|
| Figma MCP | Official MCP server exposing a Figma file's specs (colors, spacing, type, components) to an agent | Ground truth design data instead of eyeballing a screenshot |
| v0 | Vercel's AI UI generator, outputs React/Tailwind/shadcn components | Fast first-draft components and pages, wired to Vercel deploys |
| Lovable | AI app builder for full front-end + backend prototypes | Good for a working prototype from a prompt, minimal setup |
| Bolt | StackBlitz's in-browser AI app builder | Instant runnable scaffold, no local setup |
| Stitch | Google's AI UI design tool, generates mockups and matching front-end code | Useful for exploring layout/visual direction before wiring real code |
| Cursor | AI-native IDE, frequently used alongside Claude Code for iteration | Tight inline edit loop when refining generated UI |
| OpenUI | Open-source generative-UI framework; streams a compact format instead of JSON | 67% fewer tokens, 3x faster rendering for agent-drawn UI; runs in React/React Native/Vue |
| CopilotKit | Framework for building generative-UI agent front-ends (forms, cards, editable plans) | Ready patterns for agents that render real components, not just text |
| drawio-skill | Converts plain-text system descriptions into native draw.io diagrams, self-checks its own output | Architecture/flow diagrams without dragging boxes by hand; works with Claude Code, Cursor, Copilot, Codex |
| GIMP (+ PhotoGIMP patch) | Free image editor; PhotoGIMP reskins it to Photoshop's layout and shortcuts | Zero-cost raster editing for assets, no subscription |
Figma MCP is the one I'd fight for. Everything else on this list is a nice-to-have; feeding the agent actual spec data instead of a JPEG is a category change in output quality.
Prompt libraries, design systems & taste resources
| Name | What | Value |
|---|---|---|
| Cinematic UI Library | 85+ paste-ready prompts for cinematic, luxury web design (creative direction, UX journey, hero, scroll physics, audit) | Structured prompt sequence instead of one long ask; usable in Claude Code, Lovable, v0, Bolt, Cursor |
| Astryx | Facebook's open-source, agent-ready design system | A real design-system foundation instead of ad-hoc styling per project |
| Swiss government design systems | Switzerland's Federal Chancellery publishes 55+ public repos on GitHub, including design systems and API guidelines | Real-world, production-grade design-system reference to study patterns from |
| Inspiration galleries — 21st.dev, Godly.co, Awwwards.com | Component registry + curated high-end web design galleries | Feed specific reference URLs to Claude instead of describing "premium" in the abstract |
That last row is the whole trick in one line. "Make it feel premium" means nothing to a model. Three Awwwards URLs mean something.
Motion, animation, polish
| Name | What | Value |
|---|---|---|
| Whisk → Veo → EZGif pipeline | Generate start/end frames (Whisk), animate between them (Google Veo), split video into frames (EZGif) | Recreates Apple-style product scroll effects without manual frame-by-frame animation |
| Design Motion Principles | Skill covering motion/animation principles for AI-generated UI (915 stars) | Reference rules so generated motion feels intentional, not random |
A few extras from Fable's build notes that I thought were worth keeping:
- Give scroll feedback — even a simple fade or parallax — rather than static reveals.
- Reuse existing components instead of inventing a new animation every time.
- Always check the mobile experience separately. Desktop scroll animation does not translate automatically.
The workflow that ties it together
Tools are the easy part. The order you use them in is what actually changes the output.
- Set design tokens first. Colors, type scale, spacing as a small file or theme Claude reads before generating anything, so every component pulls from the same system.
- Load the frontend-design skill (or a taste skill like Taste Skill / Hallmark) before the first prompt, so defaults are overridden from the start — not patched afterwards.
- Feed reference material. A Figma file via Figma MCP, or two to three reference screenshots and URLs from 21st.dev, Godly, Awwwards. Show, don't describe.
- Build on primitives, not from scratch. shadcn/ui components, or a design system like Astryx, so Claude assembles rather than invents.
- Generate, then screenshot. Run the app, capture it with a Playwright MCP or CLI step.
- Visual-diff against the reference. Let Claude compare its own screenshot to the Figma or reference image and iterate until they match. That's the Pix-style loop, and it's where most of the quality gain lives.
- Run a polish/audit pass. A final "audit for generic, cheap, cluttered — list exact fixes" prompt, covering typography, spacing, motion, and mobile before you call it done. The Cinematic UI library's audit prompts are a decent template.
Steps 5 and 6 are the ones people skip, and they're the difference between an agent that guesses and an agent that converges.
I'm still working through this list myself — half of it is inherited from strangers on the internet whose taste I'm trusting on faith. If you've actually shipped with any of these, I want to hear which ones survived contact with a real project.
Geddy
Senior Web Engineer / Lead
Engineering leadership • AI innovation • Product thinking. 20+ years of web engineering, from independent contractor to engineering leader. Passionate about developer experience and product engineering.
Follow on LinkedInKeep reading