design-mockup-ios

Generate SwiftUI previews and simulator baselines from design tokens.

1|2|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-mockup-ios
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-mockup-ios
Source: https://github.com/joi-fairshare/agentic-workflow/tree/main/skills/design-mockup-ios
Command: npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-mockup-ios

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the manual effort of crafting SwiftUI previews and simulator baselines by generating a Mockup.swift from design tokens, building the app, and capturing the screenshot needed for verification.

Core Features & Use Cases

  • Token-driven mockup generation: Inline color, spacing, and typography tokens into Mockup.swift so the preview embodies the full design language.
  • End-to-end verification baseline: Acquire the simulator lock, build with XcodeBuildMCP, run the app, and capture the mockup screenshot for future /design-verify-ios comparisons.
  • Use Case: When design direction shifts, rerun the skill to document the new visual state and provide a trustworthy reference before implementation work begins.

Quick Start

Use the design-mockup-ios skill to generate a SwiftUI preview from the repo's design tokens and capture the simulator baseline screenshot.

Frequently Asked Questions about design-mockup-ios

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate SwiftUI previews from design tokens?

To generate SwiftUI previews from design tokens, a Mockup.swift file is automatically created by inlining color, spacing, and typography tokens, ensuring the preview reflects the full design language without manual coding.

How do I capture simulator screenshots for iOS design verification?

To capture simulator screenshots for iOS design verification, the system acquires the simulator lock, builds the app via XcodeBuildMCP, runs it, and saves the baseline screenshot for future comparisons.

Do I need XcodeBuildMCP to automate iOS mockup creation?

Yes, XcodeBuildMCP is required to automate iOS mockup creation. It provides the necessary simulator tooling to build the app and capture the mockup screenshots for design review artifacts.

What is the best way to document iOS design changes before implementation?

The best way to document iOS design changes before implementation is to rerun the token-driven mockup generation, which captures a new simulator baseline screenshot to provide a trustworthy visual reference.

Where are iOS simulator baseline screenshots stored?

iOS simulator baseline screenshots are stored under the design directory at ~/.agentic-workflow/<repo-slug>/design, allowing them to be accessed for future design verification stages.