{ "schemaVersion": "1.0", "item": { "slug": "landing-page-generator-openclaw", "name": "Landing Page Generator", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/seanwyngaard/landing-page-generator-openclaw", "canonicalUrl": "https://clawhub.ai/seanwyngaard/landing-page-generator-openclaw", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/landing-page-generator-openclaw", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=landing-page-generator-openclaw", "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-30T16:55:25.780Z", "expiresAt": "2026-05-07T16:55:25.780Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentDisposition": "attachment; filename=\"network-1.0.0.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-generator-openclaw" }, "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-generator-openclaw", "agentPageUrl": "https://openagent3.xyz/skills/landing-page-generator-openclaw/agent", "manifestUrl": "https://openagent3.xyz/skills/landing-page-generator-openclaw/agent.json", "briefUrl": "https://openagent3.xyz/skills/landing-page-generator-openclaw/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 Generator", "body": "Generate complete, high-converting landing pages from a product/service brief. Outputs production-ready HTML/CSS that's mobile-responsive and optimized for conversions." }, { "title": "How to Use", "body": "/landing-page-generator \"SaaS project management tool for remote teams, $29/mo, free trial\"\n/landing-page-generator brief.txt\n/landing-page-generator \"Freelance web developer portfolio — book a call CTA\"\n\nProvide as much context as possible:\n\nWhat the product/service is\nTarget audience\nPrimary CTA (sign up, buy, book a call, download)\nPricing (if applicable)\nKey features/benefits\nBrand colors (optional, defaults to professional blue/dark theme)" }, { "title": "Step 1: Analyze the Brief", "body": "Extract:\n\nProduct type: SaaS, physical product, service, portfolio, lead magnet, event\nTarget audience: Who is this for?\nPrimary CTA: What action should visitors take?\nValue proposition: Why should they care?\nTone: Professional, casual, bold, minimal, luxurious" }, { "title": "Step 2: Select Page Template", "body": "Based on product type:\n\nTypeSectionsTypical LengthSaaSHero, Features, How It Works, Pricing, Testimonials, FAQ, CTALongServiceHero, Services, Process, Portfolio, Testimonials, CTAMediumPortfolioHero, Work Samples, About, Services, ContactMediumLead MagnetHero, Benefits, Social Proof, Form, CTAShortE-commerceHero, Product Features, Gallery, Reviews, Buy CTAMediumEventHero, Speakers/Details, Schedule, Tickets, FAQMedium" }, { "title": "Step 3: Generate the Page", "body": "Create a single self-contained HTML file with embedded CSS. No external dependencies except Google Fonts.\n\nRequired sections (adapt to product type):\n\nHero Section\n\n- Headline: Clear value proposition (max 10 words)\n- Subheadline: Supporting detail (max 25 words)\n- CTA button: High-contrast, action-oriented text (\"Start Free Trial\", not \"Submit\")\n- Optional: Hero image placeholder or background\n- Optional: Social proof badge (\"Trusted by 10,000+ teams\")\n\nFeatures/Benefits\n\n- 3-4 feature cards with icons (use Unicode/emoji icons)\n- Each card: Icon + Feature name + 1-2 sentence benefit (focus on outcome, not feature)\n- Grid layout: 3 columns on desktop, 1 on mobile\n\nSocial Proof\n\n- 2-3 testimonial cards with:\n - Quote text\n - Name and title/company\n - Star rating (if applicable)\n- Optional: Logo bar of client/partner logos (placeholder boxes with company names)\n\nHow It Works (if applicable)\n\n- 3-step process with numbered steps\n- Step title + brief description\n- Visual connector between steps\n\nPricing (if applicable)\n\n- 1-3 pricing tiers in card format\n- Highlight the recommended tier\n- Feature comparison list\n- CTA button on each tier\n\nFAQ\n\n- 4-6 common questions\n- Accordion-style (click to expand) using pure CSS/HTML
\n\nFinal CTA\n\n- Repeat the primary CTA with urgency\n- Different angle from hero (address remaining objections)\n- Strong contrasting background" }, { "title": "Step 4: Design System", "body": "Apply these design principles:\n\nTypography:\n\nFont: Inter from Google Fonts (clean, modern, high readability)\nHeading scale: 3rem, 2rem, 1.5rem, 1.25rem\nBody: 1rem / 1.6 line-height\nMax line width: 65ch for readability\n\nColors (default, override with brand colors if provided):\n\n--primary: #2563eb; /* Blue - CTAs, links */\n--primary-dark: #1d4ed8; /* Hover state */\n--bg: #ffffff; /* Background */\n--bg-alt: #f8fafc; /* Alternating section bg */\n--text: #1e293b; /* Body text */\n--text-light: #64748b; /* Secondary text */\n--accent: #f59e0b; /* Highlights, badges */\n\nLayout:\n\nMax width: 1200px, centered\nSection padding: 80px vertical (48px on mobile)\nConsistent spacing scale: 4, 8, 16, 24, 32, 48, 64, 80px\n\nResponsive breakpoints:\n\nDesktop: 1024px+\nTablet: 768px - 1023px\nMobile: < 768px" }, { "title": "Step 5: Conversion Optimization", "body": "Apply these conversion principles to the generated page:\n\nAbove the fold: Headline + CTA visible without scrolling\nSingle CTA focus: One primary action, repeated 2-3 times throughout\nContrast ratio: CTA buttons must have WCAG AA contrast (4.5:1 minimum)\nLoading speed: No external JS, minimal CSS, no images (placeholders only)\nScannability: Users should understand the offer in 5 seconds\nObjection handling: FAQ and testimonials address common concerns\nUrgency/scarcity: Optional — only if authentic (\"Limited beta spots\", not fake countdowns)" }, { "title": "Step 6: Output", "body": "Save to output/landing-page/:\n\noutput/landing-page/\n index.html # Complete self-contained page\n README.md # Customization guide for the client\n\nREADME.md includes:\n\nHow to customize colors (CSS variables at top of file)\nHow to replace placeholder content\nHow to add real images\nHow to connect forms to their email service\nHow to deploy (Netlify drag-and-drop, GitHub Pages, any static host)" }, { "title": "Step 7: Present to User", "body": "Show:\n\nBrief summary of what was generated\nKey design decisions made\nFile location\nSuggestions for what the client should customize (images, testimonials, specific copy)" }, { "title": "Quality Standards", "body": "Page loads with no external dependencies except Google Fonts\n Fully responsive at 320px, 768px, and 1200px widths\n All CTA buttons have hover states\n Color contrast meets WCAG AA\n Page has proper viewport tag\n Semantic HTML (
,
,
,