Home / All Skills / Content & Media Creation / landing-page-design
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · 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

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessDual-pass Audit
Author skills-shellGitHub skills-shell/superpowers ↗License MIT（仓库 README 徽标 'License: MIT' 与 .claude-plugin/plugin.json 中 "license": "MIT" 声明；但 pin 树内无 LICENSE 文件，GitHub API 对两 fork 亦报无 license —— 授权只出现在元数据/徽标，无正式许可文本）Commit becc256497
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Features an execution layer using a belt whitelist isomorphic to the tools/* series, but the main content is a 'knowledge and rule base': the skill first compiles landing page design methodology into human-readable guidelines using 9 rule tables (5 Elements, Headline formulas, Section Order, Social Proof types, Form, Mobile, Page Speed, Common Mistakes), supplemented by belt examples for asset production—making it a hybrid 'guide + asset tooling' rather than a pure tool catalog.

guides/design/landing-page-design/SKILL.md
Everything visible before scrolling must communicate value in 5 seconds.
ASCII wireframes render the above-the-fold formula into visible layout templates (Logo/Nav/CTA/Headline/Subheadline/Hero/Social proof), allowing agents to scaffold structures directly against them.

Constrains the copywriting layer with 'formulas + positive/negative examples': provides 5 conversion formulas for Headlines (Outcome without pain, Outcome in timeframe, etc.) paired with ❌/✅ contrast checklists to prevent the model from generating empty fluff.

guides/design/landing-page-design/SKILL.md
❌ "Welcome to Our Platform" (says nothing about value)
Dual constraint via formula tables and counterexample lists: provides both generative direction and an exclusion set, preventing 'sophisticated yet hollow' copy far more effectively than purely positive prompts.

Explicitly codifies CTA psychology: separates copywriting formulas (Action verb + value/outcome + optional risk reducer) and visual guidelines (high contrast, minimum 44px height, above-the-fold recurrence, primary/secondary CTA hierarchy) into distinct tables.

guides/design/landing-page-design/SKILL.md
**Formula:** Action verb + value/outcome + (optional: reduce risk)
'Learn More / Submit / Sign Up' are flagged as low-commitment poor examples, providing rule granularity down to button microcopy.

Delegates external fact gathering to search apps rather than native skill logic: competitive/data research utilizes two belt apps, tavily/search-assistant and exa/answer, outsourcing 'verification' to platform search services.

guides/design/landing-page-design/SKILL.md
belt app run tavily/search-assistant --input '{
Demonstrations like 'Research competitor landing pages' and 'Research for social proof stats' indicate the skill expects agents to conduct research before designing rather than improvising blindly.

Directly provides production-grade prompts for asset generation: hero images (flux-dev-lora 1248x832, seedream-4-5 2K), OG share cards (flux 1200x630 or html-to-image embedded HTML templates)—treating prompts as design assets.

guides/design/landing-page-design/SKILL.md
belt app run infsh/html-to-image --input '{
The html-to-image example feeds inline HTML/CSS snippets into a remote rendering service to generate 1200x630 images, representing a lightweight 'code as mockup' pattern.

2Core Capabilities

01Above-the-fold structural design (5-second value delivery + 5-element rule table)
02Headline/Subheadline copywriting generation (5 formulas + ❌✅ counterexample sets)
03CTA copywriting and visual rules (verb + value formula, 44px, contrast colors, primary/secondary CTA hierarchy)
049-section page ordering and key section elements (Hero → Social Proof → Problem → Solution → How It Works → Testimonials → Pricing → FAQ → Final CTA)
05Social proof 6-type × placement matrix and competitive data research (tavily/exa)
06Form, mobile, and performance rules (each field drops conversion ~11%, 48x48 tap targets, LCP <2.5s, etc.)
07Hero/OG asset generation and templated image rendering (flux/seedream/html-to-image)

3External Dependencies

KindDependency / Endpoint
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

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • 网络端点: Declares external network access: platform belt CLI → inference.sh platform (image generation apps); tavily/exa search apps dispatch queries externally to third-party search engines
  • SKILL.md: Declares invocation of host CLI interpreters or external execution environments
Audit Notes: Contains no embedded scripts or credential-reading routines; the knowledge/rule portion has zero side effects, and the belt integration is strictly used for image rendering and search queries, targeting predictable outbound destinations (inference.sh + tavily/exa search services). Points of caution: ① Search queries and asset prompts leave the local network—ensure commercially sensitive data is sanitized; ② Directly incorporating search results into copy risks information contamination from low-quality web content; ③ Supply chain considerations as before (unpinned npx, unrenamed inference-sh mirror, no LICENSE file in the tree); ④ Body rules contain unverified statistical claims that should be treated as heuristics rather than ground truths. Under uniform tiering criteria: the `belt` invoked by this skill is a third-party npm/npx-distributed CLI (installed via `npx skills add belt-sh/cli`), runs under a `belt login` authenticated session, and consumes inference.sh account quota/billing—falling under 'invokes third-party CLI with quota consumption/authentication state', thus designated as Orange (use after evaluation); the skill source code itself contains no token or secret reading logic.

5Second-Pass Verification

  • [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。

6Verdict & Scenarios

  • Condenses landing page methodologies into directly actionable rule tables: formulas, examples, counterexamples, and 9-section sequencing are strictly defined, ensuring high output stability independent of ad-hoc generation.
  • Counterexample sets (❌ lists) prevent hollow copy and low-quality CTAs, proving far more effective than purely positive guidance.
  • End-to-end pipeline covering research, copywriting, and image generation: search apps provide evidence, formulas generate copy, and belt produces hero/OG assets, enabling end-to-end delivery by the agent.
  • Asset prompts are tailored specifically for landing page contexts (1248x832 hero, 1200x630 OG, 2K seedream) rather than relying on generic text-to-image parameters.
    • Best for: Ideal for SaaS and startup teams wanting agents to rapidly generate landing page proposals with complete structures and concrete copy (copy + structure + hero/OG assets); especially suited for workflows equipped with ai-image-generation/web-search capabilities that accept inference costs and outbound asset transmission.
    Not for: Not suited for rigorous growth teams treating 'conversion optimization' as scientific experiments (rules lack academic citations or A/B test backings); not suitable for workflows requiring full front-end code implementation or production deployment (the skill outputs copy/structure/images, not full HTML/CSS delivery—html-to-image is only used for image rendering); not intended for established corporate internal pages with fixed design systems that only need execution against existing templates.
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload landing-page-design.tar.gz
    sha256: 86b2ef761ae5147b…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit becc256497.