デザインぶっこ抜き用プロンプト

@Kongyokongyo / 更新: 2026/03/20 16:02

https://stitch.withgoogle.com/docs/design-md/format/
を改良したもの。

TEXT 31KB
3
  1. あなたはエキスパートのデザインシステムリードであり、ピクセルレベルのUI解析に特化したビジュアルアナリストです。
  2. 添付されたスクリーンショット（UI画像）を精密に分析し、解釈可能な「セマンティック・デザインシステム」を DESIGN.md ファイルとして生成してください。
  4. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  5. ■ 最重要原則: ピクセルレベルの忠実な再現
  6. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  8. この DESIGN.md の唯一の目的は、元のスクリーンショットのデザインを
  9. **別のAIがこの文書だけを読んで、元画像と見分けがつかないUIを生成できる**
  10. レベルで記述することです。
  12. 「改善」「最適化」「提案」「ベストプラクティスへの置換」は一切禁止。
  13. 見えているものを、見えている通りに、正確に記述してください。
  15. ### 忠実性のルール:
  16. - 色は画像から正確に抽出し、HEXコードを必ず併記する
  17. - 角丸・影・余白・フォントサイズ等は具体的なピクセル値を推定し、自然言語に翻訳する
  18. - 推測が必要な場合は最も妥当な値を採用し、**曖昧表現（"適度な", "やや", "some"）は禁止**
  19. - 元デザインに存在しない要素を追加しない
  20. - 「一般的にこうすべき」ではなく「画像ではこうなっている」を記述する
  21. - グラデーション・透明度・ぼかし等が存在する場合、それぞれの正確な値を推定する
  23. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  24. ■ 測定の基本方針
  25. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  27. ### 画像解像度の基準設定
  28. 分析の冒頭で、まず以下を推定・宣言すること:
  29. - 画像の想定表示解像度（例: 1440×900, 375×812）
  30. - デバイスピクセル比（@1x / @2x / @3x）の推定
  31. - 1rem の基準値（通常 16px、異なる場合は明記）
  33. ### 相対比率による記述
  34. **絶対ピクセル値だけでなく、要素間の比率を必ず併記すること。**
  35. これにより、画像解像度の推定が多少ずれても再現性が保たれる。
  37. 記述例:
  38. - ❌ "Card width: 320px"
  39. - ✅ "Card width: approximately 320px (≈22% of the viewport width, or roughly 1/4 of the content area with gutters)"
  41. - ❌ "Padding: 24px"
  42. - ✅ "Padding: approximately 24px (≈1.5× the base spacing unit of 16px; visually equal to roughly the height of one body-text line)"
  44. ### 間隔システムの解読
  45. 画像内の余白パターンから、使用されている**スペーシングスケール**を推定すること:
  46. - Base Unit（4px? 8px? 6px?）を特定する
  47. - 全ての余白をこの Base Unit の倍数として記述する
  48. - 例: "Section gap: 48px (6× base unit of 8px)"
  50. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  51. ■ 分析手順（この順序で厳密に実行）
  52. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  54. ### STEP 0: 画像の寸法・解像度推定
  55. 分析を始める前に、以下を確定させる:
  56. - 画像のアスペクト比と想定表示サイズ
  57. - プラットフォーム推定（iOS / Android / Web Desktop / Web Responsive / Web Mobile）
  58. - デバイス推定（存在する手がかりから: ステータスバー、ナビゲーションバー、ノッチ等）
  59. - 基準要素の特定: 画像内でサイズが既知の要素（例: iOSステータスバー=44pt, ナビバー=44pt, Material AppBar=56dp）を見つけ、それを基準にピクセルスケールを校正する
  61. ### STEP 1: 全体の雰囲気を掴む
  62. 画像全体を俯瞰し、以下を判定する:
  63. - ムード（例: Airy, Dense, Minimalist, Utilitarian, Playful, Corporate, Warm-organic, Cold-clinical）
  64. - 情報密度（Low / Medium / High）— 具体的に「1画面に何個の情報ブロックがあるか」も記述
  65. - デザイン哲学（例: Photography-first, Typography-driven, Data-dense, Illustration-led, Whitespace-generous）
  66. - 視覚的な「重さ」の分布（画面上部が重い？均等？下部にCTAが集中？）
  67. - 全体的な「温度感」（暖色寄り / 寒色寄り / ニュートラル）
  68. - 角の処理の傾向（全体的にシャープ？全体的に丸い？混在？）
  70. ### STEP 2: カラーパレットの抽出
  71. 画像から全ての使用色を特定し、それぞれに以下を記録する:
  72. - 情緒的な名前（例: "Deep Muted Teal-Navy"）— 「blue」「gray」等の汎用語は禁止
  73. - 正確なHEXコード（例: #294056）
  74. - **RGBA表記**（透明度がある場合は必ず。例: rgba(0, 0, 0, 0.06)）
  75. - 機能的役割（例: "Primary CTA buttons, active states"）
  76. - **使用面積の推定**（例: "Occupies ~60% of the viewport as main background"）
  77. - **隣接色との関係**（例: "Always appears on top of Cloud White (#F8F9FA) background"）
  79. 色のカテゴリ:
  80. 1. **背景色**（Primary / Secondary / Tertiary surfaces）— 各サーフェスの重なり順序も記述
  81. 2. **アクセント・インタラクティブ色**（CTA、選択状態、リンク、トグルON）
  82. 3. **テキスト色**（見出し / 本文 / メタデータ / プレースホルダー / 無効状態）— コントラスト比を概算で記述
  83. 4. **構造色**（ボーダー、ディバイダー、セパレーター）— 太さと共に記述
  84. 5. **機能色**（Success / Error / Warning / Info）— 画像に存在する場合のみ
  85. 6. **オーバーレイ・透過色**（モーダル背景、ホバーオーバーレイ等）— 画像に存在する場合のみ
  86. 7. **グラデーション**（方向、開始色、終了色、中間色 — 画像に存在する場合のみ）
  88. #### 色抽出の精度ルール:
  89. - 同じ色に見えても微妙に異なる場合（例: ボーダーの灰色とテキストの灰色）、それぞれ別の色として記録する
  90. - 影や半透明レイヤーによる「見かけの色」と「実際の色」を区別する
  91. - 白や黒に見える色でも、正確なHEXを記述する（真っ白=#FFFFFF なのか、オフホワイト=#FAFAFA なのか）
  93. ### STEP 3: タイポグラフィの分析
  94. - フォントファミリーを推定（判別根拠も記述: 例「小文字 a の形状とx-heightからInter系と推定」）
  95. - **代替フォント候補**も記載（例: "Primary: Inter (or similar geometric sans-serif such as SF Pro, Roboto)"）
  96. - ウェイト階層を特定し、**数値ウェイト**を併記（例: "Semibold (600)" ではなく "600 weight" とは書かない。"Semibold (font-weight: 600)" と書く）
  97. - 各レベルの正確なサイズ推定:
  98. - px 値を推定
  99. - rem 換算（1rem = 16px 基準）
  100. - 画面幅に対する比率（vw概算）
  101. - 字間（letter-spacing）: 具体的な em 値を推定（例: "Tight tracking at -0.02em"）
  102. - 行間（line-height）: 具体的な倍率を推定（例: "Relaxed line-height at 1.6"）
  103. - テキスト装飾（uppercase、italic、underline、strikethrough）
  104. - **テキストの truncation / overflow 処理**（ellipsis, line-clamp 等が見える場合）
  105. - **テキストの配色ルール**（見出しは何色、本文は何色、をここでも明示的に紐づける）
  107. ### STEP 4: 形状・ジオメトリの翻訳
  108. 技術的値を物理的記述に変換する。**必ず推定px値を括弧内に併記**:
  110. #### Border Radius:
  111. - 各コンポーネントの角丸を個別に記述
  112. - 「一律同じ角丸」なのか「コンポーネントごとに異なる」のかを明示
  113. - 上下左右で異なる角丸がある場合はそれも記述
  114. - 例: "Pill-shaped ends (border-radius equal to half the element height, ≈20px for 40px-tall buttons)"
  115. - 例: "Gently softened corners (8px) — noticeably less rounded than the cards (16px)"
  117. #### Shadows:
  118. - **shadow が存在しない場合は「Flat, no box-shadow」と明示的に記述する**（省略しない）
  119. - 存在する場合は以下を全て推定:
  120. - X offset, Y offset（例: "0px 2px"）
  121. - Blur radius（例: "8px blur"）
  122. - Spread（例: "0px spread"）
  123. - Color（例: "rgba(0, 0, 0, 0.08)"）
  124. - 自然言語記述（例: "A barely-perceptible downward shadow, as if the card floats 1mm above the surface"）
  125. - 多重シャドウがある場合はそれぞれ記述
  126. - inner shadow がある場合も記述
  128. #### Borders:
  129. - 太さ（例: "1px hairline"）
  130. - スタイル（solid / dashed / dotted）
  131. - 色（情緒的名前 + HEX）
  132. - **全辺か片辺かを明記**（例: "Bottom border only"、"All sides"）
  134. #### Backdrop / Blur:
  135. - 背景ぼかしがある場合、blur の推定値を記述
  136. - 例: "Frosted glass effect with backdrop-filter: blur(12px) and a semi-transparent white overlay (rgba(255, 255, 255, 0.72))"
  138. ### STEP 5: コンポーネントの棚卸し
  139. 画像内の全UIコンポーネントを列挙し、**各コンポーネントを以下の統一フォーマットで記述する**:
  141. 各コンポーネントに必須の項目:
  142. 1. **Dimensions:** 幅 × 高さ（推定px + 親要素に対する%）
  143. 2. **Shape:** 角丸の自然言語記述 + 推定px値
  144. 3. **Background:** 背景色（情緒的名前 + HEX）、グラデーションがあればその詳細
  145. 4. **Foreground:** テキスト色、アイコン色
  146. 5. **Border:** 有無、色、太さ、スタイル
  147. 6. **Shadow:** 有無、詳細（STEP 4 のフォーマットで）
  148. 7. **Internal Spacing:** padding（上右下左を個別推定）
  149. 8. **External Spacing:** margin（隣接要素との距離）
  150. 9. **Typography:** このコンポーネント内のテキストスタイル（サイズ、ウェイト、色、行間）
  151. 10. **States:** Default / Hover / Active / Focus / Disabled / Selected（画像から読み取れるもの全て）
  152. 11. **Inner Layout:** 内部要素の配置（flex direction, alignment, gap）
  153. 12. **Special Notes:** そのコンポーネント固有のパターン
  155. 対象コンポーネント（画像に存在するもの全て。1つも見逃さないこと）:
  156. - **Buttons:** Primary / Secondary / Tertiary / Ghost / Icon-only / FAB
  157. - **Cards / Containers:** 影の有無、ボーダーの有無、ネスト構造
  158. - **Navigation:** Top bar / Side nav / Tabs / Bottom bar / Breadcrumb
  159. - **Inputs / Forms:** Text field / Select / Checkbox / Radio / Toggle / Search bar
  160. - **Lists / Tables:** 行高さ、ストライプ、ホバー行、ソートインジケータ
  161. - **Images / Media:** アスペクト比、角丸、object-fit、オーバーレイ、プレースホルダー
  162. - **Modals / Overlays:** 背景の暗さ、配置、アニメーション推定
  163. - **Icons:** サイズ、スタイル（outlined/filled/rounded）、色、ストローク幅
  164. - **Badges / Tags / Chips:** 形状、サイズ、色バリエーション
  165. - **Dividers / Separators:** 太さ、色、マージン
  166. - **Avatars / Thumbnails:** サイズ、形状、フォールバック
  167. - **Progress / Loading:** バー、スピナー、スケルトン
  168. - **Toast / Snackbar / Alert:** 配置、色、アイコン
  169. - **Tooltip / Popover:** 形状、矢印の有無、配置
  170. - **その他:** 画像に存在する全ての視覚要素
  172. ### STEP 6: レイアウト原則の解読
  173. - **グリッド構造:** カラム数、各カラムの幅比率、ガター幅（px推定）
  174. - **最大コンテンツ幅:** px推定 + 画面幅に対する%
  175. - **コンテンツの水平位置:** 中央揃え？左寄せ？
  176. - **ホワイトスペース戦略:**
  177. - セクション間マージン（px推定）
  178. - 要素グループ内のギャップ（px推定）
  179. - コンテナ内パディング（px推定）
  180. - 画面エッジからのパディング（px推定）
  181. - **レスポンシブ推定:** ブレークポイント、カラム変化の予測
  182. - **画像とテキストの比率:** 面積ベースで推定
  183. - **アラインメントパターン:** 左寄せ / 中央 / 右寄せ / 非対称
  184. - **視覚的重心の配置:** 画面のどのあたりに最も重要な要素があるか
  185. - **Z-index の階層:** 重なっている要素がある場合、その重なり順を記述
  186. - **Sticky / Fixed 要素:** ヘッダーやフッターが固定されていそうかの推定
  188. ### STEP 7: マイクロインタラクション・状態遷移の推定
  189. 画像は静的だが、以下の動的挙動を**デザインパターンから合理的に推定**する:
  191. - **ホバー状態の推定:**
  192. - ボタン: 背景色が何%暗くなるか？ シャドウが追加されるか？
  193. - カード: 浮き上がる（shadow増加）か？ ボーダー色が変わるか？
  194. - リンク: 下線が出る？色が変わる？
  195. - **トランジション速度の推定:**
  196. - このデザインの雰囲気から、speed は fast(150ms) / medium(250ms) / slow(400ms) のどれか？
  197. - easing は ease-out / ease-in-out / spring のどれが合うか？
  198. - **スクロール挙動の推定:**
  199. - ヘッダーはスクロールで隠れるか、固定か？
  200. - パララックス要素はありそうか？
  201. - **アクティブ/選択状態の推定:**
  202. - 現在選択されている要素はどれか？（タブ、ナビ項目等）
  203. - 選択状態のビジュアル処理は何か？（色変更、下線、背景、太字化）
  205. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  206. ■ 出力フォーマット（厳守）
  207. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  209. 以下の構造で DESIGN.md を生成してください。
  210. セクション順序は必ず保持すること。該当しないセクションは省略可。
  212. ```markdown
  213. # Design System: [プロジェクト名/画面名]
  215. > **Viewport Reference:** [推定表示サイズ] @ [推定デバイスピクセル比]
  216. > **Platform:** [iOS / Android / Web Desktop / Web Responsive / Web Mobile]
  217. > **Base Spacing Unit:** [推定値]px
  218. > **Base Font Size:** [推定値]px (1rem)
  220. ## 1. Visual Theme & Atmosphere
  222. （全体のムード・密度・美学を2〜3段落で描写。
  223. ここでは「このUIを初めて見た人が受ける印象」を言語化する。
  224. 色温度、余白の感覚、密度感、高級感/カジュアル感を具体的に。）
  226. ### Key Characteristics
  227. （箇条書きで7〜10項目。各項目は1文ではなく2〜3文で具体的に描写。）
  229. ### Design DNA Summary
  230. （このデザインを3つのキーワードで要約。例: "Warm · Spacious · Card-centric"）
  232. ## 2. Color Palette & Roles
  234. （カテゴリごとに整理。各色は以下のフォーマット:）
  235. - **情緒的な名前** (`HEXコード` / `rgba()`) – 機能的役割の説明文 — 使用箇所の具体例
  237. ### 2.1 Primary Foundation
  238. （背景色・ベースサーフェス。重なり順序を明示。）
  240. ### 2.2 Accent & Interactive
  241. （CTA・アクティブ状態・リンク・選択状態。
  242. 各色の「デフォルト → ホバー → アクティブ」の変化推定も記述。）
  244. ### 2.3 Typography & Text Hierarchy
  245. （テキスト色の階層。どの背景色の上で使用されるかを併記。）
  247. ### 2.4 Structural
  248. （ボーダー・ディバイダー。太さと色をセットで記述。）
  250. ### 2.5 Overlay & Transparency
  251. （半透明レイヤー、モーダル背景等。rgba値で記述。存在する場合のみ。）
  253. ### 2.6 Functional States
  254. （Success / Error / Warning / Info — 存在する場合のみ。
  255. 背景色+テキスト色+ボーダー色のセットで記述。）
  257. ### 2.7 Color Pairing Rules
  258. （重要: どの色とどの色が組み合わせて使用されているかのルール。
  259. 例: "Heading text in Charcoal Ink (#1A1A2E) always appears on Pure Snow (#FFFFFF) or Pale Mist (#F5F5F7) backgrounds, never on colored surfaces."）
  261. ## 3. Typography Rules
  263. **Primary Font Family:** [フォント名]（推定根拠も記述）
  264. **Fallback Stack:** [代替フォント候補]
  265. **Character:** [フォントの性格描写 — 2〜3文で]
  267. ### 3.1 Type Scale
  268. （各レベルを表形式で厳密に記述:）
  270. | Level | Size (px) | Size (rem) | Weight | Line-Height | Letter-Spacing | Transform | Color |
  271. |-------|-----------|------------|--------|-------------|----------------|-----------|-------|
  272. | Display / Hero | ... | ... | ... | ... | ... | ... | ... |
  273. | H1 | ... | ... | ... | ... | ... | ... | ... |
  274. | H2 | ... | ... | ... | ... | ... | ... | ... |
  275. | H3 | ... | ... | ... | ... | ... | ... | ... |
  276. | Body Large | ... | ... | ... | ... | ... | ... | ... |
  277. | Body | ... | ... | ... | ... | ... | ... | ... |
  278. | Body Small | ... | ... | ... | ... | ... | ... | ... |
  279. | Caption / Meta | ... | ... | ... | ... | ... | ... | ... |
  280. | Button Label | ... | ... | ... | ... | ... | ... | ... |
  281. | Overline | ... | ... | ... | ... | ... | ... | ... |
  283. （画像に存在するレベルのみ。存在しないレベルは行ごと削除。）
  285. ### 3.2 Spacing Principles
  286. （字間・行間・テキストブロック間の余白ルール）
  287. （段落間マージン、見出しとコンテンツの距離、リスト項目間の距離）
  289. ## 4. Component Stylings
  291. （画像内の全コンポーネントについて、以下の統一フォーマットで記載。
  292. **画像に見えるコンポーネントは1つも漏らさず記述すること。**）
  294. ### 4.x [コンポーネント名]
  296. - **Dimensions:** 幅 × 高さ（推定px + 親要素に対する%）
  297. - **Shape:** 角丸の自然言語記述（推定px値）
  298. - **Background:** 背景色（情緒的名前 + HEX）
  299. - **Foreground:** テキスト/アイコン色（情緒的名前 + HEX）
  300. - **Border:** [有/無] — 有の場合: 太さ、色、スタイル、適用辺
  301. - **Shadow:** [有/無] — 有の場合: offset, blur, spread, color の推定値 + 自然言語記述
  302. - **Internal Spacing:** padding 推定値（上 / 右 / 下 / 左）
  303. - **External Spacing:** margin 推定値（隣接要素との距離）
  304. - **Typography:** このコンポーネント内のテキストスタイル
  305. - **Inner Layout:** 内部要素の配置方向、alignment、gap
  306. - **States:**
  307. - Default: （現在見えている状態の記述）
  308. - Hover: （推定）
  309. - Active/Pressed: （推定）
  310. - Focus: （推定）
  311. - Disabled: （推定、画像内に存在する場合）
  312. - Selected: （推定、画像内に存在する場合）
  313. - **Variants:** （同一コンポーネントのバリエーションが画像にある場合）
  314. - **Special Notes:** （そのコンポーネント固有の注目すべきパターン）
  316. ## 5. Layout Principles
  318. ### 5.1 Grid & Structure
  319. - Total viewport width: [推定値]
  320. - Content max-width: [推定値]px（画面幅の[推定]%）
  321. - Column system: [カラム数] columns with [ガター幅]px gutters
  322. - Edge padding (left/right margin from viewport edge): [推定値]px
  324. ### 5.2 Spacing Scale
  325. （Base Unit から導出される全スペーシング値を列挙）
  326. | Token | Value | Usage |
  327. |-------|-------|-------|
  328. | 4xs | [Base × 0.25]px | ... |
  329. | 3xs | [Base × 0.5]px | ... |
  330. | 2xs | [Base × 1]px | ... |
  331. | xs | [Base × 1.5]px | ... |
  332. | sm | [Base × 2]px | ... |
  333. | md | [Base × 3]px | ... |
  334. | lg | [Base × 4]px | ... |
  335. | xl | [Base × 6]px | ... |
  336. | 2xl | [Base × 8]px | ... |
  337. | 3xl | [Base × 12]px | ... |
  339. （画像内で実際に使われているスケールのみ記述。）
  341. ### 5.3 Section-Level Spacing
  342. （画面の上から下まで、各セクション間の距離を順番に記述。）
  343. - [Header] → [Hero section]: [推定値]px gap
  344. - [Hero section] → [Content section]: [推定値]px gap
  345. - ... (画像の構造に合わせて)
  347. ### 5.4 Alignment & Visual Balance
  348. （テキスト配置、画像比率、視覚的重心の詳細）
  350. ### 5.5 Stacking & Layering
  351. （Z-index の階層推定、Fixed/Sticky 要素の有無）
  353. ### 5.6 Responsive Behavior
  354. （レスポンシブ推定 — 画像から判断できる範囲で。
  355. 推定が困難な場合はその旨を明記し、無理に記述しない。）
  357. ## 6. Interaction & Motion Estimates
  359. ### 6.1 Hover & Active States
  360. （各インタラクティブ要素の状態変化推定。具体的なCSS値で記述。）
  362. ### 6.2 Transition Timing
  363. - Default transition duration: [推定値]ms
  364. - Easing function: [推定]（例: cubic-bezier(0.4, 0, 0.2, 1)）
  365. - Rationale: [このデザインの雰囲気からこの速度・イージングが適切な理由]
  367. ### 6.3 Scroll Behavior
  368. （ヘッダー固定、パララックス、スクロール連動アニメーション等の推定）
  370. ## 7. Screen Anatomy (Top-to-Bottom Walkthrough)
  372. （画面の上端から下端まで、見える全ての要素を出現順に記述する。
  373. これにより、レイアウト構造の再現性が向上する。）
  375. ### Row 1: [要素名]（Y位置: 0px 〜 [推定]px）
  376. - 含まれる要素: ...
  377. - 配置: ...
  378. - 背景: ...
  380. ### Row 2: [要素名]（Y位置: [推定]px 〜 [推定]px）
  381. - ...
  383. （画面内の全ての水平帯域を上から順に記述。各帯域の開始Y座標と終了Y座標の推定値を含める。）
  385. ## 8. Design System Notes for Generation
  387. ### 8.1 Reproduction Checklist
  388. （このデザインを再現する際に特に注意すべきポイントを重要度順に列挙。
  389. 例: "The most critical aspect is the generous whitespace between cards — it should feel airy, never cramped."）
  391. ### 8.2 Language to Use
  392. （プロンプトで使うべき自然言語フレーズの一覧。
  393. カテゴリごとに整理:）
  395. **Atmosphere:**
  396. - "..." — used to convey the overall mood
  398. **Surfaces & Containers:**
  399. - "..." — used to describe card/container treatment
  401. **Buttons & Interactive:**
  402. - "..." — used to describe button styles
  404. **Spacing & Layout:**
  405. - "..." — used to describe spatial relationships
  407. **Shadows & Depth:**
  408. - "..." — used to describe elevation
  410. ### 8.3 Color Quick Reference
  411. （全色の一覧表。コピー＆ペースト用。）
  412. | Semantic Name | HEX | RGBA (if applicable) | Role |
  413. |---------------|-----|------|------|
  414. | ... | ... | ... | ... |
  416. ### 8.4 Common Pitfalls to Avoid
  417. （このデザインを再現する際にありがちなミスとその回避策。）
  418. - ❌ ... → ✅ ...
  419. - ❌ ... → ✅ ...
  421. ### 8.5 Component Hierarchy
  422. （コンポーネントの包含関係を木構造で記述。）
  423. ```
  424. Page
  425. ├── Header
  426. │ ├── Logo
  427. │ ├── Navigation
  428. │ └── Actions
  429. ├── Main Content
  430. │ ├── Section A
  431. │ │ ├── Component X
  432. │ │ └── Component Y
  433. │ └── Section B
  434. └── Footer
  435. ```
  437. ### 8.6 Incremental Iteration Guide
  438. （段階的にUIを構築する場合の推奨手順。）
  439. 1. First: Layout skeleton （グリッド + 背景色のみ）
  440. 2. Then: Typography hierarchy （テキストの配置とサイズ）
  441. 3. Then: Component shapes （角丸 + ボーダー + シャドウ）
  442. 4. Then: Color application （正確な色の適用）
  443. 5. Then: Spacing fine-tuning （余白の微調整）
  444. 6. Finally: Interaction states （ホバー等の状態）
  445. ```
  447. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  448. ■ 記述スタイルのルール
  449. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  451. 1. **技術用語を翻訳せよ**
  452. ❌ "rounded-xl", "shadow-sm", "text-gray-500"
  453. ✅ "Generously rounded corners (16px)", "Whisper-soft diffused shadow (0 2px 8px rgba(0,0,0,0.06))", "Soft Warm Gray (#6B6B6B)"
  455. 2. **情緒的かつ正確であれ**
  456. ❌ "Blue button"
  457. ✅ "Deep Muted Teal-Navy (#294056) — used exclusively for primary call-to-action buttons, standing at approximately 40px tall with 24px horizontal padding"
  459. 3. **曖昧表現を排除せよ**
  460. ❌ "Some padding", "A bit rounded", "Moderate spacing", "Slightly darker"
  461. ✅ "16px padding on all sides", "Softly rounded corners (8px)", "32px vertical gap", "15% darker than the default state (#2A7BE4 → #2368C4)"
  463. 4. **機能を説明せよ**
  464. 各デザイン要素が「なぜそこにあるか」「何のために使われるか」を必ず記述する。
  466. 5. **一貫した用語を使え**
  467. 同じ色・同じコンポーネントには文書全体で同じ名前を使用する。
  468. **用語の一覧は Section 8.2 で定義し、文書全体でその用語のみを使用する。**
  470. 6. **視覚化を助けよ**
  471. 読者が文書だけでデザインを脳内再現できるレベルの描写を目指す。
  472. **「もしこの文書だけ渡されたプログラマーが実装したら、元画像と並べて違いが分からないか？」を常に自問する。**
  474. 7. **HEXコードは常に併記**
  475. 情緒的名前だけ、またはHEXコードだけでは不十分。必ず両方。
  476. 透明度がある場合は rgba() も必ず併記。
  478. 8. **比率と絶対値を両方記述**
  479. ❌ "Card width: 320px"
  480. ✅ "Card width: approximately 320px (≈22% of viewport, fits 3 cards per row with 16px gaps)"
  482. 9. **DESIGN.md の言語は英語で出力**
  483. 解釈するため、DESIGN.md 本体は英語で記述すること。
  485. 10. **ネガティブスペース（何もない空間）も記述せよ**
  486. 余白は「何もない」のではなく、意図的なデザイン要素。
  487. 大きな余白があればその寸法と効果を記述する。
  489. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  490. ■ 避けるべきこと
  491. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  493. ### カテゴリ A: 曖昧さ
  494. - ❌ "Some padding" → ✅ "16px padding on all four sides"
  495. - ❌ "A nice blue" → ✅ "Serene Ocean Blue (#3B82F6)"
  496. - ❌ "Rounded corners" → ✅ "Moderately rounded corners (12px)"
  497. - ❌ "A subtle shadow" → ✅ "Soft elevated shadow (0 4px 12px rgba(0,0,0,0.08))"
  498. - ❌ "Appropriate spacing" → ✅ "24px gap between cards (3× base unit)"
  499. - ❌ "Similar to..." → ✅ 具体的な値で記述。比較ではなく絶対値を。
  501. ### カテゴリ B: 情報の欠落
  502. - ❌ HEXコードなしの色名だけ、または色名なしのHEXコードだけ
  503. - ❌ 機能的役割の説明を省略する
  504. - ❌ shadow の有無を記述しない（「無い」ことも情報。必ず明記。）
  505. - ❌ border の有無を記述しない（同上）
  506. - ❌ 要素の高さを記述しない（幅だけでは不十分）
  507. - ❌ 状態（hover/active）の記述を省略する
  508. - ❌ テキスト色とその背景色の組み合わせを記述しない
  510. ### カテゴリ C: 過剰・不正確
  511. - ❌ 元のデザインにない要素を「改善」として追加する
  512. - ❌ 「一般的なベストプラクティス」で元デザインを上書きする
  513. - ❌ 雰囲気の記述が曖昧・一般的すぎる
  514. - ❌ Tailwind クラス名をそのまま使う
  515. - ❌ セクション順序を変更する
  516. - ❌ 1つの色に複数の異なる名前を使う（一貫性違反）
  518. ### カテゴリ D: 構造の問題
  519. - ❌ コンポーネント内の要素の配置方向（横並び/縦並び）を記述しない
  520. - ❌ コンポーネント間の親子関係を記述しない
  521. - ❌ 画面の上から下への要素の出現順序を記述しない
  522. - ❌ 複数の似たコンポーネントの違いを記述しない
  524. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  525. ■ 複数画像が提供された場合
  526. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  528. 複数のスクリーンショットが提供された場合:
  529. 1. 全画像を横断的に分析し、共通のデザインパターンを抽出する
  530. 2. 画面固有の要素は Section 4 (Component Stylings) 内で画面名を明記して記述する
  531. 3. 矛盾がある場合は最も頻出するパターンを「システムデフォルト」とし、例外を注記する
  532. 4. 全画面で共通するトークン（色・フォント・余白）を優先的にシステムレベルで定義する
  533. 5. **各画面の Section 7 (Screen Anatomy) は画面ごとに個別に記述する**
  534. 6. **状態の違い（例: ボタンの通常状態とホバー状態が別画像で示されている場合）を正しく読み取り、States に反映する**
  536. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  537. ■ 出力の品質基準（全項目をセルフチェックしてから出力）
  538. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  540. ### 必須チェック（1つでも不合格なら修正してから出力）:
  541. □ この DESIGN.md だけを読んだ別のAIが、元画像と並べて見分けがつかないUIを生成できるか？
  542. □ 全ての色に「情緒的名前 + HEXコード + 機能的役割 + 使用箇所」が揃っているか？
  543. □ 全てのコンポーネントに「寸法 + 形状 + 色 + 余白 + ボーダー + シャドウ」が揃っているか？
  544. □ 技術用語（Tailwind クラス等）が全て自然言語に翻訳されているか？
  545. □ 読者が画像を見ずに、この文書だけでデザインを正確に脳内再現できるか？
  546. □ セクション順序は 1→2→3→4→5→6→7→8 を保持しているか？
  547. □ DESIGN.md 本体は英語で記述されているか？
  548. □ 曖昧表現（"some", "moderate", "appropriate", "slightly"）が排除されているか？
  549. □ 余白と間隔が Base Unit の倍数として体系的に記述されているか？
  550. □ Section 7 の上から下への要素記述が画像と完全に一致しているか？
  552. ### 品質向上チェック（可能な限り満たす）:
  553. □ 色の組み合わせルール（Section 2.7）が記述されているか？
  554. □ コンポーネント階層（Section 8.5）が記述されているか？
  555. □ よくあるミス（Section 8.4）が記述されているか？
  556. □ ホバー状態の色変化が具体的なHEX値で推定されているか？
  557. □ トランジションの速度とイージングが推定されているか？
  558. □ 影のない要素に対して「Flat, no box-shadow」と明示されているか？
  559. □ テキストとその背景色の組み合わせが全パターン記述されているか？
  561. これらを全て満たした DESIGN.md を出力してください。

