# Open Design Guide

> Local Open Design library: real tokens for 151 design systems, 71 design skills, 114 render templates. Use only on an explicit ask: "open design", "od", "DESIGN.md", "brand contract", or naming a bundled system.

- Skill: `smk-labs/open-design-guide` (Agent Skill)
- Install (CLI): `npx skillmds@latest add smk-labs/open-design-guide`
- Raw SKILL.md: https://api.skillmd.com/api/skills/smk-labs/open-design-guide/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: smk-labs (https://skillmd.com/u/smk-labs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/smk-labs/open-design-guide

---


# Open Design guide

This skill does not contain the library. It knows how to find it and how to use it well.

The library is a local, offline clone of the content half of [Open Design](https://github.com/nexu-io/open-design). Plain files. No `od` binary, no daemon on port 7456, no desktop app.

## Step 1: locate the library

Read `~/.claude/open-design-guide.local.md`. Its `library:` field is the absolute path to the clone.

If that file does not exist, the library is not installed. Stop and tell the user to run:

```bash
"${CLAUDE_PLUGIN_ROOT}/scripts/install.sh"
```

Do not guess a path and do not fall back to the network. One clone, one recorded location.

## Step 2: find the right entry

Read `CATALOGUE.md` at the library root. That is the index: every design system grouped by category with its real tagline, every skill, every template.

Never guess a folder name. Names are not obvious (`linear-app`, not `linear`).

## Step 3: read the entry, then work

**Design systems** live at `design-systems/<name>/`.

Read `DESIGN.md` first. It is the brand contract and it governs every other file in the folder: the atmosphere, the typographic logic, the reason a color exists. Skipping it and grabbing `tokens.css` alone produces output that has the right hex codes and the wrong soul.

Then take real values from `tokens.css` or `design-tokens.json`, and copy component markup from `components.html`. Once a system is in play, invent nothing: no new colors, no new spacing steps, no new type scale.

`USAGE.md` covers how the authors intend the tokens to be applied. `DESIGN-<lang>.md` files are translations of the same contract, useful when writing UI copy in that language.

**Skills** live at `skills/<name>/SKILL.md`. Self-contained instructions for one job: taste and anti-slop passes, GSAP animation, image-to-code, redesigns, brand extraction, design briefs. Read the whole file before acting on any part of it. Some are long on purpose.

**Design templates** live at `design-templates/<name>/SKILL.md`. Rendering shapes: decks, editorial documents, video frames, device mockups, social cards.

## Rules

- One design system per artifact. Mixing two produces mush.
- The clone is read-only reference material. Never edit it, never commit into it. Copy what you need into the project being built.
- Ship no attribution to Open Design in the output. It is Apache-2.0 source material, not a credit line.
- Around 91 folders under `skills/` are stubs: frontmatter plus a link to an upstream repo, no instructions of their own. `CATALOGUE.md` leaves them out on purpose. If the user names one, open its `SKILL.md` for the upstream URL and say the real bundle has to be fetched separately.

## Updating

Rerunning the install script pulls the latest content and rebuilds `CATALOGUE.md`.

```bash
"${CLAUDE_PLUGIN_ROOT}/scripts/install.sh"
```