Skip to main content
The Moda MCP server’s transformer uses layer names to determine what each element represents. Well-named layers produce better semantic tags, which leads to better generated code.

​
How it works

When a layer has a descriptive name, the transformer matches it against a keyword list and assigns the appropriate semantic tag. Layer names take priority over visual heuristics. For example:
  • A rectangle named cta-button becomes <Button> instead of <Box>
  • A group named nav-bar becomes <Nav> instead of <Section>
  • An image named user-avatar becomes <Avatar> instead of <Image>

​
Keyword reference

These keywords in layer names trigger specific semantic tags. Keywords are case-insensitive and can appear anywhere in the name (e.g., hero-section, main-hero, my_hero).

​
Interactive elements

​
Layout elements

​
Content elements

​
Naming conventions

Any naming convention works — the transformer matches keywords regardless of format:
  • kebab-case: hero-section, cta-button
  • camelCase: heroSection, ctaButton
  • snake_case: hero_section, cta_button
  • PascalCase: HeroSection, CtaButton
  • Space-separated: Hero Section, CTA Button

​
What happens without names

When layers don’t have descriptive names (e.g., Rectangle 1, Group 3), the transformer falls back to visual heuristics:
  • Text with large font size → Heading
  • Rectangle with text and dark fill → Button
  • Rectangle with thin border and no text → TextInput
  • Small circular image → Avatar
  • Group with background → Card
These heuristics work well for common patterns, but explicit layer names produce more accurate results, especially for non-obvious elements.

​
Tips

  • Name layers that aren’t visually obvious — A subtle text link or a custom checkbox benefits most from naming
  • Use semantic names, not visual descriptions — submit-button is better than blue-rectangle
  • Name groups and sections — Group-level names like features-section improve the structure of the generated code
  • Be consistent — Pick a naming convention and stick with it across your canvas