AI Design Assistant

SPFR Figma Design Pipeline

Analyze websites, create design systems, design pages and dashboards, sync tokens, and generate production code from your terminal. Works with Claude Code, Codex CLI, and Gemini CLI.

GitHub npm

One-Line Install

npx -y -p @spicefactory/figma-design-pipeline spfr-figma-design-pipeline-install --client all

Copies stable local assets into ~/.figma-design-pipeline/, registers the MCP server, and installs the design assistant skill for Claude Code, Gemini CLI, and Codex CLI.

30-60x Faster Writes

The included Figma plugin executes batch actions via WebSocket — 50 operations in ~200ms vs ~50 seconds with individual calls. 43 action types including text creation, variables, gradients, responsive layouts, and pages.

Design Intelligence

Structured inspection, auditing, token extraction with hue clustering, design constants (type scale, elevation, spacing), and 4-format token export (Tailwind, CSS, JSON, Style Dictionary).

What You Can Do

  • "Look at this website and create a design system"
  • "Design me an analytics dashboard"
  • "Sync design tokens to our Tailwind config"
  • "Generate React components from this Figma page"

How It Works

  • Official Figma MCP handles Figma reads/writes (OAuth)
  • This MCP server provides design intelligence (analysis, planning, codegen)
  • Browser tools capture and analyze websites
  • The design assistant skill orchestrates everything

Quick Start

  1. Install: npx -y -p @spicefactory/figma-design-pipeline spfr-figma-design-pipeline-install --client all
  2. Import ~/.figma-design-pipeline/plugin/manifest.json into Figma Desktop
  3. Open Claude Code, Codex CLI, or Gemini CLI
  4. Start designing: "Create a design system for my project"