IOS Design Stack

/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.

Pipeline

┌─────────────────────────────────────────────────┐
│  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                    │
└─────────────────────────────────────────────────┘

Step 1: Setup

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:

1. Call get_editor_state to check Pencil MCP is available
2. Call open_document("new") or open existing .pen file
3. Call set_variables with iOS design tokens from ios-design-tokens skill
4. 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:

1. Call find_empty_space_on_canvas(width=393, height=852) for iPhone 15 Pro frame size
2. 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:

1. What's the one feeling this creates? Write it in one word.
2. What would you remove? Cut at least one element.
3. Does every element earn its place? If removing it changes nothing, remove it.
4. 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:

1. Export the Pencil design nodes to SwiftUI code
2. Create/update the Swift file in the project
3. Build with XcodeBuildMCP: xcodebuild build
4. Run in simulator: xcrun simctl boot + install + launch
5. 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:

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:

• Spacing follows 8pt grid
• All touch targets ≥ 44pt
• Typography hierarchy is clear (squint test passes)
• One focal point dominates the screen
• Only SF Pro font family used
• Only iOS type scale sizes (11, 12, 13, 15, 16, 17, 20, 22, 28, 34)
• Only semantic colors (no random hex)
• Continuous corners, not circular
• Safe areas respected (top 59pt, bottom 34pt)
• No layout issues (snapshot_layout reports clean)
• Code compiles without warnings (if built)
• Screenshot matches design intent

Step 6: Iterate

If any checks fail:

1. Identify the specific issue
2. Fix it in the Pencil design (batch_design update operations)
3. Re-verify (back to Step 5)
4. If it's a taste issue, revisit Step 3
5. If it's a build issue, revisit Step 4

Continue iterating until ALL checks pass.

Step 7: Done

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]

Using with Ralph Loop

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.

External Dependencies

Skills in This Repo