Design · MCP Workflows

Move from concept to deliverable with AI image generation, layout tools, and production workflows.

01

Figma MCP (Framelink)

Design-to-code export with Figma context for AI coding assistants.

02

figma-designer-mcp

AI creates and edits Figma designs directly on canvas.

03

figma-spec-mcp

Engineering-grade specs — layout audit, token extraction, accessibility.

04

Canva MCP

Connect AI to Canva for design creation and asset management.

05

SPFR Design Pipeline

Full design lifecycle from website analysis to token sync to code gen.