// Invocable iOS design pipeline. When called with a design prompt, runs an autonomous loop: designs iOS screens in Pencil MCP following Apple HIG, reviews for taste using Design Philosophy, validates with XcodeBuildMCP, and iterates until done. Use as: /ios-design-stack "Design a [screen] for [app] with [requirements]"
Invocable iOS design pipeline. When called with a design prompt, runs an autonomous loop: designs iOS screens in Pencil MCP following Apple HIG, reviews for taste using Design Philosophy, validates with XcodeBuildMCP, and iterates until done. Use as: /ios-design-stack "Design a [screen] for [app] with [requirements]"
user-invocable
true
argument-hint
Design a [screen] for [app]
/ios-design-stack
Autonomous iOS design pipeline. Give it a prompt, it designs, reviews, builds, and
iterates until the result passes both taste and build checks.
When Invoked
Parse the user's prompt as the design brief. Then run this pipeline as a loop
until the design passes all checks.
Call get_editor_state to check Pencil MCP is available
Call open_document("new") or open existing .pen file
Call set_variables with iOS design tokens from ios-design-tokens skill
Call get_guidelines(topic="mobile-app") for Apple HIG rules
If the user specified an aesthetic (e.g., "dark, minimal, premium"):
5. Call get_style_guide_tags then get_style_guide(tags=[...]) to get style direction
Step 2: Design
Using the pencil-ios-design skill as your guide:
Call find_empty_space_on_canvas(width=393, height=852) for iPhone 15 Pro frame size
Call batch_design to create the screen layout. Max 25 operations per call.
Mandatory iOS rules:
59pt top safe area (Dynamic Island)
34pt bottom safe area (home indicator)
16-20pt horizontal margins
All touch targets ≥ 44x44pt
8pt spacing grid
SF Pro typography only, using iOS type scale
iOS semantic colors only (not hardcoded hex)
Continuous corners (squircle)
Refer to the common screen patterns in pencil-ios-design for Login, Settings,
Detail, and other standard layouts.
Step 3: Review (Design Philosophy)
Before building, taste-check the design. Ask these questions:
What's the one feeling this creates? Write it in one word.
What would you remove? Cut at least one element.
Does every element earn its place? If removing it changes nothing, remove it.
Would Apple ship this? Be honest.
From the Design Philosophy skill:
Typography creates hierarchy, not color or weight
Whitespace = premium. Cramped = cheap.
One focal point per screen
One accent color maximum
Less, but better. (Dieter Rams #10)
If the design fails taste review, go back to Step 2 and simplify.
Do NOT proceed to build until taste passes.
Step 4: Build
Export the design and validate it compiles:
Export the Pencil design nodes to SwiftUI code
Create/update the Swift file in the project
Build with XcodeBuildMCP: xcodebuild build
Run in simulator: xcrun simctl boot + install + launch
Capture screenshot: xcodebuildmcp screenshot
If XcodeBuildMCP is not available, skip to Step 5 with the Pencil screenshot only.
Step 5: Verify
Compare the build screenshot (or Pencil screenshot) against the design: