AI-Generated Layout & Styling YAML

How AI Detects Layout Needs

User Input Analysis

User: "I need a purchase form with item details in 2 columns, then full-width description, and file uploads side by side"

AI analyzes:
- "2 columns" → desktop: 2, tablet: 2, mobile: 1
- "full-width description" → span: 2 (full width)
- "side by side" → file uploads in 2-column grid

Generated YAML Examples

1. Multi-Section Responsive Layout

form_definition:
  id: "advanced_purchase_request"
  title: "Purchase Request"

  # Layout system
  layout:
    type: "responsive_grid"
    maxWidth: "1200px"
    spacing: "md"

    sections:
      # Header section - 2 columns on desktop
      - id: "basic_info"
        title: "Basic Information"
        columns:
          desktop: 2
          tablet: 2
          mobile: 1
        fields: ["item_name", "amount", "department", "priority"]

      # Full-width section
      - id: "description"
        title: "Details"
        columns:
          desktop: 1
          tablet: 1
          mobile: 1
        fields: ["description", "justification"]

      # File uploads - side by side
      - id: "attachments"
        title: "Attachments"
        columns:
          desktop: 3
          tablet: 2
          mobile: 1
        fields: ["receipt", "quote", "specs"]

  # Individual field layout overrides
  fields:
    - id: "item_name"
      type: "text"
      label: "Item Name"
      layout:
        span:
          desktop: 1  # Takes 1 of 2 columns
          tablet: 1
          mobile: 1
        order: 1

    - id: "amount"
      type: "currency"
      label: "Amount"
      layout:
        span:
          desktop: 1  # Takes 1 of 2 columns
          tablet: 1
          mobile: 1
        order: 2

    - id: "description"
      type: "textarea"
      label: "Description"
      layout:
        span:
          desktop: 1  # Full width (section has 1 column)
          tablet: 1
          mobile: 1
        order: 5

    - id: "receipt"
      type: "file"
      label: "Receipt"
      layout:
        span:
          desktop: 1  # 1 of 3 columns
          tablet: 1   # 1 of 2 columns
          mobile: 1   # Full width
        order: 7

  # Responsive breakpoints
  breakpoints:
    mobile: "640px"
    tablet: "768px"
    desktop: "1024px"

  # Styling system
  styling:
    theme: "professional"
    colors:
      primary: "#2563eb"
      secondary: "#64748b"
    spacing:
      xs: "0.5rem"
      sm: "0.75rem"
      md: "1rem"
      lg: "1.5rem"

2. Complex Form Layout (AI-Generated)

# User: "Create an employee onboarding form with personal info in 3 columns,
#        address in 2 columns, and emergency contact in 2 columns"

form_definition:
  id: "employee_onboarding"

  layout:
    sections:
      - id: "personal_info"
        title: "Personal Information"
        description: "Basic employee details"
        columns:
          desktop: 3
          tablet: 2
          mobile: 1
        fields: ["first_name", "last_name", "email", "phone", "start_date", "position"]

      - id: "address"
        title: "Address Information"
        columns:
          desktop: 2
          tablet: 2
          mobile: 1
        fields: ["street_address", "city", "state", "zip_code"]

      - id: "emergency_contact"
        title: "Emergency Contact"
        columns:
          desktop: 2
          tablet: 1
          mobile: 1
        fields: ["emergency_name", "emergency_phone", "relationship", "emergency_address"]

  fields:
    # Personal info fields
    - id: "first_name"
      type: "text"
      label: "First Name"
      layout: { span: { desktop: 1, tablet: 1, mobile: 1 }, order: 1 }

    - id: "last_name"
      type: "text"
      label: "Last Name"
      layout: { span: { desktop: 1, tablet: 1, mobile: 1 }, order: 2 }

    - id: "email"
      type: "email"
      label: "Email"
      layout: { span: { desktop: 1, tablet: 2, mobile: 1 }, order: 3 }

    # Address with smart spanning
    - id: "street_address"
      type: "text"
      label: "Street Address"
      layout: { span: { desktop: 2, tablet: 2, mobile: 1 }, order: 7 }  # Full width

    - id: "city"
      type: "text"
      label: "City"
      layout: { span: { desktop: 1, tablet: 1, mobile: 1 }, order: 8 }

    - id: "state"
      type: "select"
      label: "State"
      layout: { span: { desktop: 1, tablet: 1, mobile: 1 }, order: 9 }

3. Conditional Layout (Dynamic)

# AI can generate conditional layouts that change based on user input

