Skip to main content

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.

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.

Share

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