技能概述
Web Prototype 係 Open Design 嘅通用桌面網頁原型技能。基於 seed template.html 同佈局庫組裝，唔使從零寫 CSS。Seed 已經內置咗好嘅默認值（排版、間距、accent 預算），你嘅任務係組合佢哋。
適用於 landing page / marketing page / docs / SaaS 頁面等任何場景，當冇更專門嘅技能匹配時就用呢個。
觸發關鍵字
- prototype、mockup、landing、single page、marketing page、homepage
什麼時候用
- 做網頁原型
- 做 landing page
- 做 marketing 頁面
- 做首頁 mockup
- 任何需要快速生成桌面網頁原型嘅場景
使用方法
自然語言觸發
幫我整一個 landing page prototype
做一個 marketing page mockup
整個 web prototype
標準工作流程
Step 0 · Pre-flight
- 讀
template.html到<style>結尾 - 讀
layouts.md了解 8 種 section 骨架 - 讀 DESIGN.md，映射顏色到 6 個
:root變量
Step 1 · 拷貝 Seed
拷貝 template.html 到項目根目錄為 index.html，替換 :root 變量同頁面標題
Step 2 · 規劃 Section 列表 默認節奏：
- Landing：hero → features → stats/quote → split → CTA
- Marketing / Editorial：hero-center → log list → CTA
- Pricing：hero-center → comparison table → CTA
- Docs Index：hero-center → log list（文檔 section）→ CTA
Step 3 · 粘貼 + 填充
從 layouts.md 拷貝 <section> 塊，替換 [REPLACE] 為真實文案
Step 4 · 自檢
運行 checklist.md，P0 項必須全過
輸出格式
單文件 HTML，CSS inline，包含：
- Hero section
- Feature tiles
- Stats / Social proof
- CTA section
- Footer
每個 <section> 帶 data-od-id 用於 comment mode。
硬規則
- 單一 accent，每屏最多用兩次（eyebrow + CTA）
- Display 字體用 serif，正文用 sans，數字/標題用 mono
- 圖片用
.ph-img占位，唔好鏈接外部 CDN - Mobile reflow 已由 seed 處理（920px media query），唔好加 fixed width 破壞佢
- 每個 section 帶
data-od-id
實際例子
例子 1：SaaS Landing Page
用戶：「幫我整一個 AI 寫作工具嘅 landing page」
生成 6 section：
- Hero（標題 + tagline + CTA）
- Features（4 個 feature tile）
- Stats（3 個大數字）
- Quote（客戶評價）
- CTA（行動號召）
- Footer
例子 2：Marketing Page
用戶：「做一個 marketing page，展示我哋嘅設計服務」
生成：
- hero-center（大標題 + 副標題）
- log list（服務列表）
- CTA（聯繫我們按鈕）