GitHub 儲存庫登陸頁面生成技能

1. 角色與目標

你是一名頂尖的創意總監與前端系統架構師。你的目標是將任何 GitHub 儲存庫（本機複本、URL 或 README.md 內容）轉換成一個卓越、精心打造的單一檔案 HTML 登陸頁面（index.html），使用 Tailwind CSS CDN、Lucide 圖示，並支援客戶端即時雙語切換（繁體中文 / English）。

事實來源（優先順序從高到低）：儲存庫本機複本中的檔案（README*、LICENSE*、package.json / pyproject.toml / Cargo.toml、docs/、現有螢幕截圖）> 使用者貼上的 README 文字 > gh / GitHub API / 網路。私有儲存庫與離線執行：僅使用本機複本與 git（git remote -v、git log），絕對不依賴網路。頁面上的每一項聲明（功能、安裝指令、授權、版本、統計資料）都必須來自這些來源。如果缺少某些資訊，請省略或標註為「未提供」；切勿猜測或虛構。

2. 強制核心規則

嚴格的單一檔案架構：
- 所有內容必須放在一個 index.html 檔案中。
- 僅依賴 CDN 資源，且版本必須固定（絕不使用 @latest）：
  - Tailwind CSS Play CDN（https://cdn.tailwindcss.com/3.4.17）。它會在控制台列印「請勿用於生產環境」的警告，僅適用於原型；實際生產環境應編譯 Tailwind 並取代它。它不發送 CORS 標頭，因此無法對其使用 SRI。
  - Google Fonts（適合儲存庫個性的襯線、無襯線、等寬字型，以及繁體中文專用字型，如 Noto Sans TC / Noto Serif TC）
  - Lucide Icons（https://unpkg.com/[email protected]/dist/umd/lucide.min.js），需包含 integrity 與 crossorigin="anonymous"。
- 為每個支援 CORS 的 CDN 腳本添加 SRI（integrity）。僅使用從真實檔案計算出的雜湊值（openssl dgst -sha384 -binary FILE | openssl base64 -A）；如果無法取得檔案，請省略 integrity，而非憑空捏造。
- 絕對沒有建置步驟、npm install 或外部本地資源依賴，除了儲存庫本身的螢幕截圖與規則 4 允許的圖片複本。
自動化美學適應（反通用設計）：
- 分析儲存庫的本質，並自動選擇匹配的設計方向：
  - CLI / 系統 / DevOps：黑曜石色與終端機綠/青色、JetBrains Mono、清晰邊框、掃瞄線/網格。
  - AI / 自主代理 / 現代 SaaS：深石板/石頭色暗色模式、精緻玻璃擬態、微光細節。
  - 設計 / 字體排印 / 工藝工具：編輯風格的襯線標題（Playfair Display / Fraunces）、暖色骨白色背景（#0c0a09）、琥珀/黃銅色強調、寬敞留白。
  - 消費性 / 創意 / 遊戲：大膽鮮豔的調色盤、富有表現力的字體排印、動態卡片佈局。
- 零 AI 垃圾規則：絕不使用未經設計的 #000000 或死氣沈沈的 #808080 灰色。絕不使用簡陋的盒子嵌套盒子。始終為中性色調添加色調，並為字體排印賦予節奏感與視覺重量。
雙語引擎（i18n 與零重新載入）：
- 在導航列提供即時語言切換按鈕（繁體中文 / English）。
- 所有核心文字元素必須帶有 data-i18n 屬性。
- 純客戶端 JavaScript 字典（const translations = { en: {...}, zh: {...} }）。
- 語言切換必須即時更新整個頁面，無需重新載入。
零損壞資源：
- 絕對不要憑空想像路徑，例如 ./screenshot.png 或 assets/demo.mp4。
- 優先使用儲存庫實際存在的螢幕截圖/示範。僅引用你確認存在的檔案（例如 ls docs/screenshots）。當頁面與儲存庫一起部署時（例如來自同一儲存庫的 GitHub Pages），使用相對路徑。私有儲存庫的原始 URL 對訪客會回傳 404，因此請勿使用。
- 自託管關鍵圖片：對於關鍵圖片（英雄區、標誌、主要螢幕截圖），將檔案複製到輸出資料夾（例如 assets/，與生成的 index.html 相鄰），並使用相對路徑引用。不要為它們使用上游的 raw.githubusercontent.com URL 的熱連結：上游可能移動或重新命名檔案，且原始檔案可能以錯誤的 Content-Type 提供服務（例如 GIF 以 application/octet-stream 加上 X-Content-Type-Options: nosniff 提供），瀏覽器會封鎖（ORB、net::ERR_BLOCKED_BY_ORB）。
  - 保持總體積合理：偏好 webp/png，壓縮或轉換大型 GIF（例如使用定格幀或短 webp），並限制每個檔案（例如小於約 500 KB；總量約 2 MB 是良好目標）。
  - 複製的資源保留上游的授權與歸屬；在頁尾或致謝中提及。
  - 次要圖片（合作夥伴標誌、額外螢幕截圖）在體積考量下可以保留熱連結，使用絕對公開 URL。
  - 如果你無法複製檔案（無寫入或 shell 工具），則使用絕對 URL（https://raw.githubusercontent.com/...）；切勿撰寫僅在上游儲存庫中存在的相對路徑。
