landing-page
GitHub基于研究的落地页生成器，通过社交媒体、网站和CV等多源数据深度分析主体，提取竞争优势与受众洞察，自动生成匹配品牌调性的文案、AI图片及高转化率落地页。
Trigger Scenarios
Install
npx skills add NeverSight/learn-skills.dev --skill landing-page -g -y
SKILL.md
Frontmatter
{
"name": "landing-page",
"description": "Research-driven landing page generator. Pulls data from social media, websites, Google Maps, YouTube, forums, and optionally a CV to build a complete profile of a company or person. Analyzes the data as a marketer to extract competitive advantages, value props, audience insights, and brand voice. Then generates a compelling landing page with AI-generated images tailored to the audience. Use this skill when the user says things like: 'create a landing page for...', 'build a website for this business', 'make a landing page from their social media', 'generate a page for this company', 'research and build a site for...', 'landing page for my client', 'portfolio page for...', 'personal brand page', or provides social media handles, a website URL, or a CV and wants a page built from it."
}
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:
| Input | Example | Required? |
|---|---|---|
| Instagram handle | @kerikuamorelia |
At least one social profile |
| TikTok handle | @username |
Optional |
| Facebook page | Page Name |
Optional |
| YouTube channel | @channel or URL |
Optional |
| URL or company name | Optional | |
| Website URL | https://example.com |
Optional |
| Google Maps / Business name | K'ERI KUA Morelia |
Optional |
| CV / Resume | File path or pasted text | Optional |
| Target audience hint | "young professionals in Mexico" | Optional |
| Language | es, en, pt, etc. | Default: auto-detect from content |
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:
- Use
people_also_search_forfrom the Google Maps results (Step 1C) — these are the closest competitors - 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" - 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:
| If the data suggests... | Choose... |
|---|---|
| Luxury, exclusivity, high-end | Dark theme, serif fonts, gold accents, editorial layout |
| Friendly, accessible, community | Light/warm theme, rounded fonts, soft colors, open layout |
| Technical, professional, B2B | Clean minimal, monospace accents, structured grid, muted palette |
| Bold, rebellious, youth | High contrast, oversized type, asymmetric layout, neon accents |
| Natural, organic, wellness | Earth tones, organic shapes, textured backgrounds, botanical imagery |
| Playful, creative, artistic | Vibrant colors, custom illustrations, dynamic layout, personality |
Color Palette
Derive from:
- Their existing brand colors (from website/social)
- Their industry conventions
- Their audience preferences
- 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:
| Image | Purpose | Aspect |
|---|---|---|
| Hero background | Main visual impact, sets the mood | 16:9 or full-width |
| About/Feature visual | Supports the story section | 3:4 or 1:1 |
| Service/Pillar images (2-3) | One per key offering | 1:1 or 16:9 |
| CTA background (optional) | Atmospheric, subtle | 16:9 |
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.jsoncin the project folder:
Then:{ "name": "<project-name>", "compatibility_date": "2025-04-01", "assets": { "directory": "./" } }cd <project-folder> && wrangler deploy
Option B: Vite + React SPA (recommended for developers)
npm run build→ deploy withwrangler deploy- Component-based, easy to modify
- Best for: developers, projects that will grow, custom domains
- Follow the standalone React guidelines from the
frontend-designskill (includeswrangler.jsoncsetup)
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-designskill
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.jsoncin the folder root:
Deploy:{ "name": "<project-name>", "compatibility_date": "2025-04-01", "assets": { "directory": "./" } }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:
- Research Summary: Key findings about the subject (2-3 bullet points)
- Design Rationale: Why you chose this aesthetic direction (1-2 sentences)
- The page: Open it in browser (
open index.html) or provide dev server instructions - What's included: List of files generated (HTML, images, CSS)
- Deployment instructions: Based on the format chosen
- 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.
Version History
- e0220ca Current 2026-07-05 22:06
