메뉴
UIの視覚的差分を検出・比較する。デザイン変更前後の比較、リファレンスとの差分確認時に使用。「デザイン比較」「UI差分」「design diff」「design compare」「ビフォーアフター」「見た目の違い」などのキーワードで自動適用。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
AI QA Agent のメインオーケストレーター。テストスイートまたは個別テストケースの QA を段階的に実行する。フェーズスキルに委譲して段階的開示を行い、サブエージェントでコンテキスト隔離を実現する。「QA」「動作確認」「テストケース実行」「smoke test」「E2E」「手動テスト」「結合テスト」などのキーワードで自動適用。
QA テストスイートの解析・前提条件解決・実行計画策定を行うフェーズスキル。ios-qa-workflow から参照される。「テスト計画」「QA 準備」「テストスイート解析」などのキーワードで自動適用。
QA テスト結果を集約し、構造化レポートを生成するフェーズスキル。失敗テストの分析と次のアクション提案を含む。「QA レポート」「テスト結果」「QA 結果」などのキーワードで自動適用。
テストケースの作成を対話的に支援するユーティリティスキル。アプリの画面を観察しながらテストケースを生成できる。「テストケース作成」「QA ケース作成」「テスト項目作成」などのキーワードで自動適用。
テストケースの実行制御を行うフェーズスキル。各テストケースを qa-runner → qa-judge のパイプラインで実行し、アプリ状態管理と結果収集を担当する。ios-qa-workflow から参照される。
iOS 開発ワークフローのオーケストレーター。XcodeBuildMCP ベースのフォアグラウンドサブエージェントを使い分け、ビルド・テスト・実行・UI 検証をコンテキスト隔離で実行する。「iOS」「Xcode」「Swift」「build」「test」「compile」「simulator」「xcodebuild」「preview」「SwiftUI」「ビルド」「テスト」「コンパイル」などのキーワードで自動適用。
| name | design-diff |
| description | UIの視覚的差分を検出・比較する。デザイン変更前後の比較、リファレンスとの差分確認時に使用。「デザイン比較」「UI差分」「design diff」「design compare」「ビフォーアフター」「見た目の違い」などのキーワードで自動適用。 |
UI の変更前後を比較し、視覚的な差分を検出・分析する。
3つの手法を組み合わせて使用する。
swift-snapshot-testing を使用してスナップショットの差分を検出する。
仕組み:
record: true でリファレンス画像を保存record: false（デフォルト）で現在の状態をリファレンスと比較差分画像の出力先:
Tests/
__Snapshots__/ # リファレンス画像
TestClassName/
testMethodName.1.png
Failures/ # 差分画像（テスト失敗時に生成）
testMethodName.1.png
2つの PNG 画像を Read ツールで読み込み、視覚的に比較する。
使用場面:
View のソースコードを比較し、トークンの変更を特定する。
使用場面:
import XCTest
import SnapshotTesting
@testable import YourApp
final class MyViewSnapshotTests: XCTestCase {
func testMyView() {
let view = MyView()
.frame(width: 375)
.theme(ThemeProvider())
// リファレンス記録（初回のみ record: true）
isRecording = true
assertSnapshot(of: view, as: .image)
}
}
テスト実行:
xcodebuild test \
-scheme YourScheme \
-destination 'platform=iOS Simulator,name=iPhone 16' \
-only-testing:YourTests/MyViewSnapshotTests/testMyView
View のソースコードを修正する。
// record を false に戻す（またはデフォルト）
func testMyView() {
let view = MyView()
.frame(width: 375)
.theme(ThemeProvider())
// リファレンスと比較（差異があればテスト失敗）
assertSnapshot(of: view, as: .image)
}
テスト実行:
xcodebuild test \
-scheme YourScheme \
-destination 'platform=iOS Simulator,name=iPhone 16' \
-only-testing:YourTests/MyViewSnapshotTests/testMyView
テストが失敗した場合: 差分画像が Failures/ ディレクトリに生成される。
Read ツールで以下の画像を読み込んで分析する:
__Snapshots__/TestClassName/testMethodName.1.pngFailures/testMethodName.1.png（差分を含む）差分の内容に基づいて:
// 一時的に record: true に戻してリファレンスを更新
isRecording = true
assertSnapshot(of: view, as: .image)
テスト実行後、isRecording = true を削除してコミット。
# Design Diff レポート
**対象**: `MyView.swift`
**比較**: リファレンス vs 現在
## 変更サマリー
| 項目 | Before | After | 影響 |
|------|--------|-------|------|
| 背景色 | surface | primaryContainer | 視覚的に大きい変化 |
| パディング | spacing.md (12pt) | spacing.lg (16pt) | レイアウトに影響 |
| 角丸 | radius.md | radius.lg | 軽微な変化 |
## 視覚的差分
- **変化あり**: 背景色がより強調された色に変更
- **変化あり**: 内部余白が広がりコンテンツが収縮
- **変化なし**: テキスト、アイコン、アニメーション
## Design System 準拠性
変更後の状態が Design System に準拠しているか:
- ✅ すべてのカラーが ColorPalette 経由
- ✅ すべてのスペーシングが SpacingScale 経由
- ⚠️ ダークモードでの確認が必要
差分検出後、変更が Design System 準拠性を改善したか悪化させたかを確認する:
design-audit を実行（結果を記録）design-diff で視覚的差分を確認design-audit を再実行final class MyViewSnapshotTests: XCTestCase {
// デフォルトテーマ・ライトモード
func testDefault() {
let view = MyView()
.frame(width: 375)
.theme(ThemeProvider())
assertSnapshot(of: view, as: .image)
}
// ダークモード
func testDarkMode() {
let view = MyView()
.frame(width: 375)
.theme(ThemeProvider(initialMode: .dark))
assertSnapshot(of: view, as: .image)
}
// Large Text
func testLargeText() {
let view = MyView()
.frame(width: 375)
.theme(ThemeProvider())
.environment(\.sizeCategory, .accessibilityExtraLarge)
assertSnapshot(of: view, as: .image)
}
// 別テーマ
func testOceanTheme() {
let view = MyView()
.frame(width: 375)
.theme(ThemeProvider(initialTheme: OceanTheme()))
assertSnapshot(of: view, as: .image)
}
}