ios-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

iOS Development

iOS开发

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.

打造独具特色、足以斩获苹果设计奖的iOS界面。本技能可生成真实可用的SwiftUI代码，格外注重美学细节与创意选择，避免生成千篇一律的AI风格设计。

用户提供iOS开发需求：待开发的屏幕、组件、视图或者界面，也可能包含界面用途、目标用户、技术约束等上下文信息。

Design Thinking

设计思路

Before writing ANY code, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick a direction: calm/serene, playful/energetic, premium/refined, utilitarian/focused, editorial/magazine, brutalist/raw, warm/organic, cold/technical. Commit fully.
Inspiration: Which Apple apps set the bar? (Weather, Health, Fitness, Notes, Apple TV, Journal)
Differentiation: What makes this UNFORGETTABLE? What's the one thing users will remember?
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

编写任何代码之前，先充分理解上下文，敲定一个清晰鲜明的美学方向：

用途：这个界面要解决什么问题？面向哪些用户？
风格：选定方向：calm/serene（静谧舒缓）、playful/energetic（活泼活力）、premium/refined（高端精致）、utilitarian/focused（实用聚焦）、editorial/magazine（杂志编辑风）、brutalist/raw（粗粝野兽派）、warm/organic（温暖有机）、cold/technical（冷峻科技风），选定后全程贯彻。
参考方向：以哪款苹果官方应用为标杆？（天气、健康、健身、备忘录、Apple TV、日记）
差异化：这个界面的记忆点是什么？用户最容易记住的一个特点是什么？
玻璃效果设计原则：玻璃效果是用来框住内容，还是会和内容产生视觉冲突？

重要提示：选定清晰的概念方向后精准落地。大胆的极繁主义和精致的极简主义都可行，核心是设计意图明确，而非视觉元素的多寡。

接下来实现可用的SwiftUI代码，要求满足：

生产级质量，功能完备
视觉冲击力强，令人印象深刻
风格统一，具备清晰的美学主张
每个细节都经过精细打磨

Anti-Patterns: What to Avoid

反模式：需要避免的设计

These are hallmarks of generic AI-generated iOS design. NEVER do these:

Anti-Pattern	Why It's Bad	Instead
Boring solid backgrounds	No depth or atmosphere	Gradients, subtle textures, or layered colors
System fonts everywhere	No typographic intention	Intentional hierarchy, consider display fonts
Cookie-cutter tab bars	No personality	Custom styling, meaningful icons
Purple/indigo gradients	Quintessential AI slop	Find a distinctive, contextual palette
Flat, lifeless interactions	No delight	Haptics, spring animations, feedback
Glass on everything	Defeats the purpose	Glass only for controls/navigation layer
Ignoring content layer	Glass where it doesn't belong	Glass frames content, never obscures
Generic card layouts	White rectangles with shadows	Context-specific, purposeful containers
Emojis as design elements	Lazy, unprofessional	SF Symbols, custom assets
Evenly distributed colors	Timid, uncommitted	Dominant color with sharp accents

这些是通用AI生成iOS设计的典型问题，绝对不要出现：

反模式	问题所在	优化方案
单调的纯色背景	没有层次感和氛围感	渐变、微妙纹理或者分层色彩
全页面使用系统字体	没有排版设计意识	设计明确的排版层级，可考虑使用展示字体
千篇一律的标签栏	没有个性	自定义样式，使用有意义的图标
紫色/靛蓝色渐变	典型的AI生成劣质设计	选用贴合场景的独特配色方案
扁平、无生机的交互效果	缺少愉悦感	触觉反馈、弹性动画、操作反馈
所有元素都加玻璃效果	违背玻璃效果的设计初衷	仅在控件/导航层使用玻璃效果
忽视内容层	在不适合的区域使用玻璃效果	玻璃效果用于框住内容，绝对不能遮挡内容
通用卡片布局	带阴影的白色矩形	贴合场景、有明确用途的容器设计
将Emoji作为设计元素	偷懒、不专业	使用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动画是现在的默认选择。状态之间采用渐变过渡，而非直接切换。所有有意义的交互都添加触觉反馈。使用
```
.bouncy
```
而非
```
.easeInOut
```
。
空间布局：间距设置合理（遵循8pt网格）。需要留白的区域留出足够呼吸空间，需要高密度展示信息的区域保证紧凑。圆角半径和设备硬件保持一致。
背景与层次感：营造氛围感。可使用渐变、微妙分层、径向光晕。除非是刻意的极简设计，否则不要使用纯白色背景。

The Three Principles

三大原则

Principle	Description
Hierarchy	Controls float above content. Glass frames, never obscures. Content is king.
Harmony	Software design aligns with hardware. Concentric corners. Fluid gestures.
Consistency	Adapt 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

// 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))

Font Recommendations

字体推荐

Use Case	Options
Display	SF Pro Display, New York, custom serif
Body	SF Pro Text (system), custom sans
Technical	SF Mono, custom monospace
Editorial	New 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

不要均匀分配色彩。选择：

1种主色调 定义品牌/氛围
醒目的强调色 用于操作按钮和高亮内容
中性基底色 保证内容可读性

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

// Semantic colors that adapt
.foregroundStyle(.primary)
.foregroundStyle(.secondary)
.background(.background)

// Accent with purpose
.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的推荐位上
- 它看起来像是苹果官方营销材料里的内容

这就是质量标准：**值得分享，足以获奖**。

Quality Checklist

质量检查清单

The Mandate

要求

Remember: Claude is capable of extraordinary creative work. Don't settle for "working." Push for memorable.

Every interface should have:

A point of view - A clear aesthetic direction
Intentional details - Nothing accidental
Emotional resonance - Users feel something
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有能力完成非常出色的创意工作。不要满足于“能跑就行”，要追求令人印象深刻。

每个界面都应该具备：

明确的主张 - 清晰的美学方向
精心设计的细节 - 没有偶然出现的元素
情感共鸣 - 用户能感知到设计的温度
技术卓越 - 流畅、高性能、支持无障碍

目标是打造足以获得苹果设计奖的应用——一款真正经过设计，而非生成的应用。

ios-dev

Original

Translation

iOS Development

iOS开发

Design Thinking

设计思路

Anti-Patterns: What to Avoid

反模式：需要避免的设计

iOS Aesthetics Guidelines

iOS美学指南

The Three Principles

三大原则

Required Reading

必读参考

Typography That Speaks

有表现力的排版

Font Recommendations

字体推荐

Color with Intention

有明确意图的色彩设计

Dominant + Accent

主色调+强调色

Dark Mode First

优先设计深色模式

Development Loop: Screenshot-Driven Iteration

开发循环：截图驱动迭代

Screenshot simulator

Screenshot simulator

Quality Checklist

质量检查清单

The Mandate

要求

Related Skills

相关技能