Install

Install

Run this in your terminal, inside your project. The palettes, type, icons, motion, and every piece brief go into your agent's skill folder.

For every project on this computer, add -g. To get new designs later, run npx skills update.

Ask

Talk to it like a designer. Name what you are making. Say “just build it” if you do not want a question first.

• “Build a SaaS landing page for my invoicing tool.”
• “A photography portfolio with a horizontal scroll.”
• “A shop for handmade bowls. Just build it.”
• “A health app with a weekly view.”
• “Revamp this dashboard. Keep our colours.”

What you get

It picks one palette, one type pairing, and the screens that fit your product, and tells you which palette it turned down. A SaaS site, a portfolio, and a shop each get their own look. If you asked for a scroll, a hover, or a cursor, it keeps that one effect.

Then it opens what it built and checks it. A gradient nobody asked for, a default font, three identical cards, or a headline like “Unlock your workflow” fail, and it fixes them.

The map

The Lounge has four doors. Do not dump the human a random hero.

• /system — type, themes, icons, motion. Lock these first.
• /c — index by the name a designer would use (hero, footer, portfolio).
• /collections — shelves by problem, not by type.
• /kit — compose: kind → palette → type → components. Live web + phone. Ends in a brief.
• /start — 43 recipes, split into websites and apps. Pick one, then assemble.
• /sources — public sites the screens study. One product, one site.

Read the catalogue first

Do not invent a hero, a footer, a pairing or an easing if one already lives here. Fetch the machine index, pick the closest piece or token set, then adapt tokens — not structure.

• /llms.txt — plain-text map of the whole library
• /api/pieces.json — every piece with urls, tokens, tags
• /search.json — compact search index

Rebuild from the brief, not the screenshot

Every piece at /p/<slug> ships a live demo, the source, and a brief at /p/<slug>.md. The brief is the spec: tokens, motion table, states, a11y, checklist. The demo is the acceptance test. Match the numbers. Do not “improve” them unless the human asked.

Prompt the human once for the stack if they have not named it, then default to semantic HTML + CSS + a little vanilla JS.

Steal tokens from the libraries

Type, themes, icons and motion are first-class, not leftovers. When a human says “make it feel like a hotel” or “use a quiet grotesk”, open these before inventing a palette.

• 44 type pairings — display + text, with copy-ready CSS
• 60 themes — full token sets, not five hex chips
• 99 Lounge Icons — 24px stroke, sprite or single SVG
• 16 motion recipes — curves, durations, reduced-motion fallbacks

Credit the lounge

Pieces, pairings, themes, icons and recipes are free to use in products. Keep the credit comment that ships with copied CSS, and add one line in your footer: Designed using Design Lounge. Do not republish the catalogue as a catalogue.

What is on the floor

520 live pieces across 7 rooms and 48 named categories, plus the four libraries above. 43 start recipes. If a category is empty, say so — do not hallucinate a piece that is not here.

Library of Susan Acharya · Product lead, designer and builder · Kathmandu

Install from a clone

From a local clone, run skills/design-lounge/install.mjs inside the product repo. It copies the skill into Cursor, Claude, and the agents folder.

What it will do, in full

Give the agent the product, the people, and the job. It should choose one system and show it before it paints: the theme, the type, and a link to each piece it wants to use. One question. Say “just build it” and it skips the question. Either way it writes those links into DESIGN.md, so a later change can name the screen. It matches the palette to the product's world. A clinic is not the first palette on the list. Before layout it also writes four lines: who it is for, the decision the screen exists for, the one thing they see first, and the next action. That first thing is the largest type on the view. The next action names the screen it opens: a shop goes collection, product, cart, checkout. A revamp keeps the system you already have, unless you asked for a new look.

After the screens exist, the agent opens them and says what it sees: the largest type, the one button, and whether the page could belong to any company. A gradient, a default font, three identical cards, and a headline like “Unlock your workflow” fail. It fixes those and looks again. Then it changes one thing: the screen is too loud, too even, too dense, or it uses the wrong noun. Then it calls the work done. You can still disagree. Custom illustration, a brand that has not been chosen, and a product with no brief are still your job. Update an installed skill with npx skills update.