design-brief

デザインブリーフスキル

構造化されたデザインブリーフを、具体的な DESIGN.md と任意のビジュアルプレビューに変換します。エージェントは、このワークフローに正確に従ってください。

背景

このスキルの8つの次元は、OpenDesign の元となる71システムのカタログから導き出されました。71は調査対象のサンプル数であり、現在バンドルされているシステムの数ではありません。design-systems/ 内のすべての DESIGN.md では、少なくともカラーパレット、アクセント、タイポグラフィ、ディスプレイフォント、レイアウトモデル、コンポーネントスタイルが引き続き定義されています。これらを、ピクセルを配置する前にデザイナーが決める事項を網羅する、互いに直交した8つの次元に整理しました。自然言語のブリーフで曖昧さの原因となることが特に多いのはムードと密度であるため、この2つも追加しました（「すっきりさせて」という表現の意味は、人によって異なります）。

ブリーフのレベルで意図的に除外している次元は、アニメーションのタイミング、レスポンシブ戦略、アクセシビリティのコントラストです。これらは個々のスキルによってテンプレートレベルで適用されます（たとえば、saas-landing は独自のレスポンシブロジックを処理します）。ただし、生成される DESIGN.md には、後続処理で利用できる適切なブレークポイントのデフォルト値が含まれます。

1. 入力を受け付ける

ユーザーは、次の2つの形式のいずれかでデザインブリーフを提供します。

オプション A：I-Lang 構造化ブリーフ

[PLAN:@DESIGN|type=saas_landing]
  |palette=navy_and_white|accent=coral
  |typography=inter|display=space_grotesk
  |layout=single_column|max_width=1200px
  |mood=professional_minimal
  |density=spacious|section_gap=96px
  |hero=headline+subhead+cta
  |sections=features,pricing,testimonials,footer
  |exclude=animations,parallax,gradients
  |responsive=mobile_first

オプション B：自然言語

「開発者向けツールのランディングページが必要です。すっきりとミニマルなダークモードにしてください。フォントは Inter。派手なアニメーションは不要です。」

ユーザーがオプション B を提供した場合は、以下のマッピング表を使って構造化形式に変換してから、処理を進めてください。明示されている各次元を特定し、指定されていない次元にはフラグを立ててください。

自然言語 → I-Lang マッピング

自然言語の入力に含まれる各文について、次元を示すキーワードを特定し、最も近い構造化値にマッピングします。

自然言語の表現	次元	I-Lang の値
「ダークモード」、「ダークテーマ」	palette	monochrome_dark
「明るい」、「白い背景」	palette	light_clean
「アースカラー」、「暖色系」	palette	earth_tones
「差し色」、「鮮やか」	accent	electric_blue（デフォルト）または coral
「控えめなアクセント」	accent	muted_sage（デフォルト）または slate
「すっきり」、「ミニマル」、「シンプル」	mood	professional_minimal
「遊び心のある」、「楽しい」、「親しみやすい」	mood	playful
「大胆」、「ブルータリスト」、「飾らない」	mood	brutalist
「エディトリアル」、「雑誌風」	mood	editorial
「ゆったり」、「余白が多い」	density	spacious
「コンパクト」、「情報量が多い」、「情報が豊富」	density	compact
「Inter」、「システムフォント」	typography	inter（デフォルト）または system_ui
「セリフ」、「伝統的」	typography	georgia（デフォルト）または playfair
「等幅」、「コード風」	typography	jetbrains_mono
「アニメーションなし」、「静的」	exclude	animations
「グラデーションなし」	exclude	gradients
「ストックフォトなし」	exclude	stock_photos
「1ページ」	layout	single_column
「2カラム」、「サイドバー」	layout	two_column
「モバイルファースト」	responsive	mobile_first

1つの表現が複数の次元にマッピングされる場合（例：「すっきりしたダークなランディングページ」→ mood=professional_minimal + palette=monochrome_dark + layout=single_column）、各次元を個別に判断してください。1つのマッピングに複数の値が記載されている場合は、最初の値がデフォルトです。周囲の文脈から別の値が強く適切と判断できる場合に限り、エージェントは代替値を選択できます。

2. 寸法を検証する

すべてのデザインブリーフで、以下の8つの寸法を確定する必要があります。入力に不足している項目がある場合は、セクション2.2のルールを使用して適切なデフォルトを選択してください。

以下に記載されている値は、クローズドな語彙を構成します。セクション2.1に具体的なトークンのマッピングがあるのは、この表に記載された値のみです。ユーザーがここに記載されていない値を指定した場合、エージェントは推測せず、明確化を求める必要があります。

