Design-to-Code Workflow

This guide covers the recommended workflow for converting Moda designs to production code using the MCP server and an AI coding agent.

The basic workflow

Design in Moda

Create your UI design on the Moda canvas.

Generate a public share link (or use the private canvas URL with auth).

Prompt

Paste the link in your editor and tell the agent what to build.

Review

Check the generated code and iterate.

Writing effective prompts

The quality of generated code depends heavily on your prompt. Be specific about:

Framework and language

Build this as a React component using TypeScript and Tailwind CSS:
https://moda.app/s/abc123

Component structure

Implement this as three separate components:
- LoginForm (the card with inputs)
- SocialLoginButtons (the OAuth buttons)
- LoginPage (the full page layout)

Design: https://moda.app/s/abc123

Responsive behavior

Build this hero section as a responsive React component.
Stack vertically on mobile, side-by-side on desktop.
https://moda.app/s/abc123

Multi-page designs

For slide decks or multi-page canvases, the agent can work through pages sequentially:

This is a 4-page marketing site design. Implement each page as a
separate Next.js route. Use shared components where the design
repeats elements across pages.
https://moda.app/s/abc123

The agent will call list_moda_canvas_pages to discover the pages, then fetch each one with get_moda_canvas.

Generating theme files

If you already have a component library and just need design tokens:

Extract the design tokens from this canvas and create a
Tailwind theme configuration file:
https://moda.app/s/abc123

The agent will use get_moda_canvas_tokens to extract colors, fonts, and spacing.

Tips for better results

Name your layers

The MCP server’s transformer uses layer names to determine semantic meaning. A layer named cta-button produces a Button tag; an unnamed rectangle might be interpreted as a Box. See Naming Layers for the full keyword reference.

Use design variables

Colors and values defined as Moda variables appear in the design tokens output with their names, making it easier for the agent to create meaningful CSS custom properties or theme tokens.

Keep designs clean

Remove hidden layers you don’t need — they won’t appear in the output, but keeping your canvas tidy helps
Use Moda’s auto-layout (flex) features for consistent spacing — the transformer detects flex layouts and outputs them as display: flex with gap
Group related elements — groups become semantic containers in the output

Use exports for complex layouts

When the pseudo-HTML alone doesn’t capture the visual intent, the agent can export a visual reference with export_canvas (use png format for design-to-code). This is especially useful for:

Overlapping elements
Complex gradients
Precise visual spacing that the structured data doesn’t capture

Common patterns

Design system from canvas

Create a design system (colors, typography, spacing) from this
Moda canvas. Output as CSS custom properties.
https://moda.app/s/abc123

Pixel-perfect implementation

Implement this design pixel-perfect as a React component.
Use exact colors, fonts, and spacing from the design.
https://moda.app/s/abc123

Component library

This canvas contains a component library. Generate a Storybook
story for each component on the page.
https://moda.app/s/abc123

Start here

Using MCP

Troubleshooting

Design-to-Code Workflow

The basic workflow

Writing effective prompts

Framework and language

Component structure

Responsive behavior

Multi-page designs

Generating theme files

Tips for better results

Name your layers

Use design variables

Keep designs clean

Use exports for complex layouts

Common patterns

Design system from canvas

Pixel-perfect implementation

Component library

​The basic workflow

​Writing effective prompts

​Framework and language

​Component structure

​Responsive behavior

​Multi-page designs

​Generating theme files

​Tips for better results

​Name your layers

​Use design variables

​Keep designs clean

​Use exports for complex layouts

​Common patterns

​Design system from canvas

​Pixel-perfect implementation

​Component library

The basic workflow

Writing effective prompts

Framework and language

Component structure

Responsive behavior

Multi-page designs

Generating theme files

Tips for better results

Name your layers

Use design variables

Keep designs clean

Use exports for complex layouts

Common patterns

Design system from canvas

Pixel-perfect implementation

Component library