Back to Details

ios-ui-craft

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

iOS UI Craft

iOS UI 精雕细琢

Create distinctive, Apple Design Award-worthy iOS interfaces. This skill produces real, working SwiftUI code with exceptional attention to aesthetic details and creative choices that avoid generic AI-generated aesthetics.
The user provides iOS requirements: a screen, component, view, or interface to build. They may include context about the purpose, audience, or technical constraints.
打造独具特色、具备Apple Design Award水准的iOS界面。本技能可生成真正可用的SwiftUI代码，同时高度重视美学细节与创意选择，避免生成通用化AI风格的界面。
用户需提供iOS需求：要构建的屏幕、组件、视图或界面，还可补充用途、受众或技术限制等背景信息。

Design Thinking

设计思路

Before writing ANY code, understand the context and commit to a BOLD aesthetic direction:
  1. Purpose: What problem does this interface solve? Who uses it?
  2. Tone: Pick a direction: calm/serene, playful/energetic, premium/refined, utilitarian/focused, editorial/magazine, brutalist/raw, warm/organic, cold/technical. Commit fully.
  3. Inspiration: Which Apple apps set the bar? (Weather, Health, Fitness, Notes, Apple TV, Journal)
  4. Differentiation: What makes this UNFORGETTABLE? What's the one thing users will remember?
  5. Glass Philosophy: Is glass framing content or would it compete with it?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is intentionality, not intensity.
Then implement working SwiftUI code that is:
  • Production-grade and functional
  • Visually striking and memorable
  • Cohesive with a clear aesthetic point-of-view
  • Meticulously refined in every detail
在编写任何代码之前，先理解背景并确定明确的大胆美学方向：
  1. 用途：该界面解决什么问题？面向哪些用户？
  2. 基调：选择一个方向：平静/舒缓、活泼/充满活力、高端/精致、实用/专注、编辑/杂志风、粗粝/原始、温暖/自然、冷峻/科技感。坚定执行所选方向。
  3. 灵感来源：哪些Apple应用树立了标杆？（天气、健康、健身、备忘录、Apple TV、日记）
  4. 差异化：什么让这个界面令人难忘？用户会记住哪一点？
  5. 玻璃态理念：玻璃态是为内容做框架，还是会与内容产生冲突？
关键要求：选择清晰的概念方向并精准执行。大胆的极简主义和精致的极简主义都可行——核心是目的性，而非强度。
随后实现符合以下要求的可运行SwiftUI代码：
  • 生产级且功能完整
  • 视觉冲击力强且令人难忘
  • 风格统一，具备明确的美学视角
  • 每一处细节都经过精心打磨

Anti-Patterns: What to Avoid

反模式：需规避的做法

These are hallmarks of generic AI-generated iOS design. NEVER do these:
Anti-PatternWhy It's BadInstead
Boring solid backgroundsNo depth or atmosphereGradients, subtle textures, or layered colors
System fonts everywhereNo typographic intentionIntentional hierarchy, consider display fonts
Cookie-cutter tab barsNo personalityCustom styling, meaningful icons
Purple/indigo gradientsQuintessential AI slopFind a distinctive, contextual palette
Flat, lifeless interactionsNo delightHaptics, spring animations, feedback
Glass on everythingDefeats the purposeGlass only for controls/navigation layer
Ignoring content layerGlass where it doesn't belongGlass frames content, never obscures
Generic card layoutsWhite rectangles with shadowsContext-specific, purposeful containers
Emojis as design elementsLazy, unprofessionalSF Symbols, custom assets
Evenly distributed colorsTimid, uncommittedDominant color with sharp accents
这些是通用AI生成iOS设计的典型特征。绝对不要这么做：
反模式问题所在正确做法
乏味的纯色背景缺乏深度与氛围感使用渐变、微妙纹理或分层色彩
处处使用系统字体无排版目的性构建清晰的层级，考虑使用显示字体
千篇一律的标签栏缺乏个性自定义样式，使用有意义的图标
紫色/靛蓝色渐变AI生成内容的典型劣质特征选择独特且贴合场景的配色方案
平淡无生气的交互缺乏愉悦感添加触觉反馈、弹性动画和交互反馈
所有元素都用玻璃态违背玻璃态的设计初衷仅为控件/导航层使用玻璃态
忽略内容层在不合适的地方使用玻璃态玻璃态为内容做框架，绝不遮挡内容
通用卡片布局带阴影的白色矩形毫无特色使用贴合场景、有明确用途的容器
用表情符号作为设计元素偷懒且不专业使用SF Symbols或自定义资源
颜色均匀分布过于保守、缺乏决心主色调搭配鲜明的强调色

iOS Aesthetics Guidelines

iOS美学指南

