LLM Prompting Guide

This guide enables AI language models to generate valid Wire-DSL files from natural language descriptions.

For AI Models

Your Role

Generate a valid .wire file based on user input (text descriptions or wireframe sketches).

Output Format

Return ONLY valid .wire code. No explanations, no markdown formatting (except the code fence).

Quality Requirements

• Syntax must be 100% valid per Wire-DSL grammar
• All components must exist in the component catalog
• All property values must be valid for their types
• Layouts must be properly nested and closed
• Use sensible defaults when ambiguous

---

Mandatory Project Structure

Every .wire file MUST have:

project "ProjectName" {
  theme {
    density: "normal"
    spacing: "md"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  screen ScreenName {
    layout stack { ... }
  }
}

---

Critical Rules

1. Screen Names

• Must be in CamelCase (e.g., UserDashboard, AdminPanel)
• Must be unique within the project
• Case-sensitive

2. Every Screen Needs Exactly ONE Root Layout

Valid root layouts:

• stack – Linear vertical/horizontal arrangement
• grid – 12-column responsive grid
• split – Sidebar + main content (requires exactly 2 children)
• panel – Single bordered container
• card – Multi-child flexible container

3. Property Value Syntax

// String values - ALWAYS quoted
text: "Click me"
label: "Email"
placeholder: "user@example.com"

// Numeric values - NEVER quoted
rows: 10
height: 250
columns: 12
span: 8

// Enum values - NEVER quoted
variant: primary
direction: vertical
density: normal
spacing: md

// Boolean values - NEVER quoted
checked: true
border: false

4. Padding Must Be Explicit

• Layouts without explicit padding have 0px padding
• Always specify padding when needed: padding: md, padding: lg
• Valid padding values: xs, sm, md, lg, xl

5. Spacing Between Children

• Use gap to space child elements
• Valid gap values: xs (4px), sm (8px), md (16px), lg (24px), xl (32px)
• Default is usually md (16px)

---

The 28 Components

Text (3)

component Heading text: "Title"
component Text content: "Body text"
component Label text: "Field label"

Input (6)

component Input label: "Email" placeholder: "user@example.com"
component Textarea label: "Message" rows: 4
component Select label: "Role" items: "Admin,User,Guest"
component Checkbox label: "I agree" checked: false
component Radio label: "Option A" checked: true
component Toggle label: "Enable" enabled: false

Buttons (2)

component Button text: "Click" variant: primary
component IconButton icon: "search"

Button variants: primary, secondary, ghost

Navigation (5)

component Topbar title: "Dashboard" subtitle: "Admin"
component SidebarMenu items: "Home,Users,Settings" active: 0
component Sidebar title: "Navigation" items: "Home,Profile,Settings"
component Breadcrumbs items: "Home,Users,Detail"
component Tabs items: "Profile,Settings,Privacy" activeIndex: 0

Data (2)

component Table columns: "Name,Email,Status" rows: 8
component List items: "Item 1,Item 2,Item 3"

Media (2)

component Image placeholder: "square" height: 250
component Icon name: "search"

Image placeholders: square, landscape, portrait, avatar, circle

Display (3)

component Divider
component Badge text: "New" variant: primary
component Alert type: "error" message: "Error message"

Alert types: info, success, warning, error

Information (3)

component StatCard title: "Users" value: "1,234"
component Code code: "const x = 10;"
component ChartPlaceholder type: "bar" height: 300

Chart types: bar, line, pie, area

Modal & Overlay (1)

component Modal title: "Confirm" content: "Are you sure?"

Loading & Feedback (1)

component Spinner

---

Layout Examples

Vertical Stack

layout stack(direction: vertical, gap: md, padding: lg) {
  component Heading text: "Form"
  component Input label: "Name"
  component Button text: "Submit" variant: primary
}

Horizontal Stack (Equal Width)

layout stack(direction: horizontal, gap: md) {
  component Button text: "Save"
  component Button text: "Cancel"
  component Button text: "Delete"
}

Horizontal Stack (Right-Aligned)

layout stack(direction: horizontal, gap: md, align: "right") {
  component Button text: "Back"
  component Button text: "Next" variant: primary
}

Grid (Responsive)

layout grid(columns: 12, gap: md) {
  cell span: 4 { component StatCard title: "Users" value: "1,234" }
  cell span: 4 { component StatCard title: "Orders" value: "5,678" }
  cell span: 4 { component StatCard title: "Revenue" value: "$45K" }
}

Split (Sidebar Layout)

layout split(sidebar: 260, gap: md) {
  layout stack(padding: lg) {
    component SidebarMenu items: "Home,Users,Settings"
  }

  layout stack(padding: lg) {
    // Main content here
  }
}

Panel (Grouped Content)

layout panel(padding: lg) {
  layout stack(gap: md) {
    component Heading text: "Settings"
    component Input label: "Email"
    component Button text: "Save" variant: primary
  }
}

Card (Self-Contained)

layout card(padding: lg, gap: md, radius: md, border: true) {
  component Image placeholder: "square" height: 200
  component Heading text: "Product"
  component Text content: "Description"
  component Button text: "View Details"
}

---

Common Patterns

Login Form

project "Login" {
  theme {
    density: "comfortable"
    spacing: "lg"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  screen LoginScreen {
    layout card(padding: lg, gap: md, radius: md, border: true) {
      component Heading text: "Sign In"
      component Input label: "Email" placeholder: "you@example.com"
      component Input label: "Password" placeholder: "••••••••"
      component Checkbox label: "Remember me"
      component Button text: "Sign In" variant: primary
    }
  }
}

Dashboard

screen Dashboard {
  layout split(sidebar: 260, gap: md) {
    layout stack(gap: md, padding: lg) {
      component Topbar title: "Dashboard"
      component SidebarMenu items: "Users,Orders,Analytics"
    }

    layout stack(gap: md, padding: lg) {
      layout grid(columns: 12, gap: md) {
        cell span: 4 { component StatCard title: "Users" value: "1,234" }
        cell span: 4 { component StatCard title: "Orders" value: "5,678" }
        cell span: 4 { component StatCard title: "Revenue" value: "$45K" }
      }
      component Table columns: "ID,Name,Status" rows: 10
    }
  }
}

Product Cards

layout grid(columns: 12, gap: lg) {
  cell span: 4 {
    layout card(padding: md, gap: md, radius: lg) {
      component Image placeholder: "square" height: 200
      component Heading text: "Product Name"
      component Text content: "Description"
      component Button text: "Buy Now" variant: primary
    }
  }
  cell span: 4 { ... }
  cell span: 4 { ... }
}

---

Theme Presets

Compact (Data-Dense)

theme {
  density: "compact"
  spacing: "sm"
  radius: "sm"
  stroke: "normal"
  font: "base"
}

Normal (Balanced) – Most Common

theme {
  density: "normal"
  spacing: "md"
  radius: "md"
  stroke: "normal"
  font: "base"
}

Comfortable (Accessible)

theme {
  density: "comfortable"
  spacing: "lg"
  radius: "lg"
  stroke: "thin"
  font: "base"
}

---

Validation Checklist

Before returning generated code, verify:

• ✅ Exactly one project block
• ✅ Project has exactly one theme block with all 5 properties
• ✅ All theme values are quoted strings
• ✅ At least one screen defined
• ✅ Each screen has exactly ONE root layout
• ✅ All screen names are in CamelCase
• ✅ All component names are from the component catalog
• ✅ String property values are quoted
• ✅ Numeric property values are unquoted
• ✅ Enum property values are unquoted
• ✅ All braces properly matched
• ✅ No circular component references
• ✅ split layouts have exactly 2 children
• ✅ All layout children properly closed

---

Example Output

User asks: “Create a simple user login form with email and password fields”

Your response:

project "Login App" {
  theme {
    density: "comfortable"
    spacing: "lg"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  screen LoginScreen {
    layout card(padding: lg, gap: md, radius: md, border: true) {
      component Heading text: "Welcome Back"
      component Text content: "Enter your credentials"

      layout stack(direction: vertical, gap: md) {
        component Input label: "Email" placeholder: "you@example.com"
        component Input label: "Password" placeholder: "••••••••"
        component Checkbox label: "Remember me"
      }

      layout stack(direction: horizontal, gap: md) {
        component Button text: "Sign Up" variant: secondary
        component Button text: "Sign In" variant: primary
      }
    }
  }
}

---

Next Steps for Users

• View generated code in the Web Editor
• Modify and refine using the DSL Syntax Guide
• Reference All Components for options
• Explore Examples for patterns

---

Tools Using This Guide

• OpenAI GPT models
• Anthropic Claude
• Google Gemini
• Other LLMs supporting Wire-DSL

All models should follow these rules to generate valid, renderable wireframes.