mcpField
L
landing-page-generator

landing-page-generator

github.com/florianbruniaux设计与 UI6.3k44 次安装1 天前更新
代码仓库

关于 landing-page-generator

通过分析仓库文档和结构，生成可部署的静态落地页技能。它将项目内容整理为页面区块，并附带 GitHub Pages Actions 工作流。

主要功能

  1. 01从仓库文件提取内容
  2. 02将内容映射到落地页区块
  3. 03生成 HTML、CSS 和 JavaScript
  4. 04附带 GitHub Pages Actions 工作流
  5. 05支持可选警示横幅和定价表
  6. 06提供响应式与无障碍检查

适用场景

  1. 01为 GitHub 仓库创建落地页
  2. 02将文档转换为静态网站
  3. 03统一多个项目的页面样式
  4. 04根据 README 生成项目展示页

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/florianbruniaux/claude-code-ultimate-guide --skill landing-page-generator

安装后在 Claude Code 中输入/landing-page-generator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/
search-base.js
static-workflow.yml
styles-base.css
assets/section-snippets/
faq.html
features-grid.html
footer.html
header.html
hero.html
install.html
risk-banner.html
search-modal.html
references/
landing-pattern.md

详细介绍

着陆页生成器

通过分析文档和结构，从任意代码仓库生成完整、可部署的着陆页。

何时使用此技能

  • 为 GitHub 代码仓库创建着陆页
  • 根据现有文档生成静态网站
  • 在多个项目之间统一着陆页
  • 将 README 内容转换为营销/展示页面

此技能的功能

  1. 分析代码仓库：读取 README.md、CHANGELOG.md、package.json/VERSION、docs/、assets/
  2. 提取内容：识别标题、标语、功能、安装说明和屏幕截图
  3. 映射到版块：Hero、功能、安装、常见问题、页脚（+ 可选：风险横幅、定价）
  4. 生成着陆页：创建完整的静态网站（HTML + CSS + JS）
  5. 生成可部署的输出：包含用于 GitHub Pages 的 GitHub Actions 工作流

使用方法

基本用法
/landing-page-generator from ~/path/to/repo
使用选项
/landing-page-generator from ~/path/to/repo --risk-banner --pricing-table
可用选项
选项描述默认值
--risk-banner在首屏上方添加醒目的警告/免责声明横幅false
--pricing-table添加定价对比版块false
--screenshots <path>屏幕截图文件夹的路径./assets/
--theme [dark|light]配色主题变体dark
--search启用 Cmd+K 搜索true
--output <path>输出目录./[repo-name]-landing/

工作流

第 1 步：代码仓库分析

读取并分析源代码仓库中的以下文件：

