Naming Layers

The Layovelle 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 sit anywhere in the name as long as a separator sets them off (e.g., hero-section, main-hero, my_hero). If a name contains two keywords, only one of them wins — prefer names with a single keyword.

​

Interactive elements

​

Layout elements

​

Content elements

​

Naming conventions

The transformer matches whole words, so keywords must be separated from other words by non-alphanumeric characters (hyphens, underscores, or spaces):

• kebab-case: hero-section, cta-button
• snake_case: hero_section, cta_button
• Space-separated: Hero Section, CTA Button

Fused compounds like heroSection or HeroSection do not match — the keyword can’t be picked out of a single run of letters. Use a separator between words.

​

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

Names also feed the TextInput shape heuristic: a box that looks like an input (28–80px tall, no text content) is tagged TextInput, and an input, email, password, search, or field substring anywhere in its name — fused or not — settles it. That applies only to such shapes: a name like password-field on a text layer or a group does not force the tag the way the keywords above do. 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