iOS Taste

iOS Taste

Taste doesn't start at the pixel level. It starts at "who is this person and what do they need?" The visual refinement is the LAST step. The first step is understanding the user's world deeply enough that the interface design feels inevitable — like it couldn't have been designed any other way.

Your default mode skips straight to layout. It produces technically correct SwiftUI that looks generic because it was never grounded in a real person's needs. This skill changes the order of operations: think like a designer first, then write code.

Phase 0: The 0.5-Second Test (ORIENT before everything)

Before designing anything, answer ONE question:

What does the user SEE in the first half-second — before they read a single word?

This is not about content. It's about the SHAPE of the screen. Close your eyes and picture it. What dominates?

• A ring at 40% of screen height? → Fitness dashboard
• A gradient card with bold white text? → Music/travel/content
• A large number floating in space? → Finance/health metric
• A grid of thumbnails? → Photo/recipe/shopping collection
• A clean form with generous space? → Settings/profile

If your answer is "a List with rows of text" → STOP. That's a spreadsheet, not an app. Go back and find the visual shape.

Write the 0.5-second answer as the FIRST line of the experience brief:

// 0.5s: Four warm gradient cards stacked on black — a cookbook

This single sentence anchors every decision that follows. If the code you write doesn't produce that shape, something went wrong.

Phase 1: Design Thinking (Before You Touch SwiftUI)

Before writing a single line of code, answer these questions. Write the answers down as comments or in your thinking. If you skip this phase, your output will look like every other AI-generated UI — correct but soulless.

1. Who is the user?

Not "a fitness enthusiast." A real person with a context:

• What moment are they in when they open this screen? (Rushing between meetings? Relaxing on the couch? Mid-workout?)
• What did they just do before arriving here? (Finished a run? Browsed a list? Got a notification?)
• What do they want to accomplish in under 10 seconds?

This shapes EVERYTHING. A user mid-workout needs giant tap targets and glanceable data. A user browsing recipes at home wants rich detail and discovery. A user configuring settings wants to find the one toggle they care about and leave.

2. What should they FEEL?

This is the question that separates designed apps from information displays. Apple Fitness doesn't show you data — it motivates you to move. Every design choice serves that emotional goal.

Before choosing components, decide the emotional intent:

• Motivated → bold colors, progress visualization, celebration moments, large achievement numbers
• Calm / focused → muted tones, generous space, subtle motion
• Efficient → compact layouts, clear hierarchy, minimal chrome
• Delighted → unexpected animation, rich materials, playful moments (achievement badges, confetti, 3D icons)
• Confident → clean data presentation, trust colors (blue/green), professional typography

The emotional intent drives every visual decision downstream: color palette, scale, spacing, whether data is listed or visualized, whether the screen feels dense or spacious.

3. What are their goals and pain points?

For each screen, identify:

• Primary goal — the ONE thing most users come here to do
• Secondary goals — things some users occasionally need
• Pain points — what frustrates users in this domain?

A fitness settings screen: the primary goal isn't "see all settings." It's "change the one thing that's been bugging me" — maybe the weekly goal is too low, or notifications come at the wrong time. The pain point is wading through 30 options to find the one they need.

3. What features serve those goals?

Map goals to features. Not "what features could this screen have?" but "what's the minimum set of features that makes the primary goal effortless?" Every feature that doesn't serve a goal is clutter.

Group features by priority:

• Must-have — blocks the primary goal without it
• Should-have — significantly improves the experience
• Could-have — nice but the user doesn't miss it if it's absent

4. How do features become screens?

This is information architecture — deciding what goes where:

• One primary action per screen. If a screen tries to do two things, split it into two screens or use progressive disclosure.
• Group by user intent, not by data type. A user doesn't think "I want to see my notification settings." They think "I want my phone to stop buzzing during workouts." Group features by the problem they solve, not by their technical category.
• Navigation follows the user's mental model. Settings → Profile is obvious. Settings → "Health Integrations" → Apple Health → Data Permissions is three levels deep for something the user sets once. Consider whether it needs its own screen or can be inline.

