What is the design-system-creator skill?
The design-system-creator skill is a SKILL.md from curiositech's skills collection for building design systems and design bibles. It teaches an AI coding agent primitive, semantic and component tokens, OKLCH color, ITCSS organization, six anti-patterns to avoid and a six step process from audit to delivery.
The design-system-creator skill sets the agent up as a design systems architect and CSS expert. It builds scalable design bibles from tokens, component documentation and CSS architecture, and it activates on design system, design tokens, component library, style guide and design bible.
Tokens and color
Tokens come in three tiers. Primitive tokens hold raw values such as --color-blue-500, semantic tokens carry purpose such as --color-primary, and component tokens such as --button-bg point at the semantic layer.
Color tokens must use OKLCH, not hex or HSL. Equal lightness values mean equal perceived lightness, which helps with harmonious scales, accessibility checks and dark mode, where the skill lowers L and adjusts C for brand intensity.
Design bible and CSS structure
- Foundation: brand identity, design principles, color, typography scale, spacing scale and grid.
- Components: purpose, anatomy, variants, states, responsive behavior, accessibility and code examples for each.
- Patterns: page layouts, navigation, forms, data display and feedback such as alerts, toasts and modals.
- Guidelines: voice and tone, imagery, motion and accessibility.
- CSS layers: an ITCSS folder order from 0-settings to 6-utilities, with a main.css that imports them all.
Anti-patterns it flags
Six failures are named with fixes: token explosion, a missing semantic layer, documentation drift, utility class overload, breaking the scale and no version control. For the scale, if padding: 13px appears, the fix is to repair the scale rather than add an exception.
Who the design-system-creator skill is for
Best for
- Creating design tokens from scratch, covering colors, spacing and typography scales, with the design-token skill as another route for token formats.
- Documenting component libraries with usage guidelines.
- Auditing existing CSS to extract a system, and setting naming conventions such as BEM, OOCSS or SMACSS, which the css-architecture skill covers from the CSS side.
- Theming, dark mode token systems and multi-brand or white-label structures, where the dark-mode-design-expert skill is a dedicated option.
Not for
- Typography selection and pairing, which belongs to typography-expert.
- Palette generation and color theory, which belongs to color-theory-palette-harmony-expert.
- Brand identity, icon design or building the components themselves, which belong to web-design-expert or native-app-designer.
How to install Design System Creator Skill: Tokens, OKLCH and ITCSS
/plugin marketplace add erichowens/some_claude_skills
/plugin install design-system-creator@some-claude-skillsAdd the marketplace
In Claude Code, run
/plugin marketplace add erichowens/some_claude_skills.Install the skill
Run
/plugin install design-system-creator@some-claude-skills. The same pattern installs any skill from the collection.Or copy the folder
Run
git clone https://github.com/erichowens/some_claude_skills.git, then runcp -r some_claude_skills/.claude/skills/* ~/.claude/skills/.Trigger it
Describe the job in the terms from its description: design system, design tokens, CSS architecture, component library, style guide or design bible.
Check that it loaded
Ask the agent to create a design system for a small site. It should propose primitive, semantic and component tokens in OKLCH, an ITCSS folder layout and a design bible outline.
Key features
- Three-tier tokensPrimitive, semantic and component tokens each reference the layer above, so a brand can change without touching every component.
- OKLCH color tokensThe skill marks OKLCH as critical for color, with primary scales at one hue and varying lightness, and separate light and dark background values.
- Design bible structureFoundation, Components, Patterns and Guidelines sections give the agent a fixed outline for the finished document.
- Component documentationEach component gets purpose, anatomy, variants, states from default to focus, responsive behavior, accessibility notes and code examples.
- ITCSS organizationStyles split into settings, tools, generic, elements, objects, components and utilities folders, imported through one main.css.
- Anti-pattern fixesToken explosion, missing semantic layer, documentation drift, utility class overload, breaking the scale and no version control each come with a fix.
- Six step processAudit, Define, Build, Document, Test and Deliver, with accessibility and responsiveness checked before delivery.
- Spacing disciplineThe skill says to limit spacing to 6 to 8 tokens and to fix the scale instead of adding exceptions such as 13px.
- Theming supportDark mode token systems and multi-brand or white-label token structures are listed as supported jobs, with details in its token-architecture reference.
- Defined deliverablesA design bible document, a CSS codebase, a component library with all variants and a quick start guide with recipes.
Frequently asked questions
What is the design-system-creator skill?
It is a skill in curiositech's some_claude_skills collection that has an AI coding agent build design systems and design bibles. It covers three-tier tokens, OKLCH color, ITCSS CSS organization, component documentation, anti-patterns and a six step process from audit to delivery.
How do I install design-system-creator?
Run /plugin marketplace add erichowens/some_claude_skills, then /plugin install design-system-creator@some-claude-skills. You can also clone the repository and run cp -r some_claude_skills/.claude/skills/* ~/.claude/skills/ to copy every skill. Then ask the agent for a design system or style guide. It should propose primitive, semantic and component tokens in OKLCH and an ITCSS folder layout.
Why does design-system-creator require OKLCH?
The skill says to always use OKLCH for color tokens. It is perceptually uniform, so equal L values look equally light. That helps generate harmonious scales, check accessibility and theme dark mode, where lightness drops and chroma controls brand intensity.
What are the three token tiers?
Primitive tokens hold raw values such as a blue at oklch(62.8% 0.195 252.5) or a spacing step of 1rem. Semantic tokens give purpose, such as color-primary. Component tokens, such as button-bg, point at the semantic layer, which makes theming possible without editing each component.
What does design-system-creator not cover?
It does not cover these jobs, which the skill hands to other skills. Typography selection goes to typography-expert, color theory and palette generation to color-theory-palette-harmony-expert, brand identity and icon design to web-design-expert, and component implementation to web-design-expert or native-app-designer. Motion design principles go to native-app-designer.
Which anti-patterns does the skill warn about?
Six are listed: token explosion with 500 plus overlapping tokens, a missing semantic layer, documentation drift between the design bible and CSS, utility class overload, breaking the scale with values such as 13px, and no version control, which leaves several sources of truth.
Which tools can the skill connect to?
The skill lists five connectors: 21st.dev for scaffolding components, Storybook for extracting component structure, Figma for syncing design tokens from variables, Stability AI for placeholder documentation images and Firecrawl for researching design system practice. Storybook and Figma are marked when available.
What license does the design-system-creator skill use?
It is MIT licensed. The curiositech/some_claude_skills repository uses the MIT license, and the design-system-creator folder sits at .claude/skills/design-system-creator inside that repository, so the same license covers it together with every other skill in the collection. The terms are the same whether you install through the plugin marketplace or copy the folder into ~/.claude/skills/ by hand.