README.md        → Primary content source (title, tagline, features, install)
CHANGELOG.md     → Version info, recent changes
package.json     → Version number, dependencies, metadata
VERSION          → Alternative version source
docs/            → Additional documentation pages
assets/          → Screenshots, images
LICENSE          → License type for badge
第 2 步：内容提取映射
来源目标版块提取方法
README 标题/徽章Hero第一个 H1 + shield.io 徽章行
README TL;DRHero 标语标题后的第一段或引用块
README 功能功能网格包含项目符号列表的 H2/H3 版块
README 安装说明快速开始包含 shell 命令的代码块
README 用法示例包含示例的代码块
README 常见问题常见问题Details/summary 或 H3+P 模式
CHANGELOG最新动态最近 1-3 个版本
assets/*.png屏幕截图图片库版块
第 3 步：生成版块

按以下顺序生成这些版块：

  1. 页眉（粘性）

    • Logo/项目名称
    • 导航链接：功能、安装、常见问题
    • 操作：搜索（Cmd+K）、GitHub Star、主要 CTA

  2. 风险横幅（如果启用了 --risk-banner）

    • 首屏上方采用橙色/警告样式
    • 清晰醒目的免责声明文本
    • 指向详细披露版块的链接

  3. Hero 版块

    • 标题取自 README H1
    • 标语取自 TL;DR/第一段
    • 统计徽章（版本、许可证、平台）
    • CTA：“快速开始”（主要）、“在 GitHub 上查看”（次要）

  4. 架构/概览（如果 README 中有图表）

    • 将 ASCII 图表转换为样式化区块
    • 或使用概览卡片

  5. 功能网格

    • 从 README 功能中提取 4-6 张功能卡片
    • 图标 + 标题 + 描述模式

  6. 定价表（如果启用了 --pricing-table）

    • 方案对比表
    • 如有，添加倍数/用量表

  7. 屏幕截图图片库（如果存在资源）

    • 基于标签页或轮播的图片库
    • 使用替代文本作为说明

  8. 快速开始版块

    • 单行安装命令（特色代码块）
    • 设置步骤
    • 第一个用法示例

  9. 风险披露（如果启用了 --risk-banner）

    • 完整免责声明版块
    • 服务条款注意事项
    • 建议

  10. 常见问题版块

    • 从 README 常见问题或常见疑问生成
    • 可折叠的 details 模式

  11. 相关项目（如果 README 中有链接）

    • 链接到依赖项/相关代码仓库的卡片

  12. 页脚

    • 快速链接
    • 许可证徽章
    • 版本信息
    • 作者/代码仓库链接
第 4 步：输出结构
[project-name]-landing/
├── index.html              # Main landing page
├── styles.css              # Complete stylesheet
├── search.js               # Cmd+K search functionality
├── search-data.js          # Search index (FAQ, features)
├── favicon.svg             # Generated or copied
├── robots.txt              # SEO
├── CLAUDE.md               # Project instructions
├── README.md               # Landing repo documentation
├── assets/                 # Copied screenshots
│   └── [copied from source]
└── .github/
    └── workflows/
        └── static.yml      # GitHub Pages deployment
第 5 步：验证检查点

定稿前，请确认：

  • 所有章节都能在浏览器中正确显示
  • 链接指向有效目标（GitHub 仓库、文档、安装命令）
  • 响应式布局在手机（375px）、平板（768px）和桌面端（1280px）宽度下均可正常使用
  • 无障碍性：包含跳过链接，交互元素带有 ARIA 标签，颜色对比度符合 WCAG AA 标准

技术栈

  • 无需构建步骤：纯 HTML + CSS + JS
  • 搜索：从 CDN 延迟加载 MiniSearch，并提供回退方案
  • 部署：通过 Actions 使用 GitHub Pages
  • 样式：CSS 自定义属性、响应式布局，默认采用深色主题
  • 无障碍性：跳过链接、ARIA 标签、键盘导航

CSS 模式（取自成熟的落地页）

组件类
/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-github-star, .btn-outline

/* Cards */
.feature-card, .comparison-card, .path-card

/* Layout */
.container, .features-grid, .hero, .section

/* Utilities */
.visually-hidden, .skip-link
CSS 变量
:root {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-border: #30363d;
  --color-text: #c9d1d9;
  --color-text-muted: #8b949e;
  --color-primary: #58a6ff;
  --color-success: #3fb950;
  --color-warning: #d29922;
  --color-danger: #f85149;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --radius: 6px;
}

示例

用户：/landing-page-generator from ~/projects/my-project --risk-banner --pricing-table

输出：

创建 ~/projects/my-project-landing/，其中包含：

  • 展示多提供商路由器的完整落地页
  • 醒目的服务条款风险横幅（橙色，位于首屏）
  • 提供商卡片（Anthropic、Copilot、Ollama）
  • 来自 README 的定价表
  • 截图图库
  • 可直接部署到 GitHub Pages

提示

  • 对于涉及法律或服务条款的项目，始终添加 --risk-banner
  • 截图能显著提升落地页质量——请确保 assets/ 中包含素材
  • 此技能会保留 README 的语言（英语/法语）
  • 检查生成的常见问题解答（FAQ）——可能需要自定义
  • 生成后测试响应式设计

参考资料

详细的模式文档请参阅 references/landing-pattern.md。 可复用模板和代码片段请参阅 assets/。

评论

支持 Markdown