# Best open-source AI repos for UI design with AI coding agents (2026) Source: https://dedupedai.com/best-ai-repos-for/ui-design-with-ai/ (Deduped, updated 2026-10-26). Markdown twin of the page; JSON: https://dedupedai.com/best-ai-repos-for/ui-design-with-ai/index.json ## What is the best open-source repo for getting good UI design out of AI coding agents? The best open-source AI repos for UI design with AI coding agents right now are Impeccable, Anti Slop and Diagram Design. Impeccable gives your coding agent design commands (polish, audit, critique); anti-slop stops generic AI-looking UI and copy; Diagram Design makes clean HTML and SVG diagrams. ## Comparison | Repo | What it does | Best for | Stars | Language | |---|---|---|---|---| | [Impeccable](https://dedupedai.com/use-cases/pbakaus-impeccable/) (pbakaus/impeccable) | Impeccable is design guidance for AI coding agents: one skill, 24 commands such as polish, audit, critique, distill, animate, bolder and quieter, live browser iteration, and 62 deterministic detector rules for AI-generated frontend design. | Developers and founders who build UIs with Claude Code, Cursor or similar agents and want them to stop looking like every other AI-generated SaaS page. | 86,605 | Rust | | [Anti Slop](https://dedupedai.com/use-cases/miqdadbadjuber-anti-slop/) (miqdadbadjuber/anti-slop) | antislop is a set of rules and skills that stop an AI coding agent from shipping generic UI, filler copy, and AI-shaped code. | Developers and product teams who use an AI coding agent to build UI, copy, or code and want the output checked against consistent rules before it ships. | 7,198 | JavaScript | | [Diagram Design](https://dedupedai.com/use-cases/cathrynlavery-diagram-design/) (cathrynlavery/diagram-design) | Diagram Design is an agent skill that makes one self-contained HTML and SVG diagram file in a consistent editorial style, matched to your brand. | Developers, writers and teams who need publishable diagrams and already work with an AI coding agent that supports Agent Skills. | 58,715 | HTML | | [Solid Glass](https://dedupedai.com/use-cases/deeplethe-solid-glass/) (deeplethe/solid-glass) | Solid Glass is a TypeScript design system of CSS and React components for AI applications, with a glass-inspired material that works alongside shadcn/ui. | Frontend developers and designers who already use or want to use shadcn/ui and Tailwind CSS 4 in a React app, especially for AI chat or agent interfaces. | 2,105 | TypeScript | | [Awwwards Skills (juliobsz)](https://dedupedai.com/use-cases/juliobsz-skills/) (juliobsz/skills) | A set of agent skills, /awwwards and /jury, that build award-style websites from a one-line brief and score existing sites the way an Awwwards jury would. | Designers, developers and founders who want a distinctive website or an honest quality score for a site, and who work in an AI coding agent. | 791 | JavaScript | | [Appllama Skills](https://dedupedai.com/use-cases/appllama-appllama-skills/) (Appllama/appllama-skills) | A set of agent skills that teach AI coding agents to research top-grossing mobile apps through the Appllama MCP and build native-feeling Expo / React Native screens checked in a simulator. | Mobile app builders and product designers who use an AI coding agent and want new screens to match the patterns of top-grossing apps. | 3,045 | n/a | ## When to pick which ### Impeccable (pbakaus/impeccable) Impeccable is design guidance for AI coding agents: one skill, 24 commands such as polish, audit, critique, distill, animate, bolder and quieter, live browser iteration, and 62 deterministic detector rules for AI-generated frontend design. It starts with /impeccable init, which records product truth in PRODUCT.md, and it targets the usual AI tells: Inter everywhere, purple-to-blue gradients, cards nested in cards and gray text on colored backgrounds. The detector rules run in the CLI and a browser extension with no LLM and no API key. Best for: Developers and founders who build UIs with Claude Code, Cursor or similar agents and want them to stop looking like every other AI-generated SaaS page. Needs: An AI coding tool such as Claude Code, Cursor or Grok Build; Node.js for the npx installer (optional). Start here: [Stop your AI-built UI looking like every other SaaS template](https://dedupedai.com/use-cases/pbakaus-impeccable/stop-your-ai-ui-looking-generic/) (Beginner, 20 minutes) 1. From your project root run npx impeccable install 2. Inside your AI coding tool run /impeccable init to write PRODUCT.md 3. Ask for a redesign, for example /impeccable redo this hero section All 3 use cases: https://dedupedai.com/use-cases/pbakaus-impeccable/ | GitHub: https://github.com/pbakaus/impeccable ### Anti Slop (miqdadbadjuber/anti-slop) antislop is a set of rules and skills that stop an AI coding agent from shipping generic UI, filler copy, and AI-shaped code. Best for: Developers and product teams who use an AI coding agent to build UI, copy, or code and want the output checked against consistent rules before it ships. Needs: An AI coding agent that antislop supports, such as Claude Code, Codex, Cursor, or Gemini CLI; A terminal to run the installer command (npx antislop-ai); A project folder for the agent to work in; Optional: a DESIGN.md file that gives the visual direction, since antislop filters and does not supply direction. Start here: [Build a landing page free of generic AI UI](https://dedupedai.com/use-cases/miqdadbadjuber-anti-slop/build-landing-page-without-ai-slop/) (Intermediate, 30 minutes) 1. Run npx antislop-ai and answer the prompts, selecting the antislop-ui skill and the agents you use. 2. Run npx antislop-ai --mode during to save the mode for building new work. 3. Add a DESIGN.md file to the project that states your colors, type, and layout direction. 4. Start a new agent session, so the skills load, and ask the agent to build the page. All 4 use cases: https://dedupedai.com/use-cases/miqdadbadjuber-anti-slop/ | GitHub: https://github.com/miqdadbadjuber/anti-slop ### Diagram Design (cathrynlavery/diagram-design) Diagram Design is an agent skill that makes one self-contained HTML and SVG diagram file in a consistent editorial style, matched to your brand. Best for: Developers, writers and teams who need publishable diagrams and already work with an AI coding agent that supports Agent Skills. Needs: An agent host that reads Agent Skills, such as Claude Code, Codex, Cursor or GitHub Copilot; A terminal that can run npx skills add or the host's plugin commands; A web browser to open the generated .html file. Start here: [Draw an architecture diagram for a doc or post](https://dedupedai.com/use-cases/cathrynlavery-diagram-design/draw-architecture-diagram-for-a-doc/) (Intermediate, 15 minutes) 1. Install the skill with npx skills add cathrynlavery/diagram-design. 2. Ask your agent in plain words, for example: "Make me an architecture diagram of my app: frontend, backend, database, Redis cache." 3. Check the agent's stated plan for the diagram type it chose. 4. Open the generated .html file by double-clicking it. All 4 use cases: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/ | GitHub: https://github.com/cathrynlavery/diagram-design ### Solid Glass (deeplethe/solid-glass) Solid Glass is a TypeScript design system of CSS and React components for AI applications, with a glass-inspired material that works alongside shadcn/ui. Best for: Frontend developers and designers who already use or want to use shadcn/ui and Tailwind CSS 4 in a React app, especially for AI chat or agent interfaces. Needs: Node.js and npm; A shadcn/ui project with React 19, Tailwind CSS 4 and the Base UI components; Git, if you want to run the site from a local clone. Start here: [Apply the Solid Glass look to a shadcn/ui project](https://dedupedai.com/use-cases/deeplethe-solid-glass/apply-solid-glass-to-shadcn-project/) (Intermediate, 30 minutes) 1. Start from a shadcn/ui project by running npx shadcn@latest init. 2. Add the stylesheet by running npx shadcn@latest add deeplethe/solid-glass/solid-glass. 3. Import it after Tailwind and shadcn's stylesheet: @import "./solid-glass.css";. 4. Delete the :root and .dark colour variables that shadcn init wrote, since Solid Glass defines the same names. All 4 use cases: https://dedupedai.com/use-cases/deeplethe-solid-glass/ | GitHub: https://github.com/deeplethe/solid-glass ### Awwwards Skills (juliobsz) (juliobsz/skills) A set of agent skills, /awwwards and /jury, that build award-style websites from a one-line brief and score existing sites the way an Awwwards jury would. Best for: Designers, developers and founders who want a distinctive website or an honest quality score for a site, and who work in an AI coding agent. Needs: Node 22.20+ for the skills CLI (helper scripts need Node 20+); An agent that supports skills, such as Claude Code, Codex, Cursor or Gemini CLI; A model that can read images, so the QA loop can check its own screenshots; Playwright and a Chromium browser (the skills install them when needed). Start here: [Build a distinctive portfolio site from one line](https://dedupedai.com/use-cases/juliobsz-skills/build-portfolio-from-one-line/) (Intermediate, 1 hour) 1. Run npx skills add juliobsz/skills -g in a terminal. 2. Open a new agent session so it loads the skill. 3. Type make me a portfolio, my name is or ask for a website in one line. 4. Read the assumptions the agent writes down, and the DESIGN.md it produces. All 4 use cases: https://dedupedai.com/use-cases/juliobsz-skills/ | GitHub: https://github.com/juliobsz/skills ### Appllama Skills (Appllama/appllama-skills) A set of agent skills that teach AI coding agents to research top-grossing mobile apps through the Appllama MCP and build native-feeling Expo / React Native screens checked in a simulator. Best for: Mobile app builders and product designers who use an AI coding agent and want new screens to match the patterns of top-grossing apps. Needs: An MCP-capable agent such as Claude Code, Cursor, or Codex; An Appllama account with Pro, since MCP access is part of Pro; An Expo / React Native project and a simulator for the build loop. Start here: [Build a mobile app's screens from top-grossing patterns](https://dedupedai.com/use-cases/appllama-appllama-skills/build-app-screens-from-top-grossing-patterns/) (Intermediate, 90 minutes) 1. Run npx skills@latest add appllama/appllama-skills from your project root. 2. Connect the Appllama MCP at https://mcp.appllama.io/mcp and approve it with your Appllama account. 3. Run get_credits to confirm your credit balance before starting, since every other call spends one credit. 4. Give your agent the app idea and ask it to follow the appllama-usage build-from-scratch playbook, then the appllama-app-design-skill build bar. All 5 use cases: https://dedupedai.com/use-cases/appllama-appllama-skills/ | GitHub: https://github.com/Appllama/appllama-skills ## Questions ### What is the best open-source repo for getting good UI design out of AI coding agents? The best open-source AI repos for UI design with AI coding agents right now are Impeccable, Anti Slop and Diagram Design. Impeccable gives your coding agent design commands (polish, audit, critique); anti-slop stops generic AI-looking UI and copy; Diagram Design makes clean HTML and SVG diagrams. ### Which repo for UI design with AI coding agents is easiest to start with? Impeccable: its starter use case "Stop your AI-built UI looking like every other SaaS template" is rated Beginner and takes about 20 minutes. ### How do I get started with Impeccable? From your project root run npx impeccable install; Inside your AI coding tool run /impeccable init to write PRODUCT.md; Ask for a redesign, for example /impeccable redo this hero section. Full steps and a copy-paste agent prompt: https://dedupedai.com/use-cases/pbakaus-impeccable/stop-your-ai-ui-looking-generic/ ### Are these UI design with AI coding agents repos free? They are open-source projects on GitHub (check each license; some, like fair-code projects, limit commercial use). Some also sell a hosted version or need a paid model API key; the requirements for each repo are listed on this page. ### How is this list of UI design with AI coding agents repos chosen? Deduped tracks the hottest AI repos on GitHub and writes step-by-step use cases from each README. For this page we picked the repos that do this job, ordered by fit and then GitHub stars. Repos we only inferred from a short README, or that we do not index, are left out. The page is rebuilt with the site; stars are as of the last build in 2026. Third-party repos we don't own or vouch for. AI-written use cases can be wrong: review everything and run at your own risk.