Mockup

3. Get Style Inspiration

1. mcp__pencil__get_style_guide_tags() - Get available style tags
2. mcp__pencil__get_style_guide([relevant tags]) - Get design inspiration
3. mcp__pencil__get_guidelines("design-system" or "landing-page")

4. Create or Open .pen File

mcp__pencil__get_editor_state() - Check current state
mcp__pencil__open_document("docs/mockups/specs.pen") - Open/create design file

5. Design the Mockup

Use batch_design to create the UI. Always use the placeholder pattern:

// Example: Login screen
container=I(document, {type: "frame", name: "Login Screen", layout: "vertical", width: 375, height: 812, fill: "#FFFFFF", placeholder: true})
header=I(container, {type: "text", content: "Welcome Back", fontSize: 28, fontWeight: "bold", fill: "#000000"})
// ... more components
U(container, {placeholder: false})  // Remove placeholder when done

6. Take Screenshot & Save

1. mcp__pencil__get_screenshot(nodeId) - Capture the design
2. Save screenshot to docs/mockups/{descriptive-name}.png

7. Return Markdown Reference

Always return a complete markdown snippet for the spec document:

### [Screen Name]

![Screen Name](./mockups/screen-name.png)

**Key Elements:**
- Element 1: Description
- Element 2: Description

**Interactions:**
- Action 1 leads to...
- Action 2 triggers...

Design Principles

Apple Platform Dimensions

iOS (iPhone)

• iPhone SE: 375 x 667
• iPhone 15: 393 x 852
• iPhone 15 Pro Max: 430 x 932

iPadOS

• iPad Mini: 744 x 1133
• iPad Air/Pro 11": 820 x 1180
• iPad Pro 12.9": 1024 x 1366

macOS

• Compact window: 800 x 600
• Standard window: 1200 x 800
• Full app: 1440 x 900

watchOS

• Apple Watch 41mm: 176 x 215
• Apple Watch 45mm: 198 x 242
• Apple Watch Ultra: 205 x 251

tvOS

• 1920 x 1080 (safe area: 1740 x 980)

visionOS

• Window: 1280 x 720 (standard)
• Immersive: varies

Common Components

Color Variables

Always use CSS variables for theming:

{fill: "$primary"}
{fill: "$background"}
{fill: "$text-primary"}

File Organization

docs/
  mockups/
    specs.pen          # Main design file
    login-screen.png   # Exported screenshots
    dashboard.png
    user-flow.png
  SPEC.md              # Specification document with embedded mockups

Example Output

When user says: "Create a mockup for a login screen with email, password, and social login"

Response:

Created login screen mockup.

### Login Screen

![Login Screen](./mockups/login-screen.png)

**Key Elements:**
- Email input field with placeholder
- Password input field with show/hide toggle
- "Sign In" primary button
- "Forgot Password?" link
- Divider with "or continue with"
- Social login buttons (Google, Apple)
- "Don't have an account? Sign up" footer link

**Dimensions:** 375 x 812 (iPhone standard)
**Style:** Clean, modern with subtle shadows

Best Practices

1. Name frames descriptively - Use clear names like "Login Screen", "Dashboard Header"
2. Use placeholder flag - Set placeholder: true while designing, remove when done
3. Group related elements - Use frames to organize logical sections
4. Consistent spacing - Use 8px grid (8, 16, 24, 32, etc.)
5. Save incrementally - Take screenshots after each major addition
6. Include context - Add notes about interactions and states

Handling Multiple Screens

For user flows or multi-screen specs:

// Find space for new screen
mcp__pencil__find_empty_space_on_canvas({direction: "right", width: 375, height: 812, padding: 50})

// Create screens side by side
screen1=I(document, {type: "frame", name: "Screen 1", x: 0, ...})
screen2=I(document, {type: "frame", name: "Screen 2", x: 425, ...})

Integration with Spec Documents

The mockups integrate seamlessly with markdown specs:

# Feature Specification: User Authentication

## Overview
Users can sign in with email/password or social providers.

## UI Mockups

### Login Screen
![Login](./mockups/login-screen.png)

### Registration Screen
![Register](./mockups/register-screen.png)

## User Flow
1. User opens app -> Login Screen
2. New user taps "Sign up" -> Registration Screen
3. ...