design-first-ui-prompting

デザインファースト UI プロンプティングスキル

このスキルは、デザインファーストのプロンプティングを目的としています。曖昧なアイデアを、UI に一貫性をもたらす、明確で簡潔な仕様に変換します。

このスキルを使う場面

• GOAL / FORMAT / LAYOUT / TYPE SYSTEM / COLOR+MATERIAL / IMAGERY / COPY / CONSTRAINTS / NEGATIVE PROMPT の骨組みを使って、曖昧な UI のアイデアを明確でざっと読める仕様にまとめる場合。
• まず単一の「システム」（レイアウト、階層、コピー）を固め、その後、一度に一つの変数だけ（アングル／トリミング、アクセントカラー、カード配置、背景の色調）を変えて反復する場合。
• 信頼性に欠ける AI 生成のタイポグラフィに対して、2 パスのワークフローを使う場合。まずテキストなしで生成し、その後、コピーを別途組版します（例：Figma）。
• モデルの出力を小さなスタイルガイドのように方向づける「制約カード」（FONT / STYLE / MODE）を作成する場合や、モデルが好みを「覚えている」ことを期待せず、ローカルの参照資料一式を管理する場合。
• 高速反復のチェックリスト（余白、コントラスト、ヒーローとなる一行の階層、単一のアクセントカラー、テクスチャ）や、UI 生成リクエストで本当に必要なことを明確にするための、曖昧なユーザー向け質問リストを使う場合。
• ページやプロダクト全体で共有するデザイントークン／ビジュアル言語システムの定義や管理には使いません（design-system を参照してください）。レスポンシブ／ブレークポイントのレイアウト戦略や検証にも使いません（responsive-design を参照してください）。また、再利用可能なコンポーネント API アーキテクチャにも使いません（このリポジトリには現在、専用のスキルがありません。design-system の境界に関する質問として扱ってください）。

核となる原則

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

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

この骨組みを使い、空欄を埋めてください。

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) ひとつの「システム」を固めてから、バリエーションを試す

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

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

モデルがスペルを間違え続ける場合：

• 2 パスのワークフローを使います。
  1. テキストなしで生成する（テキスト用の余白を確保します）
  2. Figma で組版する

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

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

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

例：

Constraints
FONT  CANELA
STYLE  MINIMAL
MODE  DARK

4) ローカルの参照資料一式を用意する

モデルに好みを「覚えている」よう求めないでください。

• refs/... など、gitignore 対象のローカル参照フォルダーに参照資料を保存します。
• プロンプトで参照スタイルを指定します。

高速反復チェックリスト（調整する項目）

• 余白：マージン、行送り、ベースラインのリズム
• コントラスト：背景とテキストの対比
• 階層：ヒーローとなる一行と、補足の一行
• アクセントカラーは一色だけ（色を増やしすぎない）
• テクスチャ：粒子を加える、スムージングを取り除く

質問する項目（ユーザーの要望が曖昧な場合）

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

参考資料

• 上流のソース：MengTo/Skills — design-first-ui-prompting
• ARTICLE.md — このワークフローを詳しく解説した記事
• REFERENCES.md — 外部のインスピレーション／参考資料（Mobbin、Bento Grids、Figma Community、Iconify、Simple Icons）