full-stack-design-skills: Skill for Claude Code

Design to Code Workflow

Bridging design systems and development: from Figma specifications to production React components.

The gap between design and code is where friction happens. A smooth design-to-code workflow means designers can specify components once, developers implement them accurately, and updates propagate automatically. This skill focuses on processes, tools, and patterns that eliminate this friction.

---

Core Principle: Single Source of Truth

The Design-to-Code Pipeline

Figma Design System
       ↓
Design Tokens (colors, spacing, typography)
       ↓
Component Specifications (props, states, variants)
       ↓
Code Generation (or manual implementation)
       ↓
Component Library (Storybook)
       ↓
Production Applications

Goal: Changes in Figma automatically propagate to:

• Design tokens in code
• Component props and defaults
• Component documentation
• Type definitions (TypeScript)

---

Stage 1: Design Specification

What Developers Need

Before writing code, developers need:

1. Component Purpose

   • What problem does this component solve?
   • When should it be used?

2. Component Specifications

   • Visual design (colors, sizes, spacing)
   • Interaction states (hover, focus, active, disabled)
   • Responsive behavior
   • Accessibility requirements

3. Props & Variants

   • What props does component accept?
   • What values for each prop?
   • Default values?
   • Type definitions (TypeScript)?

4. Content & Copy

   • Labels, helper text, error messages
   • Placeholder text
   • Call-to-action buttons

5. Examples

   • Primary use cases
   • Edge cases
   • Common variations

Figma as Single Source

Figma should contain:

• Components with variants (primary/secondary, size variants, states)
• Design tokens in Figma Variables (colors, spacing, typography)
• Component documentation (description in component properties)
• Interaction examples (prototypes showing states)

Example: Button Component in Figma

Button (component)
├── Variants
│   ├── Variant: type (primary, secondary, ghost)
│   ├── Variant: size (sm, md, lg)
│   ├── Variant: state (default, hover, focus, active, disabled)
│   └── Variant: icon (with icon, without icon)
├── Properties
│   ├── Label (text)
│   ├── Icon (boolean)
│   └── Loading (boolean)
└── Documentation
    └── "Primary action button. Use for main CTAs."