{ "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": { "downloadMode": "redirect", "downloadUrl": "/downloads/landing-page-design", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=landing-page-design", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "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." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/landing-page-design", "agentPageUrl": "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" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Landing Page Design", "body": "Design high-converting landing pages with AI-generated visuals via inference.sh CLI." }, { "title": "Quick Start", "body": "curl -fsSL https://cli.inference.sh | sh && infsh login\n\n# Generate a hero image\ninfsh app run falai/flux-dev-lora --input '{\n \"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\",\n \"width\": 1248,\n \"height\": 832\n}'\n\n# Research competitor landing pages\ninfsh app run tavily/search-assistant --input '{\n \"query\": \"best SaaS landing page examples 2024 conversion rate\"\n}'\n\nInstall 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." }, { "title": "Above-the-Fold Formula", "body": "Everything visible before scrolling must communicate value in 5 seconds.\n\n┌─────────────────────────────────────────────────┐\n│ [Logo] [Nav] [CTA Button] │\n│ │\n│ Headline (6-12 words) │\n│ ───────────────────────── │\n│ Subheadline (15-25 words) [Hero Image] │\n│ showing the │\n│ [Primary CTA Button] OUTCOME, not │\n│ \"Start Free Trial\" the product │\n│ │\n│ Social proof: \"Trusted by 10,000+ teams\" │\n│ [logo] [logo] [logo] [logo] [logo] │\n└─────────────────────────────────────────────────┘" }, { "title": "The 5 Elements", "body": "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]\"" }, { "title": "Formulas That Convert", "body": "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\"" }, { "title": "What Makes Headlines Fail", "body": "❌ \"Welcome to Our Platform\" (says nothing about value)\n❌ \"The World's Most Advanced AI-Powered Solution\" (buzzwords, no specifics)\n❌ \"We Help Businesses Grow\" (vague, generic)\n❌ \"Next-Generation Enterprise Software\" (what does it DO?)\n\n✅ \"Turn customer feedback into product features, automatically\"\n✅ \"The spreadsheet that thinks like a database\"\n✅ \"Find and fix bugs before your users do\"" }, { "title": "Show the Outcome, Not the Product", "body": "❌ Screenshot of your dashboard (boring, hard to parse at a glance)\n❌ Abstract geometric background (says nothing)\n❌ Stock photo of a handshake (cliché)\n\n✅ Person looking satisfied at clear results on their screen\n✅ Before/after transformation\n✅ The end result of using your product\n\n# Outcome-focused hero\ninfsh app run falai/flux-dev-lora --input '{\n \"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\",\n \"width\": 1248,\n \"height\": 832\n}'\n\n# Product-in-context hero\ninfsh app run bytedance/seedream-4-5 --input '{\n \"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\",\n \"size\": \"2K\"\n}'" }, { "title": "Text", "body": "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\"\n\nFormula: Action verb + value/outcome + (optional: reduce risk)" }, { "title": "Design", "body": "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\")" }, { "title": "Section Order", "body": "The proven sequence for landing pages:\n\nSectionPurposeKey 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" }, { "title": "Social Proof Types", "body": "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\n\n# Research for social proof stats\ninfsh app run exa/answer --input '{\n \"question\": \"What is the average conversion rate for SaaS landing pages with social proof vs without?\"\n}'" }, { "title": "Form Design", "body": "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\"" }, { "title": "Mobile Optimization", "body": "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" }, { "title": "OG Image for Sharing", "body": "# Generate an OG image for the landing page\ninfsh app run falai/flux-dev-lora --input '{\n \"prompt\": \"clean professional social sharing card, product name and tagline on modern gradient background, minimal design, corporate tech aesthetic, 1200x630 aspect ratio equivalent\",\n \"width\": 1200,\n \"height\": 630\n}'\n\n# Or use html-to-image for a template-based approach\ninfsh app run infsh/html-to-image --input '{\n \"html\": \"

DataFlow

Ship docs in minutes, not days

\"\n}'" }, { "title": "Page Speed", "body": "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" }, { "title": "Common Mistakes", "body": "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\"" }, { "title": "Related Skills", "body": "npx skills add inference-sh/skills@ai-image-generation\nnpx skills add inference-sh/skills@web-search\nnpx skills add inference-sh/skills@prompt-engineering\n\nBrowse all apps: infsh app list" } ], "body": "Landing Page Design\n\nDesign high-converting landing pages with AI-generated visuals via inference.sh CLI.\n\nQuick Start\ncurl -fsSL https://cli.inference.sh | sh && infsh login\n\n# Generate a hero image\ninfsh app run falai/flux-dev-lora --input '{\n \"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\",\n \"width\": 1248,\n \"height\": 832\n}'\n\n# Research competitor landing pages\ninfsh app run tavily/search-assistant --input '{\n \"query\": \"best SaaS landing page examples 2024 conversion rate\"\n}'\n\n\nInstall 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.\n\nAbove-the-Fold Formula\n\nEverything visible before scrolling must communicate value in 5 seconds.\n\n┌─────────────────────────────────────────────────┐\n│ [Logo] [Nav] [CTA Button] │\n│ │\n│ Headline (6-12 words) │\n│ ───────────────────────── │\n│ Subheadline (15-25 words) [Hero Image] │\n│ showing the │\n│ [Primary CTA Button] OUTCOME, not │\n│ \"Start Free Trial\" the product │\n│ │\n│ Social proof: \"Trusted by 10,000+ teams\" │\n│ [logo] [logo] [logo] [logo] [logo] │\n└─────────────────────────────────────────────────┘\n\nThe 5 Elements\nElement\tRule\tExample\nHeadline\t6-12 words, states the outcome\t\"Ship docs in minutes, not days\"\nSubheadline\t15-25 words, expands on how\t\"AI-powered documentation that writes itself from your codebase. No templates needed.\"\nHero image\tShows the OUTCOME, not the product\tPerson looking satisfied at results, not a screenshot of your UI\nPrimary CTA\tAction verb + value\t\"Start Free Trial\" not \"Submit\" or \"Learn More\"\nSocial proof\tLogos, count, or micro-testimonial\t\"Trusted by 10,000+ teams at [logos]\"\nHeadlines\nFormulas That Convert\nFormula\tExample\n[Outcome] without [pain]\t\"Beautiful docs without the design skills\"\n[Outcome] in [timeframe]\t\"Launch your site in 5 minutes\"\nThe [better way] to [common task]\t\"The faster way to build APIs\"\nStop [pain]. Start [outcome].\t\"Stop guessing. Start knowing.\"\n[Number] [things] to [outcome]\t\"One tool to manage all your data\"\nWhat Makes Headlines Fail\n❌ \"Welcome to Our Platform\" (says nothing about value)\n❌ \"The World's Most Advanced AI-Powered Solution\" (buzzwords, no specifics)\n❌ \"We Help Businesses Grow\" (vague, generic)\n❌ \"Next-Generation Enterprise Software\" (what does it DO?)\n\n✅ \"Turn customer feedback into product features, automatically\"\n✅ \"The spreadsheet that thinks like a database\"\n✅ \"Find and fix bugs before your users do\"\n\nHero Images\nShow the Outcome, Not the Product\n❌ Screenshot of your dashboard (boring, hard to parse at a glance)\n❌ Abstract geometric background (says nothing)\n❌ Stock photo of a handshake (cliché)\n\n✅ Person looking satisfied at clear results on their screen\n✅ Before/after transformation\n✅ The end result of using your product\n\n# Outcome-focused hero\ninfsh app run falai/flux-dev-lora --input '{\n \"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\",\n \"width\": 1248,\n \"height\": 832\n}'\n\n# Product-in-context hero\ninfsh app run bytedance/seedream-4-5 --input '{\n \"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\",\n \"size\": \"2K\"\n}'\n\nCTA Buttons\nText\nGood CTAs\tBad CTAs\n\"Start Free Trial\"\t\"Submit\"\n\"Get Started Free\"\t\"Click Here\"\n\"See It in Action\"\t\"Learn More\" (low commitment)\n\"Create Your First Report\"\t\"Sign Up\" (vague)\n\"Try Free for 14 Days\"\t\"Register\"\n\nFormula: Action verb + value/outcome + (optional: reduce risk)\n\nDesign\nElement\tRule\nColor\tHigh contrast with background — must be the most visible element\nSize\tMinimum 44px height (tap target), wide enough for text + padding\nPosition\tAbove the fold, repeated after each major section\nWhitespace\tGenerous padding around button, don't crowd it\nSecondary CTA\tIf needed, use text link below (\"or watch a demo\")\nSection Order\n\nThe proven sequence for landing pages:\n\nSection\tPurpose\tKey Element\n1. Hero\tCore value, primary CTA\tHeadline + image + CTA\n2. Social Proof\tBuild trust\tLogos, numbers, badges\n3. Problem\tCreate empathy\tPain point they recognize\n4. Solution/Features\tShow how you solve it\t3 key features with visuals\n5. How It Works\tReduce complexity\t3 steps: sign up, configure, benefit\n6. Testimonials\tProve it works\t2-3 specific customer quotes\n7. Pricing\tEnable decision\tClear tiers, highlight recommended\n8. FAQ\tHandle objections\t5-7 common questions\n9. Final CTA\tCapture remainders\tRepeat primary CTA with urgency\nSocial Proof Types\nType\tImpact\tPlacement\nCompany logos\tFastest to process, high trust\tBelow hero\nUser count\tScale signal\tHero or social proof bar\nStar rating\tProduct quality\tNear CTA\nTestimonials\tDetailed credibility\tDedicated section\nCase study stats\tSpecific proof\tFeature sections\nTrust badges\tSecurity/compliance\tNear forms, pricing, footer\n# Research for social proof stats\ninfsh app run exa/answer --input '{\n \"question\": \"What is the average conversion rate for SaaS landing pages with social proof vs without?\"\n}'\n\nForm Design\nRule\tImpact\nEvery field reduces conversion ~11%\tMinimize fields\nName + Email = maximum for signups\tDon't ask for phone, company, role\nSingle-column layout\tDon't use multi-column forms\nInline validation\tShow errors immediately, not on submit\nClear error messages\t\"Email is required\" not \"Error in field 3\"\nSubmit button text = action\t\"Create Account\" not \"Submit\"\nMobile Optimization\nRule\tWhy\nCTA button full width\tEasy to tap with thumbs\nSticky CTA on scroll\tAlways accessible\nNo horizontal scrolling\tBreaks mobile layout\nFont minimum 16px\tiOS zooms inputs below 16px\nTap targets minimum 48x48px\tApple HIG, Google Material\nImages responsive\tDon't overflow viewport\nPrioritize headline + CTA\tSimplify above-the-fold\nOG Image for Sharing\n# Generate an OG image for the landing page\ninfsh app run falai/flux-dev-lora --input '{\n \"prompt\": \"clean professional social sharing card, product name and tagline on modern gradient background, minimal design, corporate tech aesthetic, 1200x630 aspect ratio equivalent\",\n \"width\": 1200,\n \"height\": 630\n}'\n\n# Or use html-to-image for a template-based approach\ninfsh app run infsh/html-to-image --input '{\n \"html\": \"

