← 返回 Skills 市场

Landing Page Generator

Name: Landing Page Generator
Author: seanwyngaard

作者 Sean Wyngaard · GitHub ↗ · v1.0.0

cross-platform ⚠ suspicious

808

总下载

当前安装

版本数

在 OpenClaw 中安装

/install landing-page-generator-openclaw

功能描述

Generate high-converting, mobile-responsive landing pages from a brief. Use when building landing pages, sales pages, or marketing pages for clients.

使用说明 (SKILL.md)

Landing Page Generator

Generate complete, high-converting landing pages from a product/service brief. Outputs production-ready HTML/CSS that's mobile-responsive and optimized for conversions.

How to Use

/landing-page-generator "SaaS project management tool for remote teams, $29/mo, free trial"
/landing-page-generator brief.txt
/landing-page-generator "Freelance web developer portfolio — book a call CTA"

Provide as much context as possible:

What the product/service is
Target audience
Primary CTA (sign up, buy, book a call, download)
Pricing (if applicable)
Key features/benefits
Brand colors (optional, defaults to professional blue/dark theme)

Page Generation Process

Step 1: Analyze the Brief

Extract:

Product type: SaaS, physical product, service, portfolio, lead magnet, event
Target audience: Who is this for?
Primary CTA: What action should visitors take?
Value proposition: Why should they care?
Tone: Professional, casual, bold, minimal, luxurious

Step 2: Select Page Template

Based on product type:

Type	Sections	Typical Length
SaaS	Hero, Features, How It Works, Pricing, Testimonials, FAQ, CTA	Long
Service	Hero, Services, Process, Portfolio, Testimonials, CTA	Medium
Portfolio	Hero, Work Samples, About, Services, Contact	Medium
Lead Magnet	Hero, Benefits, Social Proof, Form, CTA	Short
E-commerce	Hero, Product Features, Gallery, Reviews, Buy CTA	Medium
Event	Hero, Speakers/Details, Schedule, Tickets, FAQ	Medium

Step 3: Generate the Page

Create a single self-contained HTML file with embedded CSS. No external dependencies except Google Fonts.

Required sections (adapt to product type):

Hero Section

- Headline: Clear value proposition (max 10 words)
- Subheadline: Supporting detail (max 25 words)
- CTA button: High-contrast, action-oriented text ("Start Free Trial", not "Submit")
- Optional: Hero image placeholder or background
- Optional: Social proof badge ("Trusted by 10,000+ teams")

Features/Benefits

- 3-4 feature cards with icons (use Unicode/emoji icons)
- Each card: Icon + Feature name + 1-2 sentence benefit (focus on outcome, not feature)
- Grid layout: 3 columns on desktop, 1 on mobile

Social Proof

- 2-3 testimonial cards with:
  - Quote text
  - Name and title/company
  - Star rating (if applicable)
- Optional: Logo bar of client/partner logos (placeholder boxes with company names)

How It Works (if applicable)

- 3-step process with numbered steps
- Step title + brief description
- Visual connector between steps

Pricing (if applicable)

- 1-3 pricing tiers in card format
- Highlight the recommended tier
- Feature comparison list
- CTA button on each tier

FAQ

- 4-6 common questions
- Accordion-style (click to expand) using pure CSS/HTML \x3Cdetails>

Final CTA

- Repeat the primary CTA with urgency
- Different angle from hero (address remaining objections)
- Strong contrasting background

Step 4: Design System

Apply these design principles:

Typography:

Font: Inter from Google Fonts (clean, modern, high readability)
Heading scale: 3rem, 2rem, 1.5rem, 1.25rem
Body: 1rem / 1.6 line-height
Max line width: 65ch for readability

Colors (default, override with brand colors if provided):

--primary: #2563eb;        /* Blue - CTAs, links */
--primary-dark: #1d4ed8;   /* Hover state */
--bg: #ffffff;             /* Background */
--bg-alt: #f8fafc;         /* Alternating section bg */
--text: #1e293b;           /* Body text */
--text-light: #64748b;     /* Secondary text */
--accent: #f59e0b;         /* Highlights, badges */

Layout:

Max width: 1200px, centered
Section padding: 80px vertical (48px on mobile)
Consistent spacing scale: 4, 8, 16, 24, 32, 48, 64, 80px

Responsive breakpoints:

Desktop: 1024px+
Tablet: 768px - 1023px
Mobile: \x3C 768px

Step 5: Conversion Optimization

Apply these conversion principles to the generated page:

