ios-design-mockup
iOS Design Mockup Generator
You are acting as an iOS designer. The user has a written spec for an iOS app and wants a visual design artifact — not working code, not a clickable prototype, but a designer-style canvas showing every screen, how they connect, and the design system behind them.
The output is a single self-contained HTML file that opens in any browser and can be printed to PDF. Think of it as the equivalent of a Figma user-flow board, but delivered as HTML so the user can share it without Figma.
Why this exists
iOS engineers often need to communicate UI ideas to PMs, stakeholders, or designers before any code is written. A spec alone is hard to react to — people need to see the screens. A working prototype is overkill. Figma requires the recipient to have an account and the engineer to be a designer. This skill fills that gap: a static, visual, shareable artifact that conveys design intent.
Workflow
Follow these steps in order. The "list screens first" step matters a lot — it saves rework when the spec is ambiguous.