landing-page（登陆页面）

Landing Page Generator

A research-driven skill that builds compelling landing pages by first deeply understanding who the subject is — through social media, web presence, reviews, and optionally a CV — then crafting copy, visuals, and design that resonates with their specific audience.

This is NOT a generic page builder. It's a research-first approach: understand the subject deeply, then design for their audience.

Workflow Overview

Input (handles, URLs, CV)
  → Research (Social Toolkit + SearchAPI MCPs)
    → Analysis (marketer/SEO lens)
      → Design Direction (audience-driven)
        → Copy Generation (voice-matched)
          → Image Generation (aesthetic-matched)
            → Landing Page (deploy-ready)

Step 0: Gather Inputs

Ask the user for as many of these as available. At minimum, one social media handle or a website URL is required.

Structured inputs to request:

Also ask:

• Who is this for? (themselves, a client, a friend, a business they found)
• What's the goal? (get clients, build community, sell products, personal brand, portfolio)

Step 1: Research Phase

Pull data from ALL available sources in parallel. Use Social Toolkit MCP as primary and SearchAPI MCP as backup/complement.

1A: Social Media Profiles

Fetch all provided profiles in parallel:

Social Toolkit MCP:
- FetchInstagramProfileTool → username (gets bio, followers, posts, captions, engagement)
- FetchTiktokProfileTool → username (gets bio, followers, videos, engagement)
- FacebookBusinessPageInfoTool → page name (gets about, likes, posts)
- FetchYoutubeChannelTool → channel (gets description, subscribers, videos)
- FetchYoutubeChannelVideosTool → channel (gets recent video titles, views)

From each profile, extract:

• Bio / description text
• Follower counts and engagement rates
• Last 10-12 posts/videos with captions
• Hashtags used frequently
• Posting frequency and content themes
• Visual style (from post descriptions — dark/light, colorful/muted, professional/casual)
• Language and tone of voice
• Links to website or other profiles
• Location information

1B: Website Scraping

If a website URL is provided (or found in social bios):

Social Toolkit MCP:
- FirecrawlMapTool → URL (discover all pages on the site)
- FirecrawlScrapeTool → URL (scrape main page content)
- FirecrawlScrapeTool → key subpages (about, services, contact)

Extract:

• Tagline / hero text
• Services or products listed
• About section / company story
• Testimonials if present
• Contact information
• Existing color scheme and fonts
• SEO meta tags (title, description)
• Call-to-action patterns

1C: Google Maps & Reviews

If a business name or location is provided:

SearchAPI MCP:
- google_maps_search → business name + location
- google_maps_place → place_id from search (gets reviews, rating, hours, photos)

Extract:

• Rating and review count
• Business category/type
• Address, hours, phone
• GPS coordinates (latitude, longitude) — save these for the map embed
• Review themes (what customers praise, what they complain about)
• Popular times
• Payment methods, amenities
• Photos description
• people_also_search_for — save these as potential competitors for Step 1G

1D: Web Research

Search for additional context:

Social Toolkit MCP:
- GoogleNewsSearchTool → business/person name (recent press, mentions)
- GoogleForumsSearchTool → business/person name (community discussions, Reddit mentions)
- PerplexitySonarSearchTool → "who is [name] and what do they do" (synthesized overview)

SearchAPI MCP (backup):
- google_news_light → business/person name

1E: YouTube Deep Dive

If a YouTube channel exists:

Social Toolkit MCP:
- FetchYoutubeChannelVideosTool → channel (get video list)
- FetchYoutubeTranscriptTool → top 2-3 videos by views (understand what they talk about)
- FetchYoutubeCommentsTool → top video (understand audience reaction)

1F: CV / Resume Analysis

If a CV is provided (file path or pasted text):

• Read the file using the Read tool
• Extract: skills, experience, education, certifications, achievements, career narrative
• Identify expertise areas and years of experience
• Note any awards, publications, speaking engagements

