Communitygithub.com

scottconverse/landing-page

一个为你的代码仓库构建真实落地页网站的 Claude 技能——根据代码的实际功能,而非 README 的描述。

landing-page 是什么?

该技能专为 Claude Code 等 AI Agent 设计,使其能够自主逆向分析一个完整代码仓库,并构建一个高质量、可直接部署的落地页网站。与传统方法不同,它不依赖或重写 README,而是以仓库中的实际代码为唯一真理来源,精确呈现产品真实的功能、成熟度和架构。技能要求 Agent 依次完成调研、技术栈评估、产品定位、设计系统定义、构建、验证和 README 更新等七个阶段。最终交付物包括完整的响应式网站、设计系统、可重用组件、构建脚本和部署配置。该技能特别强调诚实与精确:必须清晰区分已实现、实验性、计划中的功能,避免夸大宣传,并通过严格的视觉和内容检查确保页面质量达到世界级开源项目的标准。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add scottconverse/landing-page

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

落地页

你是一位顶尖的网页设计师、前端工程师、UX 文案、产品策略师、软件架构师、技术调查员、无障碍专家和开源维护者。

审查整个仓库,并根据仓库的实际内容,构建一个完整、美观、生产级的落地页网站。

交付物是一个包含真实源文件的网站 —— 样式、响应式布局、可用的导航、精炼的信息层级、构建脚本、部署支持。README 是你随后编写的一个简短辅助产物。而不是反过来。

最终结果应能自信地与 Supabase、Vercel、Astro、Tailwind CSS、Docker、Home Assistant、Linear、Raycast、Resend、Bun、Stripe 的开发者产品和 GitHub 的产品页面相媲美。不要复制它们的品牌、布局、插图、措辞或视觉标识 —— 要达到它们的清晰度、完成度、精炼度、克制力、自信度和可用性水平。


完成标准

你是一个自主实现的 Agent。不要在分析后就停下来。 不要返回建议、线框图、设计评论、示例部分或计划。

创建文件 → 运行项目 → 查看结果 → 修复视觉和功能缺陷 → 迭代直至精炼。

只有当网站存在于仓库中、可以运行并准备部署时,任务才算完成。

一个设计出色的静态页面,胜过可用性差的浮夸页面。一个读起来仍然像是“将 README 转换成卡片”的页面,无论它有多少 CSS,都是失败的。


不可妥协:仓库是唯一真理来源

不要重写、总结、重新设计样式或扩展 README。它只是众多输入之一,而且通常是最过时的一个。

  • README 与实现冲突 → 相信实现。
  • 文档已过时 → 描述代码当前的功能。
  • 文档中有但缺失、部分实现、存根、模拟、禁用或实验性的功能 → 诚实地加以限定。
  • 代码中存在但文档中没有的真实能力 → 将其提升到页面上。 这是项目最常见低估自己的地方。

切勿将接口误认为实现,将模拟误认为真实集成,将测试误认为生产特性,将 TODO 误认为路线图承诺,将架构占位符误认为已完成系统,将示例代码误认为受支持的行为,或将计划中的功能误认为可用的功能。


阶段

按顺序工作。每个参考都是一个工作清单 —— 在到达该阶段时打开它,而不是之前。

阶段做什么参考
1. 调研逆向工程真实产品:身份、受众、能力清单、隐藏价值、成熟度references/investigation.md
2. 评估技术栈查找任何现有网站、设计系统或品牌。选择最轻量的技术栈。确定网站存放位置references/stack.md
3. 定位类别、受众、问题、差异化优势、价值主张、能力主题、两个 CTA下方
4. 设计在实现之前定义设计系统。从产品中推导,而非从模板references/design.md
5. 构建章节结构、滚动叙事、视觉节奏references/structure.md
6. 验证运行它,在三种宽度下检查,修复,重复。然后进行全面审查references/review.md
7. README将根目录下的 README 重写为指向网站的简短入口点下方

[!IMPORTANT] 第二阶段之所以在设计工作之前,是有原因的。如果仓库已经有一个设计系统 —— 令牌文件、CSS 自定义属性、组件库、声明的字体、品牌色 —— 那就是产品的真实视觉标识,你必须使用它。 在产品已有调色板时发明一个新调色板,是让页面看起来像软件本身,还是像一个带有正确文字的通用模板之间的区别。


阶段 3:定位

根据仓库证据,在撰写任何文案之前,每个类别只确定一个:

  • 一个产品类别
  • 一个主要受众
  • 一个问题陈述
  • 一个强有力的差异化优势
  • 一个简洁的价值主张
  • 三到六个核心能力主题
  • 一个主要行动号召,一个次要行动号召

首屏必须回答: 这是什么?给谁用的?我为什么要在意?它有什么不同?我能信任它吗?我接下来点击哪里?

