Does this skill handle UI implementation?

While it architects the CSS structure and documentation, it is best paired with the 'web-design-expert' or 'native-app-designer' skills for actual high-fidelity component implementation.

What is a three-tier token architecture?

It organizes design values into three layers: Primitive (raw values), Semantic (purpose-driven names like 'primary-bg'), and Component-specific tokens for maximum flexibility and theming.

Why does this skill prioritize OKLCH over HEX or HSL?

OKLCH is perceptually uniform, meaning colors with the same lightness value actually look equally bright to the human eye, which is critical for accessible design and consistent palettes.

Can this skill help refactor an existing codebase?

Yes, it can audit existing CSS to extract recurring patterns, identify inconsistencies, and refactor them into a scalable ITCSS structure with standardized tokens.

Design System Architect

Name: Design System Architect
Author: curiositech

bycuriositech

•

디자인 도구

Architects scalable design systems and production-ready CSS using modern token structures and OKLCH color standards.

This skill empowers developers to build comprehensive design systems and 'design bibles' focused on long-term scalability and maintainability. It specializes in establishing robust CSS architectures like ITCSS, implementing three-tier token systems (Primitive, Semantic, Component), and enforcing the modern OKLCH color standard for perceptual uniformity. Whether you are auditing existing styles to extract a system or building a component library from scratch, this skill ensures design consistency, accessibility compliance, and developer-friendly documentation.

주요 기능

01ITCSS-based CSS organization and BEM naming conventions

02Three-tier token architecture implementation (Primitive, Semantic, Component)

03Modern OKLCH color system generation for uniform lightness and accessibility

04Design system audits and CSS refactoring for multi-brand or dark mode support

05Comprehensive Design Bible and style guide documentation generation

0672 GitHub stars

사용 사례

01Building a multi-brand or dark-mode ready token system from scratch

02Converting legacy HEX/HSL color systems to the perceptually uniform OKLCH standard

03Generating a centralized Design Bible to synchronize design intent with production code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add curiositech/some_claude_skills design-system-creator

For use in Claude.ai and ChatGPT

Download Skill