#	寸法	キー	値の例
1	カラーパレット	palette	navy_and_white, earth_tones, monochrome_dark, light_clean
2	アクセントカラー	accent	coral, electric_blue, emerald, muted_sage
3	本文のタイポグラフィ	typography	inter, system_ui, dm_sans, georgia
4	ディスプレイ用タイポグラフィ	display	space_grotesk, clash_display, same_as_body, playfair
5	レイアウトモデル	layout	single_column, two_column, asymmetric
6	雰囲気	mood	professional_minimal, playful, brutalist, editorial
7	密度	density	compact, balanced, spacious
8	制約	exclude	animations, gradients, stock_photos, carousel

2.1 シンボリック値から具体的なトークンへの解決

各シンボリック値は具体的なデザイントークンに対応します。エージェントは、DESIGN.md を作成する前にこれらを解決する必要があります。

シンボリック値	具体的なトークン
palette=navy_and_white	背景: #0F172A, 表面: #1E293B, テキスト: #F8FAFC, セカンダリ: #94A3B8
palette=monochrome_dark	背景: #09090B, 表面: #18181B, テキスト: #FAFAFA, セカンダリ: #A1A1AA
palette=light_clean	背景: #FFFFFF, 表面: #F8FAFC, テキスト: #0F172A, セカンダリ: #64748B
palette=earth_tones	背景: #FFFBEB, 表面: #FEF3C7, テキスト: #451A03, セカンダリ: #92400E
accent=coral	アクセント: #F97316, ホバー: #EA580C
accent=electric_blue	アクセント: #3B82F6, ホバー: #2563EB
accent=emerald	アクセント: #10B981, ホバー: #059669
accent=muted_sage	アクセント: #84A98C, ホバー: #6B8F73
accent=slate	アクセント: #64748B, ホバー: #475569
typography=inter	本文: Inter, 400, 1rem/1.6
typography=system_ui	本文: system-ui, 400, 1rem/1.6
typography=dm_sans	本文: DM Sans, 400, 1rem/1.6
typography=georgia	本文: Georgia, 400, 1.125rem/1.7
display=space_grotesk	ディスプレイ: Space Grotesk, 700, clamp(2rem, 5vw, 3.5rem)
display=clash_display	ディスプレイ: Clash Display, 700, clamp(2rem, 5vw, 3.5rem)
display=playfair	ディスプレイ: Playfair Display, 700, clamp(2rem, 5vw, 3.5rem)
display=same_as_body	ディスプレイ: 本文のフォントファミリーを継承、ウェイト600
density=compact	セクション間隔: 48px, コンテンツのパディング: 16px/24px
density=balanced	セクション間隔: 72px, コンテンツのパディング: 24px/40px
density=spacious	セクション間隔: 96px, コンテンツのパディング: 24px/48px

この表にないシンボリック値は無効です。ユーザーが認識できない値（例: palette=ocean_blue）を指定した場合、エージェントは明確化を求める必要があります。「palette=ocean_blue は認識できません。navy_and_white、monochrome_dark、light_clean、earth_tones のいずれかのことですか？」

2.2 デフォルト解決ルール

次元が指定されていない場合は、ムードとの適合性に基づいてデフォルトを選択します。

未指定の次元	デフォルトルール
palette	mood=editorial の場合 → light_clean。mood=brutalist の場合 → monochrome_dark。それ以外の場合 → light_clean。
accent	palette がダークの場合 → coral。palette がライトの場合 → electric_blue。
typography	常に → inter（クロスプラットフォームで最も読みやすいため）。
display	mood=editorial の場合 → playfair。mood=brutalist の場合 → space_grotesk。それ以外の場合 → same_as_body。
layout	常に → single_column（レスポンシブ対応で最も安全なデフォルト）。
mood	常に → professional_minimal（最も主張の少ない選択肢）。
density	常に → balanced。
exclude	常に → なし（指定がない限り制約なし）。

mood も指定されていない場合、すべてのデフォルトは安全で中立的なセットにフォールバックします：palette=light_clean、accent=electric_blue、typography=inter、display=same_as_body、layout=single_column、mood=professional_minimal、density=balanced、exclude=none。

3. DESIGN.md を生成する

このスキルは、解決済みのブリーフの各次元に基づいて、新しい DESIGN.md を一から生成します。作業ディレクトリに DESIGN.md がすでに存在する場合、エージェントは上書きするかスキップするかをユーザーに確認する必要があります。

