Design System

iOS Design System

iOS/SwiftUIアプリのデザインシステムをSwiftコードとして構築・管理する。

コード構造

型（構造）と値（インスタンス）を分離した設計。複数テーマの切り替えや比較が可能。

// 統合struct
struct DesignSystem {
    let colors: ColorPalette
    let typography: Typography
    let spacing: SpacingScale
    let cornerRadius: CornerRadiusScale
    let shadow: ShadowScale
    let layout: LayoutConstants
}

// プリセットインスタンス
extension DesignSystem {
    static let `default` = DesignSystem(...)
    static let minimal = DesignSystem(...)
    static let pop = DesignSystem(...)
}

// 使用例
let theme = DesignSystem.default
Text("Hello")
    .font(theme.typography.bodyLarge)
    .foregroundColor(theme.colors.textPrimary)

ワークフロー

ユーザーリクエスト
       │
       ▼
┌──────────────────┐
│ 新規作成 or 分析？│
└────────┬─────────┘
    ┌────┴────┐
    ▼         ▼
 新規作成    既存分析
    │         │
    ▼         ▼
 世界観ヒアリング  コード検索
    │         │
    ▼         ▼
 プリセット選定   パターン抽出
    │         │
    ▼         ▼
 カスタマイズ    整理・提案
    │         │
    └────┬────┘
         ▼
   配置場所の確認
         │
         ▼
   Swiftコード出力

新規作成フロー

Step 1: 世界観のヒアリング

必須確認項目:

• アプリの種類・目的（タスク管理、SNS、EC、ヘルスケア等）
• ターゲットユーザー（年齢層、性別、職業等）
• 求める雰囲気・印象（キーワード）

雰囲気キーワード例:

Step 2: プリセット選定とカスタマイズ

1. references/style-presets.md から最適なプリセットを選定
2. ユーザーの要件に合わせてカラー・フォントを調整
3. ブランドカラーがある場合は組み込む

Step 3: 配置場所の確認

ファイルを配置する場所をユーザーに確認する。

選択肢:

確認事項:

• 既存のプロジェクト構成（ターゲット一覧、フォルダ構造）
• 他のターゲットからの参照が必要か
• Swift Package として管理するか

Step 4: コード生成

assets/templates/ のテンプレートをベースにカスタマイズ。

生成するファイル構成

DesignSystem/
├── DesignSystem.swift    # 統合struct + テーマインスタンス
├── Colors.swift          # ColorPalette struct
├── Typography.swift      # Typography struct
├── Spacing.swift         # SpacingScale, CornerRadiusScale, ShadowScale
└── Components/
    ├── ButtonStyles.swift
    └── TextFieldStyles.swift

配置場所によって、アクセス修飾子（public）の付与やモジュールインポートの設定が変わる。

複数テーマの作成例

// カスタムテーマの定義
extension DesignSystem {
    static let myBrand = DesignSystem(
        colors: ColorPalette(
            primaryBrand: Color(hex: "FF6B6B"),
            // ...
        ),
        typography: .rounded,
        spacing: .default,
        cornerRadius: .rounded,
        shadow: .default,
        layout: .default
    )
}

// テーマ切り替え
struct ContentView: View {
    @State private var theme = DesignSystem.default

    var body: some View {
        VStack {
            Text("Title").font(theme.typography.displayLarge)
            Button("Switch Theme") {
                theme = (theme === .default) ? .myBrand : .default
            }
            .buttonStyle(PrimaryButtonStyle(theme: theme))
        }
    }
}

既存コード分析フロー

1. コード検索: Color, Font, .padding, .cornerRadius などの使用箇所を検索
2. パターン抽出: 使われている値を収集・分類
3. 整理・提案: 一貫性のある DesignSystem として再構成を提案

リファレンス

出力規約

• 型と値を分離（struct定義 + static インスタンス）
• 全ての値に明確な命名規則を適用（semantic naming）
• SwiftUI の標準パターンに準拠
• ダークモード対応を考慮
• 注入方法（Environment等）はアプリ側で決定
• Preview は #Preview マクロではなく PreviewProvider を使用する（テーマ配列の拡張性のため）

// ✅ 正しい: PreviewProvider を使用
struct DesignSystem_Previews: PreviewProvider {
    static var themes: [DesignSystem] = [.default, .minimal, .pop]

    static var previews: some View {
        ForEach(themes, id: \.name) { theme in
            DesignSystemPreview(theme: theme)
                .previewDisplayName(theme.name)
        }
    }
}

// ❌ 間違い: #Preview マクロは使わない
#Preview("Theme") {
    DesignSystemPreview(theme: .default)
}