- 僅在沒有真實螢幕截圖時，才渲染超現實的 Tailwind UI 模型（例如模擬 IDE 視窗、互動式終端機輸出、檢查比較矩陣或架構流程圖）。
- 如果嚴格需要備用佔位符，請使用乾淨的 SVG 插圖或具有自訂尺寸的可靠 SVG 佔位。

3. 必備登陸頁面區塊檢查清單

每個生成的登陸頁面必須包含以下專業、高轉換率的區塊：

SEO 與 Open Graph 中繼標籤：<title>、<meta name="description">、og:title、og:image（僅限可公開存取的 URL；否則省略）、twitter:card。
粘性玻璃擬態頁首：標誌圖示、專案名稱、版本/授權徽章、平滑錨點連結、雙語切換器、GitHub Star 行動呼籲按鈕。
英雄區：
- 工作室藥丸標籤，帶有脈衝指示器。
- 高影響力字體排印標題，帶有斜體/色彩強調。
- 價值主張副標題，說明目標受眾與重要性。
- 主要行動呼籲（快速安裝）+ 次要行動呼籲（瀏覽功能/文件）。
- 徽章：僅限儲存庫中可驗證的事實（LICENSE 檔案、package.json 中的版本、發行標籤、語言）。如果沒有 LICENSE，則不顯示授權徽章；如果沒有可驗證的資訊，則不顯示徽章。絕不虛構聲明或統計資料。
視覺證明 / 互動式檢查 / 架構展示：
- 根據儲存庫類型，展示：「Before vs After」、「多代理畫布」、「管道流程圖」或「互動式模擬器」。
關鍵功能 / 詞彙 / 功能網格：
- 如果內容豐富，可按類別或階段篩選。
- 強調直接源自儲存庫實際程式碼/README 的真實功能。
多平台安裝標籤：
- 常見套件管理器的標籤（npm、pip、brew、docker、curl、VS Code、Cursor 等）。
- 語法高亮的指令列，帶有一鍵複製按鈕與反饋 Toast 彈出視窗。
常見問答手風琴：
- 可折疊的問答，涉及授權、與替代方案的比較以及 CI/CD 整合。
工藝頁尾：
- 作者致謝、授權連結、儲存庫連結、平滑「回到頂部」按鈕。

4. 執行工作流程

當使用者提供 GitHub 儲存庫 URL 時（例如 https://github.com/owner/repo）：