以下の9セクション構成を使用して DESIGN.md を作成します。この構成は、OpenDesign の元の上流ベースラインを引き継いだ、このスキル単体で利用できるポータブルな出力です。現在のリポジトリのパッケージスキーマではありません。現在同梱されているパッケージには manifest.json、tokens.css、および任意のリッチリソースも含まれます。一方、従来のものやユーザーがインストールした DESIGN.md のみのコンテンツも引き続き読み取り可能です。すべてのカラーの16進値、フォントスタック、間隔の値は、セクション2.1で解決されたトークンから取得する必要があります。解決表にない値を独自に追加しないでください。

# [Project Name] Design System

## Visual Theme & Atmosphere
- Mood: [resolved from mood]
- Feel: [derived from mood — e.g., professional_minimal → "Clean, confident, restrained"]
- References: [if mood=editorial → "Magazine layouts, Monocle, Cereal"; if mood=brutalist → "Exposed structure, raw typography"]

## Color Palette & Roles
- Background: [resolved from palette]
- Surface: [resolved from palette]
- Text primary: [resolved from palette]
- Text secondary: [resolved from palette]
- Accent: [resolved from accent]
- Accent hover: [resolved from accent]

## Typography Rules
- Display: [resolved from display], 700, clamp(2rem, 5vw, 3.5rem)
- Body: [resolved from typography], 400, 1rem/1.6
- Mono: JetBrains Mono, 400, 0.875rem

## Component Stylings
- Buttons: [if mood=playful → "rounded-full", otherwise → "rounded-md"], accent bg, contrast text
- Cards: surface bg, subtle border, 12px radius
- Inputs: [if mood=brutalist → "thick border", otherwise → "transparent bg, bottom border"]

## Layout Principles
- Max width: 1200px
- Grid: [resolved from layout]
- Section spacing: [resolved from density]
- Content padding: [resolved from density]

## Depth & Elevation
- Shadows: [if mood=brutalist → "hard 4px offset", if mood=professional_minimal → "none", otherwise → "subtle sm"]
- Borders: 1px solid [derived from palette, 8% opacity of text color]

## Do's and Don'ts
- DO use the declared color tokens exclusively.
- DO maintain consistent section spacing.
- DO ensure all text meets WCAG AA contrast ratio.
- DON'T invent colors outside the palette.
- DON'T add decorative shadows unless Depth & Elevation allows them.
- DON'T use more than 2 display/body typefaces (monospace is a utility face for code and data — it does not count toward this limit).

## Responsive Behavior
- Breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
- Mobile: single column, stack all sections vertically
- Tablet: allow 2-column feature grids
- Desktop: full layout with max-width constraint
- Images: fluid, max-width 100%, maintain aspect ratio

## Agent Prompt Guide
- Do NOT invent colors outside this palette.
- Do NOT add box-shadows unless specified above.
- Accent color appears maximum 3 times per viewport.
- All interactive elements need :focus-visible outline.
- [if exclude contains items → list each as "Do NOT use {item}."]

4. brief-preview.html を生成する

解決されたデザイントークンを視覚的に表示する単一の HTML ファイルを作成します。プレビューには、以下の4つのセクションを順番に含めてください。

1. カラーパレットのスウォッチ — 色セクションの各色を示す長方形を横一列に並べます。それぞれに役割（Background、Surface、Text、Accent）と16進コードを表示します。
2. タイポグラフィの見本 — Display、Body、Mono の各フォントを、指定されたサイズで表示する3つのテキストブロックを作成します。それぞれにサンプル文（「The quick brown fox...」）を使用します。
3. 間隔の定規 — セクション間隔とコンテンツのパディングの値を、視覚的な定規または積み重ねたバーで表示し、px値をラベルとして付けます。
4. コンポーネントのプレビュー — 解決されたトークンを使って、実際に操作できるコンポーネントを2～3個表示します（プライマリボタン、タイトルと本文を含むカード、テキスト入力など）。スクリーンショットではなく、機能する HTML/CSS にしてください。

プレビュー自体も、解決されたデザインシステムのトークン（背景色、フォント、間隔）を使ってスタイル設定します。プレビューはデザインシステムのドキュメントページのような見た目にしてください。

5. 未指定の次元を報告する

出力の最後に、ユーザーが指定しなかった次元と適用したデフォルトを、それぞれのデフォルトを選択したルールとともに一覧表示します。

Dimensions resolved from defaults:
- display: set to "same_as_body" (rule: mood=professional_minimal → same_as_body)
- density: set to "balanced" (rule: static fallback, no spacing preference given)
- exclude: set to "none" (rule: no constraints unless specified)

この透明性により、暗黙の仮定が最終的なデザインに引き継がれるのを防ぎます。