ios-swiftui-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

iOS SwiftUI Generator

iOS SwiftUI 生成器

Generate production-ready SwiftUI code following Apple Human Interface Guidelines.

生成符合Apple人机界面指南（Human Interface Guidelines）的可用于生产环境的SwiftUI代码。

When to Use

适用场景

Creating new SwiftUI views or components
Building iOS UI from design descriptions
Need HIG-compliant code scaffolding
Converting UI concepts to SwiftUI code

创建新的SwiftUI视图或组件
根据设计描述构建iOS界面
需要符合HIG规范的代码脚手架
将UI概念转换为SwiftUI代码

Generation Principles

生成原则

Always Follow

必须遵循

Semantic Colors — Use
```
Color.primary
```
,
```
Color(.systemBackground)
```
, not hex
SF Symbols — Prefer system icons over custom assets
Dynamic Type — Support text scaling with
```
.font(.body)
```
Dark Mode — All colors must work in both modes
Accessibility — Include VoiceOver labels, minimum 44pt touch targets

语义化颜色 — 使用
```
Color.primary
```
、
```
Color(.systemBackground)
```
，而非十六进制颜色
SF Symbols — 优先使用系统图标而非自定义资源
动态字体 — 通过
```
.font(.body)
```
支持文本缩放
深色模式 — 所有颜色需适配明暗两种模式
无障碍访问 — 包含VoiceOver标签，触摸目标最小尺寸为44pt

Code Standards

代码标准

swift

// ✅ Good
struct ExpenseCard: View {
    let expense: Expense

    var body: some View {
        HStack {
            Image(systemName: expense.category.icon)
                .foregroundStyle(.secondary)
                .accessibilityHidden(true)

            VStack(alignment: .leading) {
                Text(expense.title)
                    .font(.headline)
                Text(expense.date, style: .date)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            Spacer()

            Text(expense.amount, format: .currency(code: "USD"))
                .font(.headline)
        }
        .padding()
        .background(Color(.secondarySystemBackground))
        .clipShape(RoundedRectangle(cornerRadius: 12))
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(expense.title), \(expense.amount)")
    }
}

// ❌ Bad
struct ExpenseCard: View {
    var body: some View {
        HStack {
            Image("custom-icon")  // Use SF Symbols
            Text("$50.00")
                .foregroundColor(Color(hex: "#333"))  // Use semantic
        }
        .frame(height: 30)  // Too small for touch
    }
}

swift

// ✅ 良好示例
struct ExpenseCard: View {
    let expense: Expense

    var body: some View {
        HStack {
            Image(systemName: expense.category.icon)
                .foregroundStyle(.secondary)
                .accessibilityHidden(true)

            VStack(alignment: .leading) {
                Text(expense.title)
                    .font(.headline)
                Text(expense.date, style: .date)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            Spacer()

            Text(expense.amount, format: .currency(code: "USD"))
                .font(.headline)
        }
        .padding()
        .background(Color(.secondarySystemBackground))
        .clipShape(RoundedRectangle(cornerRadius: 12))
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(expense.title), \(expense.amount)")
    }
}

// ❌ 不良示例
struct ExpenseCard: View {
    var body: some View {
        HStack {
            Image("custom-icon")  // 应使用SF Symbols
            Text("$50.00")
                .foregroundColor(Color(hex: "#333"))  // 应使用语义化颜色
        }
        .frame(height: 30)  // 触摸目标尺寸过小
    }
}

Component Templates

组件模板

Navigation

Forms

表单

Text fields with validation
Pickers (date, selection, wheel)
Toggles and steppers
Secure fields

带验证的文本字段
选择器（日期、选项、滚轮式）
开关和步进器
安全输入框

Lists

列表

Standard list with sections
Swipe actions
Pull-to-refresh
Empty states

带分区的标准列表
滑动操作
下拉刷新
空状态

Cards & Containers

卡片与容器

Content cards
Grouped backgrounds
Material overlays

内容卡片
分组背景
材质覆盖层

Usage

使用示例

User: Create a settings screen with profile section and preferences

Claude: [Generates SwiftUI code]
- SettingsView with List and sections
- ProfileHeaderView component
- PreferenceRow reusable component
- All using semantic colors and SF Symbols

用户：创建一个包含个人资料板块和偏好设置的设置界面

Claude: [Generates SwiftUI code]
- 带List和分区的SettingsView
- ProfileHeaderView组件
- 可复用的PreferenceRow组件
- 全部使用语义化颜色和SF Symbols

Output Format

输出格式

Generated code includes:

Main view struct
Supporting subviews
Preview provider
Accessibility labels
Usage comments

生成的代码包含：

主视图结构体
辅助子视图
预览提供器
无障碍访问标签
使用说明注释