[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-e1318b70-0ec6-40c2-8661-0db60bbb0ebd":3,"$fdKa5hlcGAdSoP8oXYQmTTJ3uFrMWJy-Bo2N7WhECgdg":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"e1318b70-0ec6-40c2-8661-0db60bbb0ebd","landing-page-generator","生成高转化率的Next.js\u002FReact着陆页，使用Tailwind CSS。采用PAS、AIDA和BAB框架优化文案\u002F组件（英雄、特性、定价）。专注于核心Web Vitals\u002FSEO。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: \"landing-page-generator\"\ndescription: \"Generates high-converting Next.js\u002FReact landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy\u002Fcomponents (Heroes, Features, Pricing). Focuses on Core Web Vitals\u002FSEO.\"\ncategory: \"front-end\"\nrisk: \"safe\"\nsource: \"community\"\ndate_added: \"2026-03-18\"\nauthor: \"alirezarezvani\"\ntags: [\"nextjs\", \"react\", \"tailwind\", \"landing-page\", \"marketing\", \"seo\", \"cro\"]\ntools: [\"claude\", \"cursor\", \"gemini\"]\n---\n\n# Landing Page Generator\n\nGenerate high-converting landing pages from a product description. Output complete Next.js\u002FReact components with multiple section variants, proven copy frameworks, SEO optimization, and performance-first patterns. Not lorem ipsum — actual copy that converts.\n\n**Target:** LCP \u003C 1s · CLS \u003C 0.1 · FID \u003C 100ms  \n**Output:** TSX components + Tailwind styles + SEO meta + copy variants\n\n## When to Use\n- You need to generate a marketing landing page in Next.js or React.\n- The task involves conversion-focused page structure, section variants, Tailwind styling, or SEO-aware copy.\n- You want complete landing-page output from a product description rather than isolated UI fragments.\n\n## Core Capabilities\n\n- 5 hero section variants (centered, split, gradient, video-bg, minimal)\n- Feature sections (grid, alternating, cards with icons)\n- Pricing tables (2–4 tiers with feature lists and toggle)\n- FAQ accordion with schema markup\n- Testimonials (grid, carousel, single-quote)\n- CTA sections (banner, full-page, inline)\n- Footer (simple, mega, minimal)\n- 4 design styles with Tailwind class sets\n\n---\n\n## Generation Workflow\n\nFollow these steps in order for every landing page request:\n\n1. **Gather inputs** — collect product name, tagline, audience, pain point, key benefit, pricing tiers, design style, and copy framework using the trigger format below. Ask only for missing fields.\n2. **Analyze brand voice** (recommended) — if the user has existing brand content (website copy, blog posts, marketing materials), run it through `marketing-skill\u002Fcontent-production\u002Fscripts\u002Fbrand_voice_analyzer.py` to get a voice profile (formality, tone, perspective). Use the profile to inform design style and copy framework selection:\n   - formal + professional → **enterprise** style, **AIDA** framework\n   - casual + friendly → **bold-startup** style, **BAB** framework\n   - professional + authoritative → **dark-saas** style, **PAS** framework\n   - casual + conversational → **clean-minimal** style, **BAB** framework\n3. **Select design style** — map the user's choice (or infer from brand voice analysis) to one of the four Tailwind class sets in the Design Style Reference.\n4. **Apply copy framework** — write all headline and body copy using the chosen framework (PAS \u002F AIDA \u002F BAB) before generating components. Match the voice profile's formality and tone throughout.\n5. **Generate sections in order** — Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Skip sections not relevant to the product.\n6. **Validate against SEO checklist** — run through every item in the SEO Checklist before outputting final code. Fix any gaps inline.\n7. **Output final components** — deliver complete, copy-paste-ready TSX files with all Tailwind classes, SEO meta, and structured data included.\n\n---\n\n## Triggering This Skill\n\n```\nProduct: [name]\nTagline: [one sentence value prop]\nTarget audience: [who they are]\nKey pain point: [what problem you solve]\nKey benefit: [primary outcome]\nPricing tiers: [free\u002Fpro\u002Fenterprise or describe]\nDesign style: dark-saas | clean-minimal | bold-startup | enterprise\nCopy framework: PAS | AIDA | BAB\n```\n\n---\n\n## Design Style Reference\n\n| Style | Background | Accent | Cards | CTA Button |\n|---|---|---|---|---|\n| **Dark SaaS** | `bg-gray-950 text-white` | `violet-500\u002F400` | `bg-gray-900 border border-gray-800` | `bg-violet-600 hover:bg-violet-500` |\n| **Clean Minimal** | `bg-white text-gray-900` | `blue-600` | `bg-gray-50 border border-gray-200 rounded-2xl` | `bg-blue-600 hover:bg-blue-700` |\n| **Bold Startup** | `bg-white text-gray-900` | `orange-500` | `shadow-xl rounded-3xl` | `bg-orange-500 hover:bg-orange-600 text-white` |\n| **Enterprise** | `bg-slate-50 text-slate-900` | `slate-700` | `bg-white border border-slate-200 shadow-sm` | `bg-slate-900 hover:bg-slate-800 text-white` |\n\n> **Bold Startup** headings: add `font-black tracking-tight` to all `\u003Ch1>`\u002F`\u003Ch2>` elements.\n\n---\n\n## Copy Frameworks\n\n**PAS (Problem → Agitate → Solution)**\n- H1: Painful state they're in\n- Sub: What happens if they don't fix it\n- CTA: What you offer\n- *Example — H1:* \"Your team wastes 3 hours a day on manual reporting\" \u002F *Sub:* \"Every hour spent on spreadsheets is an hour not closing deals. Your competitors are already automated.\" \u002F *CTA:* \"Automate your reports in 10 minutes →\"\n\n**AIDA (Attention → Interest → Desire → Action)**\n- H1: Bold attention-grabbing statement → Sub: Interesting fact or benefit → Features: Desire-building proof points → CTA: Clear action\n\n**BAB (Before → After → Bridge)**\n- H1: \"[Before state] → [After state]\" → Sub: \"Here's how [product] bridges the gap\" → Features: How it works (the bridge)\n\n---\n\n## Representative Component: Hero (Centered Gradient — Dark SaaS)\n\nUse this as the structural template for all hero variants. Swap layout classes, gradient direction, and image placement for split, video-bg, and minimal variants.\n\n```tsx\nexport function HeroCentered() {\n  return (\n    \u003Csection className=\"relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center\">\n      \u003Cdiv className=\"absolute inset-0 bg-gradient-to-b from-violet-900\u002F20 to-transparent\" \u002F>\n      \u003Cdiv className=\"pointer-events-none absolute -top-40 left-1\u002F2 h-[600px] w-[600px] -translate-x-1\u002F2 rounded-full bg-violet-600\u002F20 blur-3xl\" \u002F>\n      \u003Cdiv className=\"relative z-10 max-w-4xl\">\n        \u003Cdiv className=\"mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500\u002F30 bg-violet-500\u002F10 px-4 py-1.5 text-sm text-violet-300\">\n          \u003Cspan className=\"h-1.5 w-1.5 rounded-full bg-violet-400\" \u002F>\n          Now in public beta\n        \u003C\u002Fdiv>\n        \u003Ch1 className=\"mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl\">\n          Ship faster.\u003Cbr \u002F>\n          \u003Cspan className=\"bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent\">\n            Break less.\n          \u003C\u002Fspan>\n        \u003C\u002Fh1>\n        \u003Cp className=\"mx-auto mb-10 max-w-2xl text-xl text-gray-400\">\n          The deployment platform that catches errors before your users do.\n          Zero config. Instant rollbacks. Real-time monitoring.\n        \u003C\u002Fp>\n        \u003Cdiv className=\"flex flex-col items-center gap-4 sm:flex-row sm:justify-center\">\n          \u003CButton size=\"lg\" className=\"bg-violet-600 text-white hover:bg-violet-500 px-8\">\n            Start free trial\n          \u003C\u002FButton>\n          \u003CButton size=\"lg\" variant=\"outline\" className=\"border-gray-700 text-gray-300\">\n            See how it works →\n          \u003C\u002FButton>\n        \u003C\u002Fdiv>\n        \u003Cp className=\"mt-4 text-sm text-gray-500\">No credit card required · 14-day free trial\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n  )\n}\n```\n\n---\n\n## Other Section Patterns\n\n### Feature Section (Alternating)\n\nMap over a `features` array with `{ title, description, image, badge }`. Toggle layout direction with `i % 2 === 1 ? \"lg:flex-row-reverse\" : \"\"`. Use `\u003CImage>` with explicit `width`\u002F`height` and `rounded-2xl shadow-xl`. Wrap in `\u003Csection className=\"py-24\">` with `max-w-6xl` container.\n\n### Pricing Table\n\nMap over a `plans` array with `{ name, price, description, features[], cta, highlighted }`. Highlighted plan gets `border-2 border-violet-500 bg-violet-950\u002F50 ring-4 ring-violet-500\u002F20`; others get `border border-gray-800 bg-gray-900`. Render `null` price as \"Custom\". Use `\u003CCheck>` icon per feature row. Layout: `grid gap-8 lg:grid-cols-3`.\n\n### FAQ with Schema Markup\n\nInject `FAQPage` JSON-LD via `\u003Cscript type=\"application\u002Fld+json\" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} \u002F>` inside the section. Map FAQs with `{ q, a }` into shadcn `\u003CAccordion>` with `type=\"single\" collapsible`. Container: `max-w-3xl`.\n\n### Testimonials, CTA, Footer\n\n- **Testimonials:** Grid (`grid-cols-1 md:grid-cols-3`) or single-quote hero block with avatar, name, role, and quote text.\n- **CTA Banner:** Full-width section with headline, subhead, and two buttons (primary + ghost). Add trust signals (money-back guarantee, logo strip) immediately below.\n- **Footer:** Logo + nav columns + social links + legal. Use `border-t border-gray-800` separator.\n\n---\n\n## SEO Checklist\n\n- [ ] `\u003Ctitle>` tag: primary keyword + brand (50–60 chars)\n- [ ] Meta description: benefit + CTA (150–160 chars)\n- [ ] OG image: 1200×630px with product name and tagline\n- [ ] H1: one per page, includes primary keyword\n- [ ] Structured data: FAQPage, Product, or Organization schema\n- [ ] Canonical URL set\n- [ ] Image alt text on all `\u003CImage>` components\n- [ ] robots.txt and sitemap.xml configured\n- [ ] Core Web Vitals: LCP \u003C 1s, CLS \u003C 0.1\n- [ ] Mobile viewport meta tag present\n- [ ] Internal linking to pricing and docs\n\n> **Validation step:** Before outputting final code, verify every checklist item above is satisfied. Fix any gaps inline — do not skip items.\n\n---\n\n## Performance Targets\n\n| Metric | Target | Technique |\n|---|---|---|\n| LCP | \u003C 1s | Preload hero image, use `priority` on Next\u002FImage |\n| CLS | \u003C 0.1 | Set explicit width\u002Fheight on all images |\n| FID\u002FINP | \u003C 100ms | Defer non-critical JS, use `loading=\"lazy\"` |\n| TTFB | \u003C 200ms | Use ISR or static generation for landing pages |\n| Bundle | \u003C 100KB JS | Audit with `@next\u002Fbundle-analyzer` |\n\n---\n\n## Common Pitfalls\n\n- Hero image not preloaded — add `priority` prop to first `\u003CImage>`\n- Missing mobile breakpoints — always design mobile-first with `sm:` prefixes\n- CTA copy too vague — \"Get started\" beats \"Learn more\"; \"Start free trial\" beats \"Sign up\"\n- Pricing page missing trust signals — add money-back guarantee and testimonials near CTA\n- No above-the-fold CTA on mobile — ensure button is visible without scrolling on 375px viewport\n\n---\n\n## Related Skills\n\n- **Brand Voice Analyzer** (`marketing-skill\u002Fcontent-production\u002Fscripts\u002Fbrand_voice_analyzer.py`) — Run before generation to establish voice profile and ensure copy consistency\n- **UI Design System** (`product-team\u002Fui-design-system\u002F`) — Generate design tokens from brand color before building the page\n- **Competitive Teardown** (`product-team\u002Fcompetitive-teardown\u002F`) — Competitive positioning informs landing page messaging and differentiation\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,74,634,"2026-05-16 13:25:28",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"a354b7dc-7a46-46ff-963e-c03e000854f9","1.0.0","landing-page-generator.zip",21936,"uploads\u002Fskills\u002Fe1318b70-0ec6-40c2-8661-0db60bbb0ebd\u002Flanding-page-generator.zip","063708456a72e385b20183518f1762fddaea9e3f5549cf04fb7014dd93a66b6f","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":11007},{\"path\":\"references\u002Fconversion-patterns.md\",\"isDirectory\":false,\"size\":6126},{\"path\":\"references\u002Fframeworks.md\",\"isDirectory\":false,\"size\":7720},{\"path\":\"references\u002Flanding-page-patterns.md\",\"isDirectory\":false,\"size\":2759},{\"path\":\"references\u002Fseo-checklist.md\",\"isDirectory\":false,\"size\":5098},{\"path\":\"scripts\u002Flanding_page_scaffolder.py\",\"isDirectory\":false,\"size\":24891}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]