1G: Competitor / Similar Business Research (Fallback)

Trigger this step when:

• The subject has very little web presence (few posts, no website, few reviews)
• The social profiles are sparse or recently created
• Not enough data was gathered in Steps 1A-1F to build a compelling page

Goal: Find 2-3 similar businesses that rank well, study their websites, and use their patterns as inspiration — while keeping the output professional and tailored to the subject's actual context.

How to find competitors:

1. Use people_also_search_for from the Google Maps results (Step 1C) — these are the closest competitors
2. Search Google for the business category + location: Social Toolkit MCP: - PerplexitySonarSearchTool → "best [business type] in [city]" or "[business category] near [location]" - GoogleForumsSearchTool → "[business type] [city] recommendations"
3. For each competitor found, scrape their website: Social Toolkit MCP: - FirecrawlScrapeTool → competitor website URL (get their homepage)

Extract from competitors:

• Page structure and section order (what sections do they include?)
• Services/offerings listed (use as inspiration for the subject's page)
• Tone of voice and copy patterns
• Color schemes and visual style
• CTAs and conversion patterns
• Trust signals they use (certifications, awards, "since 2005", etc.)

How to use competitor data:

• DO: Use the page structure, section patterns, and professional tone as a template
• DO: Adapt the mood and visual style to match what works in the industry
• DO: Include similar sections (e.g., if all competitors have a "Why Choose Us" section, include one)
• DON'T: Copy specific text or claims — everything must be about the actual subject
• DON'T: Use competitor branding, colors, or logos
• DON'T: Fabricate testimonials, awards, or stats the subject doesn't have
• DO: Be transparent with the user: "I didn't find much about [subject] online, so I studied similar businesses in the area to inform the design. Here's what I used as reference: [list competitors]"

When writing copy with limited data:

• Keep claims general but professional: "Quality service" instead of "Award-winning service"
• Focus on the basics that ARE known: location, hours, category, contact
• Use the aesthetic and tone of successful competitors as a guide
• Add placeholder sections the user can fill in: "[Your tagline here]", "Tell your story..."
• Make the page look established and professional even with minimal content — this IS the value

Step 2: Analysis Phase — Think Like a Marketer

After gathering all data, perform a structured analysis. Write this analysis out explicitly before designing — it informs every design decision.

2A: Subject Profile

Synthesize a clear picture:

• Who they are: One paragraph summary
• What they do: Core offering/service/product
• Where they operate: Geography, market, niche
• How long: Maturity/experience level
• Brand voice: Formal/casual, playful/serious, bold/understated, technical/accessible
• Content themes: Top 3-5 recurring topics across all platforms
• Visual identity: Colors, imagery style, and aesthetic patterns from existing content

2B: Audience Analysis

Based on followers, engagement, review language, and content type:

• Primary audience: Demographics, interests, pain points
• What they value: What makes them follow/engage/buy
• Language they use: Slang, formality level, emotional triggers
• Where they hang out: Which platforms are strongest

2C: Competitive Advantages

Identify from the data:

• Unique value prop: What do they offer that others don't?
• Social proof: Ratings, testimonials, follower count, engagement
• Authority signals: Years in business, certifications, press mentions, expertise
• Emotional hooks: Community, exclusivity, safety, luxury, accessibility, rebellion
• Content edge: What type of content performs best for them

2D: SEO & Conversion Insights

• Keywords: Terms from their content, hashtags, and audience language
• Search intent: What would someone Google to find them?
• Conversion goal: What action should the landing page drive?
• Trust barriers: What objections might a visitor have? How does the data address them?

Step 3: Design Direction

Based on the analysis, commit to a design direction. Don't ask the user to pick — propose one based on the data and let them override.

Aesthetic Selection

Choose based on brand voice + audience:

Color Palette

Derive from:

1. Their existing brand colors (from website/social)
2. Their industry conventions
3. Their audience preferences
4. The emotional tone of their content

Typography

Select 2 fonts — a display font and a body font — that match the aesthetic. Never use Inter, Roboto, Arial, or system fonts. Use Google Fonts.

Content Structure

Based on conversion goal, structure the page:

For service businesses: Hero → Problem/Solution → Services → Social Proof → About → CTA

For personal brands / portfolios: Hero → About → Work/Projects → Testimonials → Contact

For communities / clubs: Hero → Experience → Pillars/Values → Events → Location → CTA

For products / e-commerce: Hero → Product Showcase → Features → Reviews → Pricing → CTA

For professionals (CV-based): Hero → Expertise → Experience Timeline → Skills → Publications/Talks → Contact

Step 4: Copy Generation

Write all copy in the subject's voice and the audience's language:

• Hero headline: Bold, specific, emotionally resonant. Not generic.
• Hero subheadline: Clarify what they do and for whom.
• Section headlines: Each tells a mini-story, not just labels.
• Body copy: Short paragraphs, conversational, benefit-driven.
• CTAs: Action-specific ("Solicitar Membresía", not "Click Here")
• Social proof snippets: Pull real quotes from reviews, format naturally.
• Meta tags: SEO-optimized title and description.

Language: Write in the same language the subject uses on their profiles. If mixed, default to the language most of their audience engages in.

Step 5: Image Generation

Generate 3-5 images that match the aesthetic direction using available image generation tools.

Check for infsh CLI availability (from the ai-image-generation skill):

which infsh

If available, generate images using FLUX or Grok models (avoid Seedream for potentially sensitive content):

infsh app run falai/flux-dev-lora --input '{
  "prompt": "[aesthetic-matched prompt based on brand analysis]"
}'

