Workshop · Component-driven UIs with AI

ATELIER

Design in Figma. Explore in Storybook. Ship with AI.

Teaching artifact · not a production library

Start the workshop Design → code in 4 steps Browse components

The three pillars

A loop, not a stack.

Each tool reads the others through Model Context Protocol. Inspect → prompt → ship → iterate.

01 · Inspect

Figma

Single source of truth for tokens and component frames. Variables sync to tokens.css.

Variables Frames

02 · Prompt

Storybook

Per-framework live explorer. Each instance hosts an MCP endpoint Claude can call.

/mcp Stories

03 · Ship

Claude + MCP

Reads Figma + Storybook through MCP, writes spec-aligned code in Angular, React, or Vue.

Spec-aware Parity

MCP setup

Three endpoints. One config.

Drop these into your Claude Code MCP config. Each Storybook endpoint exposes the same three docs tools — list-all-documentation, get-documentation, get-documentation-for-story; dev and test tools (preview-stories, run-story-tests) require a locally running Storybook with @storybook/addon-mcp.

HTTP transport — no local processes to babysit.
Hosted alongside the Storybook itself, no extra deploy.
Spec-aware — Claude knows which props exist before suggesting code.

.mcp.json

{
  "mcpServers": {
    "storybook-angular": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-angular/mcp"
    },
    "storybook-react": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-react/mcp"
    },
    "storybook-vue": {
      "type": "http",
      "url": "https://atelier.pieper.io/storybook-vue/mcp"
    }
  }
}

Get started in 60 seconds

Scaffold a workspace.

An Nx workspace with your framework choice, the component library wired up, and the MCP config pre-seeded.

npx create-atelier-ui-workspace

Edit this page on GitHub