Screen Templates

Generate complete screen layouts instantly

Screen Templates are pre-built complete screen layouts following iOS and Android design patterns. Generate production-ready screens with 15-30 elements in a single operation.

The Tool

All templates are created using a single tool:

create_screen_from_template({
  "template": "login",
  "platform": "ios",
  "theme": "light",
  "x": 50,
  "y": 50
})

Available Templates

1. Login Screen

Template: "login"

Elements Created: ~15

Components:

"Generate an iOS login screen with dark theme"

2. Settings Screen

Template: "settings"

Elements Created: ~25

Components:

"Create a settings screen with light theme"

3. Profile Screen

Template: "profile"

Elements Created: ~20

Components:

"Generate a profile screen for iOS with dark theme"

4. Dashboard Screen

Template: "dashboard"

Elements Created: ~30

Components:

"Create a dashboard screen with analytics cards"

5. List Screen

Template: "list"

Elements Created: ~30

Components:

"Generate a list screen with search bar"

Parameters

Required

Optional

Return Format

{
  "success": true,
  "frameId": "screen-001",
  "template": "login",
  "platform": "ios",
  "theme": "light",
  "elementCount": 15,
  "elementIds": [
    "nav-001",
    "logo-001",
    "title-001",
    "subtitle-001",
    ...
  ]
}

Platform Differences

iOS Design System

Android (Material Design)

Example Usage

Quick Prototyping

"Create 3 screens side-by-side: login, settings, and profile with light theme"

Claude will create 3 complete screens at different x positions for comparison.

Design Exploration

"Show me the dashboard screen in both light and dark themes"

Claude will create 2 dashboards so you can compare themes.

Multi-Platform Design

"Generate a login screen for both iOS and Android"

Claude will create 2 login screens showing platform differences.

Customization After Generation

Templates create starting points. All elements are fully editable - change colors, text, positions, or add/remove elements as needed.

Best Practices

Rollback Safety

Like all composite tools, screen templates have rollback protection:

Related Topics