Image set to generate:

Prompt engineering: Base each prompt on the analysis — use the brand's visual style, color palette, and industry context. Never generate generic stock-photo-style images.

If infsh is not available, check for the Social Toolkit HiggsfieldImageTool as an alternative. If no image generation is available, create the page with CSS-only atmospheric effects (gradients, noise textures, shapes) and note which images the user should add later.

Download all generated images to the project directory alongside the HTML/React files.

Step 6: Build the Landing Page

Output Format Selection

Present the user with options based on their situation:

Option A: Single HTML File (recommended for beginners)

• Zero dependencies, open in any browser
• Best for: clients who need it NOW, non-technical users, quick prototypes
• Inline CSS + JS, Google Fonts via CDN
• Images referenced as local files in same directory
• Deploy with Wrangler — include wrangler.jsonc in the project folder: {"name": "<project-name>", "compatibility_date": "2025-04-01", "assets": {"directory": "./"}} Then: cd <project-folder> && wrangler deploy

Option B: Vite + React SPA (recommended for developers)

• npm run build → deploy with wrangler deploy
• Component-based, easy to modify
• Best for: developers, projects that will grow, custom domains
• Follow the standalone React guidelines from the frontend-design skill (includes wrangler.jsonc setup)

Option C: Rails + Inertia Page (recommended for SaaS integration)

• Generates directly into a Rails project structure
• Inertia page component + controller + route
• Best for: when the landing page is part of a larger Rails app
• Only available when inside a Rails+Inertia project (auto-detected)
• Follow the Rails+Inertia guidelines from the frontend-design skill

Option D: Deployable HTML + Asset Bundle (recommended for client handoff)

• Organized folder: index.html + css/ + images/ + js/
• README with deployment instructions
• Best for: freelancers, agency work, client deliverables
• Include wrangler.jsonc in the folder root: {"name": "<project-name>", "compatibility_date": "2025-04-01", "assets": {"directory": "./"}} Deploy: cd <project-folder> && wrangler deploy

Auto-selection logic (propose this, let user override):

• Inside a Rails+Inertia project → Option C
• User mentioned "client" or "freelance" → Option D
• User is technical / mentioned Vercel/Netlify/Cloudflare → Option B
• Default / beginner / "just make it work" → Option A

