SpeX - Design to Code by AI

About this plugin

SpeX – Design to Code by AITransform your Figma components into AI-readable specs for seamless design-to-code automation.🔍 What is SpeX?SpeX bridges design and development by exporting structured specifications from Figma—enabling AI tools like Cursor and GitHub Copilot to generate accurate, production-grade UI code that aligns with your actual components.🎯 Who It's ForDesign system teams scaling reusable componentsDevelopers using AI coding assistantsProduct teams aiming for consistent handoffsOrganizations enforcing structured design workflows🚀 Key Capabilities📋 AI-Ready ExportExport to YAML/JSON with full style tokensSupport nested components, variants, and instancesAuto-detect and optimize SVG iconsGenerate component preview thumbnails🔧 Fine-Tuning MetadataAdd codeComponent and codeFilePathAuto-fill metadata via pattern recognitionVisual tree browser with search and bulk editing🗃 Component Record ManagementFull CRUD for structured recordsSync from Notion, APIs, or JSON filesFilterable views with fallback thumbnailsExport component registry as JSON🤖 Real-Time AI IntegrationWebSocket-based MCP bridge for tools like Cursor AIReal-time dashboard and analyticsServe specs, manifest, and previews on-demandAuto-reconnect and error resilience🧭 How It WorksSelect Components – from your Figma fileFine-Tune – add mappings to your codebase (optional)Export or Connect – structured file export or live MCP serverGenerate Code – AI tools use the specs to write code that aligns with your system📁 Output Structure (Simplified)export-[timestamp]/├── screen.yaml # Main screen specs├── manifest.yaml # File manifest├── components/ # Component specs├── styles/ # Design token definitions├── icons/ # SVG exports├── previews/ # PNG previewsExample screen.yaml# screen.yamlscreen:id: "signup-screen-001"name: "SignupForm"type: "FRAME"dimensions:width: 375height: 812styleRefs:fills:- "@styles/fills#background-default"typography:- "@styles/typography#body-normal"children:- type: "INSTANCE_REF"ref: "@components/TextField#username-field-001"- type: "INSTANCE_REF"ref: "@components/TextField#email-field-002"- type: "INSTANCE_REF"ref: "@components/TextField#password-field-003"- type: "INSTANCE_REF"ref: "@components/Button#signup-button-001"- type: "INSTANCE_REF"ref: "@components/TextLink#login-link-001"This defines a form-based screen layout with multiple input fields, a button, and a link—referencing reusable components in the design system.🔗 spex-mcpInstall the companion server to integrate with AI dev tools:→ spex-mcp on npm💡 Why SpeX?For DesignersReduce handoff frictionTrack design usage across implementationsFor DevelopersAvoid guesswork, get exact specsLeverage AI tools with full contextFor AI ToolsAccess structured, hierarchical dataAlign generated code with real-world componentsSpeX is where design systems meet automation. Your components. Your rules. Real code.