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

1. Design in Moda — Create your UI design on the Moda canvas
2. Share — Generate a public share link (or use the private canvas URL with auth)
3. Prompt — Paste the link in your editor and tell the agent what to build
4. 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_pages to discover the pages, then fetch each one with get_moda_design.

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_design_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_design (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