# Design Systems

> Expertise in UI Component consistency and Figma to Code workflows.

- Skill: `j4flmao/design-systems` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add j4flmao/design-systems`
- Raw SKILL.md: https://api.skillmd.com/api/skills/j4flmao/design-systems/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: j4flmao (https://skillmd.com/u/j4flmao)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/j4flmao/design-systems

---


# Design Systems

## Core Principles
- **Consistency**: Reusable components and tokens across the UI.
- **Single Source of Truth**: Design tokens sync Figma and Codebase.

## Figma to Code Workflow
```mermaid
%%{init: {"theme": "default", "flowchart": {"useMaxWidth": true}}}%%
flowchart TD
    A[Figma Design] --> B[Export Design Tokens]
    B --> C[Style Dictionary]
    C --> D[CSS/SCSS Variables]
    D --> E[UI Components]
```

## Template: Design Token
```json
{
  "color": {
    "primary": {
      "value": "#0052cc",
      "type": "color"
    },
    "text": {
      "value": "#172b4d",
      "type": "color"
    }
  }
}
```