Focus on:
  • Typography: Create clear hierarchy. Display fonts for impact, proper weight progression. Don't default to system everywhere—make intentional choices. Consider SF Pro Display for headers, custom fonts for brand identity.
  • Color & Theme: Commit to a cohesive aesthetic. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Dark mode often produces more distinctive results. Design dark first, then adapt to light.
  • Motion: Spring/bouncy animations are the new default. Morph between states, don't swap. Add haptics to every meaningful interaction. Use 
    .bouncy
    not 
    .easeInOut
    .
  • Spatial Composition: Intentional spacing (8pt grid). Breathing room where needed, density where appropriate. Concentric corners that match device hardware.
  • Backgrounds & Depth: Create atmosphere. Gradients, subtle layers, radial glows. Never flat white unless that's a deliberate minimal choice.
重点关注：
  • 排版：构建清晰的层级。使用显示字体增强冲击力，合理设置字体权重递进。不要处处默认使用系统字体——做出有目的性的选择。标题可考虑使用SF Pro Display，品牌识别可使用自定义字体。
  • 色彩与主题：坚持统一的美学风格。主色调搭配鲜明强调色的效果远优于保守的均匀配色。深色模式往往能打造更具特色的效果。先设计深色模式，再适配浅色模式。
  • 动效：弹性动画是当前的默认选择。在状态间进行形态转换，而非直接切换。为每一次有意义的交互添加触觉反馈。使用
    .bouncy
    而非
    .easeInOut
    。
  • 空间布局：有目的性的间距（8pt网格）。在需要的地方留足呼吸空间，在合适的地方增加密度。圆角弧度与设备硬件保持一致。
  • 背景与深度：营造氛围感。使用渐变、微妙分层、径向发光效果。除非是刻意选择极简风格，否则绝不使用纯平白色背景。

The Three Principles

三大原则

PrincipleDescription
HierarchyControls float above content. Glass frames, never obscures. Content is king.
HarmonySoftware design aligns with hardware. Concentric corners. Fluid gestures.
ConsistencyAdapt fluidly across iPhone, iPad, Mac. Same identity, contextual expression.
原则描述
层级控件悬浮于内容之上。玻璃态作为框架，绝不遮挡内容。内容至上。
和谐软件设计与硬件保持一致。圆角弧度匹配设备。手势流畅自然。
一致性在iPhone、iPad、Mac间流畅适配。保持统一的品牌识别，同时根据场景调整表现形式。

Required Reading

必读资料

Before implementing, read the shared Liquid Glass reference for API patterns:
skills/ios-liquid-glass/
 - Core Liquid Glass API, code patterns, navigation patterns, animation philosophy, haptics
This reference contains the technical implementation details. This skill provides the aesthetic vision; the reference provides the code patterns.
在实现之前，请阅读共享的Liquid Glass参考文档以了解API模式：
skills/ios-liquid-glass/
 - 核心Liquid Glass API、代码模式、导航模式、动画理念、触觉反馈
该参考文档包含技术实现细节。本技能提供美学愿景，参考文档提供代码模式。

Typography That Speaks

有表现力的排版

Don't default to system fonts for everything. Create typographic hierarchy:
swift
// Display fonts for headers
Text("Dashboard")
    .font(.largeTitle.bold())
    .foregroundStyle(.primary)

// Secondary information
Text("Last updated 5 min ago")
    .font(.subheadline)
    .foregroundStyle(.secondary)

// Consider custom fonts for brand identity
Text("Premium")
    .font(.custom("PlayfairDisplay-Bold", size: 32))
不要处处默认使用系统字体。构建排版层级：
swift
// 标题使用显示字体
Text("Dashboard")
    .font(.largeTitle.bold())
    .foregroundStyle(.primary)

// 次要信息
Text("Last updated 5 min ago")
    .font(.subheadline)
    .foregroundStyle(.secondary)

// 品牌识别可考虑使用自定义字体
Text("Premium")
    .font(.custom("PlayfairDisplay-Bold", size: 32))

Font Recommendations

字体推荐

Use CaseOptions
DisplaySF Pro Display, New York, custom serif
BodySF Pro Text (system), custom sans
TechnicalSF Mono, custom monospace
EditorialNew York, custom serif with character
使用场景可选字体
标题SF Pro Display、New York、自定义衬线字体
正文SF Pro Text（系统字体）、自定义无衬线字体
技术类内容SF Mono、自定义等宽字体
编辑类内容New York、有特色的自定义衬线字体

Color with Intention

有目的性的色彩运用

Dominant + Accent

主色调 + 强调色

Don't distribute color evenly. Choose:
  • One dominant that defines the brand/mood
  • Sharp accents for actions and highlights
  • Neutral base for content readability
不要均匀分布色彩。选择：
  • 一种主色调：定义品牌/氛围
  • 鲜明的强调色：用于操作和高亮
  • 中性底色：保证内容可读性

