Canvas Studio

An open-source design-to-code platform that bridges Figma's visual design capabilities with intelligent code generation and synchronization.

Features

• Figma MCP Integration: Connect to Figma designs via Model Context Protocol
• AI-Powered Design Intelligence: Local LLM-based layout generation and design analysis
• Multi-Framework Code Export: Generate production-ready code for React, Vue, Angular, Svelte, and more
• Bidirectional Synchronization: Real-time sync between Figma designs and codebases
• DesignBot: Conversational AI assistant for design discussions
• Multi-Project Management: Organize and manage multiple applications

Prerequisites

• Node.js 20+
• Docker and Docker Compose
• PostgreSQL 15+ (via Docker)
• Redis 7+ (via Docker)
• Ollama (for local LLM features)

Quick Start

1. Clone and Install

git clone <repository-url>
cd canvas-studio
npm install

2. Environment Setup

cp .env.example .env
# Edit .env with your configuration

3. Start Infrastructure

# Start PostgreSQL and Redis
npm run docker:up

# Run database migrations
npm run migrate:up

4. Start Development Servers

# Start both backend and frontend
npm run dev

# Or start individually
npm run dev:backend
npm run dev:frontend

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:3001

Project Structure

canvas-studio/
├── packages/
│   ├── backend/          # Node.js/Express backend
│   │   ├── src/
│   │   ├── migrations/   # Database migrations
│   │   └── tests/
│   └── frontend/         # React/Vite frontend
│       ├── src/
│       └── tests/
├── docker-compose.yml    # Infrastructure services
└── package.json          # Monorepo root

Development

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch --workspace=packages/backend

Linting and Formatting

# Lint all workspaces
npm run lint

# Format code
npm run format

Database Migrations

The backend uses node-pg-migrate for database schema management.

# Validate migration structure
npm run migrate:validate --workspace=packages/backend

# Run all pending migrations
npm run migrate:up --workspace=packages/backend

# Rollback the last migration
npm run migrate:down --workspace=packages/backend

# Check migration status (dry run)
npm run migrate:status --workspace=packages/backend

# Create a new migration
npm run migrate:create <migration-name> --workspace=packages/backend

See packages/backend/migrations/README.md for detailed migration documentation.

Docker Deployment

# Build and start all services
docker-compose --profile production up -d

# Stop services
docker-compose down

Configuration

Environment Variables

See .env.example for all available configuration options.

Key variables:

• DATABASE_URL: PostgreSQL connection string
• REDIS_URL: Redis connection string
• FIGMA_ACCESS_TOKEN: Figma API access token
• OLLAMA_BASE_URL: Ollama API endpoint
• JWT_SECRET: Secret for JWT token generation

Architecture

Canvas Studio follows a client-server architecture:

• Backend: TypeScript/Node.js with Express
• Frontend: React 18 with TypeScript and Vite
• Database: PostgreSQL with pgvector extension
• Cache: Redis for caching and real-time features
• AI: Ollama for local LLM hosting

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

License

MIT License - see LICENSE file for details