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
• Apps
• MCP Servers
• Design Tools
• Resources

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 Skill - Skill file based on Emil Kowalski's UI articles, aimed at designers and engineers building better interfaces.
• ⭐️ 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.md files.
• YC Web Design Strategy Skill - Web design and strategy principles from YC's Design Review series, packaged as a skill.
• ⭐️ Awesome DESIGN.md - Not a skill but a curated collection of DESIGN.md files inspired by developer focused websites

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.
• 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.

MCP Servers

Model Context Protocol servers that add UI generation capabilities 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.

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.

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).
• ⭐️ The Shape of AI - UX patterns for designing interfaces that use AI.
• Delightful frontend - Practical techniques for steering AI toward polished frontend designs.