Dark Mode First

优先设计深色模式

Dark mode often produces more distinctive results. Design dark, then adapt to light.
swift
// Semantic colors that adapt
.foregroundStyle(.primary)
.foregroundStyle(.secondary)
.background(.background)

// Accent with purpose
.tint(.accentColor)
深色模式往往能打造更具特色的效果。先设计深色模式，再适配浅色模式。
swift
// 自适应的语义化颜色
.foregroundStyle(.primary)
.foregroundStyle(.secondary)
.background(.background)

// 有目的性地使用强调色
.tint(.accentColor)

Development Loop: Screenshot-Driven Iteration

开发循环：基于截图的迭代

Never submit UI work without visually verifying it. Use the screenshot script to iterate until the screen is both functional and beautiful.
bash
undefined
绝不提交未经过视觉验证的UI作品。 使用截图脚本进行迭代，直到界面既功能完整又美观。
bash
undefined

Screenshot simulator

截取模拟器屏幕

xcrun simctl io booted screenshot /tmp/screenshot.png && sips --resampleHeightWidthMax 1800 /tmp/screenshot.png

**The loop:**
1. **Implement** your changes
2. **Screenshot** the simulator
3. **Evaluate** critically — is this share-worthy?
4. **Iterate** if not — fix and screenshot again

**Keep iterating until:**
- You'd proudly screenshot it to show a friend
- It could appear in an App Store feature
- It feels like it belongs on Apple's marketing materials

This is the quality bar: **share-worthy, award-worthy**.
xcrun simctl io booted screenshot /tmp/screenshot.png && sips --resampleHeightWidthMax 1800 /tmp/screenshot.png

**循环流程：**
1. **实现**你的修改
2. **截取**模拟器屏幕
3. **批判性评估**——这个界面值得分享吗？
4. **迭代优化**（如果不值得）——修复后再次截图

**持续迭代直到：**
- 你愿意自豪地截图展示给朋友
- 它有资格出现在App Store推荐中
- 它看起来像是Apple营销材料中的一部分

这就是质量标准：**值得分享、具备获奖水准**。

Quality Checklist

质量检查表

Before considering UI complete:
  • Committed to a clear aesthetic direction (not generic)
  • Glass applied only to navigation layer (not content)
  • Haptics on all meaningful interactions
  • Spring/bouncy animations (not linear)
  • SF Symbols (not emojis or random icons)
  • Dark mode tested and polished
  • Typography hierarchy clear and intentional
  • Colors are purposeful, not default blue
  • Morphing transitions where applicable
  • Loading states animated
  • Empty states designed
  • Error states helpful and styled
  • Accessibility settings respected
  • Screenshot taken and visually verified
  • Would I screenshot this to show someone? (If no, iterate)
在认为UI完成之前，请确认：
  • 已确定明确的美学方向（非通用化）
  • 玻璃态仅应用于导航层（非内容层）
  • 所有有意义的交互都添加了触觉反馈
  • 使用弹性动画（非线性动画）
  • 使用SF Symbols（非表情符号或随机图标）
  • 已测试并优化深色模式
  • 排版层级清晰且有目的性
  • 色彩运用有明确意图，非默认蓝色
  • 适用场景下使用形态转换过渡动画
  • 加载状态已添加动画
  • 空状态已设计
  • 错误状态信息有用且经过样式设计
  • 已适配无障碍设置
  • 已截取屏幕并完成视觉验证
  • 我是否愿意截图展示给他人？（如果不愿意，继续迭代）

The Mandate

核心要求

Remember: Claude is capable of extraordinary creative work. Don't settle for "working." Push for memorable.
Every interface should have:
  1. A point of view - A clear aesthetic direction
  2. Intentional details - Nothing accidental
  3. Emotional resonance - Users feel something
  4. Technical excellence - Smooth, performant, accessible
The goal is an app worthy of an Apple Design Award—an app that feels genuinely designed, not generated.
请记住：Claude能够完成非凡的创意工作。不要满足于“能用”。追求令人难忘的效果。
每个界面都应具备：
  1. 明确的视角——清晰的美学方向
  2. 有目的性的细节——无任何随意设计
  3. 情感共鸣——能让用户产生情感反馈
  4. 技术卓越——流畅、高性能、无障碍
目标是打造一款具备Apple Design Award水准的应用——一款看起来是精心设计、而非AI生成的应用。

Related Skills

相关技能

  • /ios-dev
     - Start here for any iOS task — coordinates guides, correctness checks, and API references
  • /ios-design-consultant
     - For design questions before coding
  • /ios-dev
    ——任何iOS任务的起点——协调指南、正确性检查和API参考
  • /ios-design-consultant
    ——用于编写代码前的设计咨询