design-system

Establish scalable design systems with intent-driven tokens and documentation.

Updated Apr 5, 2023
One-click install
npx skills add https://github.com/fcalell/dotfiles --skill design-system-fcalell
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/fcalell/dotfiles/tree/main/dot_claude/skills/design-system
Command: npx skills add https://github.com/fcalell/dotfiles --skill design-system-fcalell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes a clear framework for building scalable, principled design systems, from product context to tokenization and governance.

Core Features & Use Cases

  • Intent-first approach to align product context with design decisions.
  • Semantic token architecture covering colors, typography, surfaces, and validation workflow.
  • Workflow-driven guidance with rules, anti-patterns, and a practical documentation template.

Quick Start

Create or update a design-system.md following this methodology to establish tokens, surfaces, and components.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a design system with semantic tokens and surface architecture?

Build a design system using an intent-first approach that aligns product context with design decisions, creating semantic token architecture for colors and typography. This framework establishes scalable, principled design systems through workflow-driven governance.

What is surface architecture in a design system and when do I need it?

Surface architecture in a design system organizes visual layers through semantic tokens to establish consistent component hierarchy. You need it when building scalable enterprise UI libraries, dashboards, or creative tools requiring principled surface hierarchy and validation.

How to create a design system documentation template for UI patterns?

Create a design system documentation template by following a workflow-driven methodology that defines rules, anti-patterns, and validation checks for UI patterns. This establishes a governance process and practical template for token creation and component patterns.

Can I use this design system framework for enterprise UI libraries and dashboards?

Yes, you can use this intent-driven design system framework for enterprise UI libraries and dashboards. It specifically guides token creation, surface architecture, and component patterns for product teams building scalable interfaces in these contexts.

What's the best way to implement design validation checks for semantic tokens?

Implement design validation checks for semantic tokens by applying a workflow-driven governance process with defined rules and anti-patterns. This establishes a validation workflow ensuring intent-driven consistency across colors, typography, and surface architecture.

Why does my design system need an intent-driven token architecture?

Your design system needs an intent-driven token architecture to align product context with design decisions, ensuring semantic tokens scale properly across colors, typography, and surfaces. This intent-first approach prevents inconsistency when building enterprise UI libraries.