How does this skill handle existing UI inconsistencies?

It initiates a discovery phase using a UI inventory process. It identifies visual discrepancies by categorizing existing elements (buttons, forms, etc.) and marking inconsistencies for refactoring into the new system.

What design methodologies are supported?

The skill follows the Double Diamond model for the design process and uses Atomic Design principles to structure component hierarchies from atoms to pages.

How are design decisions documented?

The skill uses Design Decision Records (DDR) and the QOC (Questions, Options, Criteria) framework to turn implicit design choices into documented, searchable technical knowledge.

Can it help with design system governance?

Yes, it includes specific steps for selecting governance models (Centralized, Federated, or Community-driven) and defining KPIs like adoption rate and consistency metrics.

Does it support the latest Design Token standards?

Yes, it generates tokens compliant with the W3C Design Tokens Format (DTCG) and implements a three-layer architecture (Global, Semantic, Component) for maximum flexibility.

Design System Builder

Name: Design System Builder
Author: CAPHTECH

byCAPHTECH

0•

Design Tools

Systematically designs and implements comprehensive design systems using industry-standard frameworks like Atomic Design and 3-layer Design Tokens.

The Design System Builder skill enables Claude to guide teams through the entire lifecycle of creating a design system—from initial UI inventory and discovery to the technical implementation of design tokens and component libraries. By employing structured methodologies like the Double Diamond model and 3-layer token architecture, it ensures that visual consistency, accessibility, and governance are built into the foundation of a product's UI. This skill helps formalize design decisions, bridge the gap between design and engineering, and provides a clear roadmap for scaling UI infrastructure across complex organizations.

Key Features

01Governance modeling and phased migration planning for legacy UI systems

02Formalized Design Decision Records (DDR) to track intent and technical constraints

030 GitHub stars

04Scalable 3-layer Design Token architecture (Global, Semantic, and Component layers)

05Comprehensive UI inventory collection via manual classification or MCP-driven automation

06Atomic Design structuring for robust and reusable component libraries

Use Cases

01Consolidating fragmented UI components into a unified, accessible library

02Establishing design governance and contribution workflows for cross-functional teams

03Building a multi-platform design system from scratch with shared design tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add caphtech/claude-marketplace design-system-builder

For use in Claude.ai and ChatGPT

Key Features

01Governance modeling and phased migration planning for legacy UI systems

02Formalized Design Decision Records (DDR) to track intent and technical constraints

030 GitHub stars

04Scalable 3-layer Design Token architecture (Global, Semantic, and Component layers)

05Comprehensive UI inventory collection via manual classification or MCP-driven automation

06Atomic Design structuring for robust and reusable component libraries

Use Cases

01Consolidating fragmented UI components into a unified, accessible library

02Establishing design governance and contribution workflows for cross-functional teams

03Building a multi-platform design system from scratch with shared design tokens