Design -isms

Find a style. Compose a screen. Build with a reference.
A visual design atlas, frontend pattern library, and Code Mode MCP for coding agents.

English · 한국어

Explore the atlas → · Install MCP · Agent skills · API · Report an issue

Install the MCP

Requires Node.js 22+. Clone the repository; the query runtime uses committed JavaScript and Node built-ins, so no npm install or build is needed for MCP use.

git clone https://github.com/lidge-jun/design-isms.git

Add this stdio server to your MCP client. Replace /absolute/path/design-isms with the absolute path to your clone. This example uses the mcpServers format; your host may use a different configuration file or top-level key.

{
  "mcpServers": {
    "design-isms": {
      "command": "node",
      "args": ["/absolute/path/design-isms/scripts/mcp/server.mjs"]
    }
  }
}

Once connected, you should see one tool: execute_code. Run return actions.find(); to discover its operations. API and examples · Agent skill installation · Use the website

Design -isms connects visual references to implementation decisions. Browse styles and interactive UI patterns, or let your coding agent query the same catalog for palettes, typography, layout guidance, and code examples.

From reference to implementation

Choose the ingredients. Copy the brief.

Open the recipe chooser on the home page, select a screen purpose, and adjust the permitted alternatives. Inspect the linked references, then copy the implementation brief into your coding agent. If automatic copying is unavailable, the full text remains selectable.

Recipes provide design guidance; they do not generate a finished page or certify your product. The site supports English and Korean. These screenshots show the actual interface; mockups within catalog cards are AI-generated reference images.

Catalogs

Try the Liquid Glass material comparison and interactive motion examples for progress, tabs, and list reordering. The AI Slop entry is diagnostic only; it is excluded from recommendations and related styles.

Agent skills

For Claude Code:

claude plugin marketplace add lidge-jun/design-isms
claude plugin install design-isms@lidge-jun

Compare design styles for my portfolio.
Show me bottom-sheet implementation code and accessibility checks.

The style and effect skills read the repository's JSON. They can query a connected Design -isms MCP server when available. Plugin installation and MCP configuration are separate steps. For Codex and agy installation, skill usage, and troubleshooting, see the plugin guide (Korean).

Code Mode MCP

One public tool, execute_code, exposes small synchronous functions that return ordinary data. Its resident description stays below 2,000 UTF-8 bytes; discover full operation schemas with actions.find() and actions.describe() as needed.

Pass this as the tool's code argument to compose a screen and return its implementation brief:

const composition = design.compose({
  recipeId: 'settings-workspace',
  lang: 'en'
});
return design.brief({ composition }).text;

Use JavaScript's map, filter, and reduce to work with the returned values. The default MCP response budget is 8 KiB, including the JSON-RPC envelope. Code is returned whole or rejected with RESPONSE_TOO_LARGE. Direct search pages can be shortened at item boundaries, with a cursor for the remaining results.

The server uses local stdio and opens no network port. It is intended for trusted local agents: Worker/VM limits contain mistakes, but are not a security sandbox for hostile JavaScript. See API details, pagination, and execution limits (Korean).

CLI and Unix pipes

From your clone (cd design-isms), query the same operations using newline-delimited JSON: one request on stdin, one result on stdout.

printf '%s\n' '{"op":"design.search","args":{"query":"bottom sheet","limit":3}}' |
  node scripts/design-query.mjs

printf '%s\n' '{"op":"design.compose","args":{"recipeId":"settings-workspace","lang":"en"}}' |
  node scripts/design-query.mjs |
  jq -c '{op:"design.brief",args:{composition:.}}' |
  node scripts/design-query.mjs

Development and contributions

Use Node.js 22+ and npm. The local server serves the .pages/ output created below.

npm ci
npm run build
npm run verify
npm run pages:stage
npm run serve

Open http://127.0.0.1:4173. After editing, run build → verify → pages:stage again. TypeScript lives in src/; commit its browser output in assets/js/. The website, skills, and MCP share assets/data/. Verification does not generate files.

Submit changes as PRs targeting dev. Promoting verified changes to main runs verification again and deploys only the allowlisted .pages/ output to GitHub Pages. Skills, the MCP server, and development documentation stay outside that deployment. For bug reports, include the page URL, viewport size, and steps to reproduce.

Credits and source licenses

Pinned revisions, adaptation scopes, and original notices are recorded in ATTRIBUTION.md. These licenses apply to their respective upstream materials; they do not establish a blanket license for this repository or its AI-generated images.