全部技能 / 内容创作 / landing-page-design
内容创作 · skills-shell/superpowers

landing-page-design

Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

风险提醒：橙色 · 评估后使用AI 侦查报告
作者 skills-shellGitHub skills-shell/superpowers ↗许可 MIT（仓库 README 徽标 'License: MIT' 与 .claude-plugin/plugin.json 中 "license": "MIT" 声明；但 pin 树内无 LICENSE 文件，GitHub API 对两 fork 亦报无 license —— 授权只出现在元数据/徽标，无正式许可文本）commit becc256497
agent 宿主通常会约束 skill 执行权限；风险提醒为 AI 侦查观点，不构成质量或安全保证。第三方 skill 仅作拆解与展示，安装使用风险自负，版权归原作者。

1实现原理 · 为什么它能做到

与 tools/* 系列同构的 belt 白名单执行层 + 但内容主体是『知识规则库』：skill 先以 9 张规则表（5 Elements/Headline 公式/Section Order/Social Proof 类型/Form/Mobile/Page Speed/Common Mistakes）把落地页设计方法论编译成人读规则，再附 belt 示例产出素材——是『指南 + 素材工具』混合体，而非纯工具目录。

guides/design/landing-page-design/SKILL.md
Everything visible before scrolling must communicate value in 5 seconds.
注：ASCII 线框图把 above-the-fold 公式画成可见布局模板（Logo/Nav/CTA/Headline/Subheadline/Hero/Social proof），agent 可直接照着搭结构。

文案层用『公式 + 正反例』约束：Headline 给 5 条转换公式（Outcome without pain / Outcome in timeframe…），并配 ❌/✅ 对照清单让模型避开空话。

guides/design/landing-page-design/SKILL.md
❌ "Welcome to Our Platform" (says nothing about value)
注：公式表 + 反例表双约束：既给生成方向也给排除集，比纯正向 prompt 更防『高级但空洞』的文案。

CTA 心理学显式化：文案公式（Action verb + value/outcome + optional risk reducer）与视觉规则（高对比、最小 44px 高度、above-the-fold 重复出现、主/次 CTA 层级）分表给出。

guides/design/landing-page-design/SKILL.md
**Formula:** Action verb + value/outcome + (optional: reduce risk)
注：『Learn More / Submit / Sign Up』被列为低承诺坏例，规则粒度细到按钮文案。

外部事实获取走检索 app 而非 skill 自带逻辑：竞品/数据调研用 tavily/search-assistant 与 exa/answer 两个 belt app，把『查证』委托给平台搜索服务。

guides/design/landing-page-design/SKILL.md
belt app run tavily/search-assistant --input '{
注：『Research competitor landing pages』与『Research for social proof stats』两处示范说明 skill 期望 agent 先调研再设计，而非纯拍脑袋。

素材生成直接给成品级 prompt：hero 图（flux-dev-lora 1248x832、seedream-4-5 2K）、OG 分享卡（flux 1200x630 或 html-to-image 内嵌 HTML 模板）——prompt 即设计资产。

guides/design/landing-page-design/SKILL.md
belt app run infsh/html-to-image --input '{
注：html-to-image 示例把一段内联 HTML/CSS 作为输入交给远端渲染服务生成 1200x630 图片，是『代码即设计稿』的轻量用法。

2核心能力

01Above-the-fold 结构设计（5 秒价值传达 + 5 元素规则表）
02Headline/Subheadline 文案生成（5 条公式 + ❌✅ 反例集）
03CTA 文案与视觉规则（动词+价值公式、44px、对比色、主次 CTA）
049 段页面分区排序与每区要点（Hero→Social Proof→Problem→Solution→How It Works→Testimonials→Pricing→FAQ→Final CTA）
05Social proof 六类型 × 放置位矩阵与竞品数据调研（tavily/exa）
06表单/移动端/性能规则（每字段降 ~11%、48x48 触达、LCP <2.5s 等）
07hero/OG 素材生成与模板化出图（flux/seedream/html-to-image）

3外部依赖

类型依赖
clibelt（inference.sh CLI）
packagebelt-sh/cli（npx skills add 安装）
api素材生成与检索 app：falai/flux-dev-lora、bytedance/seedream-4-5、infsh/html-to-image、tavily/search-assistant、exa/answer
network安装说明托管
package相关技能包 inference-sh/skills@ai-image-generation / web-search / prompt-engineering

4风险提醒 风险提醒：橙色 · 评估后使用

风险提醒：橙色 · 评估后使用
  • 描述与正文不一致：F-pattern reading 只在 description — 声称覆盖 F-pattern 阅读模式但正文无相关内容——依赖该能力的用户会扑空；按正文实际能力评估。
  • 统计断言无出处 — '每字段 -11% 转化'、'60%+ 流量是移动端' 等数字以事实口吻给出但无引用，用户/模型可能当普适事实使用。
  • 检索结果信息污染 — exa/tavily 检索到的不可信网页内容若直接进文案与设计决策，属于『检索注入』面；竞品调研内容出网第三方亦需注意。
  • 转换率优化本质是经验法则 — 规则表是通用 best practice，未经目标受众 A/B 验证；照抄规则不等于高转化，模型可能过度自信地宣称『会提高转化率』。
风险提醒：橙色，评估后使用。无自带脚本/凭证读取；知识规则部分零副作用，belt 部分仅用于出图与检索，外发对象可预期（inference.sh + tavily/exa 检索服务）。留意点：① 检索查询与素材 prompt 出网，商业敏感信息注意脱敏；② 检索内容直接进入文案存在『把网页垃圾当真』的信息污染面；③ 供应链同前（npx 无 pin、inference-sh 未改名镜像、树内无 LICENSE 文件）；④ 正文规则含无出处的统计断言，宜当作启发而非事实。按统一分档准则：本 skill 调用的 `belt` 是第三方 npm/npx 分发的 CLI（`npx skills add belt-sh/cli` 安装），以 `belt login` 登录态运行并消耗 inference.sh 账号配额/计费——属『调第三方 CLI 且触配额/登录态』，故取橙色（评估后使用）；skill 源码本身不含任何 token/密钥读取。

5第二遍独立确认

  • [discrepancy] description 声称覆盖 F-pattern reading — grep -i 'f-pattern|reading pattern' 仅命中第 3 行 description 自身，正文全篇无 F-pattern 阅读模式相关规则——该宣称在源码内无内容支撑。
  • [ok] above-the-fold / 5 元素 / section order / social proof / form / mobile / page speed 均有正文支撑 — 各主题均有独立小节与规则表（Above-the-Fold Formula、The 5 Elements、Section Order、Social Proof Types、Form Design、Mobile Optimization、Page Speed）。
  • [ok] 检索与出图调用点 — tavily/search-assistant（Quick Start 竞品调研）、exa/answer（social proof 数据）、falai/flux-dev-lora（hero/OG）、bytedance/seedream-4-5（2K hero）、infsh/html-to-image（模板 OG）调用点均真实存在。
  • [unlocatable] 数字断言出处（~11%/field、48x48、LCP 2.5s、60%+ mobile） — 正文以断言形式给出（'Every field reduces conversion ~11%'、'60%+ traffic is mobile'），无引用/来源链接，无法在本源码内核实其依据。
  • [ok] 无脚本/无凭证/无本地写入 — 目录仅 SKILL.md；curl/wget/密钥 token 零命中；无 shell 重定向；执行面为白名单 belt。
  • [ok] 知识规则与 tools/* 目录型 skill 的分工 — 本文件不含模型目录表，模型选择（flux/seedream）内嵌在示例中；与 ai-image-generation 以 Related Skills 互链，无内容重复。
  • [ok] license/stars/commit 元数据 — pin == 本地 HEAD == becc25649700；skills-shell/superpowers stars=0、pushed_at 2026-09-02T14:16:56Z；MIT 声明见 plugin.json/README 徽标，树内无 LICENSE。
  • [unlocatable] installs 安装量 — 无公开安装量数据源，置 null。

6结论

  • 把落地页方法论压缩成可直接执行的规则表：公式、正反例、9 段顺序都给死，模型产出稳定度高、不依赖临场发挥。
  • 反例集（❌ 清单）防空洞文案/防低质 CTA，比纯正向指引更有效。
  • 调研-文案-出图一条链：检索 app 提供证据、公式生成文案、belt 出 hero/OG 素材，agent 可端到端交付。
  • 素材 prompt 已按落地页场景调好（1248x832 hero、1200x630 OG、2K seedream），非通用文生图参数。
    • 适合：适合 SaaS/创业团队让 agent 快速产出结构完整、文案不空洞的落地页方案（文案+结构+hero/OG 素材），尤其适合有 ai-image-generation/web-search 配套、接受推理费用与素材出网的工作流。
    不适合：不适合把『转换优化』当科学实验的严谨增长团队（规则无出处、无 A/B 支撑）；不适合需要完整前端代码/上线实现的场景（本 skill 产出文案/结构/图片，不含 HTML/CSS 交付——html-to-image 只是出图）；不适合设计系统已固化、只需按既有模板执行的大厂内部页。
    安装 agent 直装可复制
    ① 本站镜像 更新 2026-09-09
    方式 A · 人下载镜像包下载 landing-page-design.tar.gz
    sha256: 86b2ef761ae5147b…
    方式 B · JSON 格式安装指南，复制给 agent
    安装指南
    agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
    ② 上游 GitHub · 原始来源
    能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗
    本页镜像锁定 commit becc256497；上游为实时仓库。
    来源信息 GitHub 原始
    作者 / 仓库skills-shell / skills-shell/superpowers
    原始 GitHubskills-shell/superpowers ↗
    Stars0
    最近推送2026-09-02
    本 skill commitbecc256497
    许可MIT（仓库 README 徽标 'License: MIT' 与 .claude-plugin/plugin.json 中 "license": "MIT" 声明；但 pin 树内无 LICENSE 文件，GitHub API 对两 fork 亦报无 license —— 授权只出现在元数据/徽标，无正式许可文本）
    本站信息
    收录日期2026-09-06
    分类内容创作
    侦查报告2026-09-06 · 2 遍
    本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。