將以 I-Lang 協定格式撰寫的結構化設計簡報解析為具體的設計規範。透過要求明確的維度（調色盤、字型排印、版面配置、氛圍、密度與限制條件），消除如「做得專業一點」這類模糊需求中的模糊空間。 觸發關鍵字："design brief"、"create a design brief"、"ilang brief"、"structured brief"。
Design Brief Skill
將結構化的設計簡報解析為具體的 DESIGN.md 以及可選的視覺預覽。Agent 請嚴格遵守此工作流程。
背景
本 Skill 中的 8 個維度源自 Open Design 原版 71 個系統的目錄；71 代表研究範例數，而非目前內建的系統數量。design-systems/ 中的每個 DESIGN.md 最少依然需解析出：調色盤、強調色、內文字型、展示字型、版面配置模型與元件樣式。我們將其精煉為 8 個正交維度，涵蓋設計師在落筆佈局像素前所需做出的所有決策。之所以加入「氛圍」與「密度」，是因為這兩者是自然語言簡報中最常產生歧義的來源（例如「做得乾淨俐落」對每個人來說都有不同的理解）。
特意未納入簡報層級的維度包含：動畫時序、響應式策略以及無障礙對比度。這些會在範本層級由各個獨立 Skill 強制執行（例如 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：自然語言
「我需要一個開發者工具的落地頁（Landing Page）。風格要乾淨、極簡、深色模式。使用 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 |
| 「單頁」 | layout | single_column |
| 「雙欄」、「側邊欄」 | layout | two_column |
| 「行動裝置優先」 | responsive | mobile_first |
當一個片語對應到多個維度時（例如 "clean dark landing page" → mood=professional_minimal + palette=monochrome_dark + layout=single_column），請獨立解析每個維度。當單一對應列出多個數值時，第一個為預設值；Agent 僅在前後文語境強烈偏向替代選項時，方可選擇替代值。
2. 驗證維度
每個設計簡報都必須解析這 8 個維度。若輸入中缺少任何維度，請根據 2.2 節的規則選擇合理的預設值。
下方列出的數值構成一個封閉字彙集（closed vocabulary）。只有此表中的數值在 2.1 節中擁有具體的 Token 對應。若使用者提供了此處未列出的數值，Agent 必須要求使用者澄清說明，而非隨意猜測。
| # | 維度 | 鍵名 (Key) | 範例數值 |
|---|---|---|---|
| 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 符號化數值 → 具體 Token 解析
每個符號化數值都會對應到具體的設計 Token（design tokens）。Agent 在撰寫 DESIGN.md 之前必須先解析這些數值：
| 符號化數值 | 具體 Token |
|---|---|
palette=navy_and_white |
Background: #0F172A, Surface: #1E293B, Text: #F8FAFC, Secondary: #94A3B8 |
palette=monochrome_dark |
Background: #09090B, Surface: #18181B, Text: #FAFAFA, Secondary: #A1A1AA |
palette=light_clean |
Background: #FFFFFF, Surface: #F8FAFC, Text: #0F172A, Secondary: #64748B |
palette=earth_tones |
Background: #FFFBEB, Surface: #FEF3C7, Text: #451A03, Secondary: #92400E |
accent=coral |
Accent: #F97316, Hover: #EA580C |
accent=electric_blue |
Accent: #3B82F6, Hover: #2563EB |
accent=emerald |
Accent: #10B981, Hover: #059669 |
accent=muted_sage |
Accent: #84A98C, Hover: #6B8F73 |
accent=slate |
Accent: #64748B, Hover: #475569 |
typography=inter |
Body: Inter, 400, 1rem/1.6 |
typography=system_ui |
Body: system-ui, 400, 1rem/1.6 |
typography=dm_sans |
Body: DM Sans, 400, 1rem/1.6 |
typography=georgia |
Body: Georgia, 400, 1.125rem/1.7 |
display=space_grotesk |
Display: Space Grotesk, 700, clamp(2rem, 5vw, 3.5rem) |
display=clash_display |
Display: Clash Display, 700, clamp(2rem, 5vw, 3.5rem) |
display=playfair |
Display: Playfair Display, 700, clamp(2rem, 5vw, 3.5rem) |
display=same_as_body |
Display 繼承內文字型家族，字重 600 |
density=compact |
Section spacing: 48px, Content padding: 16px/24px |
density=balanced |
Section spacing: 72px, Content padding: 24px/40px |
density=spacious |
Section spacing: 96px, Content padding: 24px/48px |
不在本表中的符號化數值皆屬無效。若使用者提供無法識別的數值（例如 palette=ocean_blue），Agent 必須要求使用者進一步澄清：「無法識別 palette=ocean_blue。請問您指的是 navy_and_white、monochrome_dark、light_clean 還是 earth_tones？」
2.2 預設值解析規則
當某個維度未指定時，將根據與「氛圍（mood）」的相容性選擇預設值：
| 未指定的維度 | 預設規則 |
|---|---|
palette |
若 mood=editorial → light_clean；若 mood=brutalist → monochrome_dark；其餘情況 → light_clean。 |
accent |
若調色盤為深色 → coral；若調色盤為淺色 → electric_blue。 |
typography |
一律為 → inter（跨平台易讀性最高）。 |
display |
若 mood=editorial → playfair；若 mood=brutalist → space_grotesk；其餘情況 → same_as_body。 |
layout |
一律為 → single_column（最安全的響應式預設值）。 |
mood |
一律為 → professional_minimal（立場最中立、主觀偏好最少）。 |
density |
一律為 → balanced。 |
exclude |
一律為 → none（除非有特別指定，否則無限制條件）。 |
若「氛圍」也未指定，則所有預設值回退至安全的採中立設定集：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
本 Skill 會根據解析後的簡報維度，從頭生成全新的 DESIGN.md。若工作目錄中已存在 DESIGN.md，Agent 應詢問使用者要覆寫還是跳過。
請使用下方包含九大章節的大綱來生成 DESIGN.md。此大綱為本 Skill 繼承自 Open Design 原始上游基準的可攜式獨立輸出，並非當前儲存庫的套件架構（package schema）。目前內建的套件還包含 manifest.json、tokens.css 以及可選的豐富資源，而舊版或使用者自行安裝的純 DESIGN.md 內容仍可正常讀取。所有顏色 Hex 色碼、字型組合（font stacks）與間距數值皆必須來自 2.1 節已解析的 Token — 切勿自行捏造解析表以外的數值。
# [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.
- Acce
<!-- truncated for translation batch; full body continues in source -->