Above the fold: Headline + CTA visible without scrolling
Single CTA focus: One primary action, repeated 2-3 times throughout
Contrast ratio: CTA buttons must have WCAG AA contrast (4.5:1 minimum)
Loading speed: No external JS, minimal CSS, no images (placeholders only)
Scannability: Users should understand the offer in 5 seconds
Objection handling: FAQ and testimonials address common concerns
Urgency/scarcity: Optional — only if authentic ("Limited beta spots", not fake countdowns)

Step 6: Output

Save to output/landing-page/:

output/landing-page/
  index.html          # Complete self-contained page
  README.md           # Customization guide for the client

README.md includes:

How to customize colors (CSS variables at top of file)
How to replace placeholder content
How to add real images
How to connect forms to their email service
How to deploy (Netlify drag-and-drop, GitHub Pages, any static host)

Step 7: Present to User

Show:

Brief summary of what was generated
Key design decisions made
File location
Suggestions for what the client should customize (images, testimonials, specific copy)

Quality Standards

Page loads with no external dependencies except Google Fonts
Fully responsive at 320px, 768px, and 1200px widths
All CTA buttons have hover states
Color contrast meets WCAG AA
Page has proper \x3Cmeta> viewport tag
Semantic HTML (\x3Cheader>, \x3Cmain>, \x3Csection>, \x3Cfooter>)
No horizontal scroll at any breakpoint
FAQ sections are interactive (expand/collapse)
Total HTML file size under 50KB

安全使用建议

This skill appears coherent and matches its description, but follow these precautions before installing or running it: 1) Run it in a sandbox or non-sensitive workspace first — the allowed tools include Bash and file read/write operations, so an agent with those permissions could access local files if misused. 2) Do not include secrets, API keys, or private customer data in the brief or workspace files you give the skill. 3) Inspect the generated HTML/README before deploying — confirm forms, links, or third-party endpoints are safe and intentional (the README shows how to connect forms; ensure no default form action posts to an unexpected endpoint). 4) If possible, restrict or review the agent's ability to run shell commands (Bash) unless you trust the agent’s invocation context. 5) Because the skill loads Google Fonts, expect a network request to fonts.googleapis.com; if your environment prohibits external network calls, block that or host fonts locally. If you want further assurance, ask the publisher for a homepage or source repository so you can review templates and examples before use.

功能分析

Type: OpenClaw Skill Name: landing-page-generator-openclaw Version: 1.0.0 The skill's primary purpose of generating landing pages is benign, and the `SKILL.md` instructions are clear and aligned with this goal, showing no direct prompt injection attempts or malicious commands. However, the `allowed-tools` list in `SKILL.md` includes `Bash`, which grants broad shell access. While `Bash` could be plausibly used for benign file system operations (like creating output directories), it represents a significant high-risk capability and broad permission that could be exploited by a malicious user prompt against the agent, even if the skill itself does not instruct such misuse. This falls under the 'risky capabilities without clear malicious intent' threshold for a 'suspicious' classification.

能力评估

✓ Purpose & Capability

Name and description match the SKILL.md: the document gives step-by-step guidance to produce a single-file HTML/CSS landing page and a README. There are no unrelated requirements (no cloud provider keys, no unrelated binaries).

ℹ Instruction Scope

Instructions stay on-topic (analyze briefs, select templates, emit index.html + README). The SKILL.md permits use of Read/Write/Edit/Grep/Glob/Bash which is reasonable for reading an input brief and writing output files, but those capabilities also enable arbitrary filesystem and shell access if the agent is allowed to run them — the instructions themselves do not ask for reading secrets or other system state.

✓ Install Mechanism

No install spec and no code files — instruction-only skill is lowest-risk from an installation viewpoint (nothing is downloaded or written by an installer).

✓ Credentials

The skill declares no required environment variables, credentials, or config paths. The SKILL.md references only Google Fonts as an external dependency, which is appropriate for web typography.

✓ Persistence & Privilege

always:false and normal autonomous invocation settings. The skill does not request persistent system-wide privileges or modification of other skills/config; expected level of privilege for a file-generating utility.

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install landing-page-generator-openclaw
安装完成后，直接呼叫该 Skill 的名称或使用 /landing-page-generator-openclaw 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

v1.0.0

- Major update: Migrated from Python scripts to prompt-based, context-driven landing page generation. - Removed all code/scripts; now generates landing pages from a natural-language or file brief. - New streamlined usage: Provide a single product/service description to generate a ready-to-use mobile-responsive landing page. - Output includes index.html and README.md with clear customization instructions. - Default design system: modern, accessible, conversion-focused, with automatic section/template selection based on brief. - No external JS or image dependencies; lighter, faster pages with improved accessibility and mobile support.

元数据

Slug landing-page-generator-openclaw

版本 1.0.0

许可证 —

累计安装 1

当前安装数 1

历史版本数 1

常见问题