# Design System Workflow

> Swift Design Systemを使用したiOS UI実装スキル。デザイントークン、UIコンポーネント（Button、Card、Chip、FAB、Snackbar、Picker等15種）、レイアウトパターンのベストプラクティスを提供。「デザイン」「UI」「テーマ」「カラー」「タイポグラフィ」「スペーシング」「ボタン」「カード」「FAB」「Snackbar」「Picker」「SwiftUI」「DesignSystem」などで自動適用。

- Skill: `no-problem-dev/design-system-workflow` (Agent Skill, multi-file: 26 files)
- Install (CLI): `npx skillmds@latest add no-problem-dev/design-system-workflow`
- Raw SKILL.md: https://api.skillmd.com/api/skills/no-problem-dev/design-system-workflow/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media, DevOps & Infra
- Author: no-problem-dev (https://skillmd.com/u/no-problem-dev)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/no-problem-dev/design-system-workflow

---


# Swift Design System スキル

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

---

## 必須依存関係

```swift
// 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](https://github.com/no-problem-dev/swift-design-system/releases) で確認できます。

---

## 設計原則

### 3層トークンシステム

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

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

### Environment経由のアクセス

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

### 型安全性

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

### アクセシビリティ

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

---

## テーマ設定（必須）

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

```swift
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 パターン（代表例）

### カラー

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

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

### タイポグラフィ

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

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

### スペーシング

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

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

### コンポーネント

```swift
// ✅ 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の視覚的差分検出・比較