Skip to content
Beta Multi-model support (OpenAI, Gemini, and more) launching soon.
RBA RBA Skills

design-to-code-builder

v0.1.0 ExperimentalNo security review by Dakota Smith

Install

Pick the surface you use. Plugins run inside Claude Code, which is available in the terminal CLI, the desktop app on Mac and Windows, the web app at claude.ai/code, and the VS Code and JetBrains extensions. The slash commands are identical on every surface.

From inside any Claude Code session — terminal, desktop app, web app, or IDE extension:

  1. Add the RBA Skills marketplace (only needed once per machine):

    /plugin marketplace add rbaconsulting/rba-skills-plugin

  2. Install design-to-code-builder:

    /plugin install design-to-code-builder@rba-ai-hub

  3. Activate it without restarting:

    /reload-plugins

Overview

Design-to-Code Component Builder

A complete Figma-to-production pipeline for RBA digital experience projects. Uses the Figma MCP server to read design context and variables directly from the active Figma selection, then generates framework-agnostic, accessible components that are born compliant with your design system's token layer.

The plugin bridges the gap between designer intent and developer output without the copy-paste handoff tax: tokens stay as token references in code (not hardcoded values), every generated component passes a WCAG 2.2 AA contrast gate before it leaves the skill, and the output adapts to the rendering layer your project actually uses — React/TypeScript, Razor/.NET, Astro, or Vue, with Sitecore, Optimizely, and Umbraco CMS wrappers available.

What's in the bundle

Artifact Purpose
figma-component-scaffold skill Read a Figma frame or component via the MCP, generate accessible code with token references and adapter variants
design-token-extract skill Export Figma Variables to a DTCG-compliant .tokens.json, build a CSS custom-property sheet, and generate framework-specific token wrappers
component-a11y-gate skill Validate a generated or authored component against WCAG 2.2 AA: contrast ratios, keyboard model, ARIA roles, focus handling
design-system-sync skill Audit drift between Figma Variables and the codebase token file; produce a reconciliation diff and updated token outputs
component-reviewer agent Subagent that reviews generated components against the design spec and the project's existing design-system conventions before merge
/build-component command One-shot entry point: Figma URL → token extraction → scaffold → a11y gate in a single command

When to use this plugin

  • New component build — a designer hands you a Figma URL and you need production-ready code that matches the spec, stays on-token, and is accessible.
  • Design system initialisation — extract all Figma Variables from a library file and bootstrap the project token layer (CSS custom properties, Style Dictionary config, platform-specific outputs).
  • Token drift audit — the Figma Variables have changed; sync them back into code before a sprint ships divergent hardcoded values.
  • Accessibility pre-check — run the a11y gate on any component (generated or hand-authored) before QA, ensuring contrast pairs and interactive semantics comply with WCAG 2.2 AA at the point of creation.
  • Design system hand-off — produce a developer-ready token package and component library that a client or internal team can onboard from.

Platform adapters

Skills are framework-agnostic by default. Pass --adapter to get a rendering-layer wrapper:

Adapter flag Output
--adapter react .tsx + CSS modules or Tailwind utility classes
--adapter razor .cshtml / .razor partial with @model binding and IViewComponentModel interface
--adapter astro .astro component with typed Props interface
--adapter vue .vue SFC with <script setup> + TypeScript
--adapter sitecore React/TSX + Sitecore JSS ComponentProps and rendering parameter types
--adapter optimizely React/TSX + Optimizely Content Cloud BlockComponentProps / ContentAreaItem
--adapter umbraco Razor .cshtml + Umbraco ViewComponent and IPublishedContent model

Prerequisites — Figma MCP server

The figma-component-scaffold and design-token-extract skills call Figma MCP tools directly. To enable:

  1. Open the Figma desktop app and go to Preferences → Enable Dev Mode MCP Server.
  2. In your project, add the server to Claude Code:
    claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
  3. Verify with claude mcp list — you should see figma-dev-mode-mcp-server.

Skills that do not require the Figma MCP (component-a11y-gate, design-system-sync) work without it.

How to install

claude plugin install design-to-code-builder@rba-ai-hub

After install, all four skills appear in /skills/browse/, the component-reviewer agent is available as a subagent, and the /build-component command is available in any project.

Token layer conventions

