design-ios

Name: design-ios
Author: fusengine

21stars3forks

How to install design-ios?

fusengine/agents/design-ios

$npx -y skills add fusengine/agents --skill design-ios

Installs into the current project.

Summary

iOS + macOS mockups and handoff specs — Dynamic Type scale, semantic colors, device viewports, Liquid Glass, macOS text/window/pointer conventions, device-framed HTML mockup, and a SwiftUI-ready handoff spec. Produces tokens + mockup only, never SwiftUI code.

Files · 1

View on GitHub

SKILL.md

1	## Design iOS/macOS — Mockup and Handoff, Not Code
2
3	### When
4	After `design-system` tokens exist. This skill never writes SwiftUI — it produces a
5	static HTML mockup at exact device/window dimensions plus a spec that `swift-expert` or
6	an Apple-platform developer implements.
7
8	### Input
9	- `design-system.md` — OKLCH palette, typography direction, motion personality.
10	- The screen/flow to mock up and the target platform: iPhone / iPad (iOS) or a resizable
11	window (macOS).
12
13	### Steps — iOS
14
15	1. Map tokens to iOS roles. Typography → Dynamic Type text styles, anchored at Body
16	17pt down to Caption 2 11pt (never fixed point sizes) — see `references/dynamic-type.md`.
17	Colors → semantic color roles (never raw RGB/hex) — see `references/semantic-colors.md`.
18	2. Pick the device viewport(s) from `references/viewports.md` — mock up in exact
19	points at the chosen scale factor.
20	3. Build the HTML mockup: a device-frame `<div>` at the exact viewport dimensions,
21	`viewport-fit=cover` meta tag, `env(safe-area-inset-*)` for notch/Dynamic Island/home
22	indicator spacing. See `references/mockup.md`.
23	4. Apply Liquid Glass where it fits — a floating layer of controls above regular
24	content, not a content background. Two variants: regular (content-aware, the
25	default for controls) and clear (more transparent — dim the content beneath it
26	~35% when clear sits over light content, so controls stay legible). Plus control
27	morphing, concentricity between nested shapes, layered icon treatment. Source:
28	developer.apple.com/design/human-interface-guidelines/materials (Liquid Glass, iOS 26).
29	See `references/liquid-glass.md` — do not invent numeric corner-radius values; none are
30	published.
31	5. Verify touch targets and contrast: 44×44pt minimum touch target (see
32	`references/touch-targets.md`); 4.5:1 minimum contrast in Dark Mode for body text
33	(WCAG AA, HIG-endorsed) — check both light and dark against
34	`references/semantic-colors.md` roles, not a single-mode check.
35	6. Sidebar navigation ≤ 2 levels deep. If the flow needs a 3rd level, restructure
36	(tabs, push navigation, or a secondary sidebar) rather than nesting a 3rd disclosure
37	tier — deeper sidebars are a documented HIG anti-pattern for iPadOS/macOS sidebars.
38	Source: developer.apple.com/design/human-interface-guidelines/layout.
39	7. Write the handoff spec per `references/handoff-swiftui.md`: named tokens only
40	(never raw values), Dynamic Type text styles (never fixed sizes), semantic colors,
41	explicit sizing behavior (fixed/hug/fill) per element, all interaction states
42	(disabled/pressed/focused), spacing in pt.
43
44	### Steps — macOS
45
46	1. Map tokens to macOS text sizes. macOS uses its own fixed scale, distinct from iOS
47	Dynamic Type — confirmed anchors: Large Title 26pt down to body ~13pt, floor
48	Caption 2 ~10pt. Source: developer.apple.com/design/human-interface-guidelines/typography.
49	Gap — do not invent: the full intermediate scale (Title 1–3, Headline, Subhead,
50	Footnote point values) is not confirmed in this pass; reconfirm on the HIG typography
51	page or Xcode's SF font catalog before using an intermediate size verbatim.
52	2. No Dynamic Type on macOS — the platform ships fixed size variants per context
53	(e.g. control sizes: regular/small/mini) instead of a user-adjustable type scale. Pick
54	the variant that matches the control's context, don't apply an iOS Dynamic Type style.
55	3. Never draw a custom window chrome. Title bar, traffic lights, toolbar, and sidebar
56	are system-drawn; the mockup should frame content inside a standard macOS window shape,
57	not invent custom chrome. Source: developer.apple.com/design/human-interface-guidelines/windows.
58	4. Desktop tinting: background materials pick up a subtle tint from the desktop
59	picture/wallpaper behind the window — reflect this as a soft, low-opacity tint layer in
60	the mockup, not a flat opaque background. Source:
61	developer.apple.com/design/human-interface-guidelines/materials.
62	5. Pointer feedback, not touch feedback: hover, highlight, and lift states on
63	interactive elements (buttons, list rows) — macOS is pointer-driven, so every hoverable
64	control needs a hover state in the mockup and handoff spec, unlike iOS/iPadOS touch-only

