# Send Landing Page Design to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "landing-page-design",
    "name": "Landing Page Design",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/okaris/landing-page-design",
    "canonicalUrl": "https://clawhub.ai/okaris/landing-page-design",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/landing-page-design",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=landing-page-design",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/landing-page-design"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/landing-page-design",
    "downloadUrl": "https://openagent3.xyz/downloads/landing-page-design",
    "agentUrl": "https://openagent3.xyz/skills/landing-page-design/agent",
    "manifestUrl": "https://openagent3.xyz/skills/landing-page-design/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/landing-page-design/agent.md"
  }
}
```
## Documentation

### Landing Page Design

Design high-converting landing pages with AI-generated visuals via inference.sh CLI.

### Quick Start

curl -fsSL https://cli.inference.sh | sh && infsh login

# Generate a hero image
infsh app run falai/flux-dev-lora --input '{
  "prompt": "professional person smiling while using a laptop showing a clean dashboard interface, bright modern office, natural lighting, warm and productive atmosphere, lifestyle marketing photography",
  "width": 1248,
  "height": 832
}'

# Research competitor landing pages
infsh app run tavily/search-assistant --input '{
  "query": "best SaaS landing page examples 2024 conversion rate"
}'

Install note: The install script only detects your OS/architecture, downloads the matching binary from dist.inference.sh, and verifies its SHA-256 checksum. No elevated permissions or background processes. Manual install & verification available.

### Above-the-Fold Formula

Everything visible before scrolling must communicate value in 5 seconds.

┌─────────────────────────────────────────────────┐
│  [Logo]              [Nav]        [CTA Button]  │
│                                                 │
│   Headline (6-12 words)                         │
│   ─────────────────────────                     │
│   Subheadline (15-25 words)        [Hero Image] │
│                                    showing the  │
│   [Primary CTA Button]            OUTCOME, not  │
│   "Start Free Trial"              the product   │
│                                                 │
│   Social proof: "Trusted by 10,000+ teams"      │
│   [logo] [logo] [logo] [logo] [logo]            │
└─────────────────────────────────────────────────┘

### The 5 Elements

ElementRuleExampleHeadline6-12 words, states the outcome"Ship docs in minutes, not days"Subheadline15-25 words, expands on how"AI-powered documentation that writes itself from your codebase. No templates needed."Hero imageShows the OUTCOME, not the productPerson looking satisfied at results, not a screenshot of your UIPrimary CTAAction verb + value"Start Free Trial" not "Submit" or "Learn More"Social proofLogos, count, or micro-testimonial"Trusted by 10,000+ teams at [logos]"

### Formulas That Convert

FormulaExample[Outcome] without [pain]"Beautiful docs without the design skills"[Outcome] in [timeframe]"Launch your site in 5 minutes"The [better way] to [common task]"The faster way to build APIs"Stop [pain]. Start [outcome]."Stop guessing. Start knowing."[Number] [things] to [outcome]"One tool to manage all your data"

### What Makes Headlines Fail

❌ "Welcome to Our Platform" (says nothing about value)
❌ "The World's Most Advanced AI-Powered Solution" (buzzwords, no specifics)
❌ "We Help Businesses Grow" (vague, generic)
❌ "Next-Generation Enterprise Software" (what does it DO?)

✅ "Turn customer feedback into product features, automatically"
✅ "The spreadsheet that thinks like a database"
✅ "Find and fix bugs before your users do"

### Show the Outcome, Not the Product

❌ Screenshot of your dashboard (boring, hard to parse at a glance)
❌ Abstract geometric background (says nothing)
❌ Stock photo of a handshake (cliché)

✅ Person looking satisfied at clear results on their screen
✅ Before/after transformation
✅ The end result of using your product

# Outcome-focused hero
infsh app run falai/flux-dev-lora --input '{
  "prompt": "happy professional team celebrating around a laptop showing positive growth charts, bright modern office, natural sunlight, authentic candid moment, marketing photography style, warm tones",
  "width": 1248,
  "height": 832
}'

# Product-in-context hero
infsh app run bytedance/seedream-4-5 --input '{
  "prompt": "clean modern laptop on a minimalist desk showing a beautiful analytics dashboard, floating UI elements emerging from the screen, soft gradient background, product marketing style, professional",
  "size": "2K"
}'

### Text

Good CTAsBad CTAs"Start Free Trial""Submit""Get Started Free""Click Here""See It in Action""Learn More" (low commitment)"Create Your First Report""Sign Up" (vague)"Try Free for 14 Days""Register"

Formula: Action verb + value/outcome + (optional: reduce risk)

### Design

ElementRuleColorHigh contrast with background — must be the most visible elementSizeMinimum 44px height (tap target), wide enough for text + paddingPositionAbove the fold, repeated after each major sectionWhitespaceGenerous padding around button, don't crowd itSecondary CTAIf needed, use text link below ("or watch a demo")

### Section Order

The proven sequence for landing pages:

SectionPurposeKey Element1. HeroCore value, primary CTAHeadline + image + CTA2. Social ProofBuild trustLogos, numbers, badges3. ProblemCreate empathyPain point they recognize4. Solution/FeaturesShow how you solve it3 key features with visuals5. How It WorksReduce complexity3 steps: sign up, configure, benefit6. TestimonialsProve it works2-3 specific customer quotes7. PricingEnable decisionClear tiers, highlight recommended8. FAQHandle objections5-7 common questions9. Final CTACapture remaindersRepeat primary CTA with urgency

### Social Proof Types

TypeImpactPlacementCompany logosFastest to process, high trustBelow heroUser countScale signalHero or social proof barStar ratingProduct qualityNear CTATestimonialsDetailed credibilityDedicated sectionCase study statsSpecific proofFeature sectionsTrust badgesSecurity/complianceNear forms, pricing, footer

# Research for social proof stats
infsh app run exa/answer --input '{
  "question": "What is the average conversion rate for SaaS landing pages with social proof vs without?"
}'

### Form Design

RuleImpactEvery field reduces conversion ~11%Minimize fieldsName + Email = maximum for signupsDon't ask for phone, company, roleSingle-column layoutDon't use multi-column formsInline validationShow errors immediately, not on submitClear error messages"Email is required" not "Error in field 3"Submit button text = action"Create Account" not "Submit"

### Mobile Optimization

RuleWhyCTA button full widthEasy to tap with thumbsSticky CTA on scrollAlways accessibleNo horizontal scrollingBreaks mobile layoutFont minimum 16pxiOS zooms inputs below 16pxTap targets minimum 48x48pxApple HIG, Google MaterialImages responsiveDon't overflow viewportPrioritize headline + CTASimplify above-the-fold

### OG Image for Sharing

# Generate an OG image for the landing page
infsh app run falai/flux-dev-lora --input '{
  "prompt": "clean professional social sharing card, product name and tagline on modern gradient background, minimal design, corporate tech aesthetic, 1200x630 aspect ratio equivalent",
  "width": 1200,
  "height": 630
}'

# Or use html-to-image for a template-based approach
infsh app run infsh/html-to-image --input '{
  "html": "<div style=\\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:white\\"><div style=\\"text-align:center\\"><h1 style=\\"font-size:48px;margin:0\\">DataFlow</h1><p style=\\"font-size:24px;opacity:0.9\\">Ship docs in minutes, not days</p></div></div>"
}'

### Page Speed

RuleTargetWhyHero image< 200 KBFirst thing to loadTotal page weight< 2 MBMobile data, patienceLazy load below-foldAlwaysOnly load what's visibleMinimize JavaScript< 200 KBBlocks renderingLCP (Largest Contentful Paint)< 2.5sGoogle Core Web Vitals

### Common Mistakes

MistakeProblemFixNo clear headlineVisitor doesn't know what you do6-12 words, outcome-focusedCTA says "Learn More"Too low commitmentAction verb + specific valueHero is a product screenshotHard to parse, boringShow the outcome, use lifestyle imageryMultiple competing CTAsDecision paralysisOne primary CTA, one secondary maxNo social proofNo trust signalAdd logos, counts, or testimonialsToo many form fieldsConversion drops ~11% per fieldName + email maximumDesktop-only design60%+ traffic is mobileDesign mobile-firstNo urgency in final CTAVisitors leave and forget"Start your free 14-day trial"

### Related Skills

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@web-search
npx skills add inference-sh/skills@prompt-engineering

Browse all apps: infsh app list
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: okaris
- Version: 0.1.5
## Source health
- Status: healthy
- Source download looks usable.
- Yavira can redirect you to the upstream package for this source.
- Health scope: source
- Reason: direct_download_ok
- Checked at: 2026-04-23T16:43:11.935Z
- Expires at: 2026-04-30T16:43:11.935Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/landing-page-design)
- [Send to Agent page](https://openagent3.xyz/skills/landing-page-design/agent)
- [JSON manifest](https://openagent3.xyz/skills/landing-page-design/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/landing-page-design/agent.md)
- [Download page](https://openagent3.xyz/downloads/landing-page-design)