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]"
Autonomous iOS design pipeline. Give it a prompt, it designs, reviews, builds, and iterates until the result passes both taste and build checks.
Parse the user's prompt as the design brief. Then run this pipeline as a loop until the design passes all checks.
┌─────────────────────────────────────────────────┐
│ 1. SETUP Load tokens + guidelines │
│ 2. DESIGN Create screen in Pencil MCP │
│ 3. REVIEW Taste-check with Design Philosophy│
│ 4. BUILD Export SwiftUI, build, screenshot │
│ 5. VERIFY Compare screenshot to design │
│ 6. ITERATE Fix issues, loop to step 2 │
│ 7. DONE All checks pass │
└─────────────────────────────────────────────────┘
Load the iOS design skills in this repo:
Read: skills/ios-design-tokens/SKILL.md ← iOS HIG tokens (colors, type, spacing)
Read: skills/pencil-ios-design/SKILL.md ← Pencil MCP iOS workflow
Read: skills/design-philosophy/SKILL.md ← taste principles
Then initialize:
get_editor_state to check Pencil MCP is availableopen_document("new") or open existing .pen fileset_variables with iOS design tokens from ios-design-tokens skillget_guidelines(topic="mobile-app") for Apple HIG rulesIf 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
Using the pencil-ios-design skill as your guide:
find_empty_space_on_canvas(width=393, height=852) for iPhone 15 Pro frame sizebatch_design to create the screen layout. Max 25 operations per call.Mandatory iOS rules:
Refer to the common screen patterns in pencil-ios-design for Login, Settings,
Detail, and other standard layouts.
Before building, taste-check the design. Ask these questions:
From the Design Philosophy skill:
If the design fails taste review, go back to Step 2 and simplify. Do NOT proceed to build until taste passes.
Export the design and validate it compiles:
xcodebuild buildxcrun simctl boot + install + launchxcodebuildmcp screenshotIf XcodeBuildMCP is not available, skip to Step 5 with the Pencil screenshot only.
Compare the build screenshot (or Pencil screenshot) against the design:
Call: get_screenshot(nodeId="frame-id")
Call: snapshot_layout(nodeId="frame-id", problemsOnly=true)
Call: search_all_unique_properties(nodeId="frame-id", properties=["fillColor", "fontFamily", "fontSize"])
Verification checklist:
If any checks fail:
Continue iterating until ALL checks pass.
When all checks pass, report:
DESIGN COMPLETE
Screen: [name]
Feeling: [one word]
Checks passed:
✓ Typography: SF Pro, iOS type scale
✓ Spacing: 8pt grid
✓ Colors: iOS semantic tokens
✓ Touch targets: ≥ 44pt
✓ Safe areas: respected
✓ Taste: [one sentence on why it passes]
✓ Build: compiles, zero warnings
✓ Screenshot: matches design intent
Files:
- [.pen file path]
- [.swift file path]
For fully autonomous iteration, wrap this skill in a Ralph Loop:
/ralph-loop "Run /ios-design-stack with this brief:
[USER'S DESIGN BRIEF HERE]
Success criteria:
- Design passes all verification checks
- Code compiles without warnings
- Screenshot matches design intent
- Taste check passes (would Apple ship this?)
Output <promise>DESIGN_COMPLETE</promise> when all checks pass." --max-iterations 15
The Ralph Loop will keep re-running the pipeline until it converges on a design that passes every check. Typical: 3-5 iterations for a simple screen.
| Tool | Source | Required? |
|---|---|---|
| Pencil MCP | pencil.dev | Yes — the design canvas |
| XcodeBuildMCP | getsentry/XcodeBuildMCP | Optional — for build validation |
| Ralph Loop | anthropics/claude-code | Optional — for autonomous iteration |
| Skill | What it does |
|---|---|
skills/design-philosophy/ | Taste principles — Dieter Rams, "less but better" |
skills/ios-design-tokens/ | iOS HIG tokens — typography, colors, spacing, radii |
skills/pencil-ios-design/ | iOS Pencil MCP workflow — how to design iOS screens |