create-design-system

Installation
SKILL.md

Loaded when the user asks you to produce a reusable design system or UI kit from an existing brand, codebase, or product.

Where design systems live

All design systems for a project live under ./opendesign/design-systems/<name>/. Multiple systems can coexist — for example, ./opendesign/design-systems/marketing/, ./opendesign/design-systems/product/, ./opendesign/design-systems/deck-template/. The name is required and descriptive of what the system is for (brand surface, product surface, deck template, co-brand partner). Never use design-system/ singular or generic names like main.

A folder is recognized as a design system if it contains either a SKILL.md or a tokens file (colors_and_type.css at the root, or tokens/colors_and_type.css nested). opendesign accepts either marker when detecting systems. Always write both: the SKILL.md makes the folder portable as a standalone agent skill, and the tokens file is the canonical output of this skill.

Required paths (non-negotiable)

Every generated system MUST write to these exact paths, relative to project root. opendesign auto-discovery depends on them — deviating breaks detection.

  • ./opendesign/design-systems/<name>/SKILL.md — portable skill marker.
  • ./opendesign/design-systems/<name>/tokens/colors_and_type.css — canonical tokens file. Nested under tokens/, not at the folder root. This is the discovery marker.
  • ./opendesign/design-systems/<name>/README.md — human-facing index.

Do not write the tokens file to any other path (no colors.css, no styles/tokens.css, no flat colors_and_type.css at the root of the system folder). Do not omit SKILL.md. Do not rename the design-systems/ parent inside opendesign/.

What a design system folder contains

Installs
32
GitHub Stars
196
First Seen
May 10, 2026
create-design-system — manalkaff/opendesign