黑白編輯式著陸頁
一款雜誌風格的著陸頁：如同紙上油墨，帶有細「期號」線的報頭、使用 Instrument Serif 字體大標題（大到可橫跨整個房間閱讀）、首字下沉的介紹段、以細線分隔的編號欄、以帶框圖片和說明（「圖 1」）交替排列的雙頁特色版面、居中斜體引用、問答清單、結尾語與打字機風格的版權頁。預設為黑底暖白；亦可設定為淺色配近黑底色，或透過修改三種顏色為斜體字加入一個強調色。
您在 page.json 中描述頁面，或讓腳稿從專案 README 中草擬。建置腳本會進行檢查並寫入 out/index.html，包含其 CSS 與 out/assets/（圖片資料夾）。對於尚未推出的產品，主視覺區會包含一個實際的候補名單表單，可將資料傳送至 Formspree、Netlify Forms、Buttondown 或任何端點；對於已推出的產品，則放置兩個按鈕。
您需要準備
- Node.js 18 或更新版本。無需安裝其他套件。
- Chrome、Chromium 或 Edge 瀏覽器（用於檢查；腳稿會自動尋找瀏覽器路徑，如找不到請設定
CHROME_PATH環境變數）。 - 對於候補名單表單：一個表單服務帳戶，或一個可接收表單 POST 請求的端點。
- 網頁開啟時需有網路連線，以載入 Google Fonts（Instrument Serif、Newsreader、Inter 和 IBM Plex Mono）。若無網路，則使用系統字型。
此技能所在的資料夾為 <skill>（即此 SKILL.md 檔案所在的資料夾）。
步驟
1. 從 README 草擬
node <skill>/scripts/from-readme.mjs README.md page.json
它會讀取 README（以及旁邊的 package.json，如果有的話）並寫入一個可立即建置的 page.json：專案名稱、作為第一個標題的標語、作為導言的介紹、以粗體名稱開頭的「功能」清單作為欄位、安裝與快速入門指令作為終端機圖形、其他章節作為特色雙頁版面（附其螢幕截圖或程式碼）、FAQ 章節作為問答清單，以及儲存庫作為按鈕。它會跳過徽章、標誌、連結列、目錄、許可證與貢獻章節。
它從不自行撰寫文案，除了像「開始使用」這類標籤，最後會輸出三個清單。請與使用者一起處理這些清單：
- 與使用者一起撰寫：總是標題，以及每個仍為 README 標題的功能名稱（如「安裝」、「運作方式」）。
- 修剪以符合限制：腳本在句子或單詞邊界處縮短的文字。請逐一重新閱讀。
- 在 README 中但未出現在頁面上：腳本因空間不足而省略的章節和功能。如果它們更重要，可以交換回來。
如果沒有 README，或 README 內容很少，請根據使用者的筆記、當前網站或文件，從其中一個範例開始撰寫 page.json。
2. 決定主視覺區的要求
-
尚未推出：候補名單。詢問使用哪個服務收集電子郵件，並設定
hero.form：provider設定 form中要填入的內容formspree在 formspree.io 建立一個表單；其網址結尾為表單的 ID。在任何主機上最簡單。 "id": "xayzbqwe"netlify僅在頁面部署於 Netlify 時使用；註冊資訊會出現在該網站的「表單」標籤頁下。 "name": "waitlist"buttondownButtondown 電子報。使用者會看到 Buttondown 自己的確認頁面。 "username": "yourname"endpoint任何其他可接收表單 POST 請求的端點：您的 API，或郵件列表表單的 actionURL（Mailchimp、Kit、Loops 等）。"url": "https://…"，如果欄位名稱不是email則加上"field"（Mailchimp 的是EMAIL），列表服務則設"ajax": false使用
ajax（Buttondown 除外，預設為此）時，頁面會使用 JavaScript 發送表單，並在原地顯示success或error訊息；不使用 JavaScript，或設定"ajax": false時，則為一般的表單 POST 請求。與ajax搭配使用的端點必須回應 2xx 狀態碼，並且如果端點在不同域名上，必須允許頁面的來源（CORS）。除了 Buttondown 之外，每個提供者都有一個隱藏的垃圾郵件陷阱欄位；如果該欄位被填寫，則忽略該註冊。頁面上所有「加入」按鈕（列、結尾處）都會滾動到表單並將游標放入其中。 -
已推出：設定
hero.actions，包含一個primary按鈕（下載、註冊、安裝）和一個可選的secondary按鈕（文件、原始碼）。將它們指向真實的 URL，或指向頁面上的#get-started。
3. 撰寫頁面
複製最近的範例並替換所有內容：examples/quietly/page.json（候補名單，淺色主題）或 examples/galley/page.json（開源工具，深色主題，從 examples/galley/README.md 草擬）。
| 欄位 | 說明 | 字數限制 |
|---|---|---|
brand.name、brand.href | 左上角的名稱，使用顯示襯線字型設定 | 24 |
nav[] | 最多 5 組 { "label", "href" }。#id 連結必須指向頁面上的某個位置（如下所述） | 16 |
action | 右上角的按鈕；預設為主視覺區的主要動作。設為 false 則不顯示。 | 22 |
issue[] | 在橫條下方最多 3 行短文字，使用小型大寫字母：版本、產品組件、發布日期或版本號。在手機上只會顯示第一行和最後一行。 | 每行 40 |
hero.title | 標題。*word* 設定為斜體（如果設定了 theme.accent 則使用該強調色），\n 換行（最多 3 行） | 64 |
hero.lede | 一句或兩句話說明它是什麼、為誰、為何。第一個字母會變成首字下沉（設 "dropcap": false 可關閉） | 300 |
hero.form 或 hero.actions | 步驟 2。表單文字：placeholder（32）、button（22）、success、error（120）。按鈕：{ "label", "href" }（26） | – |
hero.note | 表單或按鈕下方的一行小字：邀請何時發出、您會發送什麼、許可證 | 100 |
columns[] | 2 到 4 組 { "kicker", "title", "text" }，編號為 01、02…。區塊 id 為 highlights | 24, 44, 220 |
features[] | 最多 4 個雙頁版面：kicker（28）、title（72，*italic* 可作用）、text（420；空白行會開始新段落）、points（最多 4 個，每個 90）、id（用於導航連結）、figure（如下） | – |
quote | { "text", "cite" }，來自真實人物且經其同意的真實引用。否則請省略。 | 220, 60 |
faq | title（40，預設為「Before you ask」）和 1 到 8 個 items 的 { "q", "a" }。區塊 id 為 faq | 100, 500 |
closing | kicker（28）、title（64）、text（220）、action（預設為主視覺區的主要動作）。區塊 id 為 closing | – |
footer.items[]、links[] | 版權頁中最多 3 行（預設為「Name © year」）和最多 6 個連結 | 48, 20 |
theme | paper 和 ink（十六進位色碼；ink 必須在 paper 上達到 7:1 對比度），可選的 accent；字型 display、serif、sans、mono（Google Fonts 系列）；fonts（設為 "" 不載入，或使用您的 URL） | – |
meta | 用於搜尋和連結預覽的 title（70）和 description（170）；url、image（用於連結預覽的 https 圖片）、icon、lang | – |
文字欄位支援行內 Markdown：code、links、bold 和 italic。
圖片。 每個特色區塊可有一個圖片，繪製在帶有硬偏移陰影的框架內，並可選的 caption（90），編號為「圖 1」、「圖 2」等。有圖片的雙頁版面會交替左右擺放；沒有圖片的雙頁版面則將標題放在文字旁邊。
type | 欄位 | 使用時機 |
|---|---|---|
image | src（page.json 旁邊的檔案：png、jpg、webp、avif、gif 或 svg；或 https URL）和 alt（160）：圖片顯示的內容 | 真實螢幕截圖、照片、插圖 |
window | title（40）、subtitle（60）、sidebar（最多 6 個項目，每個 20；active 選取反白項目，預設為 0）、rows（1 到 6 組 meta（8）、label（48）、tag（14）、fill true/false） | 應用程式的主畫面，以頁面風格繪製 |
stats | items：2 到 4 組 value（10）和 label（60） | 真實且有來源的數字 |
code | code（最多 14 行，每行 64 個字元；$ 開頭的行會有提示符號，# 和 // 開頭的行會變暗）以及框架標題列用的 title（24），例如「終端機」 | 安裝和首次執行的指令、設定檔 |
寫作技巧：標題應以使用者的語言表達他們能獲得什麼，用詞越少越好；讓一個詞以斜體呈現。欄位標題是簡短的陳述句（例如「靜默為預設。」），而非功能名稱。每個數字、引用、客戶和聲明都必須來自使用者、README 或他們指定的來源。window 類型的圖片必須顯示產品的真實功能；其行數可以使用虛構的範例，作為示範畫面，因此如果出現名稱，應在說明中註明。
4. 建置
node <skill>/scripts/build.mjs page.json out
它會一次列出 page.json 中的所有問題（缺少欄位、文字超過限制、導航連結指向頁面上不存在的 id、顏色對比不足等），並在問題修復前不寫入任何內容。接著它會顯示表單提交的位置，並列出僅有使用者才能確認的項目：引用、數字、視窗圖片。
5. 檢查與檢視
node <skill>/scripts/check.mjs out/index.html
node <skill>/scripts/try-form.mjs out/index.html # 有候補名單表單時
node <skill>/scripts/screenshot.mjs out/index.html
check.mjs會在 390、768、1024 和 1440 px 解析度下載入頁面，並且必須在每個解析度下顯示ok：沒有超出螢幕範圍或截斷的內容，所有地方都有可讀的對比度、替代文字、標籤化的表單欄位、一個 h1、無跳過的標題層級。標記為·的行值得查看，但不會導致檢查失敗。try-form.mjs會使用[email protected]在無頭 Chrome 中，針對此機器上表單服務的替代測試端點進行註冊（不會影響真實服務），並顯示發送的內容、訪客在成功後看到的訊息，以及服務失敗時看到的訊息。它必須以The form works.結尾。screenshot.mjs會儲存out/screens/desktop.png和mobile.png。檢查兩者：第一個畫面是否清楚說明內容？是否有任何標題斷行不當？雙頁版面是否不平衡（請縮短文字或圖片）？
6. 上線部署
將 out/index.html 和 out/assets/ 上傳至任何靜態主機：Netlify、Vercel、Cloudflare Pages、GitHub Pages、S3。若要將頁面保留在專案的儲存庫中，請將建置腳本加入其 package.json 的 scripts 中，例如 "landing": "node tools/landing/build.mjs landing/page.json public"（在複製 build.mjs、inline.mjs、markup.mjs 和 color.mjs 到 tools/landing/ 之後）。
對於候補名單，請使用使用者自己的電子郵件在線上頁面中註冊一次，並確認其送達服務。當頁面收集電子郵件時，請在 footer.links 中加入隱私權政策的連結；向使用者索取該政策的 URL。
故障排除
build: fix page.json first：每行都會指出有問題的欄位及其需要修改的內容。points at nothing on the page：導航或按鈕連結指向#something，但該頁面上沒有對應的id。特色雙頁版面可以透過設定"id"來獲得 ID；頁面自有的 ID 為#join（表單區）、#highlights、#faq和#closing。