効率的なプロンプト設計で、AIが最適なLPをサクッと生成
以下のツイートがとても有用だったので、自分用にまとめました。
I've designed 50+ AI landing pages in 90 days (more than my last 3 years combined).
— Namya @ Supafast (@namyakhann) January 13, 2025
Here are 10 key sections for a high-converting AI landing page: pic.twitter.com/XVzWbqKTM3
まず上の図解をClaudeでYAML化：
landing_page_sections:
navbar:
description: Make navigation simple and clear
elements:
- Solutions
- Benefits
- How it Works
- Integrations
- FAQs
- Pricing
requirements: Keep main CTA always visible
hero_section:
elements:
- headline: "[Desired Outcome] - [Objection]"
- subheading: "Expand on what makes your product special"
- visual_element: Product demo or visual
requirements: Show outcome and handle objections upfront
social_proof:
description: Build trust
elements:
- logos
- testimonials
- customer_results
- real_results_highlights
use_cases:
description: Explain product solutions
subsections:
- use_case_1
- use_case_2
- use_case_3
requirements: Keep focused on audience needs
pain_points:
description: Highlight audience challenges
subsections:
- pain_point_1
- pain_point_2
- pain_point_3
requirements: Show how product solves problems
why_us:
description: Show product advantages
elements:
- heading_1
- heading_2
- heading_3
requirements: Use simple, clear reasons for superiority
how_it_works:
description: Break down product functionality
requirements:
- 3-5 easy steps
- Simple visuals or icons
- Easy to understand explanation
benefits:
description: Focus on key product features
requirements:
- Highlight 3-4 key features
- Explain problem-solving aspects
- Show how it makes life easier
pricing:
structure:
base:
price: $9/mo
features:
- Feature 1
- Feature 2
- Feature 3
pro:
price: $29/mo
features:
- Feature 1
- Feature 2
- Feature 3
- Feature 4
enterprise:
price: $99/mo
requirements: Clear plan comparison with CTAs
testimonials:
description: Show customer success stories
requirements:
- Real photos
- Actual results
- Personal and relatable content
ctv:
description: Call-To-Value
requirements:
- Action-driven CTAs
- Clear benefit statement
- Examples: "Try for Free", "Book a Demo"
- Include value proposition (e.g., "Save 10+ hours a week")
faqs:
description: Answer common questions
focus_areas:
- Pricing
- Setup
- Features
requirements: Simple, clear answers
footer:
elements:
- Features
- Pricing
- How it Works
- FAQs
- Social media links
- Trust elements
requirements:
- Terms and privacy links
- Contact information
- Security badges
- Certifications次に上のyamlにデザインと架空サービスの要件を少し加えて再生成：
# Previous theme and styling sections remain identical...
landing_page:
# Theme section remains identical...
sections:
navbar:
# Style section remains identical...
logo: "AIPM7"
elements:
- Solutions
- Features
- Pricing
- Documentation
- FAQs
cta:
text: "Start Free Trial"
# Style remains identical...
hero:
# Style section remains identical...
content:
headline: "7 AI Agents Powering Your AI Product Development"
subheading: "Streamline Your Entire AI Product Lifecycle from Ideation to Deployment"
cta:
primary:
text: "Start 14-Day Free Trial"
secondary:
text: "Watch Demo"
visual:
type: "interactive_demo"
description: "Interactive animation showing 7 AI agents collaboration"
social_proof:
# Style section remains identical...
content:
logos:
- "Client Company Logos"
metrics:
- value: "300+"
label: "Projects Supported"
- value: "40%"
label: "Faster Development"
- value: "60%"
label: "Cost Reduction"
features:
# Style section remains identical...
content:
headline: "Meet Our 7 Specialized AI Agents"
agents:
orchestrator:
name: "OrchestratorAI"
icon: "network"
description: "Coordinates Tasks and Progress Management"
features:
- "Automated Task Distribution"
- "Progress Monitoring"
ideation:
name: "IdeationAI"
icon: "lightbulb"
description: "Product Ideation and Initial Planning"
features:
- "Market Analysis"
- "Idea Validation"
tech_advisor:
name: "TechAdvisorAI"
icon: "code"
description: "Technology Stack Selection and Architecture"
features:
- "Optimal Tech Recommendations"
- "Architecture Design"
data_strategist:
name: "DataStrategistAI"
icon: "database"
description: "Data Strategy and Preprocessing"
features:
- "Data Requirements Definition"
- "Preprocessing Pipeline Design"
model_builder:
name: "ModelBuilderAI"
icon: "brain"
description: "Model Design, Training, and Evaluation"
features:
- "Model Architecture Design"
- "Training Process Optimization"
biz_insight:
name: "BizInsightAI"
icon: "graph"
description: "Profitability Analysis and Business Strategy"
features:
- "Market Viability Assessment"
- "Revenue Model Development"
deployment:
name: "DeploymentAI"
icon: "cloud"
description: "Deployment and Operations Management"
features:
- "Automated Deployment Setup"
- "Performance Monitoring"
tech_stack:
# Style section remains identical...
content:
headline: "Built with Cutting-Edge Technology"
stack_groups:
backend:
title: "Backend"
items:
- "Python (FastAPI)"
- "Uvicorn"
- "MongoDB"
- "AWS Elastic Beanstalk"
frontend:
title: "Frontend"
items:
- "Next.js"
- "TypeScript"
- "Tailwind CSS"
ai:
title: "AI/ML"
items:
- "OpenAI API (GPT-4-mini)"
- "PydanticAI"
pricing:
# Style section remains identical...
plans:
starter:
name: "Starter"
price: "$99/month"
features:
- "Access to 3 AI Agents"
- "100 Monthly Requests"
- "Basic Support"
cta: "Start Free"
professional:
name: "Professional"
price: "$299/month"
highlight: true
features:
- "Access to All 7 AI Agents"
- "1000 Monthly Requests"
- "Priority Support"
- "Customization Options"
cta: "Start 14-Day Trial"
enterprise:
name: "Enterprise"
price: "Contact Us"
features:
- "Unlimited Requests"
- "Dedicated Support Manager"
- "On-premises Deployment"
- "SLA Guarantee"
cta: "Contact Sales"
testimonials:
# Style section remains identical...
content:
- quote: "Reduced development time by two-thirds"
author: "CTO"
company: "Tech Innovators Inc."
- quote: "Incredibly user-friendly for non-engineers"
author: "Product Manager"
company: "Future Systems Corp."
- quote: "Significantly reduced operational costs"
author: "Development Lead"
company: "Cloud Solutions Ltd."
cta_section:
# Style section remains identical...
content:
headline: "Start Building Your AI Product Today"
subheading: "Experience the Power of AIPM7 with a 14-Day Free Trial"
buttons:
primary:
text: "Start Free Trial"
secondary:
text: "Schedule Demo"
faq:
# Style section remains identical...
questions:
- question: "Do I need technical expertise to use AIPM7?"
answer: "No, our intuitive UI and 7 AI agents guide you through the entire process"
- question: "Can I integrate AIPM7 with existing projects?"
answer: "Yes, we support gradual integration and provide assistance with existing system integration"
- question: "Is customization possible?"
answer: "Yes, customization options are available with Professional and Enterprise plans"
footer:
# Style section remains identical...
content:
links:
product:
- Documentation
- API Reference
- Pricing
- Blog
company:
- About
- Careers
- Contact
legal:
- Terms of Service
- Privacy Policy
- Security
social:
- type: "github"
url: "#"
- type: "twitter"
url: "#"
- type: "linkedin"
url: "#"
certifications:
- "SOC2 Type II"
- "ISO 27001"
# Remaining sections (interactions, responsive, accessibility) remain identical...最後に、Cursorで上のYAMLプロンプトをもとに仕様書.mdを生成し、Agentにこの仕様書に従ってLPを生成してもらう。
そして微調整を加えた結果が、以下のページです。
I made an LP template yaml prompt based on the following tweet. Now I can tweak it to generate LPs in minutes. Time to focus on the business logic、😸 pic.twitter.com/zOFw3Hflb6
— Itomaru | いとまる (@izag82161) January 14, 2025