design-brief について
design-briefは、構造化または自然言語のデザインブリーフをDESIGN.mdにまとめ、任意でHTMLプレビューを作成するスキルです。デザイントークンの決定と、未指定項目に適用したデフォルトの明示を支援します。
主な機能
- 01構造化・自然言語のブリーフ解析
- 028つのデザイン次元の解決
- 03トークンに基づくDESIGN.md生成
- 04任意のHTMLプレビュー作成
- 05デフォルト適用項目の報告
活用シーン
- 01ランディングページのブリーフをデザイントークンに変換
- 02未指定のデザイン項目に適用したデフォルトを記録
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/design-briefを入力して読み込まれたか確認します。
同梱ファイルREADME.md
詳細
デザインブリーフスキル
構造化されたデザインブリーフを、具体的な DESIGN.md と任意のビジュアルプレビューに変換します。エージェントは、このワークフローに正確に従ってください。
背景
このスキルの8つの次元は、Open Design に含まれる71のデザインシステムの分析から導き出されています。design-systems/ 内のすべての DESIGN.md では、少なくともカラーパレット、アクセント、タイポグラフィ、ディスプレイフォント、レイアウトモデル、コンポーネントスタイルが定義されています。これらを、デザイナーがピクセルを配置する前に行う判断を網羅する、互いに直交する8つの次元に集約しました。自然言語のブリーフで最もよく曖昧さの原因となるのがムードと密度であるため、これらも追加しました（「すっきりさせて」という表現の意味は、人によって異なります）。
ブリーフの段階では、アニメーションのタイミング、レスポンシブ戦略、アクセシビリティのコントラストは対象外としています。これらは個々のスキルがテンプレートの段階で適用します（例：saas-landing は独自のレスポンシブロジックを処理します）。ただし、生成される DESIGN.md には、後続で利用できる適切なブレークポイントのデフォルト値が含まれます。
1. 入力を受け取る
ユーザーは、次のいずれかの形式でデザインブリーフを提供します。
オプション 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 の値 |
|---|---|---|
| "dark mode", "dark theme" | palette | monochrome_dark |
| "light", "white background" | palette | light_clean |
| "earthy", "warm tones" | palette | earth_tones |
| "pop of color", "vibrant" | accent | electric_blue（デフォルト）または coral |
| "subtle accent" | accent | muted_sage（デフォルト）または slate |
| "clean", "minimal", "simple" | mood | professional_minimal |
| "playful", "fun", "friendly" | mood | playful |
| "bold", "brutalist", "raw" | mood | brutalist |
| "editorial", "magazine-like" | mood | editorial |
| "spacious", "lots of whitespace" | density | spacious |
| "compact", "dense", "information-rich" | density | compact |
| "Inter", "system font" | typography | inter（デフォルト）または system_ui |
| "serif", "traditional" | typography | georgia（デフォルト）または playfair |
| "monospace", "code-like" | typography | jetbrains_mono |
| "no animations", "static" | exclude | animations |
| "no gradients" | exclude | gradients |
| "no stock photos" | exclude | stock_photos |
| "single page" | layout | single_column |
| "two columns", "sidebar" | layout | two_column |
| "mobile first" | 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 がすでに存在する場合、エージェントは上書きするかスキップするかをユーザーに確認する必要があります。
Open Design の 9 セクション規約に従って DESIGN.md を作成します。色のすべての HEX 値、フォントスタック、間隔の値は、セクション 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 つのセクションをこの順序で含めてください。
- カラーパレットのスウォッチ — 長方形を横一列に並べ、それぞれに Color セクションの色を 1 つ表示します。それぞれに役割（Background、Surface、Text、Accent）と HEX コードのラベルを付けます。
- タイポグラフィの見本 — Display、Body、Mono フォントを、指定されたサイズで示すテキストブロックを 3 つ作成します。それぞれにサンプル文（「The quick brown fox...」）を使用します。
- 間隔ルーラー — セクション間隔とコンテンツのパディングの値を示す、視覚的なルーラーまたは積み重ねたバーを作成し、px 値のラベルを付けます。
- コンポーネントのプレビュー — 解決済みのトークンを使用して、実際に動作するコンポーネントを 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)
これにより、暗黙の仮定が最終的なデザインに引き継がれるのを防げます。