Design Execution

Regardless of format, apply ALL guidelines from the frontend-design skill:

• Distinctive typography (never generic)
• Bold color palette derived from the research
• Atmospheric backgrounds and textures
• Scroll animations and micro-interactions
• Mobile-responsive
• Fast loading (optimize images, minimal JS)

Map & Directions Integration

If Google Maps coordinates were obtained in Step 1C, include an interactive map section. Ask the user which option they prefer:

Option 1: Google Maps Embed (recommended — free, no API key)

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3000!2d{longitude}!3d{latitude}!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s{place_id}!2s{business_name}!5e0!3m2!1sen!4v1"
  width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

Option 2: OpenStreetMap Embed (no Google dependency)

<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox={lng-0.005},{lat-0.005},{lng+0.005},{lat+0.005}&layer=mapnik&marker={latitude},{longitude}"
  width="100%" height="400" style="border:0;">
</iframe>

Option 3: Static Map Image (fastest load, no iframe)

• Generate a map screenshot or use a static map API
• Best for performance-critical pages

Option 4: No map (for online-only businesses, personal brands without a physical location)

"How to Get There" section — include alongside the map:

• Full formatted address
• A "Get Directions" button linking to Google Maps navigation: <a href="https://www.google.com/maps/dir/?api=1&destination={latitude},{longitude}&destination_place_id={place_id}" target="_blank"> Get Directions </a>
• Nearby landmarks or neighborhoods (if mentioned in reviews)
• Parking information (if found in Google Maps extensions)
• Public transit tips (if available from the data)

Auto-selection logic:

• Physical business with foot traffic (restaurant, store, club) → Option 1 + full "How to Get There"
• Professional office (agency, clinic, studio) → Option 1, minimal directions
• Online-only business → Option 4
• User requests minimal dependencies → Option 2

Page Must Include

Every generated landing page must have:

• SEO meta tags (title, description, OG image, canonical)
• Mobile viewport meta tag
• Semantic HTML structure
• At least one clear CTA above the fold
• Social proof section (ratings, followers, testimonials)
• Contact/location information (if available)
• Map embed with directions (if physical location — see Map & Directions section)
• Footer with legal/disclaimer text (if applicable)
• Google Fonts loaded
• All images with alt text
• Favicon link (if generated)

Step 7: Present the Result

After generating, provide:

1. Research Summary: Key findings about the subject (2-3 bullet points)
2. Design Rationale: Why you chose this aesthetic direction (1-2 sentences)
3. The page: Open it in browser (open index.html) or provide dev server instructions
4. What's included: List of files generated (HTML, images, CSS)
5. Deployment instructions: Based on the format chosen
6. Suggested improvements: Things that could be added with more data or budget (video, testimonials page, blog, etc.)

Behavior Notes

• Research thoroughly, don't rush to design. The quality of the landing page depends entirely on understanding the subject. Spend time in Steps 1-2.
• Be opinionated about design. Don't ask the user to pick colors or fonts — derive them from the research and propose confidently. The user will push back if they disagree.
• Write copy in context. Every headline and paragraph should feel like it was written BY someone who deeply understands the business, not by a generic AI.
• Use real data. Pull actual numbers (4.9 stars, 3,235 followers), real quotes from reviews, actual business hours. Never invent testimonials.
• Match the audience, not just the brand. A luxury brand targeting Gen Z needs a different page than one targeting executives, even with the same brand colors.
• Generate images that fit. Every AI-generated image should feel like it belongs to this specific business. No generic stock vibes.
• Handle multiple languages naturally. If the business operates in Spanish, write in Spanish. Don't translate — write natively.
• Respect disclaimers. If the business includes legal disclaimers in their content (e.g., cannabis clubs, financial services), include appropriate disclaimers in the landing page footer.
• Always show the research. Before presenting the design, share a brief summary of what you found. This builds trust and lets the user correct any misunderstandings before you build.