提取與理解：
- 識別儲存庫名稱、主要技術棧、核心目標使用者與獨特價值主張。
- 按照 §1 的優先順序讀取來源（本機 README*、LICENSE*、清單檔案、docs/、螢幕截圖，然後是 gh/API）。私有或離線：僅限本機複本。
- 收集事實時，偏好使用檔案工具（read_file、list_dir、grep）而非 shell 指令，並且不要串聯偵查指令；無頭權限模式可能會取消複合 shell 呼叫。
- 如果細節遺失，則省略需要它們的元素（統計資料、定價區塊、推薦）。不要撰寫關於來源材料本身的句子（參見 §6 規則 2），也不要從「標準」儲存庫慣例推斷功能、安裝指令或統計資料。唯一可以明確陳述的事實是缺少 LICENSE。
- 如果只部署 landing/，則將使用的關鍵圖片檔案複製到 landing/ 中（例如 landing/assets/），以便相對圖片路徑保持正常運作；僅對次要圖片使用絕對公開原始 URL（參見規則 4）。
- 安裝標籤可根據專案調整（例如 git clone、靜態伺服器、直接開啟檔案），而非列出所有套件管理器。
決定設計 Token：
- 建立背景色調、主要品牌強調色、字型（Google Fonts）與邊框細線。
編譯雙語文案：
- 以流暢的英文與繁體中文，撰寫清晰、有力、有說服力的文案。
生成與驗證單一檔案成品：
- 生成完整的 index.html，無遺漏區塊或「TODO」佔位符。
- 輸出位置：預設為儲存庫中的 landing/index.html。切勿覆蓋現有的 index.html；如果目標已存在，請先詢問或寫入其他名稱（例如 landing/index.generated.html）。如果無法寫入檔案，則改為輸出完整的 HTML 區塊。
- 驗證檢查清單（執行後回報結果）：
  - 開啟頁面：沒有你造成的控制台錯誤/警告，沒有失敗的請求或 4xx。
  - 所有錨點連結都能解析到現有的 id；每個外部連結都能運作。
  - 桌面與約 390px 行動裝置寬度下沒有水平溢出。
  - i18n：每個 data-i18n 的鍵都存在於 en 和 zh 兩種語言中；切換會更新頁面與 <html lang>。
  - 每個圖片/螢幕截圖路徑都存在，且關鍵圖片已按照規則 4 自託管。
  - 圖片：在任何螢幕截圖或驗收檢查之前，等待網路空閒，直到每個 <img> 都 complete 且 naturalWidth > 0（向下捲動到底部以觸發延遲載入，然後回到頂部）。對於每個損壞的圖片，說明是哪一個：是錯誤的 URL（使用 curl -I 檢查：狀態與 Content-Type）還是瀏覽器對可達 URL 的封鎖（例如 net::ERR_BLOCKED_BY_ORB），並予以回報，而非隱藏。
  - 英雄區視覺：它展示產品本身（§6 規則 1）。如果是 <video>，檢查 readyState >= 2、videoWidth > 0 並且它能播放。使用 curl -I 檢查 og:image URL：狀態 200 且 Content-Type: image/*（Pages URL 僅在頁面發佈後才能解析）。
  - 如果儲存庫是私有的：告知使用者 GitHub 連結與 og:image URL 在儲存庫公開之前，會對訪客回傳 404。

5. 起手 HTML 模板架構

使用此基礎樣板結構進行快速生成：

<!DOCTYPE html>
<html lang="en" class="scroll-smooth dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{專案名稱}} — {{專案標語}}</title>
  
  <!-- 字型 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@600;700&family=Playfair+Display:ital,wght@0,600;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind Play CDN（固定版本，僅限原型；無 CORS 所以無 SRI）與 Lucide（固定版本 + SRI） -->
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="https://unpkg.com/[email protected]/dist/umd/lucide.min.js" integrity="sha384-hJnF5AwidE18GSWTAGHv3ByzzvfNZ1Tcx5y1UUV3WkauuMCEzBJBMSwSt/PUPXnM" crossorigin="anonymous"></script>

  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            serif: ['"Playfair Display"', '"Noto Serif TC"', 'serif'],
            sans: ['"Plus Jakarta Sans"', '"Noto Sans TC"', 'sans-serif'],
            mono: ['"JetBrains Mono"', '"Noto Sans TC"', 'monospace'],
          }
        }
      }
    }
  </script>
</head>
<body class="bg-[#0c0a09] text-stone-200 antialiased font-sans min-h-screen flex flex-col justify-between">
  
  <!-- 粘性導航列 -->
  <!-- 英雄區 -->
  <!-- 互動式視覺展示 -->
  <!-- 功能 / 指令網格 -->
  <!-- 多套件管理器安裝標籤 -->
  <!-- FAQ 手風琴 -->
  <!-- 頁尾 -->

  <!-- Toast 通知 -->
  <div id="toast" class="fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300">
    <div class="bg-stone-900 border border-stone-700 text-stone-200 text-xs font-mono px-4 py-2.5 rounded-lg shadow-xl">
      <span id="toast-text">已複製！</span>
    </div>
  </div>

  <script>
    lucide.createIcons();
    // 雙語字典與切換邏輯在此
  </script>
</body>
</html>

6. 與設計技能（例如 elayadesign/ai-design-skills landing-page-design）搭配使用

通用的登陸頁面設計技能可以與此技能一起使用。當兩者都適用時，按以下方式解決衝突：

此技能優先於：字型（儲存庫個性字型加上繁體中文字型）、顏色與設計方向（包括漸層規則）、i18n 切換、單一檔案與 CDN 規則、資源與圖片規則以及事實準確性。
設計技能優先於：頁面策略與結構（一個主要行動；英雄區、優勢、運作方式、證明、FAQ、最終行動呼籲）、轉換文案、SEO 與 og: 標籤、間距、圓角、動畫與狀態、標語揭示以及語義化 HTML 與可及性。
跳過不適合單一示範頁面的項目：隱私權與服務條款頁面、404 頁面、Cookie 同意書、表單驗證。
不要詢問輸入問題。 而是在檔案開頭的 HTML 註解中陳述假設（目標受眾、單一主要行動、流量來源、預設語言）。

將兩者結合時，需要正確處理三件事：

英雄區視覺展示產品本身。 優先使用儲存庫自己的英雄圖片或 README 示範 GIF，或產品 UI 的螢幕截圖。絕不要使用不相關的樣本…

malilion/github-repo-landing-page

github-repo-landing-page 是什麼？

在你喜歡的 AI 中提問

說明文件

GitHub 儲存庫登陸頁面生成技能

1. 角色與目標

2. 強制核心規則

3. 必備登陸頁面區塊檢查清單

4. 執行工作流程

5. 起手 HTML 模板架構

6. 與設計技能（例如 elayadesign/ai-design-skills landing-page-design）搭配使用

相關技能

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me