Claude Skill

open-design-guide

Use the Open Design content library: 151 design systems with real tokens (Apple, Vercel, Linear, Stripe, Notion, GitHub, Raycast, plus styles like brutalism and claymorphism), 71 design and frontend skills, and 114 rendering templates for decks, documents, video frames, and socia

LLM Mart · 0 points · 17 views 0 listing impressions 0 install-command copies
Virus-scanned Reviewed automatically before listing.

Full trust report

Download smk-labs-claude-plugins-open-design-guide_skills_open-design-guide-35de111.zip · 1 KB
Part of smk-labs/claude-plugins — 19 skills

Install

skills CLI npx skills add https://github.com/smk-labs/claude-plugins/tree/main/open-design-guide/skills/open-design-guide
Claude Code claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install smk-labs-claude-plugins@llmmart
Git git clone https://github.com/smk-labs/claude-plugins.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole smk-labs/claude-plugins collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

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. 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:

"${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.

"${CLAUDE_PLUGIN_ROOT}/scripts/install.sh"
Files (claude-plugins)
  • SKILL.md 3.1 KB
    ---
    name: open-design-guide
    description: >-
      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.
    ---
    
    # 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"
    ```
    

Comments (0)

Sign in to join the conversation.

No comments yet.

Reviews (0)

No reviews yet.

Related