技能概述
Design Brief 係 Open Design 嘅核心基礎技能。佢將模糊嘅自然語言需求（例如「make it professional」）轉換為 8 個正交維度嘅結構化規格，消除設計歧義。支持 I-Lang 格式輸入同自然語言輸入兩種模式，自動生成 DESIGN.md（9 節設計系統文檔）同可視化預覽頁面。
8 個維度：Color palette、Accent color、Body typography、Display typography、Layout model、Mood、Density、Constraints。
觸發關鍵字
- design brief、create a design brief、ilang brief、structured brief
- 設計簡報、結構化簡報
什麼時候用
- 生成任何設計前先定義設計系統
- 將「clean dark landing page」轉為具體 token
- 比較兩個設計方案嘅基礎差異
- 團隊協作時統一設計語言
使用方法
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
自然語言輸入
"I need a landing page for a developer tool. Clean, minimal, dark mode. Inter font. No flashy animations."
Agent 會自動將自然語言映射為 I-Lang 維度值。
工作流程
- 接收輸入 — I-Lang 結構化簡報或自然語言描述
- 驗證 8 個維度 — 檢查每個維度是否已指定，未指定則應用默認規則
- 解析 Token — 將符號值映射為具體設計 token（色值 / 字體 / 間距）
- 生成 DESIGN.md — 9 節設計系統文檔（色彩 / 排版 / 組件 / 布局 / 深度 / 響應式 / Do's & Don'ts / Agent prompt guide）
- 生成 brief-preview.html — 色彩樣板 / 排版樣本 / 間距尺 / 組件預覽
- 報告默認值 — 列出用戶未指定且應用默認規則嘅維度
維度映射表
| 自然語言短語 | 維度 | I-Lang 值 |
|---|---|---|
| "dark mode" | palette | monochrome_dark |
| "clean", "minimal" | mood | professional_minimal |
| "spacious" | density | spacious |
| "Inter" | typography | inter |
| "no animations" | exclude | animations |
輸出格式
- DESIGN.md — 9 節設計系統文檔
- brief-preview.html — 色彩樣板 + 排版樣本 + 間距尺 + 組件預覽
- 默認值報告 — 列出自動選擇嘅維度
實際例子
例子 1：自然語言轉結構化
用戶：「dark mode landing page, coral accent, no gradients」
自動解析：
- palette=monochrome_dark
- accent=coral
- layout=single_column（默認）
- mood=professional_minimal（默認）
- density=balanced（默認）
- exclude=gradients
例子 2：完整 I-Lang 輸入
用戶提供完整 I-Lang 簡報，Agent 直接解析為 DESIGN.md + 預覽，無需推斷默認值。