- 登入
- 註冊
Vibe 畫布範本：關於我們
把品牌故事、團隊、價值講出立體感的關於我們頁。本篇提供完整的 About 頁 HTML 範本與客製 prompt，含里程碑、媒體報導、團隊、職缺。
這個範本有 10 個區段：Hero（品牌標語）、我們的故事（首字下沉 + 圖片）、Pull quote、4 個核心價值（含具體例子）、Milestones 時間軸（6 個里程碑）、暗夜數據條、團隊（3 人）、媒體報導（5 篇）、合作客戶 grid（12 個）、Careers（4 個職缺）、最終 CTA。配色採暖色米白 + moss green accent，數據條與最終 CTA 用沉穩深色。
這個範本適合什麼情境#
- 品牌官方 about 頁：取代制式公司簡介，講出品牌靈魂
- 創業團隊介紹：強調創辦人故事與里程碑
- 工作室介紹：設計工作室、攝影團隊、顧問公司的 about
- 非營利 / 社會企業：強調使命、價值、團隊的版本
怎麼用：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
請幫我把下面這個 About 關於我們頁模板改成我的版本（保留結構，只改文案）。
【請替換的內容】
- Hero 標題（一句講品牌存在的理由，含一句強調字）：____
- Tagline（2-3 句延伸：服務誰、解決什麼、跟其他選擇有什麼根本不同）：____
- 我們的故事 3 段（起點 / 轉折 / 現在）：____
- Pull quote（一句最能代表品牌精神的話）+ 出處：____
- 4 個核心價值（每個含標題 + 描述 + 一個具體例子）：____
- 6 個 Milestones（年份 + 標題 + 一句描述）：____
- 數據 4 項（營運年數、合作客戶、團隊人數、滿意度）：____
- 3 位團隊成員（姓名 + 職稱 + 一句 bio + 連結 / 年資）：____
- 5 篇媒體報導（日期 + 標題 + 媒體 + 類型）：____
- 12 個合作客戶名稱（logo grid）：____
- Careers 簡介（兩段）+ 4 個職位（名稱 + 全/兼/實習 + 地點 + 經驗）：____
- Final CTA：標題 + 副標 + 3 個聯繫窗口 email：____
【可選色票調整】
- 主色（accent，預設 moss green #5a7250）：____
- 米白背景（paper，預設 #f5f0e8）：____
- 暗墨色（ink，預設 #1c1d1a）：____
【技術要求 - 嚴格遵守】
1. 保留所有 class 名稱前綴 .snab-
2. 保留 RWD 斷點 880px
3. 不引入外部字體或 JS library
4. 圖片 src 保留 placehold.co 連結
5. 結構性 HTML 標籤保留
6. 所有 em 標籤保留
【模板 code】複製 2：模板 Code（給 Claude 改的素材）#
完整 HTML 模板，包含所有 scoped CSS 與內容區塊。複製後跟 prompt 一起貼進 AI 對話。
完整模板 Code
<style>
.snab-wrap *,.snab-wrap *::before,.snab-wrap *::after{box-sizing:border-box;}
.snab-wrap{
--ink:#1c1d1a;
--ink-mid:#3f4540;
--ink-soft:#6f756e;
--paper:#f5f0e8;
--paper-deep:#ece6d9;
--line:#dfd6c2;
--accent:#5a7250;
--accent-deep:#445a3d;
--accent-soft:#a8b89a;
font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Segoe UI",Roboto,sans-serif;
color:var(--ink);
background:var(--paper);
line-height:1.78;
-webkit-font-smoothing:antialiased;
font-feature-settings:"kern","liga","calt";
}
.snab-wrap a{color:inherit;text-decoration:none;}
.snab-wrap em{font-style:normal;font-weight:700;color:var(--accent);}
.snab-wrap img{display:block;max-width:100%;height:auto;}
.snab-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";}
.snab-container{max-width:1080px;margin:0 auto;padding:0 32px;}
.snab-container-narrow{max-width:780px;margin:0 auto;padding:0 32px;}
.snab-eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;}
/* ─── Hero ─────────────────────────────────────────── */
.snab-hero{padding:144px 0 128px;text-align:center;border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
.snab-hero::before{content:"";position:absolute;top:50%;left:50%;width:1000px;height:1000px;border-radius:50%;background:radial-gradient(circle,rgba(90,114,80,.06) 0%,transparent 60%);transform:translate(-50%,-50%);pointer-events:none;}
.snab-hero-inner{position:relative;z-index:1;}
.snab-h1{font-size:80px;font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:24px 0 32px;max-width:880px;margin-left:auto;margin-right:auto;}
.snab-h1 em{font-weight:700;color:var(--accent);}
.snab-tagline{font-size:20px;color:var(--ink-mid);max-width:640px;margin:0 auto;line-height:1.7;}
/* ─── Section base ─────────────────────────────────── */
.snab-section{padding:128px 0;border-bottom:1px solid var(--line);}
.snab-section-head{text-align:center;margin-bottom:80px;}
.snab-section-head .snab-eyebrow{display:block;margin-bottom:16px;}
.snab-h2{font-size:48px;font-weight:500;letter-spacing:-.025em;margin:0 0 18px;line-height:1.15;}
.snab-h2 em{font-weight:700;color:var(--accent);}
.snab-h2-sub{color:var(--ink-soft);font-size:17px;max-width:560px;margin:0 auto;line-height:1.7;}
/* ─── Story ────────────────────────────────────────── */
.snab-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;}
.snab-story-img{aspect-ratio:4/5;background:linear-gradient(135deg,#a8b89a 0%,#5a7250 100%);overflow:hidden;border-radius:2px;position:relative;}
.snab-story-img img{width:100%;height:100%;object-fit:cover;}
.snab-story-img::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.06);}
.snab-story-text .snab-eyebrow{display:block;margin-bottom:16px;}
.snab-story-text h2{margin:0 0 32px;}
.snab-story-text p{font-size:17px;color:var(--ink-mid);margin:0 0 18px;line-height:1.85;}
.snab-story-text p:first-of-type::first-letter{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:64px;float:left;line-height:.85;padding:8px 14px 0 0;color:var(--accent);font-weight:500;}
/* ─── Pull quote ───────────────────────────────────── */
.snab-pullquote{padding:96px 0;background:var(--paper-deep);text-align:center;border-bottom:1px solid var(--line);}
.snab-pullquote-inner{max-width:760px;margin:0 auto;padding:0 32px;}
.snab-pullquote-mark{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:64px;color:var(--accent);line-height:1;margin-bottom:8px;}
.snab-pullquote p{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:32px;color:var(--ink);line-height:1.4;margin:0 0 24px;letter-spacing:-.015em;font-weight:400;}
.snab-pullquote-attr{font-size:13px;color:var(--ink-soft);letter-spacing:.05em;}
.snab-pullquote-attr::before{content:"— ";color:var(--accent);}
/* ─── Values ───────────────────────────────────────── */
.snab-val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
.snab-val{padding:48px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.snab-val:last-child{border-right:0;}
.snab-val-num{font-family:Charter,Georgia,serif;font-size:13px;color:var(--accent);letter-spacing:.05em;margin-bottom:24px;font-feature-settings:"onum";}
.snab-val-title{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:21px;font-weight:500;margin:0 0 12px;color:var(--ink);letter-spacing:-.015em;line-height:1.3;}
.snab-val-desc{font-size:14px;color:var(--ink-mid);margin:0;line-height:1.7;}
.snab-val-eg{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft);font-style:normal;line-height:1.6;}
.snab-val-eg strong{color:var(--accent);font-weight:600;display:block;margin-bottom:4px;font-family:Charter,Georgia,serif;letter-spacing:.05em;text-transform:uppercase;font-size:11px;}
/* ─── Timeline / Milestones ────────────────────────── */
.snab-tl{position:relative;max-width:760px;margin:0 auto;}
.snab-tl::before{content:"";position:absolute;left:120px;top:8px;bottom:8px;width:1px;background:var(--line);}
.snab-tl-item{display:grid;grid-template-columns:120px 1fr;gap:48px;padding:24px 0;position:relative;}
.snab-tl-item::after{content:"";position:absolute;left:114px;top:32px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--accent);z-index:1;}
.snab-tl-year{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:24px;color:var(--accent);font-weight:500;letter-spacing:-.015em;font-feature-settings:"onum";text-align:right;line-height:1.3;}
.snab-tl-h3{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:20px;font-weight:500;color:var(--ink);margin:0 0 6px;letter-spacing:-.015em;line-height:1.3;}
.snab-tl-desc{font-size:14px;color:var(--ink-mid);margin:0;line-height:1.7;}
/* ─── Numbers (dark band) ──────────────────────────── */
.snab-numbers{padding:96px 0;background:var(--ink);color:var(--paper);text-align:center;border-bottom:0;}
.snab-numbers .snab-eyebrow{color:#a8b89a;display:block;margin-bottom:48px;}
.snab-numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.snab-num-cell{padding:0 24px;border-left:1px solid rgba(245,240,232,.15);}
.snab-num-cell:first-child{border-left:0;}
.snab-num-big{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:64px;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:oldstyle-nums tabular-nums;color:var(--paper);}
.snab-num-lbl{font-size:13px;color:rgba(245,240,232,.65);margin-top:14px;letter-spacing:.05em;}
/* ─── Team ─────────────────────────────────────────── */
.snab-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.snab-team-card{text-align:left;}
.snab-team-photo{aspect-ratio:4/5;border-radius:2px;margin:0 0 20px;overflow:hidden;background:linear-gradient(135deg,#a8b89a 0%,#5a7250 100%);position:relative;}
.snab-team-photo img{width:100%;height:100%;object-fit:cover;}
.snab-team-photo::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.06);}
.snab-team-name{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:24px;font-weight:500;margin:0 0 4px;color:var(--ink);letter-spacing:-.015em;}
.snab-team-role{font-size:13px;color:var(--accent);font-weight:600;margin:0 0 14px;letter-spacing:.05em;}
.snab-team-bio{font-size:14px;color:var(--ink-mid);margin:0 0 14px;line-height:1.7;}
.snab-team-meta{font-size:12px;color:var(--ink-soft);letter-spacing:.05em;display:flex;gap:12px;}
/* ─── Press / Media ────────────────────────────────── */
.snab-press{background:var(--paper-deep);}
.snab-press-list{}
.snab-press-item{padding:24px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:90px 1fr 140px;gap:32px;align-items:baseline;}
.snab-press-item:first-child{border-top:0;padding-top:0;}
.snab-press-date{font-family:Charter,Georgia,serif;font-size:14px;color:var(--accent);letter-spacing:.05em;font-feature-settings:"onum";}
.snab-press-title{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:20px;font-weight:500;color:var(--ink);letter-spacing:-.015em;line-height:1.4;}
.snab-press-source{font-size:13px;color:var(--ink-soft);letter-spacing:.02em;text-align:right;}
.snab-press-source span{display:block;color:var(--accent);font-size:12px;margin-top:4px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;}
/* ─── Clients ──────────────────────────────────────── */
.snab-cli-label{text-align:center;margin-bottom:32px;color:var(--ink-soft);font-size:13px;letter-spacing:.12em;text-transform:uppercase;}
.snab-cli-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);}
.snab-cli-cell{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:18px;font-weight:500;text-align:center;color:var(--ink-mid);padding:36px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:color .2s ease,background .2s ease;letter-spacing:-.01em;}
.snab-cli-cell:hover{color:var(--accent);background:var(--paper-deep);}
/* ─── Careers / Join us ────────────────────────────── */
.snab-careers{background:var(--paper-deep);}
.snab-cr-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.snab-cr-text h2{margin:0 0 24px;}
.snab-cr-text p{font-size:16px;color:var(--ink-mid);margin:0 0 18px;line-height:1.8;}
.snab-cr-list{margin-top:32px;}
.snab-cr-item{padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;transition:padding .2s ease;}
.snab-cr-item:last-child{border-bottom:1px solid var(--line);}
.snab-cr-item:hover{padding-left:8px;}
.snab-cr-pos{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-.015em;margin:0 0 4px;}
.snab-cr-meta{font-size:13px;color:var(--ink-soft);letter-spacing:.02em;}
.snab-cr-arrow{font-family:Charter,Georgia,serif;font-size:13px;color:var(--accent);letter-spacing:.05em;font-weight:600;}
/* ─── Final CTA ────────────────────────────────────── */
.snab-final{padding:128px 0;text-align:center;background:var(--ink);color:var(--paper);}
.snab-final .snab-eyebrow{color:#a8b89a;display:block;margin-bottom:18px;}
.snab-final h2{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:56px;font-weight:500;margin:0 0 20px;letter-spacing:-.025em;line-height:1.1;color:var(--paper);}
.snab-final h2 em{font-weight:700;color:#a8b89a;}
.snab-final p{font-size:17px;color:rgba(245,240,232,.7);margin:0 auto 36px;max-width:560px;line-height:1.7;}
.snab-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:4px;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease;letter-spacing:.02em;border:0;}
.snab-wrap a.snab-btn-primary{background:#5a7250;color:#f5f0e8;}
.snab-wrap a.snab-btn-primary:hover{background:#a8b89a;color:#1c1d1a;}
.snab-final-meta{margin-top:40px;padding-top:32px;border-top:1px solid rgba(245,240,232,.15);font-size:13px;color:rgba(245,240,232,.55);letter-spacing:.05em;display:flex;gap:32px;justify-content:center;flex-wrap:wrap;}
.snab-final-meta a{color:#a8b89a;}
@media(max-width:880px){
.snab-hero{padding:88px 0 80px;}
.snab-h1{font-size:48px;}
.snab-h2,.snab-final h2{font-size:32px;}
.snab-story-grid,.snab-cr-grid{grid-template-columns:1fr;gap:40px;}
.snab-val-grid{grid-template-columns:repeat(2,1fr);}
.snab-val:nth-child(2){border-right:0;}
.snab-team-grid{grid-template-columns:1fr;gap:48px;}
.snab-numbers-grid{grid-template-columns:repeat(2,1fr);gap:32px 0;}
.snab-num-cell:nth-child(3){border-left:0;}
.snab-num-big{font-size:44px;}
.snab-section,.snab-final{padding:80px 0;}
.snab-pullquote p{font-size:22px;}
.snab-tl::before{left:8px;}
.snab-tl-item{grid-template-columns:1fr;gap:8px;padding-left:32px;}
.snab-tl-item::after{left:2px;top:8px;}
.snab-tl-year{text-align:left;}
.snab-cli-grid{grid-template-columns:repeat(2,1fr);}
.snab-press-item{grid-template-columns:1fr;gap:6px;}
.snab-press-source{text-align:left;}
.snab-container,.snab-container-narrow{padding:0 24px;}
}
</style>
<div class="snab-wrap">
<!-- HERO -->
<section class="snab-hero">
<div class="snab-container snab-hero-inner">
<span class="snab-eyebrow">About Us</span>
<h2 class="snab-h1 snab-serif">用一句話講<em>我們存在</em>的理由。</h2>
<p class="snab-tagline">兩到三句話延伸：我們服務誰、解決什麼問題、跟其他選擇有什麼根本不同。</p>
</div>
</section>
<!-- STORY -->
<section class="snab-section">
<div class="snab-container">
<div class="snab-story-grid">
<div class="snab-story-img">
<img src="https://placehold.co/520x650/a8b89a/445a3d?text=Our+Story" alt="團隊或工作環境">
</div>
<div class="snab-story-text">
<span class="snab-eyebrow">Our Story</span>
<h2 class="snab-h2 snab-serif">我們的<em>故事</em></h2>
<p>第一段：起點。是什麼樣的痛點、什麼樣的觀察，讓創辦人決定做這件事。寫具體故事，不要寫使命宣言。</p>
<p>第二段：轉折。一路上遇到什麼挑戰、做了哪些重要決定、什麼時候開始有突破。</p>
<p>第三段：現在。我們現在是什麼樣的團隊、做什麼樣的事、未來想往哪裡走。</p>
</div>
</div>
</div>
</section>
<!-- PULL QUOTE -->
<section class="snab-pullquote">
<div class="snab-pullquote-inner">
<div class="snab-pullquote-mark">"</div>
<p class="snab-serif">這裡放一句最能代表品牌精神的話，可以是創辦人說的、可以是用戶說的、可以是內部最常引用的核心信念。</p>
<div class="snab-pullquote-attr">創辦人 | 2024 公司年會</div>
</div>
</section>
<!-- VALUES -->
<section class="snab-section">
<div class="snab-container">
<div class="snab-section-head">
<span class="snab-eyebrow">Our Values</span>
<h2 class="snab-h2 snab-serif">我們<em>相信</em>什麼</h2>
<p class="snab-h2-sub">這 4 個價值決定了我們招募誰、怎麼跟客戶合作、什麼決策我們不做。</p>
</div>
<div class="snab-val-grid">
<div class="snab-val">
<div class="snab-val-num">01</div>
<h3 class="snab-val-title">價值一</h3>
<p class="snab-val-desc">兩句話說明這個價值在實際工作中怎麼體現。</p>
<div class="snab-val-eg"><strong>具體例子</strong>過去 X 個月內某個典型決定。</div>
</div>
<div class="snab-val">
<div class="snab-val-num">02</div>
<h3 class="snab-val-title">價值二</h3>
<p class="snab-val-desc">兩句話說明這個價值在實際工作中怎麼體現。</p>
<div class="snab-val-eg"><strong>具體例子</strong>過去 X 個月內某個典型決定。</div>
</div>
<div class="snab-val">
<div class="snab-val-num">03</div>
<h3 class="snab-val-title">價值三</h3>
<p class="snab-val-desc">兩句話說明這個價值在實際工作中怎麼體現。</p>
<div class="snab-val-eg"><strong>具體例子</strong>過去 X 個月內某個典型決定。</div>
</div>
<div class="snab-val">
<div class="snab-val-num">04</div>
<h3 class="snab-val-title">價值四</h3>
<p class="snab-val-desc">兩句話說明這個價值在實際工作中怎麼體現。</p>
<div class="snab-val-eg"><strong>具體例子</strong>過去 X 個月內某個典型決定。</div>
</div>
</div>
</div>
</section>
<!-- TIMELINE / MILESTONES -->
<section class="snab-section">
<div class="snab-container">
<div class="snab-section-head">
<span class="snab-eyebrow">Milestones</span>
<h2 class="snab-h2 snab-serif">一路<em>走來</em></h2>
<p class="snab-h2-sub">從成立到現在的關鍵節點，每個里程碑代表一個重要轉折。</p>
</div>
<div class="snab-tl">
<div class="snab-tl-item">
<div class="snab-tl-year">2020</div>
<div>
<h3 class="snab-tl-h3">成立公司</h3>
<p class="snab-tl-desc">創辦人從 X 公司離開，帶著對 Y 問題的觀察開始這個專案。</p>
</div>
</div>
<div class="snab-tl-item">
<div class="snab-tl-year">2021</div>
<div>
<h3 class="snab-tl-h3">第一個產品上線</h3>
<p class="snab-tl-desc">經歷 6 個月開發與 3 個月封測，正式對外上線。</p>
</div>
</div>
<div class="snab-tl-item">
<div class="snab-tl-year">2022</div>
<div>
<h3 class="snab-tl-h3">突破 100 客戶</h3>
<p class="snab-tl-desc">第一個重要里程碑，團隊從 3 人擴張到 8 人。</p>
</div>
</div>
<div class="snab-tl-item">
<div class="snab-tl-year">2023</div>
<div>
<h3 class="snab-tl-h3">取得首輪募資</h3>
<p class="snab-tl-desc">完成 Pre-A 募資 X 千萬，加速產品開發節奏。</p>
</div>
</div>
<div class="snab-tl-item">
<div class="snab-tl-year">2024</div>
<div>
<h3 class="snab-tl-h3">推出新產品線</h3>
<p class="snab-tl-desc">擴展第二個產品線，營收 YoY 成長 X%。</p>
</div>
</div>
<div class="snab-tl-item">
<div class="snab-tl-year">2025</div>
<div>
<h3 class="snab-tl-h3">海外市場擴展</h3>
<p class="snab-tl-desc">服務範圍拓展到日本與東南亞市場，國際客戶占比 X%。</p>
</div>
</div>
</div>
</div>
</section>
<!-- NUMBERS -->
<section class="snab-numbers">
<div class="snab-container">
<span class="snab-eyebrow">By The Numbers</span>
<div class="snab-numbers-grid">
<div class="snab-num-cell"><div class="snab-num-big">5+</div><div class="snab-num-lbl">營運年數</div></div>
<div class="snab-num-cell"><div class="snab-num-big">300+</div><div class="snab-num-lbl">合作客戶</div></div>
<div class="snab-num-cell"><div class="snab-num-big">12</div><div class="snab-num-lbl">團隊成員</div></div>
<div class="snab-num-cell"><div class="snab-num-big">98%</div><div class="snab-num-lbl">客戶滿意度</div></div>
</div>
</div>
</section>
<!-- TEAM -->
<section class="snab-section">
<div class="snab-container">
<div class="snab-section-head">
<span class="snab-eyebrow">Our Team</span>
<h2 class="snab-h2 snab-serif">認識團隊</h2>
<p class="snab-h2-sub">每位成員一張照片、一個職稱、一句話定位。</p>
</div>
<div class="snab-team-grid">
<div class="snab-team-card">
<div class="snab-team-photo"><img src="https://placehold.co/360x450/a8b89a/445a3d?text=A" alt="團隊成員 A"></div>
<h3 class="snab-team-name">姓名</h3>
<div class="snab-team-role">職稱 · 角色</div>
<p class="snab-team-bio">一句話介紹這位成員的專長與工作軸線。</p>
<div class="snab-team-meta"><span>LinkedIn</span><span>5 yrs</span></div>
</div>
<div class="snab-team-card">
<div class="snab-team-photo"><img src="https://placehold.co/360x450/a8b89a/445a3d?text=B" alt="團隊成員 B"></div>
<h3 class="snab-team-name">姓名</h3>
<div class="snab-team-role">職稱 · 角色</div>
<p class="snab-team-bio">一句話介紹這位成員的專長與工作軸線。</p>
<div class="snab-team-meta"><span>LinkedIn</span><span>3 yrs</span></div>
</div>
<div class="snab-team-card">
<div class="snab-team-photo"><img src="https://placehold.co/360x450/a8b89a/445a3d?text=C" alt="團隊成員 C"></div>
<h3 class="snab-team-name">姓名</h3>
<div class="snab-team-role">職稱 · 角色</div>
<p class="snab-team-bio">一句話介紹這位成員的專長與工作軸線。</p>
<div class="snab-team-meta"><span>LinkedIn</span><span>4 yrs</span></div>
</div>
</div>
</div>
</section>
<!-- PRESS / MEDIA -->
<section class="snab-section snab-press">
<div class="snab-container">
<div class="snab-section-head">
<span class="snab-eyebrow">In The Press</span>
<h2 class="snab-h2 snab-serif">媒體報導</h2>
<p class="snab-h2-sub">挑出最有代表性的 5-6 篇報導，列出標題、媒體與日期。</p>
</div>
<div class="snab-press-list">
<div class="snab-press-item">
<div class="snab-press-date">2025.10</div>
<div class="snab-press-title">報導標題：用一句話講這篇報導的角度。</div>
<div class="snab-press-source">媒體名稱<span>專題訪談</span></div>
</div>
<div class="snab-press-item">
<div class="snab-press-date">2025.06</div>
<div class="snab-press-title">報導標題：用一句話講這篇報導的角度。</div>
<div class="snab-press-source">媒體名稱<span>產業評論</span></div>
</div>
<div class="snab-press-item">
<div class="snab-press-date">2024.12</div>
<div class="snab-press-title">報導標題：用一句話講這篇報導的角度。</div>
<div class="snab-press-source">媒體名稱<span>創辦人專訪</span></div>
</div>
<div class="snab-press-item">
<div class="snab-press-date">2024.08</div>
<div class="snab-press-title">報導標題：用一句話講這篇報導的角度。</div>
<div class="snab-press-source">媒體名稱<span>產品報導</span></div>
</div>
<div class="snab-press-item">
<div class="snab-press-date">2024.03</div>
<div class="snab-press-title">報導標題：用一句話講這篇報導的角度。</div>
<div class="snab-press-source">媒體名稱<span>得獎報導</span></div>
</div>
</div>
</div>
</section>
<!-- CLIENTS -->
<section class="snab-section">
<div class="snab-container">
<div class="snab-section-head">
<span class="snab-eyebrow">Our Clients</span>
<h2 class="snab-h2 snab-serif">合作過的<em>客戶</em></h2>
<p class="snab-h2-sub">300+ 客戶當中，挑出最具代表性的 12 個品牌。</p>
</div>
<div class="snab-cli-grid">
<div class="snab-cli-cell">Acme</div>
<div class="snab-cli-cell">Lumen</div>
<div class="snab-cli-cell">Northwind</div>
<div class="snab-cli-cell">Atlas Co.</div>
<div class="snab-cli-cell">Vela</div>
<div class="snab-cli-cell">Hearth</div>
<div class="snab-cli-cell">Magnolia</div>
<div class="snab-cli-cell">Brookline</div>
<div class="snab-cli-cell">Cedar & Co.</div>
<div class="snab-cli-cell">Linden</div>
<div class="snab-cli-cell">Marlow</div>
<div class="snab-cli-cell">Hawthorn</div>
</div>
</div>
</section>
<!-- CAREERS -->
<section class="snab-section snab-careers">
<div class="snab-container">
<div class="snab-cr-grid">
<div class="snab-cr-text">
<span class="snab-eyebrow">Careers</span>
<h2 class="snab-h2 snab-serif">加入<em>我們</em></h2>
<p>用一段話說明你們團隊的工作風格、為什麼有人會喜歡這裡、不適合什麼樣的人。</p>
<p>福利可以列：遠端、彈性工時、年度進修預算、健康檢查等。</p>
</div>
<div>
<div class="snab-cr-list">
<div class="snab-cr-item">
<div>
<h3 class="snab-cr-pos">職位名稱</h3>
<div class="snab-cr-meta">全職 · 台北 / 遠端 · 3-5 年經驗</div>
</div>
<span class="snab-cr-arrow">查看詳情 →</span>
</div>
<div class="snab-cr-item">
<div>
<h3 class="snab-cr-pos">職位名稱</h3>
<div class="snab-cr-meta">全職 · 台北 · 5+ 年經驗</div>
</div>
<span class="snab-cr-arrow">查看詳情 →</span>
</div>
<div class="snab-cr-item">
<div>
<h3 class="snab-cr-pos">職位名稱</h3>
<div class="snab-cr-meta">兼職 · 遠端 · 不限經驗</div>
</div>
<span class="snab-cr-arrow">查看詳情 →</span>
</div>
<div class="snab-cr-item">
<div>
<h3 class="snab-cr-pos">實習職位</h3>
<div class="snab-cr-meta">實習 · 台北 · 在學中</div>
</div>
<span class="snab-cr-arrow">查看詳情 →</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="snab-final">
<div class="snab-container">
<span class="snab-eyebrow">Get in touch</span>
<h2 class="snab-serif">有<em>合作機會</em>嗎？</h2>
<p>我們對好的合作向來有興趣。寄信給我們，最快 24 小時內回覆。</p>
<a href="mailto:[email protected]" class="snab-btn snab-btn-primary">聯絡我們 →</a>
<div class="snab-final-meta">
<span>客戶合作 · <a href="mailto:[email protected]">[email protected]</a></span>
<span>媒體聯繫 · <a href="mailto:[email protected]">[email protected]</a></span>
<span>應徵職位 · <a href="mailto:[email protected]">[email protected]</a></span>
</div>
</div>
</section>
</div>圖片怎麼換#
模板裡的圖片都是 placehold.co 的佔位圖。要換成你的圖：先把圖片上傳到媒體庫拿到網址，再請 Claude 替換。詳見「上傳圖片到媒體庫，把網址貼回給 Claude」這篇教學。
想要更多客製怎麼辦#
- 加新區段：請 Claude 在 [指定位置] 加一個 [區段類型] 區塊
- 調順序：直接告訴 Claude「把方案區塊往前，放在 features 之後」
- 移除某個區段：說「拿掉 logo wall 區段」即可
- 整體重新調色：給 Claude 你的品牌主色 hex，請它套到所有 accent 色
模板的 CSS 結構鬆散且 scoped，AI 改起來不會壞。每次改完都建議在 Vibe 畫布的「預覽」模式先看過再儲存。