design-first-ui-prompting

デザインファーストのUIプロンプトスキル

このスキルは、デザインファーストのプロンプト作成を目的としています。曖昧なアイデアを、UIの一貫性を生み出す明確な仕様へと落とし込みます。

基本原則

願望ではなく、デザインシステムのようにプロンプトを作成しましょう。

プロンプトの構成（コピーして貼り付け）

このひな形を使い、空欄を埋めてください。

GOAL
- What are we making? (e.g., landing page hero / onboarding / dashboard / carousel slide)
- Who is it for? (persona)
- What’s the success criteria? (clarity, conversion, vibe)

FORMAT
- Size/aspect: (e.g., 1080x1350)
- Safe margins: (e.g., 90px)

LAYOUT (wireframe in words)
- Grid: (e.g., Swiss 6-col)
- Placement: (e.g., type-left / image-right)
- Hierarchy: H1 → subhead → body → CTA

TYPE SYSTEM
- Font vibe: (e.g., Söhne / Neue Haas / SF Pro)
- Weights: (H1 700, body 400)
- Leading: (tight for H1, readable for body)
- Tracking: (micro labels wider)

COLOR + MATERIAL
- Background: (hex or description)
- Text: (white/ivory/charcoal)
- One accent only: (cyan/lime/purple)
- Texture: (subtle grain, no plastic HDR)

IMAGERY / UI STYLE
- UI style: (minimal / glass / editorial / playful 3D)
- If photo: lighting + crop + texture rules
- If 3D: materials + lighting + softness

COPY (render EXACTLY)
- Line 1:
- Line 2:
- ...

CONSTRAINTS (change 1–2 things only)
- FONT: ___
- STYLE: ___
- MODE: ___

NEGATIVE PROMPT
- No logos, no watermarks
- No extra text beyond provided lines
- No gibberish typography

一貫性を高めるルール

1）まず1つの「システム」を固め、その後バリエーションを試す

• 最初の出力：レイアウト＋階層＋コピーをしっかり決めます。
• バリエーション：一度に変更するのは1つの変数だけにします。
  • アングル／トリミング
  • アクセントカラー
  • カードの配置
  • 背景の色調

2）タイポグラフィは崩れやすいものとして扱う

モデルがスペルミスを繰り返す場合：

• 2段階のワークフローを使います。 1）テキストなしで生成する（テキストを配置できる、何もない領域を確保する） 2）Figmaで文字を組む

3）「制約カード」を使う

モデルにスタイルを守らせたい場合：

• 明示的な値を記載した小さな「制約」パネルを追加します。
• ミニスタイルガイドのように、出力の方向性を定めます。

例：

Constraints
FONT  CANELA
STYLE  MINIMAL
MODE  DARK

4）ローカルのリファレンスパックを用意する

モデルに好みを「覚えて」もらおうとしないでください。

• refs/...など、Gitで無視されるローカルのリファレンスフォルダーに参考資料を保存します。
• プロンプトで参考スタイルを指定します。

素早く反復するためのチェックリスト（調整する項目）

• 余白：マージン、行送り、ベースラインのリズム
• コントラスト：背景とテキストのコントラスト
• 階層：メインの見出しを1つ、補足の見出しを1つ
• アクセントは1つだけにする（虹色にしない）
• テクスチャ：粒子感を加える、スムージングをなくす

質問例（ユーザーの要望が曖昧な場合）

• この画面で伝えるべき、唯一のメッセージは何ですか？
• 階層はどうなっていますか（H1／サブ／CTA）？
• どのスタイルにしますか：ミニマルなエディトリアル、遊び心のある3D、ガラス風UI？
• 必ず維持する制約はありますか（フォントの雰囲気、色、余白、グリッド）？