> ## Documentation Index
> Fetch the complete documentation index at: https://docs.moda.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Design-to-Code Workflow

> Best practices for turning Moda designs into production-ready code using AI agents.

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

<Steps>
  <Step title="Design in Moda" icon="pen-ruler">
    Create your UI design on the Moda canvas.
  </Step>

  <Step title="Share" icon="link">
    Generate a public share link (or use the private canvas URL with auth).
  </Step>

  <Step title="Prompt" icon="keyboard">
    Paste the link in your editor and tell the agent what to build.
  </Step>

  <Step title="Review" icon="code">
    Check the generated code and iterate.
  </Step>
</Steps>

## 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](/mcp/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
```