Claude Skill

ios-design-mockup

Generate a single-file HTML iOS design mockup from a written spec (PRD / requirements / user stories) — a designer-style user-flow canvas: iPhone frames, SVG navigation arrows, a design-tokens panel. Use when asked to "turn this spec into a mockup", "show me the screens", "visual

LLM Mart · 0 points · 0 views 0 listing impressions 0 install-command copies
Virus-scanned Reviewed automatically before listing.

Full trust report

Download wei18-apple-dev-skills-apple-dev-skills_skills_ios-design-mockup-7ea7e61.zip · 15 KB
wei18/apple-dev-skills 18 0 forks MIT Updated 11d ago
Part of wei18/apple-dev-skills — 37 skills

Install

skills CLI npx skills add https://github.com/wei18/apple-dev-skills/tree/main/apple-dev-skills/skills/ios-design-mockup
Claude Code claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install wei18-apple-dev-skills@llmmart
Git git clone https://github.com/wei18/apple-dev-skills.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole wei18/apple-dev-skills collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

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 in a path the user mentioned (e.g. ./spec/PRD.md), read it directly. If it's pasted, work from the conversation.

Step 2 — Propose a screen inventory before drawing

Before generating any HTML, write a list of every screen you plan to include and show it to the user. Group by flow. Include secondary states (loading, empty, error) where the spec implies them or iOS conventions demand them.

Format like this:

I'll generate these screens:

Onboarding flow:
  S01 - Splash
  S02 - Welcome / value prop
  S03 - Login (email)
  S04 - Login - error state
  S05 - Signup

Main flow:
  S06 - Home (loaded)
  S07 - Home (empty state)
  S08 - Home (loading skeleton)
  ...

Settings flow:
  S15 - Settings root
  S16 - Profile edit
  ...

Total: N screens, M navigation transitions.

Anything missing or that I shouldn't include? I'll start drawing once you confirm.

Wait for confirmation. This step prevents wasting tokens on a 20-screen draft that misses the user's main intent.

Step 3 — Identify ambiguities and ask

