Design Lounge

A design library by Susan Acharya. Browse it at www.designlounge.live, or give it to your agent, as an MCP server or as a skill, and let it design from it.

Free to use in products. Keep the credit. Do not republish the catalogue as a catalogue.

Install the MCP server

The MCP server is the whole Lounge. It installs the skill for you, then adds tools the skill cannot have: library search with a picture of every piece, theme, and pairing; direction picks that come out the same every time and keep two sites apart; and a review of the page your agent built. The review covers AI giveaways, drift from the locked kit, accessibility, and whether search engines and AI assistants can find and quote it (SEO, AEO, GEO), with screenshots at laptop and phone size.

In Claude Code:

claude mcp add design-lounge --scope user -- npx -y design-lounge-mcp@latest

Cursor, Windsurf, Claude Desktop, and other clients take this in their MCP settings:

{
  "mcpServers": {
    "design-lounge": { "command": "npx", "args": ["-y", "design-lounge-mcp@latest"] }
  }
}

Reload the client once after the first start, so it picks up the skill. For screenshots, ask your agent to run install_browser once. VS Code, Codex, every tool, and what the server writes and fetches are in mcp/README.md.

The hosted endpoint for Claude.ai, ChatGPT, and other clients that cannot run a local program (https://www.designlounge.live/api/mcp) is paused while it moves to a new host. Use the npm package meanwhile.

Or install the skill alone

The skill is lighter: files your agent reads, with nothing running. Run this in the project you want designed. The installer needs Node 22.20 or newer. It works in Cursor, Claude, Codex, and the other agents the installer lists. The skill arrives with the catalogue: palettes, type pairings, icons, motion, and every piece brief.

npx skills add SusanAcharya/Design-Lounge

Then describe the product, who it is for, and the job of this pass. The agent locks one palette, one type pairing, one component family, and the pieces that fit, and it keeps later screens on that same sheet. It does not invent a second set of colours or fonts.

That is the design system. It is not a person reviewing the finished screens, though the MCP server's review gets closer. When the library has no piece for the job, the agent is supposed to say so.

Install it once for every project:

npx skills add SusanAcharya/Design-Lounge -g

Skip the prompts and name the agents:

npx skills add SusanAcharya/Design-Lounge -g -y --agent cursor claude-code codex

Or point an agent at this repo: github.com/SusanAcharya/Design-Lounge. It should read AGENTS.md, then skills/design-lounge/SKILL.md.

What’s in it

• Pieces — heroes, footers, landings, portfolios, dashboards, phone screens, motion. By name at /sections, by problem at /collections, the whole floor at /browse.
• System — type pairings, full colour roles (primary, secondary, tertiary, feedback, surfaces), Lounge Icons, motion recipes.
• Kit — /kit. Choose a website, a product, or a platform. Pick a palette, a pairing, and a component family. A website frame and a phone both update. The last step is a brief.
• Start — /start. Eight recipes (marketing site, portfolio, landing, app, design system, dashboard, shop, editorial) that already name a theme, a pairing, and the pieces to open.

Run the site

pnpm install
pnpm dev            # http://localhost:4321
pnpm build          # static site in dist/
pnpm preview
pnpm check:pieces   # every piece against docs/PIECE-SPEC.md
pnpm mcp:test       # the MCP server's tests (run pnpm install in mcp/ first)

Layout

src/demos/<slug>.html           live demo, one file
src/content/pieces/<slug>.md    frontmatter + agent br

... [View full README on GitHub](https://github.com/susanacharya/design-lounge#readme)