Give your AI agent design taste.
A free UI design skill and a library of 600+ live design ideas. Your agent picks real type, colour and motion, then builds.
claude mcp add -s user design-lounge -- npx -y design-lounge-mcp@latest For Claude Code. It installs the skill too. Cursor, Codex, ChatGPT →
Files your agent reads. Needs Node 22.20 or newer.
- Free, no account
- design-lounge-mcp v0.2.6
- On the MCP Registry
- Source on GitHub
Same model, same prompts, with and without the Lounge
See every build- Review fails, same prompts
- 0 vs 16Across 3 builds with the Lounge MCP and the same 3 without it: design, accessibility, SEO, AEO and GEO.
- Text below readable contrast
- 0 vs 92Elements under WCAG AA. Every build with the Lounge passed on every line.
- Accessibility score
- 100On every build with the Lounge, measured with axe in Chromium. 81 on average without it.
- Blind design rating
- 3 of 3An AI reviewer rated each pair from screenshots alone, not knowing which used the Lounge. The Lounge build scored higher every time: 118 to 110 out of 150.
A library your agent can actually use.
Every piece runs live, comes with a written brief, and is free to use in your products.
Sections 113
Heroes, pricing, footers, menus. The blocks a website is built from.
Screens 152
Whole pages and app screens, end to end.
Animations 68
Components 236
Design languages 16
Whole visual dialects shown as a kit.
- Anime cel
- ASCII
- Bauhaus
- Clay soft
- Cyber HUD
- Deco hotel
- Letter hand
- Luxe serif
- Neo-brutalist
- Organic garden
- Paper and ink
- Pixel arcade
- Riso print
- Swiss poster
- Terminal UI
- Y2K chrome
How it works
Say what you're making. It picks the rest.
The MCP server turns one sentence into a locked direction and a checked page, in four kinds of call. Each one costs a few thousand tokens, measured on the live server.
- Ask
start_designSay what you are making in plain words. It reads them and returns the plan: the product kind, the rules that must hold, and the calls to make next. ≈ 3.3k tokens - Lock a direction
get_recipeget_themeget_pairingOne recipe, one palette as CSS tokens, one type pairing with sizes. Your agent stops inventing a purple gradient and a font. ≈ 1.7k tokens - Build from briefs
get_pieceEach section comes from a live piece and its numeric brief: sizes, states, timing, the acceptance checks. ≈ 2.3k tokens each - Review
review_pageIt opens the page and fails what looks machine-made, then checks SEO, AEO and GEO. Your agent fixes the list and runs it again. ≈ 0.8k tokens
The result: AI prompt cycle hero Open piece
Examples
Built from one prompt.
Range
Same product, different style.
Both by Design Lounge. One prompt, built twice, on two directions.
A site for a planetarium's late-night show. You scroll and you travel through space. Make it unforgettable.
-
Style AYou start in your seat under red dome lamps and scroll out past the Moon, Saturn and the Pleiades to Andromeda. A readout says when the light you are seeing set off. -
Style BLights down under a dome drawn in points of light. Scroll and the camera rises through its open crown, past the Moon and Saturn, until the whole Milky Way fits on the ceiling.
How it compares
A direction and a review, in one free MCP.
Other tools hand your agent components to install or screenshots to look at. Design Lounge gives it a palette, a pairing and pieces that agree, then reviews what it built.
| Feature | Design Lounge | Mobbin | 21st.dev | shadcn/ui | Impeccable | taste-skill | UI UX Pro Max | Anthropic frontend-design |
|---|---|---|---|---|---|---|---|---|
| Live, working designs with a build brief | Yes | No | In part | In part | No | No | No | No |
| A whole direction: palette, type pairing, page recipe | Yes | No | No | No | In part | Yes | Yes | In part |
| Reviews the page your agent built | Yes | No | In part | No | Yes | Yes | No | No |
| SEO, AEO and GEO checks | Yes | No | No | No | No | No | No | No |
| MCP server | Yes | Yes | Yes | Yes | No | No | No | No |
| Agent skill | Yes | Yes | No | Yes | Yes | Yes | Yes | Yes |
| Price | Free | MCP on Pro, from $10 a month | Code retrieval from $6 a month | Free | Free | Free | Free | Free |
Checked 2026-11-03 on each product's own pages. Something out of date? Open an issue.
More than a gallery.
Every piece is something you can take. Around them sit the tools that tie a product together.
How it worksIn every piece
- Live demoEvery control works, inside a real browser, phone or tablet frame.
- BriefA written spec your agent builds from. One click to copy.
- SourceThe HTML, credited and free to use in your own products.
Around the pieces
Tap through a few right here.
Real app screens at 390 × 844. Lift a card, run the timer, answer the quiz. Each ships with the brief your agent builds from.
Questions
The short version of how the skill and the library work.
What is Design Lounge?
Design Lounge is a free UI design skill for AI coding agents, plus a library of 600+ design ideas: website sections, app screens, components and motion. Each one has a live demo and a written brief that an agent can build from.
How do I add the UI design skill to my agent?
Add the MCP server, which installs the skill too and adds tools that show your agent each piece and check the page it built. In Claude Code, run claude mcp add -s user design-lounge -- npx -y design-lounge-mcp@latest. Cursor, Codex, VS Code and Claude Desktop take npx -y design-lounge-mcp@latest in their MCP settings, and Claude.ai or ChatGPT can add https://www.designlounge.live/api/mcp as a connector. For the skill alone, run npx skills add SusanAcharya/Design-Lounge in your project (it needs Node 22.20 or newer). Then ask for what you are making, such as a portfolio, a shop or a dashboard.
What does the skill do differently?
It makes your agent design from a real library instead of its own defaults. For a product, it picks a theme, a font pairing, a radius and motion from the library, builds the screens from piece briefs, then opens the page and checks it for the usual signs of AI-made design. When you ask for spectacle, it builds one centrepiece made for your subject, with real light and depth, and holds the rest of the page to the same craft.
Is it free to use in my products?
Yes. The pieces, themes, type pairings and icons are free to use in your own products and client work. A small credit line is appreciated. Please do not republish the library itself as a library.
Where do the design ideas come from?
Every piece is an original design with an invented brand. Some study the craft of public sites, such as Stripe or Linear, and those are listed on the Sources page. No piece copies another site's text, images or logo.
How many tokens does the Design Lounge MCP use?
About 12.7k tokens for a whole direction: the plan from start_design (about 3.3k), a recipe, a theme and a pairing (about 1.7k together), three piece briefs (about 2.3k each) and one review. The tool list itself is about 3.9k. The Benchmark page has the builds it was measured on.
Should I use the MCP server or the skill?
The MCP server, if your agent supports MCP. It installs the skill too, and adds tools that show your agent a picture of each piece, search the library, and review the page it built. The skill alone is a folder of files your agent reads, for agents without MCP.
Which agents does it work with?
Claude Code, Cursor, Codex, VS Code, Windsurf and Claude Desktop through the npm package design-lounge-mcp. Claude.ai, ChatGPT and other clients that take a remote connector can use https://www.designlounge.live/api/mcp. Agents without MCP can install the skill with npx skills add SusanAcharya/Design-Lounge.
Does it work with React, Flutter or SwiftUI?
Yes. A brief describes the design in numbers, not in one framework, and the demo is plain HTML. Your agent rebuilds it in your stack: React, Vue, Svelte, Astro, React Native, Flutter, SwiftUI or Compose. It sits well on top of a component library such as shadcn/ui.
How is it different from shadcn/ui, Mobbin or 21st.dev?
Those give your agent components to install or screenshots to look at. Design Lounge gives it a direction: a palette, a type pairing and a page recipe that agree, live pieces with numeric briefs, and a review of the finished page for design, SEO, AEO and GEO. It works alongside them. The comparison on this page shows what each one covers.
What does the review check?
It checks design, SEO, AEO and GEO in one pass, and lists fails first. review_page fails the usual signs of AI-made design (gradient text, an icon over a title over a sentence three times, numbered eyebrows, glass everywhere, invented fonts), checks that the page keeps its locked kit, and scores SEO, AEO and GEO: titles, descriptions, headings, structured data, answers that a search or AI engine can quote. The local server also screenshots the page and runs accessibility checks.
Does the hosted MCP see my code?
Only what your agent sends it. Most tools take a few words and return library data. review_page on the hosted endpoint reads a public URL or the HTML you pass. Run the npm package locally if you would rather keep it on your machine: the library and thumbnails are bundled, nothing is sent to Design Lounge, and there is no tracking.
Who made Design Lounge?
Susan Acharya, a product lead, designer and builder based in Kathmandu, Nepal.
Made by
Susan Acharya
Product lead, designer and builder in Kathmandu, Nepal. He builds products end to end and made Design Lounge so AI agents stop shipping the same generic page. Every piece is an original build with an invented brand. Many study the craft of public sites, credited on the Sources page.