技能概述
Open Design Landing 係 Open Design 嘅 canonical marketing page 配方，產出一個世界級嘅單頁編輯式落地頁。採用 Atelier Zero 視覺系統：暖色紙張背景、Inter Tight + Playfair Display、italic serif 強調、dotted hairline 規則、珊瑚色終止點、scroll-reveal 動畫同 16 張超現實拼貼資產。
技能完全參數化 — agent 從品牌簡報填入 inputs.json，composer 將 JSON + styles.css 轉為可部署 artifact。支援三種圖片策略：placeholder SVG、gpt-image-2 生成、bring-your-own PNG。
觸發關鍵字
- landing page、落地頁、editorial site、magazine layout、hero collage、atelier zero、open design landing
什麼時候用
- 品牌 / 工作室嘅編輯式官方落地頁
- 開源項目嘅 marketing surface
- 需要 Monocle / Apartamento / Études 風格嘅品牌頁面
- 需要 16 張拼貼資產嘅視覺豐富的 landing page
使用方法
自然語言觸發
Build me an editorial landing page for "Lumen Field"
整一個落地頁，Atelier Zero 風格
Editorial landing page with coral accent, placeholder images
工作流程
Step 1 — 收集品牌輸入
透過 focused questions 收集 8 組數據，映射到 inputs.json：
- Brand identity（name、mark、tagline、location）
- License / version / URL / contact
- Navigation links（最多 5 個）
- Hero copy + 3 stat rings + 4-step index
- Manifesto + 4 capability cards
- 5 lab cards + 4 method steps
- 2 selected-work cards + testimonial
- CTA + footer（4 link columns + mega kicker）
Step 2 — 決定圖片策略
| 策略 | 時機 | 成本 |
|---|---|---|
placeholder |
第一輪、demo、無圖片預算 | $0, <1s |
generate |
最終交付、需要原創拼貼 | ~$0.40, ~6 min |
bring-your-own |
用戶已有 PNG | $0, 0s |
Step 3 — 組合 artifact
npx tsx scripts/compose.ts <inputs.json> <out>/index.html
輸出自包含 HTML，內聯 Atelier Zero CSS + scroll-reveal IntersectionObserver + Headroom nav + GitHub star count fetcher。
Step 4 —（可選）鏡像 Astro 站點
Fork apps/landing-page/ 包，對齊 inputs.json 內容，build 靜態輸出。
輸出格式
自包含 HTML 文件：
- Editorial topbar（volume / issue / language strip）+ Headroom sticky nav
- 8 個羅馬數字編號章節：hero（stat rings + index）、about、capabilities（4 cards）、labs（5 cards + filter pills）、method（4 steps）、selected work（dark slab + 2 cards）、testimonial、CTA
- Footer（4 link columns + mega italic-serif kicker）
- Scroll-reveal 動畫（IntersectionObserver，尊重
prefers-reduced-motion） - 1280 / 1080 / 880 / 560 四級響應式斷點
設計要點
| 元素 | 規格 |
|---|---|
| 視覺系統 | Atelier Zero（暖色紙張、Inter Tight + Playfair Display） |
| 配色 | Coral accent + terminating dots |
| 動畫 | Scroll-reveal（IntersectionObserver） |
| 圖片 | 16 張拼貼資產（placeholder / generate / BYO） |
| Nav | Headroom-style sticky，含 GitHub star count |
| 響應式 | 1280 / 1080 / 880 / 560 四級斷點 |
視覺規則
- 唔好發明新顏色或字體 — tokens 喺 DESIGN.md，先擴展 design system 再加新 ramp
- 唔好刪走
data-reveal— 冇咗頁面就變成靜態，感覺死板 - 唔好用框架包裹 HTML — Atelier Zero 依賴 stylesheet order cascade
- Dotted hairline rules + coral terminating dots — 每個 h1/h2 結尾都有
- Italic serif emphasis spans — 用 Playfair 渲染，唔好用 sans
Self-check 清單
- HTML 打開無 console errors
- 16 個圖片 slot 全部載入（無 404）
- Headline italic emphasis 用 Playfair 渲染
- 珊瑚色終止點喺每個 h1/h2 結尾出現
- 從頂部滾到底部，每章節動畫入場一次
- 880px 同 560px 無水平滾動、無重疊
-
prefers-reduced-motion: reduce禁用過渡 - Lighthouse：contrast 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, mention the iOS Beta TestFlight, three stats: 12 soundscapes / 4 presets / 1 daily ritual. Use the placeholder image strategy.」
生成落地頁：
- Hero：「Lumen Field」+ 3 個 stat rings + 4-step index
- About：Manifesto 段落
- Capabilities：4 張能力卡片
- Labs：5 張實驗室卡片 + filter pills
- Method：4 個步驟帶 thumbnail
- Selected Work：dark slab 上 2 張傾斜卡片
- Testimonial：pull quote + 5 partner glyphs
- CTA + Footer：email pill + 4 link columns + mega kicker