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 安装或外部本地资产依赖，但规则 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，因此不要在那里使用它们。
- 自托管关键图像：对于关键图像（英雄区、Logo、主要截图），将文件复制到输出文件夹（例如生成的 index.html 旁边的 assets/）并使用相对路径引用。不要将它们热链接到上游的 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 是合理目标）。
  - 复制资产保留上游的许可证和归属；在页脚或致谢中提及。
  - 次要图像（合作伙伴 Logo、额外截图）在大小成为问题时可以保持热链接，作为绝对的公共 URL。
  - 如果无法复制文件（无写入权限或 shell 工具），使用绝对 URL（https://raw.githubusercontent.com/...）；切勿编写仅存在于上游仓库中的相对路径。
- 仅当不存在真实截图时，渲染超逼真的 Tailwind UI 模拟图（例如模拟 IDE 窗口、交互式终端输出、检查比较矩阵或架构流程图）。
- 如果严格需要后备占位符，则使用简洁的 SVG 插图或带有自定义尺寸的可靠占位 SVG。

3. 必备落地页区域清单

每个生成的落地页必须包含以下高转化率、专业的区域：

SEO 与开放图谱元标签：<title>、<meta name="description">、og:title、og:image（仅限公开可达的 URL；否则省略）、twitter:card。
粘性玻璃态头部：Logo 图标、项目名称、版本/许可证徽章、平滑锚点链接、双语切换器、GitHub Star CTA 按钮。
Hero 区：
- 带有脉冲指示器的工作室药丸标签。
- 高影响力字体排版标题，带有斜体/颜色强调。
- 价值主张副标题，说明目标用户和重要性。
- 主要 CTA（快速安装）+ 次要 CTA（浏览功能/文档）。
- 徽章：仅限仓库中可验证的事实（LICENSE 文件、package.json 中的版本、发布标签、语言）。如果没有 LICENSE，则不显示许可证徽章；如果没有任何可验证的信息，则不显示徽章。绝不发明声明或统计信息。
视觉证明 / 交互式检查 / 架构展示：
- 根据仓库不同，展示：“前后对比”、“多代理画布”、“管道流程图”或“交互式模拟器”。
关键能力 / 词汇 / 功能网格：
- 如果内容丰富，可按类别或阶段过滤。
- 突出显示直接来自仓库实际代码库/README 的真实能力。
多平台安装标签页：
- 常见工具/包管理器标签页（npm、pip、brew、docker、curl、VS Code、Cursor 等）。
- 带有语法高亮的命令栏，包含一键复制按钮和反馈 Toast 弹出框。
FAQ 手风琴：
- 可折叠问答，涉及许可、与替代方案比较以及 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、静态服务器、直接打开文件），而不是列出每个包管理器。
确定设计令牌：
- 建立背景色调、主要品牌强调色、字体（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 为 true 且 naturalWidth > 0（滚动到底部以触发懒加载，然后回到顶部）。对于每个损坏的图像，指出是哪个：错误的 URL（使用 curl -I 检查：状态和 Content-Type）或可访问 URL 的浏览器阻止（例如 net::ERR_BLOCKED_BY_ORB），并报告而非隐藏。
  - Hero 视觉：它展示产品本身（§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>{{PROJECT_NAME}} — {{PROJECT_TAGLINE}}</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）和相关图标（锁定版本 + 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">
  
  <!-- 粘性导航 -->
  <!-- Hero 区 -->
  <!-- 交互式视觉展示 -->
  <!-- 功能 / 命令网格 -->
  <!-- 多工具安装标签页 -->
  <!-- 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 规则、资产和图像规则以及事实准确性。
设计技能胜出：页面策略和结构（一个主要操作；Hero、益处、工作原理、证明、FAQ、最终 CTA）、转化文案、SEO 和 og: 标签、间距、圆角、动效和状态、标语揭示以及语义 HTML 和可访问性。
跳过不适合单演示页面的项目：隐私和条款页面、404 页面、Cookie 同意、表单验证。
不要询问入门问题。 而是将假设（受众、单个主要操作、流量来源、默认语言）写在文件顶部的 HTML 注释中。

组合时需要做对三件事：

Hero 视觉展示产品本身。 优先使用仓库自身的 Hero 图像或 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