DataFlow

Ship docs in minutes, not days

\"\n}'\n\nPage Speed\nRule\tTarget\tWhy\nHero image\t< 200 KB\tFirst thing to load\nTotal page weight\t< 2 MB\tMobile data, patience\nLazy load below-fold\tAlways\tOnly load what's visible\nMinimize JavaScript\t< 200 KB\tBlocks rendering\nLCP (Largest Contentful Paint)\t< 2.5s\tGoogle Core Web Vitals\nCommon Mistakes\nMistake\tProblem\tFix\nNo clear headline\tVisitor doesn't know what you do\t6-12 words, outcome-focused\nCTA says \"Learn More\"\tToo low commitment\tAction verb + specific value\nHero is a product screenshot\tHard to parse, boring\tShow the outcome, use lifestyle imagery\nMultiple competing CTAs\tDecision paralysis\tOne primary CTA, one secondary max\nNo social proof\tNo trust signal\tAdd logos, counts, or testimonials\nToo many form fields\tConversion drops ~11% per field\tName + email maximum\nDesktop-only design\t60%+ traffic is mobile\tDesign mobile-first\nNo urgency in final CTA\tVisitors leave and forget\t\"Start your free 14-day trial\"\nRelated Skills\nnpx skills add inference-sh/skills@ai-image-generation\nnpx skills add inference-sh/skills@web-search\nnpx skills add inference-sh/skills@prompt-engineering\n\n\nBrowse all apps: infsh app list" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/okaris/landing-page-design", "publisherUrl": "https://clawhub.ai/okaris/landing-page-design", "owner": "okaris", "version": "0.1.5", "license": null, "verificationStatus": "Indexed source record" }, "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" } }