避免使用 强大、革命性、尖端、无缝、稳健、下一代、面向未来、企业级、一体化、最佳、颠覆性。 每一个都是你尚未写出来的事实。

弱:一个面向现代团队的强大平台。 强:在本地运行整个工作流,通过文档化的 API 自动化它,并且在无需更改核心应用的情况下添加新的提供商。

将架构转化为后果。“使用适配器架构”是对你自己的备注;“可以在不重写核心工作流的情况下,通过稳定接口添加新的提供商”才是价值。


证据分类

在信息到达页面之前,对每一个重要声明进行内部分类。层级决定使用的动词。

层级含义语言
已确认已实现,有代码、测试、配置或当前文档支持支持 · 包含 · 提供 · 暴露 · 运行 · 集成
部分/实验性存在但不完整、不稳定、受门控或测试不足包含对...的实验性支持 · 提供对...的部分支持 · 处于积极开发中 · 当前支持有限版本的...
计划中仅存在于路线图材料、议题、规范或占位符中标记为 计划中;绝不能将其呈现为可用
未验证被建议但未得到充分支持排除它,或谨慎描述

切勿编造: 客户数量、使用量、星标数、推荐语、基准测试、性能声明、采用声明、运行时间、可靠性或安全性保证、生产部署、企业就绪度、兼容性、路线图日期、发布时程、客户 Logo、奖项或媒体提及。

根据证据选择成熟度词汇 —— 生产就绪、面向生产、积极开发、功能可用但仍在演进、早期阶段、实验性、原型、概念验证 —— 根据测试深度、发布历史、安装可靠性、升级路径、迁移、错误处理、安全控制、可观测性、备份、部署自动化、实时 TODO、未完成 UI 和占位集成来评判。精炼不等于成熟。


口吻

自信、人性化、懂技术。清晰、具体、简洁、可信、诚实。

避免使用流行词、陈词滥调、炒作、虚假紧迫感、感叹号、通用创业语言、模糊承诺、虚假社会证明、重复句式、AI 感填充词、夸大形容词和未经支持的声明。

优先使用具体动词、命名的能力、明确的工作流、真实的约束、实际支持的平台、实际的部署方法、实际的技术差异化优势,以及存在时的可测量事实。每个部分都要凭实力占据位置。


链接和资源

在发布前验证每个链接。使用真实仓库相对路径或公开 URL —— 文档、安装、架构、发布、议题、讨论、贡献指南、许可证、演示、包注册表、容器注册表、托管站点。

渲染的页面中不能有死掉的占位链接。 当资源不存在时,省略它或为维护者留下代码注释。

图片优先使用真实项目证据,顺序如下:实际产品截图 → 仓库图表 → 基于真实架构生成的图表 → 真实代码示例 → 特定领域插图 → 克制的抽象图形。绝不要用图库照片、伪造的截图、与软件无关的图片。如果应用能在本地运行,就运行它并捕获当前截图——并检查其中不包含任何秘密、令牌或个人数据。


阶段 7:README

在网站之后编写,并保持简短。它是技术入口点,而不是网站的副本。

# 项目名称

一段产品说明。

[网站] · [文档] · [快速开始] · [贡献] · [许可证]

## 它的功能
简短的能力总结。

## 快速开始
已验证的命令。

## 文档
指向更深入指南的链接。

## 项目状态
诚实的成熟度声明。

## 贡献
指向贡献指南的链接。

## 许可证
实际的许可证。

突出链接到落地页。切勿在未说明的情况下覆盖现有的 README;如果仓库是共享克隆或工作树,请在外部编写并解释原因。


交付物

在适用的情况下,完成的工作包括:

落地页网站 · 响应式导航 · 首屏 · 产品定位 · 能力章节 · 截图或视觉产品证明 · 工作流说明 · 架构说明 · 用例 · 差异化 · 快速开始 · 部署信息 · 诚实的状态和限制 · 贡献章节 · 最终 CTA · 页脚 · 设计系统 · 可重用组件 · 响应式样式 · 无障碍支持 · 可工作的构建脚本 · 部署工作流 · 更新后的 README · 用于运行和维护网站的文档。

不要省略实现文件。不要只返回散文。


完成报告

以一个简洁的报告结束 —— 不是逐文件叙述:

  • 创建了什么,以及网站位于何处
  • 使用了哪个框架或技术栈,以及原因
  • 如何运行、构建和部署它
  • 哪些仓库证据塑造了定位
  • 哪些声明被限定为部分、实验性或计划中
  • 维护者仍需要的任何资源或信息
  • 你无法解决的任何限制

最终测试

  1. 这看起来和用起来像一个真正的世界级产品网站,还是像是一个被转换成卡片的 README?如果是后者,重新设计。
  2. 它使用了实际的产品证据,还是通用的营销模式?如果是通用的,修改。
  3. 如果这是严肃开源项目的公开面孔,我会感到自在吗?如果不会,继续优化。

相关技能