UI Design
SaaS, open source and skills for ui design work — with the limits of each written down.Before you pick
What decides it
How much of your existing tokens and component library the tool can actually read is what separates them once you are past the first screen.
What to avoid
Generated markup looks right without being right — hard-coded colours, no keyboard handling, no ARIA states. Reviewers check pixels, so the rework surfaces much later.
What is changing
Generation is shifting from inventing components to assembling yours: tools now read your tokens, component registry and codebase, making conformance an input rather than cleanup.
SaaS
Hosted products you sign up for.Leading
Established picks, at the top of today's aggregate.
- 1v0Production React/Next.js components, deploy straight to Vercel. Developer default.
- 2LovableTurn a prompt into a full working MVP app. Best for non-developers.
- 3Bolt.newFull-stack apps (frontend + backend + DB) generated in-browser. Full prototypes.
- 4Figma MakeHighest design fidelity if you already live in Figma (reads real frame metadata).
- 5Replit AgentBuild and host an app end-to-end. Most beginner-friendly.
Emerging
Newer challengers, surfaced by two or more sources.
- 1Uwarp Design
- 2Figma for AgentsOfficial MCP tool that lets coding agents create and edit real Figma files, using a team's existing components, variables and auto layout.
- 3UX CanvasHosted chat-based design tool that generates UI screens from descriptions and exports layered Figma files, React components, or specs for coding agents.
Open source
Repositories you run yourself.Leading
- 1shadcn/uiThe dominant modern UI approach (~119.7k★) — copy-paste, own-your-code React components (Radix + Tailwind) that coding agents build most component UIs from.
- 2Tailwind CSSThe utility-first CSS framework (~96k★) underpinning shadcn/ui and daisyUI — the de-facto styling layer for modern component work.
- 3Material UI (MUI)The longest-standing React component library (~98.6k★) implementing Google's Material Design — the enterprise default for years.
- 4Ant DesignEnterprise-class React component library (~98.8k★) — comprehensive components, hugely adopted in enterprise and across Asia.
- 5daisyUIThe most popular Tailwind component library (~41.8k★) — semantic class names and themes layered on top of Tailwind.
Emerging
- 1jasonhnd/design-md-generatorCrawls a live site with Playwright and writes a DESIGN.md of its colors, type and layout for coding agents to copy.
- 2southleft/story-uiGenerates Storybook stories from plain-language prompts, restricted to your own design system's components, with TypeScript checking and retry on failure.
- 3dnyanesh1299/AI_Figma_UIUX_Design_Generator_PlatformA self-hosted web app that turns text prompts into a JSON design schema, previews it responsively, and exports to Figma or HTML.
- 4ovalaiops/figma-design-generatorTurns a text prompt into a .fig.json file you import into Figma; the generator ships with mocked output.
- 5hilaljanas20/ai-website-ui-generatorA small React and Express app that asks Gemini for a website layout and shows the generated Tailwind components with copyable code.
Skills
Skills you drop into a coding agent.Leading
- 1Frontend Design (Anthropic official)Anthropic's official, first-party Claude Code skill for distinctive, intentional UI — deliberate palette, typography and layout over templated defaults; auto-invoked for frontend work.
- 2UI/UX Pro MaxMassively popular all-in-one design-intelligence skill (~109.6k★) — 50+ styles, 161 palettes, 57 font pairings and UX guidelines across 10 stacks (note: an 8-month-old repo whose star surge outpaces its real-world track record).
- 3Awesome Design Skills (bergside)Curated, organically-adopted list (~2k★) of 67 DESIGN.md / SKILL.md files for agentic design work — a directory rather than a single installable skill.
Emerging
- 1plugin87/ux-ui-agent-skillsA skill pack that gives Claude Code DTCG design tokens, component specs and Python scripts that check contrast and token files.
- 2JimLiu/baoyu-designAgent skill that generates self-contained HTML mockups, decks and wireframes into a local preview server you click to request edits.
- 3zanwei/design-dnaExtracts colour, type, spacing and motion from reference screenshots or URLs into a JSON spec, then generates new UI matching it.
- 4bitjaru/styleseedScores the UI your coding agent produces against 74 named design rules and makes it fix anything below the threshold before showing you.
- 5ancoleman/ai-design-componentsA set of 76 installable Claude Code skills covering UI and form components alongside backend, infrastructure and security work.