技能概述
Open Design Landing 係 Open Design 嘅規範營銷頁面配方，使用 Atelier Zero 設計系統：暖色紙張背景、Inter Tight + Playfair Display、斜體襯線強調跨度、點狀髮線規則、珊瑚色終止點、滾動顯現動畫，以及 16 張超現實拼貼版面。
呢個技能完全參數化。Agent 從用戶簡報填充一個類型化嘅 inputs.json；composer 將 JSON 加上 styles.css 轉化為可部署嘅 artifact。
觸發關鍵字
- landing page、落地页、editorial site、magazine layout、hero collage
- atelier zero、open design landing
- 編輯風格落地頁、雜誌排版
什麼時候用
- 需要一個世界级嘅單頁編輯風格品牌落地頁
- 設計工作室、OSS 維護者嘅營銷頁面
- 用戶要求「Monocle 風格嘅 landing page」或「magazine layout 感」
- Open Design 自身營銷頁面同款美學
使用方法
自然語言觸發
做一個 Atelier Zero 風格嘅 landing page
用 open-design-landing 技能
做一個雜誌風格嘅落地頁
工作流程（4 步）
1. 收集品牌輸入
用 AskQuestion 分段收集品牌簡報（唔好一次性倒 schema 給用戶）：
| 組 | 字段 | 最少答案 |
|---|---|---|
| 1 | brand.{name,mark,tagline,description,location} |
5 |
| 2 | brand.{license,version,year,primary_url,contact_email} |
4 |
| 3 | nav[]（最多 5 個） |
3 |
| 4 | hero.{label,headline,lead,primary,secondary,stats} |
全部 |
| 5 | about + capabilities.cards[4] |
全部 |
| 6 | labs.cards[5] + method.steps[4] |
全部 |
| 7 | work.cards[2] + testimonial |
全部 |
| 8 | cta + footer.{columns[4],mega} |
全部 |
2. 決定圖像策略
| 策略 | 場景 | 成本 |
|---|---|---|
placeholder |
第一輪 / Demo / 無圖像預算 | $0, <1s |
generate |
最終交付 / 品牌需要原創拼貼 | ~$0.40, ~6 min |
bring-your-own |
用戶有藝術指導 PNG | $0, 0s |
3. 生成 artifact
npx tsx scripts/compose.ts <inputs.json> <out>/index.html
Composer 讀取 inputs.json 同 styles.css，生成自包含 HTML 文件。
4. （可選）鏡像 Astro 站點
對於可部署嘅生產輸出，fork apps/landing-page/ 包。
頁面結構
- 編輯頂欄：volume / issue / language strip，Headroom 風格粘性導航 + GitHub star 計數
- 8 個羅馬數字編號區塊：hero（3 個 stat rings + 4 步索引）、about、capabilities（4 卡片）、labs（5 卡片 + 過濾藥丸）、method（4 步驟 + 縮略圖）、selected work（深色板 + 2 傾斜卡片）、testimonial（pull quote + 5 合作夥伴）、CTA（ribbon + email pill）
- Footer：4 列鏈接 + 巨型斜體襯線 kicker 詞
- 滾動顯現動畫：每個區塊用 IntersectionObserver，尊重
prefers-reduced-motion - 完全響應式：1280 / 1080 / 880 / 560 斷點
自檢清單
-
index.html在瀏覽器中打開無 console 錯誤 - 16 個圖像槽全部載入（無 404）
- Hero 斜體強調跨度用 Playfair 渲染
- 每個 display h1/h2 末尾有珊瑚色終止點
- 從頂到底滾動，每個區塊動畫進入一次
- 縮放到 880px 同 560px，無水平滾動、無重疊
- Lighthouse：對比度 AA，font-display swap，CLS < 0.05
實際例子
用戶：「Build me an editorial landing page for 'Lumen Field', an indie studio shipping a soundscape app for focus. Coral accent, Berlin coordinates, three stats: 12 soundscapes / 4 presets / 1 daily ritual. Use the placeholder image strategy.」
生成結果：
- Hero：「Soundscapes for focused work.」混合文本，3 個 stat rings
- About：品牌宣言
- Capabilities：4 張功能卡片
- Labs：5 張實驗室卡片 + 過濾藥丸
- 全部 placeholder SVG 圖像
邊界
- 唔好發明新顏色或字體。Token 存在
design-systems/atelier-zero/DESIGN.md。 - 唔好刪除
data-reveal屬性。 - 唔好用注入自己樣式表順序嘅框架包裹 HTML。