5. What components serve each feature?

NOW you think about SwiftUI — but through the lens of user intent:

• Toggle vs Picker — if the choice is binary, use Toggle. If there are 3+ options, use Picker. If the options need explanation, use a navigation link to a selection screen.
• Stepper vs Slider — steppers for precise numeric values (1, 2, 3 reps). Sliders for ranges where the exact value matters less (brightness, volume, a weekly hour target).
• Inline vs Push navigation — show detail inline when it's 1-2 lines. Push to a new screen when the detail is rich enough to deserve its own context.
• Sheet vs Push — sheets for self-contained tasks (compose, edit profile, filter). Push for drilling into hierarchical content.
• List vs ScrollView — List for homogeneous collections (contacts, settings, messages). ScrollView for heterogeneous layouts (a recipe detail with hero image, ingredients, and steps).

The component choice IS the design. A slider for a weekly workout goal feels exploratory and forgiving. A stepper for the same value feels precise and clinical. Neither is wrong — the right choice depends on who the user is and what moment they're in.

Phase 2: Visual Design

After Phase 1, you know who the user is, what they need, how they should feel, and what components serve those needs. Now make it beautiful. The emotional intent from Phase 1 drives every choice here.

1. Hierarchy Through Scale

Not just font weight — dramatic scale contrast. The most important thing on screen should be physically large, not just bold.

• Hero numbers at display scale — a calorie count, a step count, a price should dominate the screen. Use .system(size: 64) or .largeTitle with .fontDesign(.rounded). Apple Fitness shows "120" as 40% of the screen. Don't shrink important data into a row.
• Supporting text whispers — everything that isn't the hero element gets .caption or .footnote in .secondary. The contrast between the hero and the support IS the hierarchy.
• Space as luxury — leave empty areas. A number floating in a sea of black or white is more powerful than the same number crammed into a dense list. Space communicates importance.

2. Color Is Math, Not Vibes

NEVER pick colors by hand. Color harmony is a solved mathematical problem. This skill bundles a palette generator that computes every color from a single seed hue — analogous harmony, WCAG contrast validated, light and dark mode variants.

Before writing any view code, run the palette generator:

python scripts/generate_palette.py \
  --seed <hue-degrees> \
  --mode both \
  --items <collection-count> \
  --app "App Name"

Seed hue guide:

• 0–30° = warm (cooking, social, dating)
• 30–60° = golden (finance, productivity)
• 60–150° = green (health, fitness, nature)
• 150–210° = cyan/teal (tech, communication)
• 210–270° = blue (trust, business, weather)
• 270–330° = purple (creative, music, luxury)
• 330–360° = pink/red (energy, food)

Include the generated enum Palette { ... } at the top of your Swift file and use ONLY those colors. The palette is computed — every color is mathematically related to the seed, contrast ratios are pre-validated, and light/dark mode variants are included.

Rules that never break:

• One seed hue per app. Everything derives from it.
• Collections use analogous variations (the --items flag), not random hues. They sit together because they're ±30° of seed.
• Never use Color.red, .green, .blue as palette colors — those are semantic system colors for status indicators.
• Use Palette.primary, Palette.cardBackground, etc. — not ad-hoc Color(hue:) calls scattered through the view code.

3. Show Data, Don't List It

When data is the content (fitness metrics, financial stats, progress), VISUALIZE it instead of putting it in a label:

• Rings and gauges for progress toward a goal
• Sparkline charts for trends over time
• Large hero numbers with unit labels in small caps
• Color-coded bars for composition (macro nutrients, time split)

A LabeledContent("Steps", value: "8,432") is information. A large "8,432" in .title with a sparkline below it is an experience. The emotional intent from Phase 1 tells you which one to use.