Content
# Awesome AI Tools for UI
A curated list of awesome AI tools (skills, MCP servers, apps) to build beautiful UI/UX.
⭐️ = Editor's Choice
Know a cool tool that's not listed? [Create a PR](../../pulls) or [message me on X](https://x.com/o1maxim).
## Contents
- [Skills](#skills)
- [Apps](#apps)
- [MCP Servers](#mcp-servers)
- [Design Tools](#design-tools)
- [Resources](#resources)
## Skills
> AI agent skills that enhance code editors and coding assistants with design intelligence.
- ⭐️ [Impeccable](https://impeccable.style/?utm_source=awesome-ai-tools-for-ui) - 20 design commands that teach your AI agent about typography, spacing, and visual hierarchy.
- [UserInterface.wiki Skill](https://www.userinterface.wiki/skill?utm_source=awesome-ai-tools-for-ui) - 152 UI design rules packaged as a skill file for coding assistants.
- [UI UX Pro Max Skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill?utm_source=awesome-ai-tools-for-ui) - Generates design systems (colors, typography, layouts) based on your project type and framework.
- [Anthropic Frontend Design Skill](https://github.com/anthropics/skills/tree/main/skills/frontend-design?utm_source=awesome-ai-tools-for-ui) - Teaches Claude to build frontend UIs with strong visual direction instead of generic defaults.
- [shadcn/ui Skills](https://ui.shadcn.com/docs/skills?utm_source=awesome-ai-tools-for-ui) - Gives your AI assistant context about your shadcn/ui setup so it generates correct component code.
- [Web Design Guidelines Skill](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md?utm_source=awesome-ai-tools-for-ui) - Checks your UI code against web design best practices and flags violations.
- ⭐️ [Taste Skill](https://www.tasteskill.dev/?utm_source=awesome-ai-tools-for-ui) - Open-source SKILL.md that stops AI agents from producing cookie-cutter frontend designs.
- ⭐️ [Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/?utm_source=awesome-ai-tools-for-ui) - 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](https://21st.dev/home?utm_source=awesome-ai-tools-for-ui) - UI component library and templates for building AI-powered products.
- [AI Website Cloner](https://github.com/JCodesMore/ai-website-cloner-template?utm_source=awesome-ai-tools-for-ui) - Clone any website into a Next.js codebase with one command using AI agents.
- [Superdesign](https://app.superdesign.dev/?utm_source=awesome-ai-tools-for-ui) - AI design tool for generating interfaces in the browser.
- ⭐️ [Variant](https://variant.com/?utm_source=awesome-ai-tools-for-ui) - Scroll through AI-generated design variations for your ideas.
- [Stitch by Google](https://stitch.withgoogle.com/?utm_source=awesome-ai-tools-for-ui) - Google's AI design tool for creating UIs from prompts.
- [Khroma](https://www.khroma.co/?utm_source=awesome-ai-tools-for-ui) - Learns your color preferences and generates palettes you can search and save.
## MCP Servers
> Model Context Protocol servers that add UI generation capabilities to AI editors.
- [Magic MCP](https://github.com/21st-dev/magic-mcp?utm_source=awesome-ai-tools-for-ui) - Generate UI components from text prompts inside Cursor, Windsurf, and VSCode.
- [UI Layouts MCP](https://www.ui-layouts.com/mcp?utm_source=awesome-ai-tools-for-ui) - 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](https://arcade.pirillo.com/fontcrafter.html?utm_source=awesome-ai-tools-for-ui) - Turn your handwriting into an installable font in the browser. Exports OTF, TTF, WOFF2.
- [SVG Loaders](https://magecdn.com/tools/svg-loaders?utm_source=awesome-ai-tools-for-ui) - 100+ open-source animated SVG loading spinners (MIT).
- [SVG Backgrounds](https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/?utm_source=awesome-ai-tools-for-ui) - Free SVG backgrounds and patterns you can customize.
- [Realtime Colors](https://www.realtimecolors.com/?utm_source=awesome-ai-tools-for-ui) - Preview color palettes and typography on a live website mockup.
## Resources
> Learning materials, design references, and inspiration for UI/UX.
- [Laws of UX](https://lawsofux.com/?utm_source=awesome-ai-tools-for-ui) - Psychology-backed design principles for better user interfaces.
- [UserInterface.wiki](https://www.userinterface.wiki/?utm_source=awesome-ai-tools-for-ui) - Wiki covering UI design, animation, motion, and typography fundamentals.
- [Craftwork](https://craftwork.design/curated/websites/?utm_source=awesome-ai-tools-for-ui) - Curated website designs and premium design resources (UI kits, illustrations, mockups).
- ⭐️ [The Shape of AI](https://www.shapeof.ai/?utm_source=awesome-ai-tools-for-ui) - UX patterns for designing interfaces that use AI.
- [Delightful frontend](https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4) - Practical techniques for steering AI toward polished frontend designs.
