SpeX - Design to Code by AI

About this plugin

SpeX – Design to Code by AI

Transform 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 For

1. Design system teams scaling reusable components
2. Developers using AI coding assistants
3. Product teams aiming for consistent handoffs
4. Organizations enforcing structured design workflows

🚀 Key Capabilities

📋 AI-Ready Export

1. Export to YAML/JSON with full style tokens
2. Support nested components, variants, and instances
3. Auto-detect and optimize SVG icons
4. Generate component preview thumbnails

🔧 Fine-Tuning Metadata

1. Add codeComponent and codeFilePath
2. Auto-fill metadata via pattern recognition
3. Visual tree browser with search and bulk editing

🗃 Component Record Management

1. Full CRUD for structured records
2. Sync from Notion, APIs, or JSON files
3. Filterable views with fallback thumbnails
4. Export component registry as JSON

🤖 Real-Time AI Integration

1. WebSocket-based MCP bridge for tools like Cursor AI
2. Real-time dashboard and analytics
3. Serve specs, manifest, and previews on-demand
4. Auto-reconnect and error resilience

🧭 How It Works

1. Select Components – from your Figma file
2. Fine-Tune – add mappings to your codebase (optional)
3. Export or Connect – structured file export or live MCP server
4. Generate Code – AI tools use the specs to write code that aligns with your system

📁 Output Structure (Simplified)

Example screen.yaml

This defines a form-based screen layout with multiple input fields, a button, and a link—referencing reusable components in the design system.

🔗 spex-mcp

Install the companion server to integrate with AI dev tools:

→ spex-mcp on npm

💡 Why SpeX?

For Designers

1. Reduce handoff friction
2. Track design usage across implementations

For Developers

1. Avoid guesswork, get exact specs
2. Leverage AI tools with full context

For AI Tools

1. Access structured, hierarchical data
2. Align generated code with real-world components

SpeX is where design systems meet automation. Your components. Your rules. Real code.