Curated collection of awesome AI tools for building beautiful UI and UX.
Awesome AI Tools for UI
⭐️ = Editor's Choice
Know a cool tool that's not listed? Create a PR or message me on X.
Contents
Skills
AI agent skills that enhance code editors and coding assistants with design intelligence.
- ⭐️ Impeccable - 20 design commands that teach your AI agent about typography, spacing, and visual hierarchy.
- UserInterface.wiki Skill - 152 UI design rules packaged as a skill file for coding assistants.
- UI UX Pro Max Skill - Generates design systems (colors, typography, layouts) based on your project type and framework.
- Anthropic Frontend Design Skill - Teaches Claude to build frontend UIs with strong visual direction instead of generic defaults.
- Make Interfaces Feel Better - Agent skill that teaches small design engineering details that compound into better interfaces.
- shadcn/ui Skills - Gives your AI assistant context about your shadcn/ui setup so it generates correct component code.
- Web Design Guidelines Skill - Checks your UI code against web design best practices and flags violations.
- Emil Kowalski Skills - Skills for designers and engineers covering animation, motion, and practical interface design.
- Unslop Skill - Removes common AI-generated writing patterns while preserving meaning and tone.
- Refactoring UI Skill - Claude Code skill applying Refactoring UI rules for spacing, typography, color, hierarchy, and depth.
- ⭐️ Taste Skill - Open-source SKILL.md that stops AI agents from producing cookie-cutter frontend designs.
- Designer Skills Collection - Pack of skills and commands — from research to systems, UI, interaction, and delivery.
- TypeUI Design Skills - Collection of UI designs with downloadable
skill.mdfiles. - YC Web Design Strategy Skill - Web design and strategy principles from YC's Design Review series, packaged as a skill.
- ⭐️ Swiss Design System - Teaches AI agents Swiss design principles through grotesque typography, disciplined grids, restrained color, and Tailwind patterns.
- Bencium Marketplace - Claude Code plugin marketplace with skills for design, architecture, productivity, typography, and code review.
- Three.js Skills - Collection of Three.js skills covering scenes, geometry, lighting, shaders, loaders, animation, and interaction.
- Awesome DESIGN.md - Curated collection of DESIGN.md files inspired by developer-focused websites.
- StyleSeed - Design rules and slash-command skills that give agents design judgment — coherence, hierarchy, UX-writing.
- Claude Code Design Review Workflow - Templates, subagent prompt, and slash command for automated design reviews against frontend changes.
- Huashu Design - HTML-native design skill for generating prototypes, slides, animations, and design reviews from agent prompts.
- Nothing Design Skill - Claude Code skill for producing Nothing-inspired monochrome, typographic, industrial UI.
- Hallmark - Design skill for Claude Code, Cursor, and Codex that audits and generates UI against anti-slop design gates.
- Material Design 3 Skill - Portable Material Design 3 skill covering tokens, theming, 30+ components, responsive layout, and MD3 audits.
- Scandinavian Design Skill - Cursor skill for applying a restrained Scandinavian visual system with monochrome color, sans-serif type, spacing, and product imagery.
Apps
AI-powered applications for designing and building user interfaces.
- ⭐️ 21st.dev - UI component library and templates for building AI-powered products.
- AI Website Cloner - Clone any website into a Next.js codebase with one command using AI agents.
- Superdesign - AI design tool for generating interfaces in the browser.
- ⭐️ Variant - Scroll through AI-generated design variations for your ideas.
- Stitch by Google - Google's AI design tool for creating UIs from prompts.
- Open Design - Local-first, open-source alternative to Claude Design for generating prototypes, slides, images, and videos.
- Khroma - Learns your color preferences and generates palettes you can search and save.
- Noyzzi - Growing collection of interactive designs with prompts you can copy and adapt.
- Design Resources for AI Agents - Curated directory of DESIGN.md resources and design references for AI agents.
- prompt-kit - Accessible, customizable component primitives for AI interfaces, including prompt inputs, messages, reasoning, and tool views.
- Brik - Build your own AI-powered design tools for animations, 2D and 3D visuals, text effects, and images, then remix, share, export, and embed them.
- UIZZE - AI-powered design research for better interfaces.
- Curio - Library of 1,000+ real design styles (Bauhaus, Memphis, brand and cultural traditions) as DESIGN.md token specs; hand one to Claude Code, Cursor or ChatGPT via a share link or MCP.
MCP Servers & Plugins
Model Context Protocol servers and plugins that add UI research and design workflows to AI editors.
- Magic MCP - Generate UI components from text prompts inside Cursor, Windsurf, and VSCode.
- UI Layouts MCP - Lets AI editors search and use real UI components instead of guessing the code.
- Lazyweb - MCP server and skills that help agents research real app screens before designing UI.
- Design and Refine - Claude Code plugin for generating, comparing, and refining multiple UI variations in your codebase.
- Interface Design - Claude Code plugin for remembering interface decisions across sessions and keeping UI systems consistent.
- AI Canvas - MCP server that lets AI editors search an open-source (MIT) registry of animated React components, blocks and design systems and return their shadcn CLI install commands.
Design Tools
Not AI-powered, but valuable tools for UI/UX work.
- FontCrafter - Turn your handwriting into an installable font in the browser. Exports OTF, TTF, WOFF2.
- SVG Loaders - 100+ open-source animated SVG loading spinners (MIT).
- SVG Backgrounds - Free SVG backgrounds and patterns you can customize.
- Realtime Colors - Preview color palettes and typography on a live website mockup.
- Transitions.dev - Copy-and-paste transition patterns for common web app interactions.
- Beautiful HTML Templates - Agent-ready library of reusable HTML slide templates for generating polished decks.
- daisyUI - Tailwind CSS component library with semantic class names, themes, and an official MCP server for AI editors.
- Paper Shaders - Zero-dependency canvas shaders for adding customizable animated backgrounds, textures, and masked effects to websites.
- Pryzm - Browser-based visual studio for creating original backgrounds and textures for websites, templates, and designs.
- Logosystem - Curated logo inspiration gallery with 1,200+ static and animated logos.
- Ditther - Free browser tool for dither, halftone, ASCII, pixel, and video effects.
- Book of Shapes - Collection of minimal, generative, and customizable SVG patterns.
Resources
Learning materials, design references, and inspiration for UI/UX.
- Laws of UX - Psychology-backed design principles for better user interfaces.
- UserInterface.wiki - Wiki covering UI design, animation, motion, and typography fundamentals.
- Craftwork - Curated website designs and premium design resources (UI kits, illustrations, mockups).
- Zajno Motion - Interactive collection of motion-heavy web experiences for animation and interaction inspiration.
- ⭐️ The Shape of AI - UX patterns for designing interfaces that use AI.
- aiux.courses - Independently curated AI UX sources and courses for working designers (patterns, papers, people, paid paths).
- Delightful frontend - Practical techniques for steering AI toward polished frontend designs.
- Vibe Coding UI Specification - UI spec for AI-assisted projects, covering tokens, component states, accessibility, and responsive design.