form_definition:
  layout:
    sections:
      - id: "request_type"
        title: "Request Type"
        columns: { desktop: 1, tablet: 1, mobile: 1 }
        fields: ["request_type"]

      - id: "purchase_details"
        title: "Purchase Details"
        columns: { desktop: 2, tablet: 1, mobile: 1 }
        fields: ["item", "amount", "vendor", "urgency"]
        conditional:
          show_if: "request_type == 'purchase'"

      - id: "travel_details"
        title: "Travel Details"
        columns: { desktop: 3, tablet: 2, mobile: 1 }
        fields: ["destination", "departure", "return", "purpose", "budget", "accommodation"]
        conditional:
          show_if: "request_type == 'travel'"

  fields:
    - id: "request_type"
      type: "select"
      label: "Type of Request"
      options:
        - { value: "purchase", label: "Purchase Request" }
        - { value: "travel", label: "Travel Request" }
        - { value: "expense", label: "Expense Reimbursement" }

AI Layout Detection Patterns

Common User Phrases → Layout Rules

User Input	AI Generates
”side by side”	`columns: { desktop: 2 }`
”three columns”	`columns: { desktop: 3, tablet: 2, mobile: 1 }`
”full width description”	`span: { desktop: 2 }` (spans all columns)
“compact form”	`spacing: "sm", maxWidth: "600px"`
”wide layout”	`maxWidth: "1400px", columns: { desktop: 4 }`
”mobile friendly”	Responsive defaults with mobile: 1
”grouped sections”	Multiple sections with titles

Smart Field Grouping

# AI groups related fields automatically
sections:
  - title: "Contact Information"  # Email, phone fields
    fields: ["email", "phone", "address"]

  - title: "Financial Details"    # Money-related fields
    fields: ["amount", "budget_code", "cost_center"]

  - title: "Attachments"          # File upload fields
    fields: ["receipt", "invoice", "contract"]

Advanced Styling Features

1. Theme System

styling:
  theme: "modern"  # AI selects from: minimal, professional, modern, corporate

  # AI customizes based on company branding
  colors:
    primary: "#company-primary-color"
    accent: "#company-accent-color"

  # Typography matching company style
  typography:
    fontFamily: "Inter, sans-serif"  # Professional
    # OR "Roboto, sans-serif"       # Modern
    # OR "Georgia, serif"           # Traditional

2. Field-Specific Styling

fields:
  - id: "amount"
    type: "currency"
    styling:
      highlight: true           # Emphasize important fields
      size: "large"            # Larger input for key fields
      helpText: "Enter amount in USD"

  - id: "description"
    type: "textarea"
    styling:
      rows: 4
      resize: "vertical"
      characterCount: true     # Show character counter

3. Conditional Styling

styling:
  conditionalStyles:
    - condition: "amount > 1000"
      apply:
        borderColor: "#f59e0b"  # Orange border for high amounts
        backgroundColor: "#fef3c7"  # Light yellow background

    - condition: "urgency == 'high'"
      apply:
        borderColor: "#dc2626"  # Red border for urgent
        animation: "pulse"      # Subtle animation

Implementation in Form Renderer

CSS Grid Generation

// Runtime CSS generation from YAML
const generateGridCSS = (section, breakpoint) => {
  const columns = section.columns[breakpoint];
  return {
    display: 'grid',
    gridTemplateColumns: `repeat(${columns}, 1fr)`,
    gap: formDef.styling.spacing.md,
    marginBottom: formDef.styling.spacing.lg
  };
};

// Field spanning
const getFieldStyle = (field, breakpoint) => {
  const span = field.layout?.span?.[breakpoint] || 1;
  return {
    gridColumn: `span ${span}`,
    order: field.layout?.order || 0
  };
};

Responsive Rendering

const ResponsiveField = ({ field, breakpoint }) => {
  const style = getFieldStyle(field, breakpoint);
  const shouldShow = evaluateConditional(field.conditional, formData);

  if (!shouldShow) return null;

  return (
    <div style={style} className={getFieldClasses(field)}>
      <FieldRenderer field={field} />
    </div>
  );
};

Business Benefits

1. Professional Layouts

No design skills needed
Consistent responsive behavior
Enterprise-grade appearance

2. AI Intelligence

Detects layout intent from natural language
Groups related fields automatically
Applies best practices for UX

3. Zero Configuration

Works perfectly on mobile/tablet/desktop
Automatic spacing and typography
Accessibility built-in

This layout system gives you professional form layouts that rival custom-designed forms, all generated from simple natural language descriptions in 15 seconds.