Design Audit

デザイン監査スキル

既存の SwiftUI View が Swift Design System に準拠しているかを体系的に監査する。

監査手順

1. 対象ファイルを読み込む: View のソースコードを全文読む
2. 6カテゴリで検査: 下記の監査カテゴリを順番に確認
3. 重大度を分類: Critical / Warning / Recommendation に分類
4. レポートを出力: 構造化された監査レポートを生成
5. 修正提案: 自動修正可能な箇所を提示

監査カテゴリ

1. トークン準拠性

ハードコードされた値がないか検出する。

ColorPalette プロパティ一覧（これ以外の Color を使っていたら違反）:

• primary, onPrimary, primaryContainer, onPrimaryContainer
• secondary, onSecondary, secondaryContainer, onSecondaryContainer
• tertiary, onTertiary
• background, onBackground
• surface, onSurface, surfaceVariant, onSurfaceVariant
• error, onError, errorContainer, onErrorContainer
• warning, onWarning, success, onSuccess, info, onInfo
• outline, outlineVariant

SpacingScale 値一覧: none(0), xxs(2), xs(4), sm(8), md(12), lg(16), xl(24), xxl(32), xxxl(48), xxxxl(64)

Typography 一覧: displayLarge(57), displayMedium(45), displaySmall(36), headlineLarge(32), headlineMedium(28), headlineSmall(24), titleLarge(22), titleMedium(16), titleSmall(14), bodyLarge(16), bodyMedium(14), bodySmall(12), labelLarge(14), labelMedium(12), labelSmall(11)

2. コンポーネント使用

カスタム実装が既存コンポーネントで代替できないか確認する。

3. アクセシビリティ

4. テーマ対応

5. Preview カバレッジ

6. 構造品質

重大度レベル

監査レポートフォーマット

# Design System 監査レポート

**対象**: `FileName.swift`
**日時**: YYYY-MM-DD
**スコア**: X / 6 カテゴリ合格

## サマリー

| カテゴリ | 結果 | Critical | Warning | Recommendation |
|---------|------|----------|---------|----------------|
| トークン準拠性 | ✅/❌ | 0 | 0 | 0 |
| コンポーネント使用 | ✅/❌ | 0 | 0 | 0 |
| アクセシビリティ | ✅/❌ | 0 | 0 | 0 |
| テーマ対応 | ✅/❌ | 0 | 0 | 0 |
| Preview カバレッジ | ✅/❌ | 0 | 0 | 0 |
| 構造品質 | ✅/❌ | 0 | 0 | 0 |

## 詳細

### 🔴 Critical

1. **[トークン準拠性]** L15: `.foregroundColor(.red)` → `.foregroundStyle(colors.error)`
2. **[テーマ対応]** L3: `@Environment` 宣言なし → `@Environment(\.colorPalette) private var colors` を追加

### 🟡 Warning

1. **[トークン準拠性]** L22: `.padding(16)` → `.padding(spacing.lg)`

### 🟢 Recommendation

1. **[構造品質]** body が 55 行 → サブView に分割を検討

よくある違反と自動修正

ハードコードカラー → セマンティックカラー

// Before
.foregroundColor(.red)
.background(Color.white)
.foregroundColor(.gray)

// After
.foregroundStyle(colors.error)
.background(colors.surface)
.foregroundStyle(colors.onSurfaceVariant)

直値スペーシング → トークン

// Before
.padding(16)
VStack(spacing: 8) { ... }

// After
.padding(spacing.lg)
VStack(spacing: spacing.sm) { ... }

直接フォント → Typography

// Before
.font(.system(size: 14, weight: .medium))
.font(.title)

// After
.typography(.bodyMedium)
.typography(.titleLarge)

直接アニメーション → Motion トークン

// Before
.animation(.easeOut(duration: 0.1), value: isActive)

// After
.animate(motion.tap, value: isActive)

カスタムカード → Card コンポーネント

// Before
content
    .padding(16)
    .background(Color.white)
    .clipShape(RoundedRectangle(cornerRadius: 12))
    .shadow(color: .black.opacity(0.1), radius: 4, y: 2)

// After
Card(elevation: .level2) {
    content
}

関連スキル

• design-system-workflow: トークン・コンポーネントの詳細リファレンス
• component-gen: 新規コンポーネント生成
• design-diff: 修正前後の視覚的差分
• ios-build-workflow: ビルド・テスト実行