Communitygithub.com

nexu-club/waitlist-page

建立極簡的上市前登陸頁面,包含電子郵件收集、品牌標誌與選擇性的裝飾層。讀取 DESIGN.md 以取得色彩、字體與佈局規則。最適合:產品發佈、Beta 測試註冊、早期存取計畫、獨立專案。

waitlist-page 是什麼?

這個技能用於建立一個專注、誠實的上市前登陸頁面,作為你與未來使用者之間的初次握手。它能自動從 `DESIGN.md` 讀取品牌的色彩系統、字體搭配與空間規則,確保頁面與品牌形象完全一致。技能採用強化過的範本引擎 (`assets/template.html`) 與記號取代機制,並內建嚴格的驗證閘門(P0 門檻),以產出無填充、無虛假社交證明、無倒數計時器的乾淨 HTML 頁面。支援 Claude Code 與其他相容的 AI 代理平台,並會自動執行行動裝置適配(375px、768px、1440px 以上)、安全性檢查(HTML 跳脫、SVG 清理、CSS 注入防護)以及無障礙性(WCAG AA 對比度、`aria-hidden`、`role="status"`)。最終輸出為單一內嵌 CSS 的 HTML 檔案,所有互動元素皆附有 `data-od-id` 屬性,方便後續代理客製化。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/nexu-club/open-design/tree/HEAD/plugins/_official/examples/waitlist-page

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

等候清單頁面技能

上市前頁面是你與未來使用者的第一次握手。這個技能建立一個專注且誠實的入口:你的品牌識別、你正在打造的東西,以及一條加入早期清單的明確路徑。沒有人為的稀缺感、沒有虛假的倒數計時器、沒有任何膨脹操作——只是一個乾淨、以行動裝置為優先的容器,用來承載真實的興趣。

工作流程

預備階段:載入強化範本與品牌基礎

  1. 載入品牌識別 — 讀取 DESIGN.md 以取得色彩系統、字體搭配與空間規則。這是你的基礎。等候清單頁面若與所代表的品牌不一致,就注定失敗。如果 DESIGN.md 不存在,請在使用者提供之前暫停處理。
  2. 讀取並複製可重複使用的範本 — 讀取 assets/template.html。此範本是所有輸出的強化種子。將它複製為 index.html 作為你的基礎。不要從頭開始撰寫 HTML,也不要偏離此結構。範本已經包含了所有必要的佈局、表單結構、裝飾、焦點樣式與無障礙基礎建設。

步驟:帶驗證與跳脫的記號取代

  1. 從輸入對應記號 — 對於範本中的每個佔位符(例如 {{PRODUCT_NAME}}、{{BG_EXPRESSION}}、{{BORDER_EXPRESSION}}、{{LOGO_MARK}}),請遵循以下取代規則:
    • 文字記號({{PRODUCT_NAME}}、{{TAGLINE}}):在插入 HTML 文字節點或屬性值之前,對 <、>、&、`

相關技能