If the spec is unclear on important points (does login require email or phone? is there a tab bar or a side menu? what's the brand color?), list the questions before drawing. Don't invent answers silently. Reasonable iOS conventions (pull-to-refresh on lists, swipe-back gesture) you can apply without asking, but anything that materially changes the design should be a question.

Step 4 — Generate the HTML

See references/html-structure.md for the canvas layout, arrow drawing technique, and component patterns. See references/design-tokens.md for the Apple HIG token values to use. See references/sf-symbols.md for inline SVG icon snippets covering the most common SF Symbols.

Save to the project root or a path the user specified. Default filename: design-mockup.html.

Step 5 — Report what you produced

After saving, summarize:

  • How many screens, how many transitions
  • Which sections of the design tokens panel you populated
  • Anything you inferred or filled in from iOS conventions because the spec didn't say
  • Anything you skipped or were uncertain about

This gives the user a checklist for review and a clear handoff if they want to iterate.

Visual style rules

These come from Apple's Human Interface Guidelines. The design must look unmistakably iOS, not generic web.

  • Device frame: iPhone 17 Pro proportions — 402 × 874 pt, 47.33pt corner radius (unofficial measurement — Apple does not publish this value; community-measured)
  • Always draw: Dynamic Island (pill shape, centered, ~125 × 37 pt), status bar (time, signal, wifi, battery), home indicator (bottom)
  • Default to Light Mode unless the spec calls for dark
  • Font: SF Pro via system stack -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif
  • Standard iOS chrome (iOS 26 Liquid Glass):
    • NavBar: 44pt tall, large title style (34pt bold) or inline title (17pt semibold), glass (translucent + blurred) background
    • TabBar: floating Liquid Glass capsule inset from the bottom edge, not an edge-to-edge opaque bar — see references/design-tokens.md
    • List rows: 44pt tall, separator inset 16pt from left
    • Touch targets: 44 × 44 pt — the iOS HIG default control size, not the minimum (the HIG Accessibility table's minimum is 28 × 28 pt); ship 44
  • Colors: use semantic system colors (label, secondaryLabel, systemBackground, systemGroupedBackground, separator, tintColor). See references/design-tokens.md.
  • Icons: use inline SVG paths for common SF Symbols (see references/sf-symbols.md). For uncommon symbols, leave a placeholder box with the symbol name as text, e.g. [icon: figure.run.circle].

Canvas layout

The HTML has three regions:

  1. Header strip (top): app name, version (placeholder if not in spec), generation date, and a legend explaining the arrow types (solid = push, dashed = modal present, double-headed = tab switch).
  2. Screens region (main, scrollable horizontally): all iPhone frames laid out in flow order. Group related flows visually (vertical columns per flow, horizontal progression within a flow). Below each frame: label like S01 — Welcome.
  3. Design tokens panel (right side or bottom, depending on canvas width): Colors, Typography, Spacing, Radius, Shadow, Components.

Arrows are drawn in one absolutely-positioned SVG that covers the entire canvas, with pointer-events: none so it doesn't block scrolling. Each arrow is a <path> with a marker-end triangle. Arrow labels are <text> elements positioned along the path.

Design tokens panel — what must appear

The tokens panel is what makes this skill different from "draw some screens". Be thorough:

  • Colors: every semantic color used in the screens, displayed as a swatch + hex + SwiftUI name. Group by Label / Fill / Background / System / Custom (if the spec specifies brand colors).
  • Typography: every text style used — Large Title, Title 1/2/3, Headline, Body, Callout, Subheadline, Footnote, Caption 1/2 — with size, weight, line height. Render each style as a sample line.
  • Spacing scale: 4, 8, 12, 16, 20, 24, 32, 44, 64. Show as visual bars or boxes.
  • Corner radius: 4, 8, 12, 16, 22, continuous. Show as rounded squares.
  • Shadow / elevation: 1-3 levels with samples.
  • Components: every component that appears in any screen — Button (primary, secondary, tertiary, destructive), TextField (default, focused, error), List Row, TabBar item (active, inactive), NavBar (large, inline), Card, Toast, Alert, Action Sheet, Segmented Control, Switch, Stepper, Search Bar. For each: visual sample + key dimensions (padding, height) + states.

If a component doesn't appear in any screen, don't include it in the panel — only document what's actually used.

Technical constraints

  • No frameworks: no React, no Tailwind CDN, no external JS libraries. Pure HTML + inline CSS + inline SVG.
  • No external font files: rely on the system font stack above.
  • Single file: everything inline. The user should be able to email the .html and it works.
  • Print-friendly: include @media print styles so the canvas can be printed to A3 landscape PDF without breaking. The arrows SVG must scale correctly.
  • Cross-browser: must work in Safari and Chrome at minimum.

Iteration etiquette

When the user asks for changes after the first version:

  • Localized changes are preferred. If the user says "change S03's TabBar to floating", change only S03, leave everything else alone. Don't regenerate the whole file.
  • Use targeted edits (str_replace or equivalent) rather than rewriting the file.
  • Confirm before structural changes. If the user says "add a Dark Mode version", that doubles the file size — confirm scope first.

What this skill is NOT

To avoid confusion:

  • Not a working prototype — buttons don't do anything, no JavaScript interactions beyond layout. Arrows are visual, not links.
  • Not a Figma file — Figma's .fig format is closed. If the user wants editable Figma, point them to Figma Make / Builder.io, or offer SVG export for designers to import as images.
  • Not production code — frames are pixel mockups, not SwiftUI views. (If the user wants SwiftUI, that's a different task.)
  • Not responsive web — the canvas is sized for desktop viewing and PDF print. Mobile viewing of the .html file is acceptable but not the priority.

References

Read these files when you need them:

  • references/html-structure.md — the actual HTML skeleton, CSS variables, SVG arrow technique with copy-pasteable code
  • references/design-tokens.md — Apple HIG token values (colors, typography, spacing) ready to drop in
  • references/sf-symbols.md — inline SVG snippets for the 20 most common SF Symbols

Read html-structure.md before drawing your first screen. Read the other two as needed.

Related skills

  • swiftui-navigation-architecture — once a flow sketched here is approved, this is where the real navigation gets implemented; that skill produces working SwiftUI code, this one produces a static visual mockup only.

Pre-code visual only. Auditing a built app → interactive-simulator-ux-audit; spec-level screen contracts → a screen-contract / spec skill if the project has one, otherwise collaboration-skills:spec-phase-orchestration §What.

  • Official sources: when verifying or updating a factual or version-sensitive claim, read references/official-docs.md.
Files (apple-dev-skills)
  • references
    • design-tokens.md 11.7 KB 
      # Apple HIG Design Tokens

These are iOS reference values; the system colors follow the HIG Color table as of 2025-06-09 (iOS 26). The HIG notes that documented color values are for reference during design and may change between releases. Drop them into the HTML as CSS variables and the tokens panel.

## Contents

- [CSS variables (paste into `:root`)](#css-variables-paste-into-root)
- [Typography samples (paste into tokens panel)](#typography-samples-paste-into-tokens-panel)
- [Button variants](#button-variants)
- [NavBar (iOS 26 Liquid Glass)](#navbar-ios-26-liquid-glass)
- [TabBar (iOS 26 Liquid Glass — floating, not edge-to-edge)](#tabbar-ios-26-liquid-glass--floating-not-edge-to-edge)
- [List row (grouped style)](#list-row-grouped-style)
- [TextField](#textfield)
- [SwiftUI name reference](#swiftui-name-reference)
- [Dark Mode (only if requested)](#dark-mode-only-if-requested)

## CSS variables (paste into `:root`)

```css
:root {
  /* ===== Colors — semantic, Light Mode ===== */
  --color-label: #000000;
  --color-label-secondary: rgba(60, 60, 67, 0.6);
  --color-label-tertiary: rgba(60, 60, 67, 0.3);
  --color-label-quaternary: rgba(60, 60, 67, 0.18);

  --color-fill: rgba(120, 120, 128, 0.2);
  --color-fill-secondary: rgba(120, 120, 128, 0.16);
  --color-fill-tertiary: rgba(118, 118, 128, 0.12);
  --color-fill-quaternary: rgba(116, 116, 128, 0.08);

  --color-bg: #FFFFFF;
  --color-bg-secondary: #F2F2F7;
  --color-bg-tertiary: #FFFFFF;

  --color-bg-grouped: #F2F2F7;
  --color-bg-grouped-secondary: #FFFFFF;
  --color-bg-grouped-tertiary: #F2F2F7;

  --color-separator: rgba(60, 60, 67, 0.29);
  --color-separator-opaque: #C6C6C8;

  /* ===== System colors (default Light values) ===== */
  --color-system-blue:   #0088FF;  /* default tint */
  --color-system-green:  #34C759;
  --color-system-indigo: #6155F5;
  --color-system-orange: #FF8D28;
  --color-system-pink:   #FF2D55;
  --color-system-purple: #CB30E0;
  --color-system-red:    #FF383C;
  --color-system-teal:   #00C3D0;
  --color-system-yellow: #FFCC00;

  --color-system-gray:   #8E8E93;
  --color-system-gray-2: #AEAEB2;
  --color-system-gray-3: #C7C7CC;
  --color-system-gray-4: #D1D1D6;
  --color-system-gray-5: #E5E5EA;
  --color-system-gray-6: #F2F2F7;

  /* App tint — override with brand color from spec if present */
  --color-tint: var(--color-system-blue);

  /* ===== Typography ===== */
  /* size / line-height / weight */
  --font-large-title:     34px / 41px / 700;  /* HIG generic table default is Regular; Bold is the emphasized weight and how UINavigationBar large titles render — mockups show the nav-bar form */
  --font-title-1:            28px / 34px / 400;  /* HIG default weight is Regular */
  --font-title-1-emphasized: 28px / 34px / 700;
  --font-title-2:            22px / 28px / 400;  /* HIG default weight is Regular */
  --font-title-2-emphasized: 22px / 28px / 700;
  --font-title-3:            20px / 25px / 400;  /* HIG default weight is Regular */
  --font-title-3-emphasized: 20px / 25px / 600;
  --font-headline:        17px / 22px / 600;
  --font-body:            17px / 22px / 400;
  --font-body-emphasized: 17px / 22px / 600;
  --font-callout:         16px / 21px / 400;
  --font-subheadline:     15px / 20px / 400;
  --font-footnote:        13px / 18px / 400;
  --font-caption-1:       12px / 16px / 400;
  --font-caption-2:       11px / 13px / 400;

  /* ===== Spacing ===== */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;   /* the default iOS layout margin */
  --space-lg:  20px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 44px;   /* default touch target (HIG Accessibility table's minimum is 28px) */
  --space-4xl: 64px;

  /* ===== Radius ===== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;   /* default button/control */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-card: 16px;
  --radius-modal: 10px;
  --radius-phone: 47.33px;

  /* ===== Shadows / elevation ===== */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.15);

  /* ===== Standard heights ===== */
  --height-navbar: 44px;
  --height-tabbar: 49px;
  --height-row: 44px;
  --height-row-large: 60px;
  --height-button: 50px;
  --height-button-small: 32px;
  --height-textfield: 36px;
  --height-search: 36px;
}
```

## Typography samples (paste into tokens panel)

```html
<section>
  <h3>Typography</h3>
  <div class="type-sample" style="font-size:34px;line-height:41px;font-weight:700">Large Title — 34/41 Bold in a navigation bar (Regular per the generic HIG table)</div>
  <div class="type-sample" style="font-size:28px;line-height:34px;font-weight:400">Title 1 — 28/34 Regular (Bold when emphasized)</div>
  <div class="type-sample" style="font-size:22px;line-height:28px;font-weight:400">Title 2 — 22/28 Regular (Bold when emphasized)</div>
  <div class="type-sample" style="font-size:20px;line-height:25px;font-weight:400">Title 3 — 20/25 Regular (Semibold when emphasized)</div>
  <div class="type-sample" style="font-size:17px;line-height:22px;font-weight:600">Headline — 17/22 Semibold</div>
  <div class="type-sample" style="font-size:17px;line-height:22px;font-weight:400">Body — 17/22 Regular</div>
  <div class="type-sample" style="font-size:16px;line-height:21px;font-weight:400">Callout — 16/21 Regular</div>
  <div class="type-sample" style="font-size:15px;line-height:20px;font-weight:400">Subheadline — 15/20 Regular</div>
  <div class="type-sample" style="font-size:13px;line-height:18px;font-weight:400">Footnote — 13/18 Regular</div>
  <div class="type-sample" style="font-size:12px;line-height:16px;font-weight:400">Caption 1 — 12/16 Regular</div>
  <div class="type-sample" style="font-size:11px;line-height:13px;font-weight:400">Caption 2 — 11/13 Regular</div>
</section>
```

## Button variants

```html
<!-- Primary (filled) -->
<button style="
  height: 50px;
  padding: 0 20px;
  background: var(--color-tint);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
">Primary</button>

<!-- Secondary (tinted) -->
<button style="
  height: 50px;
  padding: 0 20px;
  background: rgba(0,136,255,0.15);
  color: var(--color-tint);
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
">Secondary</button>

<!-- Plain / tertiary -->
<button style="
  height: 50px;
  padding: 0 20px;
  background: transparent;
  color: var(--color-tint);
  border: none;
  font-size: 17px;
  font-weight: 600;
">Plain</button>

<!-- Destructive -->
<button style="
  height: 50px;
  padding: 0 20px;
  background: var(--color-system-red);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
">Delete</button>
```

## NavBar (iOS 26 Liquid Glass)

```html
<!-- Large title style -->
<div style="
  padding: 8px 16px 16px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(1.4);
">
  <div style="font-size: 34px; font-weight: 700;">Title</div>
</div>

<!-- Inline title style -->
<div style="
  height: 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 0.5px solid var(--color-separator);
">
  <span style="color: var(--color-tint); font-size: 17px;">‹ Back</span>
  <span style="font-size: 17px; font-weight: 600;">Title</span>
  <span style="text-align: right; color: var(--color-tint); font-size: 17px;">Edit</span>
</div>
```

Liquid Glass toolbars are translucent and blur/saturate whatever scrolls beneath them — they are
not an opaque white bar. Keep the `border-bottom` hairline; it is still how Liquid Glass separates
chrome from content.

## TabBar (iOS 26 Liquid Glass — floating, not edge-to-edge)

iOS 26 tab bars are a **floating glass capsule inset from the screen edges**, not a full-width bar
sitting flush on the home-indicator safe area. Draw it as its own rounded, shadowed element with
margin on all three open sides:

```html
<div style="
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;             /* floats above the home indicator, doesn't sit on it */
  height: 56px;
  border-radius: 28px;      /* capsule: half of height */
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: flex;
">
  <div class="tab-item active">...</div>
  <div class="tab-item">...</div>
</div>

<style>
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-system-gray);
  font-size: 10px;
}
.tab-item.active { color: var(--color-tint); }
.tab-item svg { width: 25px; height: 25px; margin-bottom: 3px; }
</style>
```

A tab bar that minimizes on scroll (`.tabBarMinimizeBehavior`) can be shown as a second, smaller
frame in the flow (a compact pill) rather than animated — this is a static mockup.

## List row (grouped style)

```html
<div style="
  background: var(--color-bg);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 16px;
">
  <div style="
    min-height: 44px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid var(--color-separator);
  ">
    <span style="font-size: 17px;">Setting label</span>
    <span style="color: var(--color-label-secondary); font-size: 17px;">Value ›</span>
  </div>
  <!-- repeat rows; last row omits border-bottom -->
</div>
```

## TextField

```html
<!-- Default -->
<div style="
  height: 36px;
  padding: 0 12px;
  background: var(--color-fill-tertiary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 17px;
  color: var(--color-label-secondary);
">Placeholder</div>

<!-- Focused -->
<div style="
  height: 36px;
  padding: 0 12px;
  background: var(--color-bg);
  border: 2px solid var(--color-tint);
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 17px;
">User input│</div>

<!-- Error -->
<div style="
  height: 36px;
  padding: 0 12px;
  background: var(--color-bg);
  border: 2px solid var(--color-system-red);
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 17px;
">Invalid email</div>
```

## SwiftUI name reference

When labeling colors in the tokens panel, use these SwiftUI names so iOS engineers can map directly:

| Hex / value | SwiftUI |
|---|---|
| `#0088FF` (default tint) | `Color.accentColor` / `Color.blue` |
| `#FF383C` | `Color.red` |
| `#34C759` | `Color.green` |
| `#FF8D28` | `Color.orange` |
| `#FFCC00` | `Color.yellow` |
| `#CB30E0` | `Color.purple` |
| `#FF2D55` | `Color.pink` |
| `#8E8E93` | `Color.gray` |
| Label primary | `Color.primary` / `Color(.label)` |
| Label secondary | `Color.secondary` / `Color(.secondaryLabel)` |
| systemBackground | `Color(.systemBackground)` |
| systemGroupedBackground | `Color(.systemGroupedBackground)` |
| separator | `Color(.separator)` |

For typography:

| Token | SwiftUI |
|---|---|
| Large Title | `.largeTitle` |
| Title 1 | `.title` |
| Title 2 | `.title2` |
| Title 3 | `.title3` |
| Headline | `.headline` |
| Body | `.body` |
| Callout | `.callout` |
| Subheadline | `.subheadline` |
| Footnote | `.footnote` |
| Caption 1 | `.caption` |
| Caption 2 | `.caption2` |

## Dark Mode (only if requested)

If the spec calls for Dark Mode, swap these in a second `:root[data-theme="dark"]` block:

```
--color-label: #FFFFFF;
--color-label-secondary: rgba(235,235,245,0.6);
--color-bg: #000000;
--color-bg-secondary: #1C1C1E;
--color-bg-grouped: #000000;
--color-bg-grouped-secondary: #1C1C1E;
--color-separator: rgba(84,84,88,0.65);
--color-system-blue: #0091FF;
--color-system-red:  #FF4245;
--color-system-green:#30D158;
--color-system-orange:#FF9230;
```
    • html-structure.md 8.6 KB 
      # HTML Structure & Layout Reference

This file gives you the skeleton, CSS variables, and the SVG arrow technique. Copy and adapt — don't reinvent.

## Contents

- [Top-level structure](#top-level-structure)
- [iPhone frame component](#iphone-frame-component)
- [Flow grouping](#flow-grouping)
- [SVG arrows](#svg-arrows)
- [Header strip](#header-strip)
- [Tokens panel](#tokens-panel)
- [Print styles](#print-styles)
- [Tips](#tips)

## Top-level structure

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[App Name] — Design Mockup</title>
<style>
  /* Tokens go in :root, see design-tokens.md */
  :root { ... }

  body {
    margin: 0;
    background: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
    color: #1d1d1f;
  }

  .canvas {
    position: relative;       /* anchor for the arrows SVG */
    min-width: max-content;   /* allow horizontal scroll */
    padding: 40px;
  }

  .arrows-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;     /* don't block scroll/select */
    z-index: 10;
  }
</style>
</head>
<body>
  <header class="header">...</header>
  <main class="canvas">
    <section class="flows">
      <!-- screen frames grouped by flow -->
    </section>
    <svg class="arrows-layer" xmlns="http://www.w3.org/2000/svg">
      <!-- arrow paths -->
    </svg>
  </main>
  <aside class="tokens-panel">...</aside>
</body>
</html>
```

## iPhone frame component

Each screen frame is a `.phone` element. Give it an `id` so arrows can reference it.

```html
<div class="phone" id="S03-login">
  <div class="phone-shell">
    <div class="dynamic-island"></div>
    <div class="status-bar">
      <span class="time">9:41</span>
      <span class="status-icons">
        <!-- inline SVG: signal, wifi, battery -->
      </span>
    </div>
    <div class="screen-content">
      <!-- the actual screen design -->
    </div>
    <div class="home-indicator"></div>
  </div>
  <div class="phone-label">S03 — Login</div>
</div>
```

```css
.phone {
  width: 402px;
  flex-shrink: 0;
}

.phone-shell {
  position: relative;
  width: 402px;
  height: 874px;
  background: white;
  border-radius: 47.33px;
  box-shadow:
    0 0 0 4px #1d1d1f,
    0 30px 60px rgba(0,0,0,0.15);
  overflow: hidden;
}

.dynamic-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 125px;
  height: 37px;
  background: #000;
  border-radius: 20px;
  z-index: 100;
}

.status-bar {
  position: relative;
  height: 54px; /* canvas approximation, not an Apple-published value — the safe-area top on Dynamic Island devices is 59pt */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px 0;
  font-size: 17px;
  font-weight: 600;
}

.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: #1d1d1f;
  border-radius: 3px;
}

.phone-label {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: #86868b;
  font-weight: 500;
}
```

## Flow grouping

Group frames in columns by flow, with horizontal progression within each flow.

```html
<div class="flow">
  <h2 class="flow-title">Onboarding</h2>
  <div class="flow-frames">
    <div class="phone" id="S01">...</div>
    <div class="phone" id="S02">...</div>
    <div class="phone" id="S03">...</div>
  </div>
</div>
```

```css
.flow {
  margin-bottom: 80px;
}

.flow-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #1d1d1f;
}

.flow-frames {
  display: flex;
  gap: 80px;       /* leave room for arrows between frames */
  align-items: flex-start;
}
```

## SVG arrows

One SVG layer covers the whole canvas. Each arrow is a path. Coordinate math: use the parent canvas's coordinate system, so position frames first, then derive arrow endpoints from frame positions.

**Simplest approach**: hard-code arrow coordinates after laying out frames. For each frame, you know its `left` and `top` in the canvas. The arrow exits the right edge of one frame and enters the left edge of the next.

```html
<svg class="arrows-layer" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- triangle arrowhead -->
    <marker id="arrow-solid" viewBox="0 0 10 10" refX="9" refY="5"
            markerWidth="8" markerHeight="8" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#0088FF"/>
    </marker>
    <marker id="arrow-dashed" viewBox="0 0 10 10" refX="9" refY="5"
            markerWidth="8" markerHeight="8" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#FF8D28"/>
    </marker>
  </defs>

  <!-- push navigation: solid blue -->
  <path d="M 480 400 C 540 400, 540 400, 600 400"
        fill="none" stroke="#0088FF" stroke-width="2"
        marker-end="url(#arrow-solid)"/>
  <text x="540" y="390" font-size="12" fill="#0088FF" text-anchor="middle">
    tap "Sign In"
  </text>

  <!-- modal present: dashed orange -->
  <path d="M 480 600 C 540 600, 540 600, 600 600"
        fill="none" stroke="#FF8D28" stroke-width="2" stroke-dasharray="6 4"
        marker-end="url(#arrow-dashed)"/>
  <text x="540" y="590" font-size="12" fill="#FF8D28" text-anchor="middle">
    tap "+" present
  </text>
</svg>
```

### Arrow style legend

| Transition type | Style | Color |
|---|---|---|
| push (NavigationLink) | solid | #0088FF blue |
| modal present (sheet) | dashed | #FF8D28 orange |
| full-screen cover | dashed thick (3px) | #FF383C red |
| tab switch | double-headed solid | #8E8E93 gray |
| dismiss / back | thin solid | #C7C7CC light gray |

Include this legend in the header strip so viewers can decode the arrows.

### Computing arrow coordinates

If frames are in a flex row with `gap: 80px` and each frame is 402px wide starting at canvas padding 40px:

- Frame N's left edge = `40 + N * (402 + 80)`
- Frame N's right edge = frame N left + 402
- Vertical center = frame top + 437 (half of 874)

For an arrow from frame N's right edge to frame N+1's left edge at the same vertical center, the path is a horizontal line or gentle S-curve. Use a cubic Bezier for visual softness:

```
M [N right] [center]
C [N right + 30] [center], [N+1 left - 30] [center], [N+1 left] [center]
```

For arrows that go up/down (different flow rows), compute both endpoints and route the path around frames rather than through them. A simple L-shape via two Bezier control points works well.

## Header strip

```html
<header class="header">
  <div class="header-left">
    <h1>[App Name]</h1>
    <div class="meta">v0.1 · Generated 2026-XX-XX</div>
  </div>
  <div class="legend">
    <div class="legend-item">
      <svg width="40" height="10"><line x1="0" y1="5" x2="36" y2="5" stroke="#0088FF" stroke-width="2"/></svg>
      <span>push</span>
    </div>
    <div class="legend-item">
      <svg width="40" height="10"><line x1="0" y1="5" x2="36" y2="5" stroke="#FF8D28" stroke-width="2" stroke-dasharray="4 3"/></svg>
      <span>modal</span>
    </div>
    <!-- etc -->
  </div>
</header>
```

## Tokens panel

A sticky right-side panel (or below the canvas if width is constrained).

```html
<aside class="tokens-panel">
  <h2>Design System</h2>
  <section>
    <h3>Colors</h3>
    <div class="color-grid">
      <div class="color-swatch">
        <div class="swatch" style="background: #0088FF"></div>
        <div class="swatch-meta">
          <div class="swatch-name">Tint / systemBlue</div>
          <div class="swatch-hex">#0088FF</div>
          <div class="swatch-swiftui">Color.blue</div>
        </div>
      </div>
      <!-- ... -->
    </div>
  </section>
  <section><h3>Typography</h3>...</section>
  <section><h3>Spacing</h3>...</section>
  <section><h3>Radius</h3>...</section>
  <section><h3>Components</h3>...</section>
</aside>
```

## Print styles

```css
@media print {
  body { background: white; }
  .canvas { padding: 20px; }
  .phone-shell { box-shadow: 0 0 0 2px #1d1d1f; }
  @page { size: A3 landscape; margin: 10mm; }
}
```

## Tips

- **Lay out screens first, draw arrows last.** Get all frames placed and labeled, then compute arrow coordinates from the layout.
- **Use IDs on every frame** (`id="S03-login"`) — makes future edits much easier.
- **CSS variables for everything design-token-related** — so the user can tweak one value and have it propagate.
- **Don't over-detail content inside screens.** Real text from the spec where possible; otherwise `Lorem ipsum` is fine for placeholder body text but use real button labels and screen titles.
- **Avoid emoji as iOS UI elements.** Use SF Symbol SVGs from `sf-symbols.md`. Emoji is acceptable only when the spec explicitly says so (e.g. a chat app showing user-typed messages).
    • official-docs.md 949 B 
      Official pages backing this skill's claims; read when verifying or updating a factual or version-sensitive claim.

| Page | URL | Backs |
|---|---|---|
| Color (HIG) | https://developer.apple.com/design/human-interface-guidelines/color | design-tokens.md system colors; "Avoid hard-coding system color values ... may fluctuate from release to release" |
| Typography (HIG) | https://developer.apple.com/design/human-interface-guidelines/typography | Dynamic Type table |
| Tab bars (HIG) | https://developer.apple.com/design/human-interface-guidelines/tab-bars | Floating Liquid Glass tab bar |
| Buttons (HIG) | https://developer.apple.com/design/human-interface-guidelines/buttons | 44x44 pt hit region (default; see ios-accessibility-engineering for the default-vs-minimum distinction) |
| Layout (HIG) | https://developer.apple.com/design/human-interface-guidelines/layout | Device proportions (confirmed present; table not machine-extracted) |
    • sf-symbols.md 8.4 KB 
      # SF Symbols — Inline SVG snippets

SF Symbols is Apple-licensed and can't be redistributed as font files. These are stylistically-faithful redraws of the 20 most common symbols, as inline SVG. They look at home in iOS mockups without being literal copies.

## Contents

- [How to use](#how-to-use)
- [Navigation / chrome](#navigation--chrome)
- [TabBar / common](#tabbar--common)
- [Status bar icons](#status-bar-icons)
- [Common UI](#common-ui)
- [Notes for inventing iOS-style icons](#notes-for-inventing-ios-style-icons)

For any symbol not listed here, use a text placeholder: `[icon: figure.run.circle]`.

## How to use

Drop the `<svg>` directly into your HTML. Set `width`/`height` to control size. `fill="currentColor"` lets the symbol inherit text color (use this for TabBar items, NavBar buttons, etc).

```html
<span style="color: var(--color-tint);">
  <svg width="25" height="25" viewBox="0 0 24 24" fill="currentColor">...</svg>
</span>
```

Standard sizes:
- TabBar icon: 25 × 25
- NavBar icon: 22 × 22
- List row trailing chevron: 12 × 20
- Inline body icon: 17 × 17

---

## Navigation / chrome

### chevron.right (back/forward indicator)
```svg
<svg viewBox="0 0 12 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M2.5 2 L10 10 L2.5 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
```

### chevron.left
```svg
<svg viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M9.5 2 L2 10 L9.5 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

### xmark (close)
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M6 6 L18 18 M18 6 L6 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>
```

### plus
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 5 V19 M5 12 H19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>
```

### ellipsis (more menu)
```svg
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>
</svg>
```

---

## TabBar / common

### house (Home tab)
```svg
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 3 L2 11 V21 H9 V14 H15 V21 H22 V11 Z"/>
</svg>
```

### house.fill — same path, used for active state

### magnifyingglass (Search)
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2.5"/>
  <path d="M16 16 L21 21" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>
```

### heart
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 21 C-7 9 6 -1 12 7 C18 -1 31 9 12 21 Z" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>
```

### heart.fill
```svg
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 21 C-7 9 6 -1 12 7 C18 -1 31 9 12 21 Z"/>
</svg>
```

### person.circle
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
  <circle cx="12" cy="10" r="3.5" fill="currentColor"/>
  <path d="M5 20 C7 16 17 16 19 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>
</svg>
```

### person.circle.fill
```svg
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="10" r="3.5" fill="white"/>
  <path d="M5 20 C7 16 17 16 19 20" stroke="white" stroke-width="2" stroke-linecap="round" fill="none"/>
</svg>
```

### gearshape (Settings)
```svg
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 8.5 a3.5 3.5 0 1 0 0 7 a3.5 3.5 0 0 0 0 -7 z M19.4 12 c0 .6 -.1 1.2 -.2 1.8 l2.1 1.6 c.2.1.2.4.1.6 l-2 3.4 c-.1.2-.4.3-.6.2 l-2.5 -1 a7.4 7.4 0 0 1 -3.1 1.8 l-.4 2.6 c0 .2-.2.4-.5.4 h-4 c-.2 0-.4 -.2 -.4 -.4 l-.4 -2.6 a7.4 7.4 0 0 1 -3.1 -1.8 l-2.5 1 c-.2 .1-.5 0-.6 -.2 l-2 -3.4 c-.1-.2 -.1 -.5 .1 -.6 l2.1 -1.6 a7 7 0 0 1 0 -3.6 l-2.1 -1.6 c-.2 -.1 -.2 -.4 -.1 -.6 l2 -3.4 c.1 -.2 .4 -.3 .6 -.2 l2.5 1 a7.4 7.4 0 0 1 3.1 -1.8 l.4 -2.6 c0 -.2 .2 -.4 .4 -.4 h4 c.3 0 .5 .2 .5 .4 l.4 2.6 a7.4 7.4 0 0 1 3.1 1.8 l2.5 -1 c.2 -.1 .5 0 .6 .2 l2 3.4 c.1 .2 .1 .5 -.1 .6 l-2.1 1.6 c.1 .6 .2 1.2 .2 1.8 z" fill-rule="evenodd"/>
</svg>
```

### bell
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M6 16 V11 a6 6 0 0 1 12 0 V16 L19.5 18 H4.5 L6 16 Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
  <path d="M10 21 a2 2 0 0 0 4 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
```

---

## Status bar icons

### Cellular signal
```svg
<svg viewBox="0 0 20 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  y="9" width="3" height="5" rx="0.5"/>
  <rect x="5"  y="6" width="3" height="8" rx="0.5"/>
  <rect x="10" y="3" width="3" height="11" rx="0.5"/>
  <rect x="15" y="0" width="3" height="14" rx="0.5"/>
</svg>
```

### Wifi
```svg
<svg viewBox="0 0 20 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 14 a1.5 1.5 0 1 0 0 -3 a1.5 1.5 0 0 0 0 3 z"/>
  <path d="M5 9 C7 7 13 7 15 9" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
  <path d="M2 5 C5 2 15 2 18 5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
</svg>
```

### Battery (full)
```svg
<svg viewBox="0 0 28 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="0.5" y="0.5" width="23" height="13" rx="3" stroke="currentColor" opacity="0.4"/>
  <rect x="2" y="2" width="20" height="10" rx="1.5" fill="currentColor"/>
  <rect x="24.5" y="4.5" width="2" height="5" rx="1" fill="currentColor" opacity="0.4"/>
</svg>
```

---

## Common UI

### checkmark
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 12 L10 18 L20 6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

### checkmark.circle.fill
```svg
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <circle cx="12" cy="12" r="10"/>
  <path d="M7 12 L10.5 15.5 L17 9" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
```

### exclamationmark.triangle (warning)
```svg
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 3 L22 20 L2 20 Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" fill="none"/>
  <path d="M12 9 V14" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
  <circle cx="12" cy="17.5" r="1" fill="currentColor"/>
</svg>
```

### arrow.up.right (external link)
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M7 17 L17 7 M8 7 H17 V16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

### square.and.arrow.up (Share)
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 3 V15 M7 8 L12 3 L17 8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M5 12 V20 H19 V12" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/>
</svg>
```

### trash
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 7 H20 M9 7 V4 H15 V7 M6 7 L7 21 H17 L18 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

### pencil
```svg
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M3 21 L7 20 L20 7 L17 4 L4 17 L3 21 Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
</svg>
```

---

## Notes for inventing iOS-style icons

When you need a symbol not in the list:

1. Match SF Symbols stroke weight — most are around 2-2.5px on a 24px viewBox
2. Use `stroke-linecap="round"` and `stroke-linejoin="round"` — SF Symbols are uniformly rounded
3. For "filled" variants of outlined icons, swap `stroke` for `fill` on the same path
4. Keep optical balance — symbols look slightly smaller than their bounding box; visual weight near 70-75% of the viewBox is typical
5. If in doubt, leave a text placeholder rather than a bad drawing
  • SKILL.md 10.6 KB 
    ---
name: ios-design-mockup
description: 'Generate a single-file HTML iOS design mockup from a written spec (PRD / requirements / user stories) — a designer-style user-flow canvas: iPhone frames, SVG navigation arrows, a design-tokens panel. Use when asked to "turn this spec into a mockup", "show me the screens", "visualize this app", "make a Figma-like flow", or to communicate iOS designs to PMs/stakeholders without a working prototype. Not a clickable prototype, not Figma files, not SwiftUI/production code. Do NOT fire when merely discussing/planning/reviewing screens conceptually, or when no visual artifact was requested.'
argument-hint: "[spec-path]"
---

# 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 in a path the user mentioned (e.g. `./spec/PRD.md`), read it directly. If it's pasted, work from the conversation.

### Step 2 — Propose a screen inventory before drawing

Before generating any HTML, write a list of every screen you plan to include and show it to the user. Group by flow. Include secondary states (loading, empty, error) where the spec implies them or iOS conventions demand them.

Format like this:

```
I'll generate these screens:

Onboarding flow:
  S01 - Splash
  S02 - Welcome / value prop
  S03 - Login (email)
  S04 - Login - error state
  S05 - Signup

Main flow:
  S06 - Home (loaded)
  S07 - Home (empty state)
  S08 - Home (loading skeleton)
  ...

Settings flow:
  S15 - Settings root
  S16 - Profile edit
  ...

Total: N screens, M navigation transitions.

Anything missing or that I shouldn't include? I'll start drawing once you confirm.
```

Wait for confirmation. This step prevents wasting tokens on a 20-screen draft that misses the user's main intent.

### Step 3 — Identify ambiguities and ask

If the spec is unclear on important points (does login require email or phone? is there a tab bar or a side menu? what's the brand color?), list the questions before drawing. Don't invent answers silently. Reasonable iOS conventions (pull-to-refresh on lists, swipe-back gesture) you can apply without asking, but anything that materially changes the design should be a question.

### Step 4 — Generate the HTML

See `references/html-structure.md` for the canvas layout, arrow drawing technique, and component patterns. See `references/design-tokens.md` for the Apple HIG token values to use. See `references/sf-symbols.md` for inline SVG icon snippets covering the most common SF Symbols.

Save to the project root or a path the user specified. Default filename: `design-mockup.html`.

### Step 5 — Report what you produced

After saving, summarize:
- How many screens, how many transitions
- Which sections of the design tokens panel you populated
- Anything you inferred or filled in from iOS conventions because the spec didn't say
- Anything you skipped or were uncertain about

This gives the user a checklist for review and a clear handoff if they want to iterate.

## Visual style rules

These come from Apple's Human Interface Guidelines. The design must look unmistakably iOS, not generic web.

- **Device frame**: iPhone 17 Pro proportions — 402 × 874 pt, 47.33pt corner radius (unofficial measurement — Apple does not publish this value; community-measured)
- **Always draw**: Dynamic Island (pill shape, centered, ~125 × 37 pt), status bar (time, signal, wifi, battery), home indicator (bottom)
- **Default to Light Mode** unless the spec calls for dark
- **Font**: SF Pro via system stack `-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif`
- **Standard iOS chrome (iOS 26 Liquid Glass)**:
  - NavBar: 44pt tall, large title style (34pt bold) or inline title (17pt semibold), glass (translucent + blurred) background
  - TabBar: floating Liquid Glass capsule inset from the bottom edge, not an edge-to-edge opaque bar — see `references/design-tokens.md`
  - List rows: 44pt tall, separator inset 16pt from left
  - Touch targets: 44 × 44 pt — the iOS [HIG default control size](https://developer.apple.com/design/human-interface-guidelines/accessibility), not the minimum (the HIG Accessibility table's minimum is 28 × 28 pt); ship 44
- **Colors**: use semantic system colors (label, secondaryLabel, systemBackground, systemGroupedBackground, separator, tintColor). See `references/design-tokens.md`.
- **Icons**: use inline SVG paths for common SF Symbols (see `references/sf-symbols.md`). For uncommon symbols, leave a placeholder box with the symbol name as text, e.g. `[icon: figure.run.circle]`.

## Canvas layout

The HTML has three regions:

1. **Header strip (top)**: app name, version (placeholder if not in spec), generation date, and a legend explaining the arrow types (solid = push, dashed = modal present, double-headed = tab switch).
2. **Screens region (main, scrollable horizontally)**: all iPhone frames laid out in flow order. Group related flows visually (vertical columns per flow, horizontal progression within a flow). Below each frame: label like `S01 — Welcome`.
3. **Design tokens panel (right side or bottom, depending on canvas width)**: Colors, Typography, Spacing, Radius, Shadow, Components.

Arrows are drawn in **one absolutely-positioned SVG** that covers the entire canvas, with `pointer-events: none` so it doesn't block scrolling. Each arrow is a `<path>` with a `marker-end` triangle. Arrow labels are `<text>` elements positioned along the path.

## Design tokens panel — what must appear

The tokens panel is what makes this skill different from "draw some screens". Be thorough:

- **Colors**: every semantic color used in the screens, displayed as a swatch + hex + SwiftUI name. Group by Label / Fill / Background / System / Custom (if the spec specifies brand colors).
- **Typography**: every text style used — Large Title, Title 1/2/3, Headline, Body, Callout, Subheadline, Footnote, Caption 1/2 — with size, weight, line height. Render each style as a sample line.
- **Spacing scale**: 4, 8, 12, 16, 20, 24, 32, 44, 64. Show as visual bars or boxes.
- **Corner radius**: 4, 8, 12, 16, 22, continuous. Show as rounded squares.
- **Shadow / elevation**: 1-3 levels with samples.
- **Components**: every component that appears in any screen — Button (primary, secondary, tertiary, destructive), TextField (default, focused, error), List Row, TabBar item (active, inactive), NavBar (large, inline), Card, Toast, Alert, Action Sheet, Segmented Control, Switch, Stepper, Search Bar. For each: visual sample + key dimensions (padding, height) + states.

If a component doesn't appear in any screen, don't include it in the panel — only document what's actually used.

## Technical constraints

- **No frameworks**: no React, no Tailwind CDN, no external JS libraries. Pure HTML + inline CSS + inline SVG.
- **No external font files**: rely on the system font stack above.
- **Single file**: everything inline. The user should be able to email the .html and it works.
- **Print-friendly**: include `@media print` styles so the canvas can be printed to A3 landscape PDF without breaking. The arrows SVG must scale correctly.
- **Cross-browser**: must work in Safari and Chrome at minimum.

## Iteration etiquette

When the user asks for changes after the first version:

- **Localized changes are preferred**. If the user says "change S03's TabBar to floating", change only S03, leave everything else alone. Don't regenerate the whole file.
- **Use targeted edits** (str_replace or equivalent) rather than rewriting the file.
- **Confirm before structural changes**. If the user says "add a Dark Mode version", that doubles the file size — confirm scope first.

## What this skill is NOT

To avoid confusion:

- **Not a working prototype** — buttons don't do anything, no JavaScript interactions beyond layout. Arrows are visual, not links.
- **Not a Figma file** — Figma's `.fig` format is closed. If the user wants editable Figma, point them to Figma Make / Builder.io, or offer SVG export for designers to import as images.
- **Not production code** — frames are pixel mockups, not SwiftUI views. (If the user wants SwiftUI, that's a different task.)
- **Not responsive web** — the canvas is sized for desktop viewing and PDF print. Mobile viewing of the .html file is acceptable but not the priority.

## References

Read these files when you need them:

- `references/html-structure.md` — the actual HTML skeleton, CSS variables, SVG arrow technique with copy-pasteable code
- `references/design-tokens.md` — Apple HIG token values (colors, typography, spacing) ready to drop in
- `references/sf-symbols.md` — inline SVG snippets for the 20 most common SF Symbols

Read `html-structure.md` before drawing your first screen. Read the other two as needed.

## Related skills

- `swiftui-navigation-architecture` — once a flow sketched here is approved, this is where the real navigation gets implemented; that skill produces working SwiftUI code, this one produces a static visual mockup only.

Pre-code visual only. Auditing a built app → `interactive-simulator-ux-audit`; spec-level screen contracts → a screen-contract / spec skill if the project has one, otherwise `collaboration-skills:spec-phase-orchestration` §What.
- Official sources: when verifying or updating a factual or version-sensitive claim, read `references/official-docs.md`.

Comments (0)

Sign in to join the conversation.

No comments yet.

Reviews (0)

No reviews yet.

Related

Claude Prompt
Tighten-my-prose editing prompt
Claude Skill
Adversarial code-review skill for Claude
Claude Workflow
Deep-research workflow (fan-out + verify)
Claude Skill
Conventional-commit writer for Claude