SaaS落地页生成器提示
来自 Wikiprompt，自由的提示词百科全书
2025年4月7日
SaaS落地页生成器提示 用于生成高转化率SaaS落地页的提示，包含英雄区、功能特性、客户评价、定价和行动号召，采用HTML/CSS/JS实现。
提示词内容收藏
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IdeaPost · AI blog writer</title>
<!-- Font Awesome 6 (free) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #fafcff;
color: #0b1e33;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* header */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
font-weight: 700;
font-size: 1.6rem;
letter-spacing: -0.02em;
color: #0b1e33;
}
.logo i {
color: #3a6ff0;
margin-right: 8px;
}
.nav-links {
display: flex;
gap: 32px;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: #2a3f5a;
font-weight: 500;
font-size: 0.95rem;
}
.nav-links a:hover {
color: #3a6ff0;
}
.btn {
display: inline-block;
background: #3a6ff0;
color: white !important;
padding: 10px 22px;
border-radius: 40px;
font-weight: 600;
font-size: 0.9rem;
border: none;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
letter-spacing: 0.2px;
box-shadow: 0 4px 10px rgba(58, 111, 240, 0.2);
}
.btn:hover {
background: #2b5ad0;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(58, 111, 240, 0.25);
}
.btn-outline {
background: transparent;
color: #0b1e33 !important;
border: 1.5px solid #d0dcec;
box-shadow: none;
}
.btn-outline:hover {
border-color: #3a6ff0;
background: rgba(58, 111, 240, 0.04);
box-shadow: none;
}
/* HERO */
.hero {
padding: 60px 0 40px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
}
.hero h1 {
font-size: 3.2rem;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.2;
margin-bottom: 20px;
}
.hero h1 span {
color: #3a6ff0;
background: linear-gradient(145deg, #3a6ff0, #6c8cff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-sub {
font-size: 1.2rem;
color: #2a405c;
margin-bottom: 28px;
max-width: 90%;
}
.hero-cta {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 28px;
}
.hero-note {
font-size: 0.9rem;
color: #5c6f87;
display: flex;
align-items: center;
gap: 8px;
}
.hero-note i {
color: #3a6ff0;
}
.demo-card {
background: white;
border-radius: 24px;
padding: 24px;
box-shadow: 0 20px 40px -12px rgba(0, 20, 50, 0.15);
border: 1px solid #eef3fa;
}
.demo-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #5c6f87;
margin-bottom: 12px;
font-weight: 600;
}
.idea-box, .post-box {
background: #f6f9ff;
border-radius: 16px;
padding: 16px;
margin-bottom: 16px;
border-left: 4px solid #3a6ff0;
}
.idea-box p, .post-box p {
font-size: 0.95rem;
}
.idea-box .badge, .post-box .badge {
display: inline-block;
background: #e2eaff;
color: #1a3f8f;
font-size: 0.7rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 30px;
margin-bottom: 8px;
}
.post-box {
border-left-color: #22c55e;
background: #f2fbf6;
}
.post-box .badge {
background: #d1fae5;
color: #0b6b3f;
}
.arrow-icon {
text-align: center;
font-size: 1.4rem;
color: #3a6ff0;
margin: 6px 0;
}
.stats {
display: flex;
gap: 32px;
margin-top: 40px;
flex-wrap: wrap;
}
.stat-item h3 {
font-size: 1.8rem;
font-weight: 700;
color: #0b1e33;
}
.stat-item p {
color: #5c6f87;
font-size: 0.9rem;
}
/* LOGOS / social proof */
.social-proof {
padding: 20px 0 30px;
border-bottom: 1px solid #e6edf5;
}
.proof-text {
font-size: 0.85rem;
color: #5c6f87;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.proof-text span {
font-weight: 600;
color: #2a405c;
}
.proof-text i {
font-size: 1.4rem;
color: #9aaec5;
margin-right: 8px;
}
/* features */
.features {
padding: 70px 0 40px;
}
.section-title {
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.section-sub {
color: #2a405c;
max-width: 600px;
margin-bottom: 48px;
font-size: 1.1rem;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.feature-card {
background: white;
border-radius: 20px;
padding: 28px 22px;
border: 1px solid #eaf0f8;
transition: all 0.2s;
}
.feature-card:hover {
box-shadow: 0 16px 30px -12px rgba(0, 20, 50, 0.1);
transform: translateY(-3px);
}
.feature-icon {
background: #e9efff;
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #3a6ff0;
margin-bottom: 18px;
}
.feature-card h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.feature-card p {
color: #3d526b;
font-size: 0.95rem;
}
/* testimonial */
.testimonials {
padding: 50px 0 70px;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial-card {
background: white;
border-radius: 20px;
padding: 28px;
border: 1px solid #eaf0f8;
box-shadow: 0 6px 14px rgba(0,0,0,0.02);
}
.stars {
color: #f5b342;
margin-bottom: 16px;
font-size: 0.9rem;
}
.testimonial-card blockquote {
font-size: 0.98rem;
color: #1c2f46;
margin-bottom: 20px;
}
.author {
display: flex;
align-items: center;
gap: 12px;
}
.author img {
width: 44px;
height: 44px;
border-radius: 50%;
background: #d1ddec;
}
.author-name {
font-weight: 600;
font-size: 0.95rem;
}
.author-role {
font-size: 0.8rem;
color: #5c6f87;
}
/* pricing */
.pricing {
padding: 50px 0 80px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 30px;
}
.pricing-card {
background: white;
border-radius: 24px;
padding: 32px 26px;
border: 1px solid #e6edf5;
transition: 0.2s;
}
.pricing-card.featured {
border: 2px solid #3a6ff0;
box-shadow: 0 20px 35px -12px rgba(58, 111, 240, 0.2);
background: linear-gradient(white, #fafcff);
}
.pricing-card h3 {
font-size: 1.4rem;
margin-bottom: 8px;
}
.price {
font-size: 2.8rem;
font-weight: 700;
margin: 16px 0;
}
.price span {
font-size: 1rem;
font-weight: 400;
color: #5c6f87;
}
.pricing-features {
list-style: none;
margin: 24px 0 32px;
}
.pricing-features li {
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
}
.pricing-features i {
color: #22c55e;
font-size: 0.9rem;
}
.btn-block {
width: 100%;
text-align: center;
}
/* CTA */
.cta-section {
background: #0b1e33;
border-radius: 32px;
padding: 60px 40px;
text-align: center;
color: white;
margin: 30px 0 60px;
}
.cta-section h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 16px;
}
.cta-section p {
font-size: 1.2rem;
color: #cbd7e8;
max-width: 600px;
margin: 0 auto 32px;
}
.cta-section .btn {
background: white;
color: #0b1e33 !important;
padding: 14px 36px;
font-size: 1.1rem;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.cta-section .btn:hover {
background: #eef3ff;
}
footer {
padding: 30px 0 40px;
border-top: 1px solid #e6edf5;
color: #5c6f87;
font-size: 0.9rem;
}
.footer-flex {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
/* responsive */
@media (max-width: 900px) {
.hero-grid, .feature-grid, .testimonial-grid, .pricing-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 2.5rem;
}
.nav-links {
display: none;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<nav class="navbar">
<div class="logo"><i class="fas fa-pen-fancy"></i>IdeaPost</div>
<div class="nav-links">
<a href="#">Features</a>
<a href="#">Testimonials</a>
<a href="#">Pricing</a>
<a href="#" class="btn btn-outline">Sign in</a>
<a href="#" class="btn">Start free</a>
</div>
</nav>
</div>
</header>
<main>
<!-- HERO -->
<section class="hero">
<div class="container hero-grid">
<div>
<h1>From idea to <span>polished post</span> in minutes</h1>
<p class="hero-sub">Turn rough thoughts into professional, ready-to-publish blog articles. AI-powered writing that sounds like you.</p>
<div class="hero-cta">
<a href="#" class="btn">Start writing free →</a>
<a href="#" class="btn btn-outline">Watch demo</a>
</div>
<div class="hero-note">
<i class="fas fa-check-circle"></i> No credit card required · Free 7-day trial
</div>
<div class="stats">
<div class="stat-item">
<h3>12k+</h3>
<p>writers & teams</p>
</div>
<div class="stat-item">
<h3>1.2M</h3>
<p>posts generated</p>
</div>
<div class="stat-item">
<h3>4.9/5</h3>
<p>user rating</p>
</div>
</div>
</div>
<!-- side-by-side demo -->
<div class="demo-card">
<div class="demo-label">RAW IDEA</div>
<div class="idea-box">
<span class="badge"><i class="fas fa-lightbulb"></i> input</span>
<p>“Remote work productivity tips – focus, async communication, boundaries, tools”</p>
</div>
<div class="arrow-icon"><i class="fas fa-arrow-down"></i></div>
<div class="demo-label">FINISHED BLOG (AI)</div>
<div class="post-box">
<span class="badge"><i class="fas fa-file-alt"></i> output</span>
<p><strong>How to Stay Productive While Working Remotely</strong><br>Remote work offers freedom, but it demands structure. Here are 4 research-backed strategies to boost focus, set boundaries, and master async collaboration...</p>
</div>
</div>
</div>
</section>
<!-- social proof -->
<div class="social-proof">
<div class="container proof-text">
<span><i class="fas fa-building"></i> Trusted by teams at</span>
<span><i class="fab fa-google"></i> Google</span>
<span><i class="fab fa-notion"></i> Notion</span>
<span><i class="fab fa-shopify"></i> Shopify</span>
<span><i class="fab fa-webflow"></i> Webflow</span>
</div>
</div>
<!-- FEATURES -->
<section class="features">
<div class="container">
<h2 class="section-title">Everything you need to publish faster</h2>
<p class="section-sub">From first spark to final draft ， IdeaPost handles structure, tone, and SEO.</p>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-brain"></i></div>
<h3>Idea-to-outline</h3>
<p>Drop a sentence or bullet points. Get a structured outline with headings, subheadings, and key arguments.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-magic"></i></div>
<h3>Your voice, amplified</h3>
<p>Train the AI on your past posts. It mimics your tone, vocabulary, and rhythm ， no more robotic text.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-chart-line"></i></div>
<h3>SEO built-in</h3>
<p>Keywords, meta descriptions, internal links ， optimized automatically while you write.</p>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials">
<div class="container">
<h2 class="section-title">Loved by content teams</h2>
<div class="testimonial-grid">
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>“IdeaPost turned my messy voice notes into a polished article in under 5 minutes. It’s like having a full-time editor.”</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/44?img=5" alt="avatar">
<div>
<div class="author-name">Maya Chen</div>
<div class="author-role">Content Lead, Loom</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>“We publish 3x more blog posts without hiring extra writers. The quality is consistently excellent.”</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/44?img=12" alt="avatar">
<div>
<div class="author-name">David Okafor</div>
<div class="author-role">SEO Manager, Typeform</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>“The side-by-side idea to final post preview is genius. It feels like magic, but it’s just great AI.”</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/44?img=32" alt="avatar">
<div>
<div class="author-name">Sofia Reyes</div>
<div class="author-role">Freelance writer</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="pricing">
<div class="container">
<h2 class="section-title">Simple, transparent pricing</h2>
<p class="section-sub">Start free, upgrade when you're ready.</p>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Starter</h3>
<div class="price">$0 <span>/mo</span></div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> 5 AI posts/month</li>
<li><i class="fas fa-check"></i> Basic templates</li>
<li><i class="fas fa-check"></i> Community support</li>
</ul>
<a href="#" class="btn btn-outline btn-block">Start free</a>
</div>
<div class="pricing-card featured">
<h3>Pro <span style="font-size:0.8rem; background:#e9efff; padding:4px 10px; border-radius:30px; color:#1a3f8f;">POPULAR</span></h3>
<div class="price">$29 <span>/mo</span></div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Unlimited posts</li>
<li><i class="fas fa-check"></i> Voice cloning & tone</li>
<li><i class="fas fa-check"></i> SEO optimization</li>
<li><i class="fas fa-check"></i> Priority support</li>
</ul>
<a href="#" class="btn btn-block">Start 7-day trial</a>
</div>
<div class="pricing-card">
<h3>Team</h3>
<div class="price">$79 <span>/mo</span></div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Everything in Pro</li>
<li><i class="fas fa-check"></i> 5 team seats</li>
<li><i class="fas fa-check"></i> Collaboration tools</li>
<li><i class="fas fa-check"></i> Analytics dashboard</li>
</ul>
<a href="#" class="btn btn-outline btn-block">Contact sales</a>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="container">
<div class="cta-section">
<h2>Your best ideas deserve a beautiful post</h2>
<p>Join 12,000+ creators who turned their thoughts into published articles with IdeaPost.</p>
<a href="#" class="btn">Start creating free →</a>
</div>
</section>
</main>
<footer>
<div class="container footer-flex">
<div>© 2025 IdeaPost. All rights reserved.</div>
<div style="display:flex; gap:24px;">
<a href="#" style="color:#5c6f87; text-decoration:none;">Privacy</a>
<a href="#" style="color:#5c6f87; text-decoration:none;">Terms</a>
<a href="#" style="color:#5c6f87; text-decoration:none;">Twitter</a>
</div>
</div>
</footer>
<!-- minimal JS for interactivity (smooth scroll, hover effects) -->
<script>
// smooth scroll for anchor links (if any)
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) target.scrollIntoView({ behavior: 'smooth' });
});
});
// subtle interactive effect on pricing buttons (demo)
document.querySelectorAll('.pricing-card .btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
alert('Sign-up flow starts here (demo)');
});
});
// hero CTA demo
document.querySelector('.hero-cta .btn')?.addEventListener('click', (e) => {
e.preventDefault();
alert('Start your free trial ， this is a demo landing page.');
});
</script>
</body>
</html>
用法
此提示词专为 marketing 设计。复制上方内容并粘贴到你常用的 AI 工具中。
为获得最佳效果，可将占位符（方括号或大写字母标示）替换为你的具体需求。
讨论
0 条评论