This plugin follows the W3C Design Tokens Community Group (DTCG) 2025.10 stable specification:

  • Token files use .tokens.json extension and application/design-tokens+json media type.
  • All spec-defined properties are $-prefixed: $value, $type, $description, $deprecated.
  • Three-tier token architecture: primitive (raw values, never applied directly) → semantic (contextual aliases with accessibility annotations) → component (component-scoped overrides for enterprise-scale systems).
  • Semantic color tokens document their WCAG contrast pair so the pair is guaranteed compliant before any component references it.

WCAG 2.2 AA compliance built-in

Every component generated by this plugin is verified against:

  • 1.4.3 Contrast Minimum — 4.5:1 for body text, 3:1 for large text and UI components
  • 1.4.11 Non-text Contrast — 3:1 for focus indicators, form borders, icon boundaries
  • 2.4.7 / 2.4.11 Focus Visible / Focus Appearance — visible focus indicator with minimum 2 CSS px perimeter
  • 2.5.8 Target Size — interactive targets ≥ 24×24 CSS px or with adequate spacing offset
  • 4.1.2 Name, Role, Value — ARIA roles and states correct for custom interactive patterns

Bundled artifacts

Skills

  • component-a11y-gate — Static WCAG 2.2 AA accessibility gate for generated or hand-authored UI components. Validates contrast ratios against the project token layer, checks ARIA roles and states, verifies keyboard interaction model, inspects focus styles, and flags target-size violations. Produces a pass/fail verdict with a fix-per-finding list that a developer can resolve in the same coding session. Use before merge or QA handoff to prevent accessibility debt from entering the codebase.
  • design-system-sync — Audit drift between Figma Variables (via the Figma MCP server) and the codebase token file. Reports tokens added, removed, renamed, or changed in value; flags contrast regressions introduced by Figma-side changes; and generates an updated token file and diff that a developer can review and merge. Use at the start of a sprint or after a design-system update to keep code and Figma in lockstep.
  • design-token-extract — Export Figma Variables from the active file via the Figma MCP server to a W3C DTCG-compliant .tokens.json file, then transform it into CSS custom properties, Style Dictionary config, and optional framework-specific token outputs (Tailwind theme extension, SCSS variable map, .NET token class). Validates WCAG 2.2 AA contrast for all semantic color pairs at extraction time so the token layer ships accessibility-guaranteed before any component uses it.
  • figma-component-scaffold — Read a Figma frame or component via the Figma MCP server, extract design tokens, layout structure, and variant specifications, then generate an accessible, design-system-compliant component. Supports React/TypeScript, Razor/.NET, Astro, and Vue with Sitecore, Optimizely, and Umbraco rendering-layer adapters. All generated components include ARIA roles, keyboard interaction, and a contrast pre-check against the project token layer.

Agents

  • component-reviewer — Subagent that reviews a generated or newly authored UI component against the Figma design specification and the project's design-system conventions before merge. Checks visual fidelity (token usage, spacing, typography), accessibility compliance (WCAG 2.2 AA static analysis), naming conventions, and adapter-specific patterns (Sitecore JSS, Optimizely, Umbraco, headless). Produces a structured review verdict with pass/block/advisory findings.

MCP Servers

  • figma-dev-mode-mcp-server — Figma Dev Mode MCP Server — provides get_design_context, get_variable_defs, get_metadata, and get_screenshot tools for reading Figma design data into Claude Code. Requires the Figma desktop app to be running with Dev Mode MCP Server enabled (Preferences → Enable Dev Mode MCP Server).

Slash Commands

  • /build-component — One-shot entry point for the full Figma-to-production component workflow: extract design tokens, scaffold the component with the correct adapter, run the accessibility gate, and optionally open a design review. Pass a Figma URL or work from the active Figma selection.
Technical details
Homepage
https://rba-skills.tylerschroeder.net/plugins/design-to-code-builder/
License
MIT
Maturity
experimental
Security review
No security review
Owners
  • engineering
  • design
Disciplines
engineering, design
Lifecycle
build
Tags
  • figma
  • figma-mcp
  • components
  • design-system
  • design-tokens
  • dtcg
  • token-mapping
  • a11y
  • wcag-2-2
  • contrast
  • react
  • typescript
  • razor
  • astro
  • vue
  • storybook
  • css-custom-properties
  • sitecore
  • optimizely
  • umbraco
Last updated
by Tyler Schroeder
Source
plugins/design-to-code-builder/

Edit this plugin's README on GitHub — opens GitHub's web editor. No git knowledge needed.