Home
Softono
awesome-ai-tools-for-ui

awesome-ai-tools-for-ui

Open source
GitHub
547
Stars
45
Forks
1
Issues
4
Watchers
1 month
Last Commit
AI Tools UI Design & Prototyping

About awesome-ai-tools-for-ui

Curated list of awesome AI tools to build beautiful UI/UX.

Platforms

Web Self-hosted

Links

Source Code
m
Published by
maxbogo
Visit View Profile

README.md

View on GitHub

Awesome AI Tools for UI banner



Curated collection of awesome AI tools for building beautiful UI and UX.

Awesome Tool Count Last Update

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

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.

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.

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.

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.
  • Delightful frontend - Practical techniques for steering AI toward polished frontend designs.