What is the design-system skill?
The design-system skill is a short SKILL.md in the affaan-m/ECC repository. It outlines how an AI coding agent starts or extends a design system with four core elements, a Figma, Storybook and Chromatic toolchain, and a checklist. The copy linked here is the Japanese version under docs/ja-JP.
The design-system skill is a compact SKILL.md that frames a design system as four parts: design tokens, components, layout patterns and icons. It is an outline for scalable, maintainable systems, not a generator or a template pack.
It ships inside ECC, a large agent harness repository. The folder linked on this page is the ja-JP translation, so the prose is Japanese while product names such as Figma and Storybook stay as written.
The four core elements
- Design tokens: a central collection of colors, typography, spacing and shadows.
- Components: reusable building blocks such as buttons, inputs and cards.
- Layout patterns: page layouts, forms and grids.
- Icons: an SVG based icon library.
The toolchain it names
- Figma as the design tool.
- Storybook to showcase components.
- Chromatic for visual testing.
- Design tokens managed as JSON.
When the description says to reach for it
- Initializing a new design system.
- Extending a component library.
- Keeping design and implementation in sync.
- Enforcing accessibility standards.
- Implementing theming.
Where it stops
The file is short and ends by pointing readers to documentation for detail. It lists design tokens as JSON-managed, names Figma, Storybook and Chromatic as tools, and gives a checklist, but no naming scheme and no scripts. For tiered tokens and theming rules, see design-system-patterns or design-token.
Use it with UiChemy
If your system lives in Figma, run the checklist there first, then convert the finished design into WordPress with UiChemy Figma to WordPress. Click Get Started on uichemy.com. To build the Figma library from code instead, see figma-generate-library.
How to install Design System Skill: Tokens, Components and Storybook
npx [email protected] setupMeet the requirements
ECC 2.2 needs Node.js 18 or newer. The README adds that the Claude plugin path also needs Git and Claude Code 2.1 or newer available on PATH.
Launch the setup wizard
Run
npx [email protected] setupin a terminal. It checks the official marketplace and every native install scope before it installs or moves the ecc@ecc plugin.Choose one install path
The README warns against stacking methods. Use either this guided setup or the native plugin commands, and avoid adding a full manual install on top of the plugin.
Find the skill
The README does not list which skills the plugin loads, so open the linked skill folder in the repository. Then ask the agent to start or extend a design system, naming the design-system skill and your token and component needs.
Check that it loaded
Run /plugin list in a new Claude Code session and check that ecc@ecc shows as enabled. Then ask for a design system plan and see whether it walks the four elements and the checklist.
Key features
- Four core elementsThe skill defines a design system as tokens, components, layout patterns and an SVG based icon library, each with a one line description.
- Token collectionColors, typography, spacing and shadows are held in one central collection, with design tokens managed as JSON.
- Reusable componentsButtons, inputs, cards and other basic UI building blocks are listed as the reusable layer on top of the tokens.
- Layout patternsPage layouts, forms and grids are treated as their own element, separate from single components.
- Named toolchainFigma for design, Storybook for showcasing components and Chromatic for visual testing, alongside JSON token management.
- Six item checklistTokens defined for color, spacing and type, basic components built, Storybook set up, accessibility tested, documentation written and the team onboarded.
- Five use casesStart a system, extend a component library, keep design and code in sync, enforce accessibility standards and implement theming.
- Description scopeThe frontmatter promises accessibility, responsiveness, theming, component groups and tokens, with Figma, Storybook and component library integration.
Frequently asked questions
What is the design-system skill?
It is a short skill in the affaan-m/ECC repository for building scalable, maintainable design systems. It names four core elements, tokens, components, layout patterns and icons, lists Figma, Storybook and Chromatic as tools, and ends with a six item checklist.
How do I install the design-system skill?
The ECC README gives one guided installer: run npx [email protected] setup. It installs the ecc@ecc plugin and needs Node.js 18 or newer, Git and Claude Code 2.1 or newer. The README does not say which skills that plugin loads, so the skill folder in the repository is the reference.
Does the design-system skill generate tokens or components?
No generator is described. The SKILL.md is an outline of elements, tools and a checklist, and it points to documentation for details. Treat it as a planning prompt for the agent, and pair it with a more detailed token skill if you need naming rules.
Is the design-system skill in English?
The folder linked here is under docs/ja-JP, so the prose is Japanese. Tool names such as Figma, Storybook and Chromatic appear as written. The ECC README links documentation in several other languages, but this page only describes the ja-JP copy.
Which tools does the design-system skill mention?
Four. Figma is the design tool, Storybook showcases components, Chromatic handles visual testing and design tokens are managed as JSON. The SKILL.md does not describe how to configure any of them, only that a design system uses them.
Does the design-system skill work with Claude Code, Cursor or Codex?
The ECC README says it works best with Claude Code today, has a supported Codex sync path and provides capability-limited adapters for Cursor, OpenCode, Gemini, Zed, GitHub Copilot, Antigravity and Qwen. It points to a support matrix for feature parity.
What license is the design-system skill under?
It sits in the ECC repository, which GitHub lists as MIT licensed. The README repeats that the repository is MIT licensed, and describes ECC Pro as a separate hosted GitHub App for private repositories that is not part of the open source package.