- 登入
- 註冊
Vibe 畫布範本：產品 / 服務 Landing page
想做一頁專業的產品介紹頁，Hero、功能、方案、見證、FAQ 全包，從零到上線只要 30-40 分鐘。本篇提供完整的 HTML 範本與客製化 prompt，複製下方兩個區塊一起貼進 Claude（或 ChatGPT），告訴它你的品牌需求，再把改完的 code 貼進 Vibe 畫布。
這個範本有 10 個區段：Hero（產品定位 + 主視覺）、合作品牌 logo 牆、數據條、3 大功能、4 步驟流程、為什麼選我們、3 方案訂價、客戶見證、6 題 FAQ、最終 CTA。配色採暖色米白 + terracotta accent，主標題用 system serif，整體編輯設計感。
這個範本適合什麼情境#
- SaaS 產品定位頁：新功能上市、月費方案招募使用者
- 諮詢服務介紹：顧問、教練、設計工作室介紹接案內容
- 線上課程招生頁：方案分級、學員見證、FAQ 一頁完整呈現
- 軟體新版本發布：用一頁完整介紹新版的賣點與升級理由
怎麼用：3 個步驟#
- 複製下方的 prompt + code，兩段一起貼進 Claude（或 ChatGPT、Gemini 等 AI 助手）
- 跟 AI 說你的品牌資訊：填上 prompt 裡每個
____對應的內容（公司名、定位、各區段文案） - 把 AI 回給你的完整 code 貼進 Vibe 畫布的 HTML 區塊，儲存後就是你的客製化版本
預估時間：複製 1 分鐘、跟 AI 對話 10-20 分鐘（取決於品牌資訊準備程度）、貼回 Vibe 畫布並調整 5-10 分鐘。第一次完整跑完約 30-40 分鐘。
複製 1：Prompt（給 Claude / AI 的指令）#
這段 prompt 已經寫好給 AI 看的所有規格與限制，你只需要把 ____ 填入你的內容，AI 就能準確改造模板。
完整 Prompt
請幫我把下面這個 Landing page 模板改成我的版本（保留結構，只改文案）。
【請替換的內容】
- 公司 / 產品名稱：____
- 一句話定位（hero h1 後段「核心問題」改成你的核心字）：____
- Hero 副標 lead（2-3 句延伸主張）：____
- 主要 CTA 文字 + 連結：____
- Hero meta 三項（信用標語）：____
- 6 個合作品牌名稱（logo wall）：____
- 4 個數據（合作品牌數、平均評分、上線時間、續用率）+ 註腳：____
- 3 個核心功能（每個含標題 + 一段描述 + 3 個子能力）：____
- 4 步驟「怎麼開始」（每步驟一句話描述）：____
- 4 個「為什麼選我們」差異點（標題 + 一句說明）：____
- 3 個方案（入門 / 專業 / 企業）：名稱 + 定位短句 + 價格 + 5-6 個功能 / 排除項：____
- 3 則客戶見證（內容 + 姓名 + 公司 + 角色 + 合作時長）：____
- 6 題 FAQ（問題 + 2-3 句回答）：____
- Final CTA：標題 + 副標 + 按鈕文字：____
【可選色票調整】（不改就保留原色）
- 主色（accent，預設 terracotta #b8543e）：____
- 米白背景（paper，預設 #faf7f2）：____
- 暗墨色（ink，預設 #1a1714）：____
【技術要求 - 嚴格遵守，請不要動】
1. 保留所有 class 名稱前綴 .snlp-（避免與 WordPress 主題衝突）
2. 保留 RWD 斷點 960px
3. 不引入外部字體（Google Fonts 等）或 JS library
4. 圖片 src 保留 placehold.co 連結（我會自己上傳圖片到媒體庫後另外換）
5. 結構性 HTML 標籤（section / h2 / h3 / p / ul / ol / table）保留
6. 所有 em 標籤保留（這是 hero / h2 / final CTA 的強調字）
【模板 code】（從下方複製按鈕拿到完整 code，貼進對話）複製 2：模板 Code（給 Claude 改的素材）#
完整 HTML 模板，包含所有 scoped CSS 與內容區塊。複製後跟 prompt 一起貼進 AI 對話。
完整模板 Code
<style>
.snlp-wrap *,.snlp-wrap *::before,.snlp-wrap *::after{box-sizing:border-box;}
.snlp-wrap{
--ink:#1a1714;
--ink-mid:#4a4441;
--ink-soft:#6f6862;
--paper:#faf7f2;
--paper-deep:#f3ede2;
--line:#e6dfd1;
--accent:#b8543e;
--accent-deep:#9a4530;
--accent-soft:#d4a890;
font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Segoe UI",Roboto,sans-serif;
color:var(--ink);
background:var(--paper);
line-height:1.7;
-webkit-font-smoothing:antialiased;
font-feature-settings:"kern","liga","calt";
}
.snlp-wrap a{color:inherit;text-decoration:none;}
.snlp-wrap em{font-style:normal;font-weight:700;color:var(--accent);}
.snlp-wrap img{display:block;max-width:100%;height:auto;}
.snlp-serif{font-family:Charter,"Iowan Old Style","Hoefler Text",Georgia,"Songti TC","Noto Serif TC",serif;letter-spacing:-.015em;font-feature-settings:"kern","liga","onum";}
.snlp-container{max-width:1180px;margin:0 auto;padding:0 32px;}
.snlp-container-narrow{max-width:880px;margin:0 auto;padding:0 32px;}
.snlp-eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;}
.snlp-rule{border:0;border-top:1px solid var(--line);margin:0;}
/* ─── Hero ─────────────────────────────────────────── */
.snlp-hero{padding:104px 0 96px;}
.snlp-hero-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center;}
.snlp-h1{font-size:72px;line-height:1.05;font-weight:500;margin:24px 0 28px;letter-spacing:-.025em;}
.snlp-h1 em{font-weight:700;color:var(--accent);}
.snlp-lead{font-size:19px;color:var(--ink-mid);margin:0 0 40px;max-width:480px;line-height:1.65;}
.snlp-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.snlp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:500;padding:14px 28px;border-radius:4px;border:0;cursor:pointer;transition:all .2s ease;letter-spacing:.01em;}
.snlp-wrap a.snlp-btn-primary{background:#1a1714;color:#faf7f2;}
.snlp-wrap a.snlp-btn-primary:hover{background:#b8543e;color:#faf7f2;}
.snlp-wrap a.snlp-btn-link{color:#1a1714;background:transparent;padding:14px 8px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line);}
.snlp-wrap a.snlp-btn-link:hover{text-decoration-color:var(--accent);color:#b8543e;}
.snlp-hero-meta{display:flex;gap:28px;margin-top:32px;color:var(--ink-soft);font-size:14px;flex-wrap:wrap;}
.snlp-hero-meta span{display:inline-flex;align-items:center;gap:7px;}
.snlp-hero-img{position:relative;aspect-ratio:4/5;background:linear-gradient(135deg,#e8d8c4 0%,#d4b89c 100%);border-radius:2px;overflow:hidden;}
.snlp-hero-img img{width:100%;height:100%;object-fit:cover;}
.snlp-hero-img::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.05);pointer-events:none;}
/* ─── Logo wall ────────────────────────────────────── */
.snlp-logos{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.snlp-logos-label{text-align:center;margin-bottom:32px;color:var(--ink-soft);font-size:13px;letter-spacing:.12em;text-transform:uppercase;}
.snlp-logos-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;align-items:center;}
.snlp-logo-cell{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:20px;font-weight:500;text-align:center;color:var(--ink-mid);opacity:.7;letter-spacing:-.01em;padding:12px 0;transition:opacity .2s ease;}
.snlp-logo-cell:hover{opacity:1;color:var(--ink);}
/* ─── Stats ────────────────────────────────────────── */
.snlp-stats{padding:80px 0;border-bottom:1px solid var(--line);}
.snlp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.snlp-stat{padding:0 24px;text-align:center;border-left:1px solid var(--line);}
.snlp-stat:first-child{border-left:0;}
.snlp-stat-num{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:56px;font-weight:500;color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:oldstyle-nums tabular-nums;}
.snlp-stat-lbl{font-size:13px;color:var(--ink-soft);margin-top:14px;letter-spacing:.05em;}
.snlp-stat-note{font-size:12px;color:var(--ink-soft);opacity:.7;margin-top:6px;}
/* ─── Section base ─────────────────────────────────── */
.snlp-section{padding:128px 0;}
.snlp-section-head{text-align:center;margin-bottom:80px;}
.snlp-section-head .snlp-eyebrow{display:block;margin-bottom:16px;}
.snlp-h2{font-size:48px;font-weight:500;letter-spacing:-.025em;margin:0 0 18px;line-height:1.15;}
.snlp-h2-sub{color:var(--ink-soft);font-size:18px;max-width:560px;margin:0 auto;line-height:1.7;}
/* ─── Features ─────────────────────────────────────── */
.snlp-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);}
.snlp-feature{padding:48px 36px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:background .2s ease;}
.snlp-feature:hover{background:var(--paper-deep);}
.snlp-feature:last-child{border-right:0;}
.snlp-feature-num{font-family:Charter,Georgia,serif;font-size:14px;color:var(--accent);letter-spacing:.05em;margin-bottom:24px;}
.snlp-feature-title{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:24px;font-weight:500;letter-spacing:-.015em;margin:0 0 14px;line-height:1.3;}
.snlp-feature-desc{color:var(--ink-mid);font-size:15px;margin:0 0 20px;line-height:1.7;}
.snlp-feature-list{list-style:none;padding:0;margin:0;}
.snlp-feature-list li{font-size:14px;color:var(--ink-soft);padding:8px 0 8px 18px;position:relative;border-top:1px solid var(--line);}
.snlp-feature-list li::before{content:"+";position:absolute;left:0;color:var(--accent);font-weight:600;}
.snlp-feature-list li:first-child{border-top:0;}
/* ─── Process ──────────────────────────────────────── */
.snlp-process{background:var(--paper-deep);}
.snlp-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative;}
.snlp-process-grid::before{content:"";position:absolute;top:32px;left:8%;right:8%;height:1px;background:var(--line);z-index:0;}
.snlp-process-step{position:relative;z-index:1;text-align:center;}
.snlp-process-circle{width:64px;height:64px;border-radius:50%;background:var(--paper);border:1px solid var(--line);margin:0 auto 24px;display:flex;align-items:center;justify-content:center;font-family:Charter,Georgia,serif;font-size:22px;font-weight:500;color:var(--accent);font-feature-settings:"onum";}
.snlp-process-h3{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:20px;font-weight:500;margin:0 0 10px;color:var(--ink);letter-spacing:-.015em;}
.snlp-process-desc{font-size:14px;color:var(--ink-mid);margin:0;line-height:1.7;}
/* ─── Why us ───────────────────────────────────────── */
.snlp-why-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:96px;align-items:center;}
.snlp-why-img{aspect-ratio:4/5;background:linear-gradient(135deg,#d4c0a8 0%,#b8a182 100%);border-radius:2px;overflow:hidden;position:relative;}
.snlp-why-img img{width:100%;height:100%;object-fit:cover;}
.snlp-why-img::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.05);}
.snlp-why h2{margin-top:24px;}
.snlp-why-list{list-style:none;padding:0;margin:40px 0 0;}
.snlp-why-list li{padding:24px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:start;}
.snlp-why-list li:last-child{border-bottom:0;}
.snlp-why-num{font-family:Charter,Georgia,serif;font-size:14px;color:var(--accent);letter-spacing:.08em;line-height:1.6;padding-top:2px;}
.snlp-why-text strong{font-family:Charter,"Iowan Old Style",Georgia,serif;display:block;font-size:18px;margin-bottom:6px;font-weight:500;letter-spacing:-.01em;}
.snlp-why-text span{color:var(--ink-soft);font-size:15px;line-height:1.65;}
/* ─── Pricing ──────────────────────────────────────── */
.snlp-pricing{background:var(--paper-deep);}
.snlp-pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.snlp-pr{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:40px 32px;display:flex;flex-direction:column;transition:border-color .2s ease;}
.snlp-pr:hover{border-color:var(--ink);}
.snlp-pr-feature{position:relative;border-color:var(--ink);}
.snlp-pr-feature::before{content:"最受歡迎";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:11px;letter-spacing:.15em;padding:6px 14px;border-radius:999px;font-weight:600;}
.snlp-pr-name{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:24px;font-weight:500;margin:0 0 8px;letter-spacing:-.015em;color:var(--ink);}
.snlp-pr-tag{font-size:14px;color:var(--ink-soft);margin:0 0 28px;line-height:1.6;}
.snlp-pr-price{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;}
.snlp-pr-price-curr{font-family:Charter,Georgia,serif;font-size:18px;color:var(--ink-mid);}
.snlp-pr-price-num{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:48px;font-weight:500;color:var(--ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:oldstyle-nums tabular-nums;}
.snlp-pr-price-unit{font-size:14px;color:var(--ink-soft);}
.snlp-pr-price-sub{font-size:13px;color:var(--ink-soft);margin:0 0 28px;}
.snlp-pr-cta{display:block;text-align:center;padding:13px;border-radius:4px;font-size:14px;font-weight:500;background:var(--paper-deep);color:var(--ink);transition:all .2s ease;letter-spacing:.02em;margin-bottom:32px;border:1px solid var(--line);}
.snlp-wrap a.snlp-pr-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.snlp-pr-feature .snlp-pr-cta{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.snlp-wrap a.snlp-pr-feature .snlp-pr-cta:hover{background:var(--accent);border-color:var(--accent);}
.snlp-pr-list{list-style:none;padding:0;margin:0 0 0;font-size:14px;}
.snlp-pr-list li{padding:10px 0 10px 24px;color:var(--ink-mid);position:relative;line-height:1.6;}
.snlp-pr-list li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:600;}
.snlp-pr-list li.snlp-pr-list-off{color:var(--ink-soft);opacity:.55;text-decoration:line-through;}
.snlp-pr-list li.snlp-pr-list-off::before{content:"—";text-decoration:none;}
/* ─── Testimonials ─────────────────────────────────── */
.snlp-tn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.snlp-tn-quote{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:21px;color:var(--ink);line-height:1.5;margin:0 0 28px;letter-spacing:-.005em;font-weight:400;}
.snlp-tn-quote::before{content:"";display:block;width:32px;height:1px;background:var(--accent);margin-bottom:24px;}
.snlp-tn-author{display:flex;align-items:center;gap:14px;}
.snlp-tn-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#d4c0a8 0%,#b8a182 100%);display:flex;align-items:center;justify-content:center;color:var(--paper);font-family:Charter,Georgia,serif;font-size:17px;font-weight:500;}
.snlp-tn-name{font-weight:500;font-size:15px;letter-spacing:-.005em;}
.snlp-tn-role{color:var(--ink-soft);font-size:13px;letter-spacing:.02em;margin-top:2px;}
.snlp-tn-meta{display:flex;gap:14px;margin-top:18px;font-size:12px;color:var(--ink-soft);letter-spacing:.05em;}
.snlp-tn-meta span{display:inline-flex;align-items:center;gap:4px;}
/* ─── FAQ ──────────────────────────────────────────── */
.snlp-faq-list{max-width:780px;margin:0 auto;}
.snlp-faq-item{border-top:1px solid var(--line);padding:32px 0;}
.snlp-faq-item:last-child{border-bottom:1px solid var(--line);}
.snlp-faq-q{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;cursor:pointer;}
.snlp-faq-q-text{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-.015em;line-height:1.4;margin:0;}
.snlp-faq-q-num{font-family:Charter,Georgia,serif;font-size:14px;color:var(--accent);letter-spacing:.05em;padding-top:6px;}
.snlp-faq-a{margin:14px 0 0;color:var(--ink-mid);font-size:16px;line-height:1.75;}
/* ─── Final CTA ────────────────────────────────────── */
.snlp-final{padding:128px 0;background:var(--ink);color:var(--paper);text-align:center;}
.snlp-final .snlp-eyebrow{color:#d4a890;}
.snlp-final h2{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:64px;font-weight:500;margin:16px 0 20px;letter-spacing:-.025em;line-height:1.1;}
.snlp-final h2 em{font-weight:700;color:#d4a890;}
.snlp-final p{font-size:18px;opacity:.78;margin:0 auto 44px;max-width:540px;line-height:1.7;}
.snlp-wrap .snlp-final a.snlp-btn-primary{background:#faf7f2;color:#1a1714;}
.snlp-wrap .snlp-final a.snlp-btn-primary:hover{background:#d4a890;color:#1a1714;}
.snlp-final-meta{margin-top:32px;font-size:13px;color:rgba(250,247,242,.55);letter-spacing:.05em;}
.snlp-final-meta a{color:#d4a890;}
@media(max-width:960px){
.snlp-hero{padding:64px 0 80px;}
.snlp-hero-inner,.snlp-why-grid{grid-template-columns:1fr;gap:48px;}
.snlp-h1{font-size:44px;}
.snlp-h2,.snlp-final h2{font-size:34px;}
.snlp-features-grid,.snlp-tn-grid,.snlp-pr-grid,.snlp-process-grid{grid-template-columns:1fr;gap:24px;}
.snlp-process-grid::before{display:none;}
.snlp-feature{border-right:0;}
.snlp-stats-grid,.snlp-logos-grid{grid-template-columns:repeat(2,1fr);gap:40px 0;}
.snlp-stat{border-left:0;}
.snlp-stat:nth-child(2){border-left:1px solid var(--line);}
.snlp-stat-num{font-size:38px;}
.snlp-section,.snlp-final{padding:80px 0;}
.snlp-faq-q-text{font-size:18px;}
.snlp-container{padding:0 24px;}
}
</style>
<div class="snlp-wrap">
<!-- HERO -->
<section class="snlp-hero">
<div class="snlp-container">
<div class="snlp-hero-inner">
<div>
<span class="snlp-eyebrow">產品定位短句</span>
<h2 class="snlp-h1 snlp-serif">用一句話<br>說明你解決<br>的<em>核心問題</em>。</h2>
<p class="snlp-lead">用兩到三句話延伸主張：你的產品或服務，幫誰解決什麼，跟其他選擇有什麼不一樣。寫具體、寫結果，不要堆砌形容詞。</p>
<div class="snlp-cta-row">
<a href="#" class="snlp-btn snlp-btn-primary">開始使用 →</a>
<a href="#" class="snlp-btn snlp-btn-link">查看示範</a>
</div>
<div class="snlp-hero-meta">
<span>30 天滿意保證</span><span>不需信用卡</span><span>5 分鐘上手</span>
</div>
</div>
<div class="snlp-hero-img">
<img src="https://placehold.co/600x750/d4c0a8/8a6f4f?text=Hero+Image" alt="主視覺示意">
</div>
</div>
</div>
</section>
<!-- LOGO WALL -->
<section class="snlp-logos">
<div class="snlp-container">
<div class="snlp-logos-label">超過 300 個品牌信任使用</div>
<div class="snlp-logos-grid">
<div class="snlp-logo-cell">Acme</div>
<div class="snlp-logo-cell">Lumen</div>
<div class="snlp-logo-cell">Northwind</div>
<div class="snlp-logo-cell">Atlas Co.</div>
<div class="snlp-logo-cell">Vela</div>
<div class="snlp-logo-cell">Hearth</div>
</div>
</div>
</section>
<!-- STATS -->
<section class="snlp-stats">
<div class="snlp-container">
<div class="snlp-stats-grid">
<div class="snlp-stat"><div class="snlp-stat-num">300+</div><div class="snlp-stat-lbl">合作品牌</div><div class="snlp-stat-note">2024 年累計</div></div>
<div class="snlp-stat"><div class="snlp-stat-num">4.9</div><div class="snlp-stat-lbl">平均評分</div><div class="snlp-stat-note">基於 1,200+ 評價</div></div>
<div class="snlp-stat"><div class="snlp-stat-num">12hr</div><div class="snlp-stat-lbl">平均上線時間</div><div class="snlp-stat-note">從註冊到部署</div></div>
<div class="snlp-stat"><div class="snlp-stat-num">98%</div><div class="snlp-stat-lbl">客戶續用率</div><div class="snlp-stat-note">年度資料</div></div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="snlp-section">
<div class="snlp-container">
<div class="snlp-section-head">
<span class="snlp-eyebrow">Capabilities</span>
<h2 class="snlp-h2 snlp-serif">三個核心功能</h2>
<p class="snlp-h2-sub">每個功能都直接對應目標客群的痛點，不寫技術術語。</p>
</div>
<div class="snlp-features-grid">
<div class="snlp-feature">
<div class="snlp-feature-num">01</div>
<h3 class="snlp-feature-title">功能一：解決什麼</h3>
<p class="snlp-feature-desc">用兩句話說明這個功能讓客戶省下的時間、避開的麻煩、賺到的結果。</p>
<ul class="snlp-feature-list">
<li>子能力 1</li><li>子能力 2</li><li>子能力 3</li>
</ul>
</div>
<div class="snlp-feature">
<div class="snlp-feature-num">02</div>
<h3 class="snlp-feature-title">功能二：解決什麼</h3>
<p class="snlp-feature-desc">用兩句話說明這個功能讓客戶省下的時間、避開的麻煩、賺到的結果。</p>
<ul class="snlp-feature-list">
<li>子能力 1</li><li>子能力 2</li><li>子能力 3</li>
</ul>
</div>
<div class="snlp-feature">
<div class="snlp-feature-num">03</div>
<h3 class="snlp-feature-title">功能三：解決什麼</h3>
<p class="snlp-feature-desc">用兩句話說明這個功能讓客戶省下的時間、避開的麻煩、賺到的結果。</p>
<ul class="snlp-feature-list">
<li>子能力 1</li><li>子能力 2</li><li>子能力 3</li>
</ul>
</div>
</div>
</div>
</section>
<!-- PROCESS -->
<section class="snlp-section snlp-process">
<div class="snlp-container">
<div class="snlp-section-head">
<span class="snlp-eyebrow">How it works</span>
<h2 class="snlp-h2 snlp-serif">怎麼開始</h2>
<p class="snlp-h2-sub">4 個步驟、平均 12 小時內完成第一次部署。</p>
</div>
<div class="snlp-process-grid">
<div class="snlp-process-step">
<div class="snlp-process-circle">01</div>
<h3 class="snlp-process-h3">註冊帳號</h3>
<p class="snlp-process-desc">3 分鐘填基本資料，不需信用卡。</p>
</div>
<div class="snlp-process-step">
<div class="snlp-process-circle">02</div>
<h3 class="snlp-process-h3">設定環境</h3>
<p class="snlp-process-desc">選擇方案、串接需要的整合。</p>
</div>
<div class="snlp-process-step">
<div class="snlp-process-circle">03</div>
<h3 class="snlp-process-h3">匯入資料</h3>
<p class="snlp-process-desc">支援 CSV / API / 自動匯入。</p>
</div>
<div class="snlp-process-step">
<div class="snlp-process-circle">04</div>
<h3 class="snlp-process-h3">正式上線</h3>
<p class="snlp-process-desc">客戶看到的版本立即生效。</p>
</div>
</div>
</div>
</section>
<!-- WHY US -->
<section class="snlp-section snlp-why">
<div class="snlp-container">
<div class="snlp-why-grid">
<div class="snlp-why-img">
<img src="https://placehold.co/520x650/c4ad8e/7a5e3f?text=Why+Us" alt="為什麼選我們">
</div>
<div>
<span class="snlp-eyebrow">Why us</span>
<h2 class="snlp-h2 snlp-serif">為什麼選我們</h2>
<p class="snlp-h2-sub" style="margin:0;text-align:left;">挑出 4 個跟競品最不一樣的點，每點一句話講完。</p>
<ul class="snlp-why-list">
<li><span class="snlp-why-num">01</span><div class="snlp-why-text"><strong>差異點 1</strong><span>對比同類產品，你最不一樣的優勢。</span></div></li>
<li><span class="snlp-why-num">02</span><div class="snlp-why-text"><strong>差異點 2</strong><span>具體可量化的結果，不要寫「最好」這種抽象詞。</span></div></li>
<li><span class="snlp-why-num">03</span><div class="snlp-why-text"><strong>差異點 3</strong><span>可以是價格、可以是服務、可以是時間。</span></div></li>
<li><span class="snlp-why-num">04</span><div class="snlp-why-text"><strong>差異點 4</strong><span>留 1 個情感連結（信任、安心、共鳴）。</span></div></li>
</ul>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="snlp-section snlp-pricing">
<div class="snlp-container">
<div class="snlp-section-head">
<span class="snlp-eyebrow">Pricing</span>
<h2 class="snlp-h2 snlp-serif">透明的方案</h2>
<p class="snlp-h2-sub">所有方案都含 30 天無條件試用，可隨時升級或取消。</p>
</div>
<div class="snlp-pr-grid">
<div class="snlp-pr">
<h3 class="snlp-pr-name">入門</h3>
<p class="snlp-pr-tag">適合個人或剛起步的小團隊。</p>
<div class="snlp-pr-price"><span class="snlp-pr-price-curr">NT$</span><span class="snlp-pr-price-num">490</span><span class="snlp-pr-price-unit">／月</span></div>
<p class="snlp-pr-price-sub">年繳省 17%</p>
<a href="#" class="snlp-pr-cta">開始試用</a>
<ul class="snlp-pr-list">
<li>核心功能 A</li>
<li>核心功能 B</li>
<li>5 GB 儲存空間</li>
<li class="snlp-pr-list-off">進階分析</li>
<li class="snlp-pr-list-off">優先客服</li>
</ul>
</div>
<div class="snlp-pr snlp-pr-feature">
<h3 class="snlp-pr-name">專業</h3>
<p class="snlp-pr-tag">給認真經營、需要進階能力的品牌。</p>
<div class="snlp-pr-price"><span class="snlp-pr-price-curr">NT$</span><span class="snlp-pr-price-num">1,290</span><span class="snlp-pr-price-unit">／月</span></div>
<p class="snlp-pr-price-sub">年繳省 17%</p>
<a href="#" class="snlp-pr-cta">開始試用</a>
<ul class="snlp-pr-list">
<li>入門所有功能</li>
<li>進階功能 C / D / E</li>
<li>50 GB 儲存空間</li>
<li>進階分析報表</li>
<li>優先客服（24h 內）</li>
</ul>
</div>
<div class="snlp-pr">
<h3 class="snlp-pr-name">企業</h3>
<p class="snlp-pr-tag">客製需求、SLA、專屬窗口。</p>
<div class="snlp-pr-price"><span class="snlp-pr-price-num" style="font-size:36px;">客製報價</span></div>
<p class="snlp-pr-price-sub">依實際需求估算</p>
<a href="#" class="snlp-pr-cta">聯絡業務</a>
<ul class="snlp-pr-list">
<li>專業所有功能</li>
<li>不限儲存空間</li>
<li>SSO / SAML 登入</li>
<li>SLA 99.9% 保證</li>
<li>專屬技術窗口</li>
</ul>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="snlp-section">
<div class="snlp-container">
<div class="snlp-section-head">
<span class="snlp-eyebrow">Testimonials</span>
<h2 class="snlp-h2 snlp-serif">客戶怎麼說</h2>
<p class="snlp-h2-sub">真實見證的力量遠大於行銷文案。</p>
</div>
<div class="snlp-tn-grid">
<div>
<p class="snlp-tn-quote snlp-serif">具體量化的見證內容：我們在 X 個月內看到 Y 的成果，最大的差別是 Z。</p>
<div class="snlp-tn-author">
<div class="snlp-tn-avatar">王</div>
<div><div class="snlp-tn-name">王小明</div><div class="snlp-tn-role">XX 公司 創辦人</div></div>
</div>
<div class="snlp-tn-meta"><span>★ ★ ★ ★ ★</span><span>合作 12 個月</span></div>
</div>
<div>
<p class="snlp-tn-quote snlp-serif">具體量化的見證內容：我們在 X 個月內看到 Y 的成果，最大的差別是 Z。</p>
<div class="snlp-tn-author">
<div class="snlp-tn-avatar">李</div>
<div><div class="snlp-tn-name">李志強</div><div class="snlp-tn-role">YY 行銷 總監</div></div>
</div>
<div class="snlp-tn-meta"><span>★ ★ ★ ★ ★</span><span>合作 8 個月</span></div>
</div>
<div>
<p class="snlp-tn-quote snlp-serif">具體量化的見證內容：我們在 X 個月內看到 Y 的成果，最大的差別是 Z。</p>
<div class="snlp-tn-author">
<div class="snlp-tn-avatar">陳</div>
<div><div class="snlp-tn-name">陳怡君</div><div class="snlp-tn-role">ZZ 設計工作室</div></div>
</div>
<div class="snlp-tn-meta"><span>★ ★ ★ ★ ★</span><span>合作 18 個月</span></div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="snlp-section">
<div class="snlp-container-narrow">
<div class="snlp-section-head">
<span class="snlp-eyebrow">FAQ</span>
<h2 class="snlp-h2 snlp-serif">常見問題</h2>
<p class="snlp-h2-sub">最常被問的 6 個問題，1 分鐘看完。</p>
</div>
<div class="snlp-faq-list">
<div class="snlp-faq-item">
<div class="snlp-faq-q">
<h3 class="snlp-faq-q-text">問題 1：常被誤解或想知道的事？</h3>
<span class="snlp-faq-q-num">01</span>
</div>
<p class="snlp-faq-a">用 2-3 句話完整回答，不要寫「視情況而定」。直接給結論。</p>
</div>
<div class="snlp-faq-item">
<div class="snlp-faq-q">
<h3 class="snlp-faq-q-text">問題 2：價格、付款、發票相關？</h3>
<span class="snlp-faq-q-num">02</span>
</div>
<p class="snlp-faq-a">用 2-3 句話完整回答，附帶具體數字、選項。</p>
</div>
<div class="snlp-faq-item">
<div class="snlp-faq-q">
<h3 class="snlp-faq-q-text">問題 3：取消或退款政策？</h3>
<span class="snlp-faq-q-num">03</span>
</div>
<p class="snlp-faq-a">用 2-3 句話完整回答。退款政策寫清楚省客服時間。</p>
</div>
<div class="snlp-faq-item">
<div class="snlp-faq-q">
<h3 class="snlp-faq-q-text">問題 4：可以跟其他工具整合嗎？</h3>
<span class="snlp-faq-q-num">04</span>
</div>
<p class="snlp-faq-a">列出主要支援的整合，提供 API 文件連結。</p>
</div>
<div class="snlp-faq-item">
<div class="snlp-faq-q">
<h3 class="snlp-faq-q-text">問題 5：資料安全與隱私？</h3>
<span class="snlp-faq-q-num">05</span>
</div>
<p class="snlp-faq-a">講具體：什麼加密、什麼合規認證、資料存哪。</p>
</div>
<div class="snlp-faq-item">
<div class="snlp-faq-q">
<h3 class="snlp-faq-q-text">問題 6：售後支援方式？</h3>
<span class="snlp-faq-q-num">06</span>
</div>
<p class="snlp-faq-a">講具體：哪些方案有客服、回覆時間 SLA、自助文件入口。</p>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="snlp-final">
<div class="snlp-container">
<span class="snlp-eyebrow">Get started</span>
<h2 class="snlp-serif">準備好<em>開始</em>了嗎？</h2>
<p>用一句話再次強調主要好處，配上一個明確的 CTA。</p>
<a href="#" class="snlp-btn snlp-btn-primary">立即開始 →</a>
<div class="snlp-final-meta">仍有疑問？<a href="#">聯絡業務</a> 或 <a href="#">預約 30 分鐘示範</a></div>
</div>
</section>
</div>圖片怎麼換#
模板裡的圖片都是 placehold.co 的佔位圖。要換成你的圖：先把圖片上傳到媒體庫拿到網址，再請 Claude 替換。詳見「上傳圖片到媒體庫，把網址貼回給 Claude」這篇教學。
想要更多客製怎麼辦#
- 加新區段：請 Claude 在 [指定位置] 加一個 [區段類型] 區塊
- 調順序：直接告訴 Claude「把方案區塊往前，放在 features 之後」
- 移除某個區段：說「拿掉 logo wall 區段」即可
- 整體重新調色：給 Claude 你的品牌主色 hex，請它套到所有 accent 色
模板的 CSS 結構鬆散且 scoped，AI 改起來不會壞。每次改完都建議在 Vibe 畫布的「預覽」模式先看過再儲存。