頁面建構

建構品質始於策略忠實度，而非凌駕於其之上。

此階段負責組合頁面，同時保留對信任與轉換至關重要的元素。

必要輸入

workspace/pages/[頁面名稱]/strategy.json
workspace/brand/profile.md
workspace/brand/palette.json
workspace/pages/[頁面名稱]/copy.md
workspace/pages/[頁面名稱]/visuals/
references/anti-slop.md（隨此技能一同提供）

若缺少策略檔案，則停止。

若 workspace/pages/[頁面名稱]/visuals/manifest.json 存在，則將其用作規範的機器可讀視覺來源。當供應商元資料影響信任、忠實度或備援歷史時，請勿忽略。

保留層級

依此順序應用：

保留對信任至關重要的類別慣例
保留機制溝通需求
保留品牌視覺識別
改善版面節奏與互動品質
僅在不會扭曲 1-4 項的情況下，應用抗低品質模式（anti-slop）的品味改善

抗低品質模式是品質過濾器，而非重新設計的許可證。

建構前檢查清單

在生成 HTML 之前，請確認：

頁面類型已確認
轉換機制已確認
證據清單已載入
信任提示已選取
視覺清單已解析為建構就緒的圖片路徑
必要的類別慣例已保留
CTA 目標已知
佈局選擇已以一句話說明理由

若有任何項目為否，則停止或降級處理。

路由邏輯

實體產品路由

當策略頁面類型為產品主導時使用。

摺頁上方必須包含：

清晰的產品或機制視覺
優惠標題
CTA
信任提示

SaaS / 應用程式路由

摺頁上方必須包含：

若需要，保留的螢幕截圖或 UI 處理
成果標題
信任提示
CTA

潛在客戶開發路由

摺頁上方必須包含其中之一：

表單 + 摩擦降低元素或
通往已知目標的清晰 CTA

權威 / 服務路由

必須包含：

摺頁上方的權威提示
早期的證據區塊
圍繞信任與適合度的異議處理

受監管路由

必須包含：

當證據不足時，降低確定性
中繼資料中的法規遵循審查標記

設計規則

單一 HTML 檔案
至少在 768px 和 1024px 斷點上具備響應式設計
語意化 HTML
可見的焦點狀態
所有圖片皆有替代文字
除非明確要求，否則不得有建構者歸屬
不得匯入會覆蓋來源信任提示的品味模式

抗低品質模式使用

載入 references/anti-slop.md，並在保留層級之後（而非之前）應用。

建構後品質檢查表

將此表格寫入 workspace/pages/[頁面名稱]/qa.md，並在 meta.json 中總結：

檢查項目	通過？	備註
機制在摺頁上方可見
主要證據在摺頁上方可見
CTA 在摺頁上方
信任提示在摺頁上方
無虛構證據
無禁止的低品質模式
行動裝置摺疊狀態已檢查
對比度已檢查
替代文字已存在
類別慣例已保留

中繼資料合約

meta.json 必須包含：

brand
page
page_type
mechanism_type
template_route
CTA_destination
proof_items（附來源摘要）
risk_reversal_present
compliance_flags
review_flags
preserved_elements
deviations_from_source
images_used
sections_present
build_confidence

當視覺清單存在時，也需包含：

hero_image
image_provider_policy
images_used 作為結構化物件，而不僅是裸檔名
與審查或 QA 相關時的供應商與備援上下文

建構輔助工具

使用 scripts/resolve-visual-assets.py --page-name [頁面名稱] 將 visuals/manifest.json 轉換為適用於 HTML 和 meta.json 的建構就緒圖片元資料。

然後使用 scripts/prepare-build-meta.py --page-name [頁面名稱] --resolved-assets [檔案] 將這些已解析的資產合併到 meta.json 中，並帶有確定性的選擇欄位：

hero_image
mechanism_image
lifestyle_image
og_image
image_slots.hero
image_slots.mechanism
image_slots.lifestyle
image_slots.og

然後使用 skills/page-build/scripts/html-image-context.py --meta workspace/pages/[頁面名稱]/meta.json 來輸出可直接用於 HTML 的字面值，例如：

hero_img_src
hero_img_alt
mechanism_img_src
mechanism_img_alt
lifestyle_img_src
lifestyle_img_alt
og_image_path

最小可執行建構器：

skills/page-build/scripts/build-page.py --page-name [頁面名稱] 此腳本會消費 strategy.json、meta.json 和 html-image-context.json，並撰寫出一個真實的 index.html 框架。

請將技能本地腳本用作 Cowork 或任何僅上傳技能資料夾的代理運行時的主要介面。倉庫根目錄下的 /scripts 副本是本地開發的便利工具，非打包需求。

評測參考

關於評分標準與通過門檻，請參見 skills/page-qa/references/eval-rubric.md。關於抗低品質模式，請參見 references/anti-slop.md（隨此技能一同提供）。

停止 / 繼續邏輯

若以下情況發生則停止：

針對引導行動頁面，CTA 目標未知
頁面依賴於缺失的證據
無法支援必要的信任提示

若以下情況發生，則以降級方式繼續：

視覺資產不完整，但中立的支援佈局仍然可行
證據較少，但頁面已重新調整為較軟性的宣稱

輸出

寫入：

workspace/pages/[頁面名稱]/index.html
workspace/pages/[頁面名稱]/meta.json
workspace/pages/[頁面名稱]/qa.md

缺少 QA 輸出的建構是不完整的。

TheMattBerman/landing-page-factory

landing-page-factory 是什麼？

在你喜歡的 AI 中提問

說明文件