People who liked this also viewed

6 picks

Type

design-ios

21stars3forks

View on GitHub

How to install design-ios?

fusengine/agents/design-ios

$npx -y skills add fusengine/agents --skill design-ios

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	## Design iOS/macOS — Mockup and Handoff, Not Code
2
3	### When
4	After `design-system` tokens exist. This skill never writes SwiftUI — it produces a
5	static HTML mockup at exact device/window dimensions plus a spec that `swift-expert` or
6	an Apple-platform developer implements.
7
8	### Input
9	- `design-system.md` — OKLCH palette, typography direction, motion personality.
10	- The screen/flow to mock up and the target platform: iPhone / iPad (iOS) or a resizable
11	window (macOS).
12
13	### Steps — iOS
14
15	1. Map tokens to iOS roles. Typography → Dynamic Type text styles, anchored at Body
16	17pt down to Caption 2 11pt (never fixed point sizes) — see `references/dynamic-type.md`.
17	Colors → semantic color roles (never raw RGB/hex) — see `references/semantic-colors.md`.
18	2. Pick the device viewport(s) from `references/viewports.md` — mock up in exact
19	points at the chosen scale factor.
20	3. Build the HTML mockup: a device-frame `<div>` at the exact viewport dimensions,
21	`viewport-fit=cover` meta tag, `env(safe-area-inset-*)` for notch/Dynamic Island/home
22	indicator spacing. See `references/mockup.md`.
23	4. Apply Liquid Glass where it fits — a floating layer of controls above regular
24	content, not a content background. Two variants: regular (content-aware, the
25	default for controls) and clear (more transparent — dim the content beneath it
26	~35% when clear sits over light content, so controls stay legible). Plus control
27	morphing, concentricity between nested shapes, layered icon treatment. Source:
28	developer.apple.com/design/human-interface-guidelines/materials (Liquid Glass, iOS 26).
29	See `references/liquid-glass.md` — do not invent numeric corner-radius values; none are
30	published.
31	5. Verify touch targets and contrast: 44×44pt minimum touch target (see
32	`references/touch-targets.md`); 4.5:1 minimum contrast in Dark Mode for body text
33	(WCAG AA, HIG-endorsed) — check both light and dark against
34	`references/semantic-colors.md` roles, not a single-mode check.
35	6. Sidebar navigation ≤ 2 levels deep. If the flow needs a 3rd level, restructure
36	(tabs, push navigation, or a secondary sidebar) rather than nesting a 3rd disclosure
37	tier — deeper sidebars are a documented HIG anti-pattern for iPadOS/macOS sidebars.
38	Source: developer.apple.com/design/human-interface-guidelines/layout.
39	7. Write the handoff spec per `references/handoff-swiftui.md`: named tokens only
40	(never raw values), Dynamic Type text styles (never fixed sizes), semantic colors,
41	explicit sizing behavior (fixed/hug/fill) per element, all interaction states
42	(disabled/pressed/focused), spacing in pt.
43
44	### Steps — macOS
45
46	1. Map tokens to macOS text sizes. macOS uses its own fixed scale, distinct from iOS
47	Dynamic Type — confirmed anchors: Large Title 26pt down to body ~13pt, floor
48	Caption 2 ~10pt. Source: developer.apple.com/design/human-interface-guidelines/typography.
49	Gap — do not invent: the full intermediate scale (Title 1–3, Headline, Subhead,
50	Footnote point values) is not confirmed in this pass; reconfirm on the HIG typography
51	page or Xcode's SF font catalog before using an intermediate size verbatim.
52	2. No Dynamic Type on macOS — the platform ships fixed size variants per context
53	(e.g. control sizes: regular/small/mini) instead of a user-adjustable type scale. Pick
54	the variant that matches the control's context, don't apply an iOS Dynamic Type style.
55	3. Never draw a custom window chrome. Title bar, traffic lights, toolbar, and sidebar
56	are system-drawn; the mockup should frame content inside a standard macOS window shape,
57	not invent custom chrome. Source: developer.apple.com/design/human-interface-guidelines/windows.
58	4. Desktop tinting: background materials pick up a subtle tint from the desktop
59	picture/wallpaper behind the window — reflect this as a soft, low-opacity tint layer in
60	the mockup, not a flat opaque background. Source:
61	developer.apple.com/design/human-interface-guidelines/materials.
62	5. Pointer feedback, not touch feedback: hover, highlight, and lift states on
63	interactive elements (buttons, list rows) — macOS is pointer-driven, so every hoverable
64	control needs a hover state in the mockup and handoff spec, unlike iOS/iPadOS touch-only

People who liked this also viewed

6 picks

Type