Creates UI mockups from natural language descriptions using Pencil.dev. Saves screenshots to docs/mockups/ and returns markdown references for spec documents. Use during specification work to visualize screens, components, and user flows.
Creates professional UI mockups from natural language descriptions and embeds them in specification documents.
Activate when user:
mkdir -p docs/mockups
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")
mcp__pencil__get_editor_state() - Check current state
mcp__pencil__open_document("docs/mockups/specs.pen") - Open/create design file
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
1. mcp__pencil__get_screenshot(nodeId) - Capture the design
2. Save screenshot to docs/mockups/{descriptive-name}.png
Always return a complete markdown snippet for the spec document:
### [Screen Name]

**Key Elements:**
- Element 1: Description
- Element 2: Description
**Interactions:**
- Action 1 leads to...
- Action 2 triggers...
iOS (iPhone)
iPadOS
macOS
watchOS
tvOS
visionOS
| UI Element | .pen Implementation |
|---|---|
| Button | frame with text child, fill, cornerRadius |
| Input Field | frame with border stroke, text placeholder |
| Card | frame with shadow effect, padding |
| List Item | frame with horizontal layout |
| Navigation Bar | frame with horizontal layout, fixed height |
| Tab Bar | frame at bottom, icon_font children |
Always use CSS variables for theming:
{fill: "$primary"}
{fill: "$background"}
{fill: "$text-primary"}
docs/
mockups/
specs.pen # Main design file
login-screen.png # Exported screenshots
dashboard.png
user-flow.png
SPEC.md # Specification document with embedded mockups
When user says: "Create a mockup for a login screen with email, password, and social login"
Response:
Created login screen mockup.
### Login Screen

**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
placeholder: true while designing, remove when doneFor 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, ...})
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

### Registration Screen

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