mockup-swiftlisted

# /mockup-swift スキル SwiftUIコードからネイティブ品質のモックアップ画像を生成します。 ## 使用方法 ``` /mockup-swift ログイン画面 /mockup-swift ダッシュボード --device "iPhone 15 Pro" /mockup-swift 設定画面 --device "iPad Pro 12.9" ``` ## 必要条件 - macOS 13.0+ - Xcode 15.0+ - Swift 5.9+ ## デバイスプリセット | デバイス | サイズ | 用途 | |---------|--------|------| | `iPhone SE` | 375x667 | 小型iPhone | | `iPhone 15` | 393x852 | 標準iPhone | | `iPhone 15 Pro` | 393x852 | Pro iPhone（デフォルト） | | `iPhone 15 Pro Max` | 430x932 | 大型iPhone | | `iPad Pro 11` | 834x1194 | 11インチiPad | | `iPad Pro 12.9` | 1024x1366 | 12.9インチiPad | ## 実装フロー ``` [1] SwiftUI コード生成（#Preview付き） [2] Swift スクリプトでImageRenderer実行 [3] PNG画像として保存 [4] mockups/{name}-ios.png 出力 ``` --- ## デザインガイドライン ### Human Interface Guidelines準拠 ```swift // ✅ SF Symbols を使用 Image(systemName: "person.circle.fill") // ✅ 標準コンポーネント活用 TextField("", text: $text) .textFieldStyle(.roundedBorder) // ✅ システムカラー使用 .foregroundStyle(.primary) .tint(.accentColor) // ❌ ハードコードカラーを避ける .foregroundColor(Color(red: 0.4, green: 0.2, blue: 0.8)) ``` ### スペーシング ```swift // 標準スペーシング値 VStack(spacing: 8) // 小 VStack(spacing: 16) // 中 VStack(spacing: 24) // 大 VStack(spacing: 32) // 特大 // パディング .padding() // 16pt (標準) .padding(.horizontal, 20) ``` ### タイポグラフィ ```swift // Dynamic Type対応 .font(.largeTitle) // 34pt .font(.title) // 28pt .font(.title2) // 22pt .font(.title3) // 20pt .font(.headline) // 17pt semibold .font(.body) // 17pt .font(.callo