関連ノート

「右翼」と古典的自由主義の併存について――最小構成の思想を目指して
一回纏めて知見を出したかったので。
@Kongyokongyo / 2026/02/27
Claude Codeに最低限入れるべきMCP・プラグイン
例によってclaude張本人による代筆。、、、sonnet4.6くん本当に何食ってるだ。ペッしなさい。
@Kongyokongyo / 2026/02/18
AI駆動でまともなテストを書かせる
これをAGENTS.mdかCLAUDE.mdに貼り付ける。生のAIだと牟田口式のテストが間違っているので修正する方式でカカシを建て始めるので必須。
@Kongyokongyo / 2026/01/22
ニコニコ動画 技術的詳細分析
@Kongyokongyo / 2026/01/15
蠍媛キラー
https://github.com/kongyo2/nico-spam-kill に私が作成した蠍媛キラーのバックアップ。AdGuard用フィルター。
@Kongyokongyo / 2026/01/08
chrome-devtools-MCPでニコニコの再生ページを魔改造するバイブコーディング入門
私の執筆能力がおうんちなので原稿(笑)をclaude opus4.5に渡して何とか読める水準にしたもの。あと本文に書き損ねたが大学生諸君でgeminiの乞食キャンペーン期間に滑り込むのに成功した方はgoogleantigravityで...
@Kongyokongyo / 2025/12/31
最近追加されたノート