no-problem-dev/design-system-workflow

Swift Design System スキル

no problem製iOSアプリのUI実装に必須のデザインシステム。一貫性のあるUIを効率的に構築するためのトークン・コンポーネント・パターンを提供。

---

必須依存関係

// Package.swift
dependencies: [
    .package(url: "https://github.com/no-problem-dev/swift-design-system.git", from: "X.X.X")
]

// ターゲット
.target(
    name: "YourApp",
    dependencies: [
        .product(name: "DesignSystem", package: "swift-design-system")
    ]
)

Note: X.X.X には最新バージョンを指定してください。 最新バージョンは GitHub Releases で確認できます。

---

設計原則

3層トークンシステム

Primitive Tokens (基本値) - 直接使用禁止
    ↓ 参照
Semantic Tokens (意味的トークン) - 推奨
    ↓ 参照
Component Tokens (コンポーネント固有) - 自動適用

重要: Primitiveトークンは直接使用せず、必ずSemantic/Componentトークンを使用すること。

Environment経由のアクセス

@Environment(\.colorPalette) var colors
@Environment(\.spacingScale) var spacing
@Environment(\.radiusScale) var radius
@Environment(\.motion) var motion

型安全性

プロトコルベースの設計により、カスタムテーマ・トークンの拡張が可能。

アクセシビリティ

• WCAG AAA準拠のコントラスト
• reduce motion設定の自動尊重
• Dynamic Type対応

---

テーマ設定（必須）

アプリ起動時に必ずThemeProviderを設定:

import DesignSystem

@main
struct MyApp: App {
    @State private var themeProvider = ThemeProvider()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .theme(themeProvider)  // 必須
        }
    }
}

詳細は → references/patterns/THEME.md

---

Good / Bad パターン（代表例）

カラー

// ✅ Good: セマンティックカラーを使用
Text("エラー").foregroundColor(colors.error)

// ❌ Bad: ハードコードされた色
Text("エラー").foregroundColor(.red)

タイポグラフィ

// ✅ Good: typographyモディファイアを使用
Text("見出し").typography(.headlineLarge)

// ❌ Bad: 直接フォント指定
Text("見出し").font(.system(size: 32, weight: .semibold))

スペーシング

// ✅ Good: スペーシングトークンを使用
VStack(spacing: spacing.lg) { ... }

// ❌ Bad: マジックナンバー
VStack(spacing: 16) { ... }

コンポーネント

// ✅ Good: デザインシステムのコンポーネントを使用
Card(elevation: .level2) { content }

// ❌ Bad: 独自実装
RoundedRectangle(cornerRadius: 8)
    .fill(Color.white)
    .shadow(radius: 4)

---

リファレンス索引

デザイン実装時は、該当するリファレンスを参照してください。

デザイントークン

すべてのUI実装で必須の知識

→ references/TOKENS.md

• Color（カラーパレット）
• Typography（タイポグラフィ）
• Spacing（スペーシング）
• Radius（角丸）
• Motion（アニメーション）
• Elevation（エレベーション）
• GridSpacing（グリッド間隔）

---

コンポーネント

| コンポーネント | 用途 | リファレンス | |--------------|------|-------------| | Button | アクションボタン | → references/components/BUTTON.md | | Card | コンテンツコンテナ | → references/components/CARD.md | | Chip | タグ、フィルター | → references/components/CHIP.md | | FAB | 浮遊アクションボタン | → references/components/FAB.md | | Snackbar | 一時的通知 | → references/components/SNACKBAR.md | | IconPicker | SF Symbols選択 | → references/components/ICON_PICKER.md | | EmojiPicker | 絵文字選択 | → references/components/EMOJI_PICKER.md | | ColorPicker | カラー選択 | → references/components/COLOR_PICKER.md | | ImagePicker | 画像選択 | → references/components/IMAGE_PICKER.md | | IconButton | アイコンボタン | → references/components/ICON_BUTTON.md | | TextField | テキスト入力 | → references/components/TEXT_FIELD.md | | ProgressBar | プログレスバー | → references/components/PROGRESS_BAR.md | | StatDisplay | 数値表示 | → references/components/STAT_DISPLAY.md | | IconBadge | アイコンバッジ | → references/components/ICON_BADGE.md | | VideoPlayer | 動画再生 | → references/components/VIDEO_PLAYER.md |

---

レイアウトパターン

| パターン | 用途 | リファレンス | |---------|------|-------------| | Theme | テーマ設定・切り替え | → references/patterns/THEME.md | | AspectGrid | アスペクト比統一グリッド | → references/patterns/ASPECT_GRID.md | | SectionCard | タイトル付きカードセクション | → references/patterns/SECTION_CARD.md |

---

Visual Feedback Loop

UIの視覚的検証には Swift Snapshot Testing を使用する。

ワークフロー

1. SwiftUI View を作成/修正
2. スナップショットテストを実行（xcodebuild test）
3. 生成されたスナップショット画像を確認
4. 問題があればコードを修正して繰り返し

詳細は → references/VISUAL_LOOP.md

参照ドキュメント

| ドキュメント | 内容 | |-------------|------| | references/AESTHETIC.md | 美的方向性ガイド（AIスロップ回避、Apple HIG） | | references/PREVIEW_PATTERNS.md | SwiftUI Preview ベストプラクティス | | references/VISUAL_LOOP.md | Visual Feedback Loop 実践ガイド | | references/DESIGN_SYSTEM_CONTEXT.md | デザインシステム全体リファレンス | | references/CLAUDE_MD_TEMPLATE.md | CLAUDE.md デザインセクションテンプレート | | references/VIEW_VERIFICATION_TESTS.md | スナップショットテスト テンプレート |

---

関連スキル

• ios-clean-architecture: アーキテクチャ設計（View層で本スキルを活用）
• ios-build-workflow: ビルド・テスト実行
• component-gen: デザインシステム準拠のコンポーネント生成
• design-audit: 既存UIのデザインシステム準拠性監査
• design-diff: UIの視覚的差分検出・比較