Example: Visual Regression for Full Design System

Setup visual regression for entire design system with token validation.

Scenario

You have a design system with multiple components:

Button, Input, Card, Avatar, Badge, Modal, etc.
Design tokens extracted from Figma (via product-design skill)
Want to ensure pixel-perfect implementation

Usage

"Set up visual regression for entire design system in src/components"

What Skill Does

Discovers components: Scans src/components/ directory
Generates stories: Creates .stories.tsx for each component
Token validation: Compares CSS values to design tokens
Bulk setup: Single Chromatic config for all components

Generated Files

src/components/
├── Button/
│   ├── Button.tsx
│   └── Button.stories.tsx       # ← Generated
├── Input/
│   ├── Input.tsx
│   └── Input.stories.tsx        # ← Generated
├── Card/
│   ├── Card.tsx
│   └── Card.stories.tsx         # ← Generated
...

chromatic.config.json              # ← Generated
.github/workflows/chromatic.yml    # ← Generated

Integration with product-design Skill

If you used product-design skill to extract Figma tokens:

1. "Review this design from Figma"
   → Extracts tokens to tokens.json

2. "Set up visual regression for design system"
   → Generates stories with token values
   → Validates implementation matches tokens

Token Validation Example

Design token (from Figma):

{
  "color": {
    "primary": {
      "value": "#3B82F6"
    }
  }
}

Story validation:

export const Primary: Story = {
  args: { variant: 'primary' },
  play: async ({ canvasElement }) => {
    const button = within(canvasElement).getByRole('button');
    const computedStyle = window.getComputedStyle(button);
    expect(computedStyle.backgroundColor).toBe('rgb(59, 130, 246)'); // #3B82F6
  },
};

Benefits

Prevent drift: Catch when code diverges from designs
Scale testing: Test 50+ components in one workflow
Token enforcement: Ensure design tokens are used correctly
Design review: Designers see visual diffs in Chromatic

Time saved: 6-10 hours → 15 minutes (95% reduction) Components: All in design system Tokens validated: Automatically

2.4 KiB Raw Permalink Blame History