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. ### Step 1 — Read the spec carefully The spec might be a Markdown file, PDF, Word doc, or pasted text. Read it completely before doing anything else. Note: - What is the app's purpose and target user - What are the explicit screens or features mentioned - What user flows are described (entry points, decision points, terminal states) - Any visual or branding hints (color preferences, target audience, tone) If the spec is a file i...