跳转到使用指南
Landing Page Generator作者 Alireza Rezvani

Landing Page Generator Skill.

在生成组件之前,将真实的产品主张与页面区块关联起来。

  • 落地页
  • 文案写作
  • 前端
来源审查 · Landing Page GeneratorSKILL.md
任务 落地页 产出内容 • 带有 Tailwind 样式的 React 或 Next.js TSX 落地页区块 • 围绕所选信息框架组织的文案变体 • 标题、描述、规范网址和结构化数据框架 开始之前 需要一个兼容的、使用 Tailwind 的 React 或 Next.js 项目;引用的 UI 组件和可选的品牌分析工具可能需要单独设置。
编辑摘要 · 来源已于 2026-10-07 审查 · 并非生成的示例

01 功能说明

根据产品简报起草 React 落地页

一个从产品简报到 TSX 的工作流,结合了文案框架、落地页区块以及 SEO 或性能检查清单。

基于来源的工作流并非执行基准测试

工作方法

Landing Page Generator 将营销文案框架与 React 或 Next.js 区块模式及 Tailwind 样式相结合。它会收集受众、痛点、收益、定价和设计方向,然后先起草文案,再组合页面。来源提供了首屏、功能、定价、常见问题和行动号召模式,并会省略不相关的区块,而不是自动填充。

来源将转化和性能相关表述作为目标,而不是生成页面的实测结果。其模板还包含客户评价、保证和产品声明的示例,必须替换为经过验证的输入,否则应予以省略。SEO 元数据和结构化数据是有用的框架,但仍需与真实页面及网站的路由和索引策略保持一致。

预期交付成果

  • 带有 Tailwind 样式的 React 或 Next.js TSX 落地页区块
  • 围绕所选信息框架组织的文案变体
  • 标题、描述、规范网址和结构化数据框架
查看示例简报

从简报到审查

  1. 01
    收集产品事实

    明确受众、主要操作、收益和实际定价。将已获批准的佐证与尚未得到证实的声明区分开来。

  2. 02
    先撰写信息

    选择适合产品的问题解决型或前后对比型叙事,然后确定真正需要哪些区块。

  3. 03
    构建并验证

    在现有项目中生成组件,检查移动端布局和元数据,并测量实际性能,而不是照搬模板目标。

02 适用场景

适用场景

需要一个兼容的、使用 Tailwind 的 React 或 Next.js 项目;引用的 UI 组件和可选的品牌分析工具可能需要单独设置。

适合的场景

  • 产品发布初稿当产品事实已经明确,并且需要一个连贯的首版实现时,此技能很有用。
  • 信息变体适合在保持同一项已验证产品主张的同时,探索不同的标题和行动号召方案。

需要检查的限制

  • 不保证提高转化率文案框架或模板无法证明能提高转化率。这需要真实的测量方案和充足的数据。
  • 不得虚构佐证客户评价、客户徽标、保证和量化收益必须来自获批准的来源,而不是示例组件。

请提供这些输入

  • 产品与受众提供真实的产品或服务、目标客户,以及页面应支持的主要任务。
  • 产品主张与佐证提供当前定价以及任何已获批准的客户评价、指标或保证,并明确指出无法提供的佐证。
  • 项目约束说明 React 或 Next.js 配置、品牌规则和网站级 SEO 规范。

03 关键决策

关键决策

  1. 先写文案,再做组件

    先撰写产品主张,有助于确保区块选择围绕产品主张,而不是受固定模板清单支配。

  2. 在初稿中纳入 SEO

    元数据、规范网址处理和语义结构与页面代码一并考虑,避免到交付时才想起这些事项。

04 示例任务

尝试一份聚焦的简报

下方的示例简报尚未经过测试。使用前请检查该技能的设置。

检查设置

加载完整的技能,并根据代码库调整其组件示例。不要假定示例导入项或网站级 SEO 文件已经存在。

上游源文件
https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md

需要一个兼容的、使用 Tailwind 的 React 或 Next.js 项目;引用的 UI 组件和可选的品牌分析工具可能需要单独设置。

从一项交付成果开始

运行该技能之前,请调整这份简报中的范围、来源材料和约束。

示例简报
使用 landing-page-generator,根据提供的简报为我们的日程安排产品起草一个 Next.js 页面。仅使用我提供的定价和收益;由于没有任何已获批准的客户评价和保证,请将其省略;并保留我们的品牌令牌。先撰写标题和行动号召变体,再构建相关区块。添加元数据,并且只添加受支持的结构化数据;将实测性能与目标分开报告。

检查结果

根据以下可观察标准检查实际输出。

  • 每项声明和定价详情都与已获批准的输入一致。
  • 页面具有明确的主要操作,并且移动端区块可正常使用。
  • 元数据和结构化数据反映可见内容,性能结果按测量状态进行标注。

OpenDesign 为编码智能体提供本地设计工作区。此列表并不表示该技能已捆绑提供,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页介绍下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
Alireza Rezvani
许可证
MIT
已审查的快照
2026-10-07 · 19392f7a0826
编辑来源摘要
一个从产品简报到 TSX 的工作流,结合了文案框架、落地页区块以及 SEO 或性能检查清单。

由 OpenDesign 根据链接来源撰写的原创摘要。代码库 Star 数是特定时间点的受欢迎程度信号,并不代表技能使用量或质量评分。

06 开始前的问题

开始之前的问题

它能保证提高转化率吗?

不能。来源提供了文案和布局模式;它们对业务的影响必须针对实际产品和受众进行测试。

每个页面都必须包含客户评价和定价吗?

不必。该工作流明确允许跳过不相关的区块,也不应虚构没有依据的佐证。

这些性能数值是经过证实的结果吗?

它们是来源中声明的目标。在报告已达到的指标之前,请在实际环境中测量生成的页面。

OpenDesign

为下一轮设计迭代留出空间。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流之前,请检查其自身的设置。

上游源文件
https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md