經歷了 28 天的淬鍊，我們的「AI 個人財務追蹤器（SmartFinance AI）」已經從一個模糊的想法，蛻變為擁有健全資料庫、SSE 串流 AI 診斷、資安防禦、Docker 容器化、Vercel 雲端部署與 Sentry 監控的完整微型 SaaS！
今天，我們要把這個作品真正「推銷」出去。酒香也怕巷子深，再優秀的後端架構，如果沒有一個具吸引力且高轉化率的 Landing Page，使用者根本連登入的機會都沒有。
今天的任務是利用 AI 打造高質感的產品 Landing Page：
在製作 Landing Page 時，AI 最容易犯的錯誤就是給出充滿 AI 味的套版用語（Generic Buzzwords），例如「顛覆你的財務體驗」、「極致完美的 AI 解決方案」，且 UI 動畫常因為過度堆疊 Framer Motion 而導致頁面載入極慢、跑版嚴重。我們需要引導 AI 專注於「解決痛點」與「輕量效能」。
我們請 AI 使用 Next.js App Router、Tailwind CSS 與 Framer Motion 打造一個高轉化率的產品首頁。
你是一位兼具 10 年資歷的 SaaS Product Designer 與 前端專家。
請幫我們的「SmartFinance AI」製作一個風格鮮明、極簡黑暗模式（Dark Mode First）的 Landing Page 首頁（`app/page.tsx`）。
需求如下：
1. **Hero Section**：含 Glow 漸變背景、強烈的 Value Proposition（如：「不再看懂複雜報表，用自然語言問出你的財務漏洞」）、CTA 按鈕（「免費試用 AI 診斷」）。
2. **Interactive Feature Grid**：使用 3 欄卡片展示核心功能：
- SSE 串流 AI 財務顧問
- 實時動態 Recharts 分析
- 銀行級 AES-256 數據加密
3. **SEO & Open Graph 設定**：撰寫 Next.js `metadata` 導出物件，包含 og:image、twitter:card 與 canonical URL。
4. **效能要求**：適度使用 Framer Motion 動畫，必須符合 Lighthouse 效能高分標準。
AI 給出了一份完整的 Next.js 頁面結構與 Metadata 設定：
// AI 生成的 app/page.tsx
import { motion } from 'framer-motion';
import Link from 'next/link';
export const metadata = {
title: 'SmartFinance AI - 顛覆你的財務體驗',
description: '最強大的 AI 財務追蹤器，讓你一鍵了解財務狀況！',
};
export default function LandingPage() {
return (
<div className="bg-black text-white min-h-screen">
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<h1 className="text-6xl font-bold text-center mt-20">
SmartFinance AI
</h1>
<p className="text-center text-gray-400 mt-4">
顛覆你的財務體驗，極致完美的 AI 解決方案
</p>
<div className="flex justify-center mt-8">
<Link href="/dashboard" className="bg-blue-600 px-6 py-3 rounded-md">
立即開始
</Link>
</div>
</motion.div>
</div>
);
}
這份產出有三個致命問題，讓 Landing Page 淪為無效的「簡陋套版」：
在 Next.js App Router 中，頁面檔案 app/page.tsx 預設是 Server Component，可以在檔頭直接 export metadata。然而，AI 卻直接在檔頭引用了 import { motion } from 'framer-motion'（Client Component 才能使用的 Hook 驅動庫），導致 Vercel 在 Build 時直接拋出錯誤：You're importing a component that needs React.useState. It only works in Client Component...！
AI 寫的 metadata 只有兩行文字，完全沒有設定 openGraph、twitter 卡片與 robots 檢索規範。當我們把網址貼到 Line 或 Twitter 時，只會顯示一塊黑黑的空白預覽圖，嚴重影響轉化率！
「顛覆你的財務體驗」這種句子無法激起使用者的點擊慾望。現代 SaaS 的 Landing Page 需要明確的數字痛點（例如：「平均幫使用者每月省下 $300 隱形開支」）與可互動的 UI Mockup 展示。
我們進行了「Server/Client 邊界拆分」與「SEO 完全體升級」：
app/page.tsx 保留為 Pure Server Component 用於導出高品質 Metadata；將帶有 Framer Motion 的 UI 抽象成 components/landing/HeroSection.tsx（'use client'）。修正後的精華程式碼：
app/page.tsx（Server Component - 最佳化 SEO Metadata）：
import { Metadata } from 'next';
import HeroSection from '@/components/landing/HeroSection';
import FeatureGrid from '@/components/landing/FeatureGrid';
export const metadata: Metadata = {
title: 'SmartFinance AI | 3 秒讀懂你的個人財務與消費漏洞',
description: '結合 LLM 串流診斷與自動記帳的微型 SaaS。不需手動分類，用自然語言問出你的每月隱形開支，開啟專屬 AI 財務特助。',
keywords: ['AI記帳', '個人財務分析', 'Next.js SaaS', 'LLM 財務顧問', 'SmartFinance'],
openGraph: {
title: 'SmartFinance AI | 3 秒讀懂你的個人財務',
description: '用自然語言問出你的每月隱形開支，開啟專屬 AI 財務特助。',
url: 'https://smartfinance-ai.vercel.app',
siteName: 'SmartFinance AI',
images: [
{
url: 'https://smartfinance-ai.vercel.app/og-image.png',
width: 1200,
height: 630,
alt: 'SmartFinance AI 產品預覽圖',
},
],
locale: 'zh_TW',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'SmartFinance AI | AI 輔助個人財務追蹤器',
description: '不再看懂複雜報表，用自然語言問出你的財務漏洞。',
images: ['https://smartfinance-ai.vercel.app/og-image.png'],
},
};
export default function LandingPage() {
return (
<main className="min-h-screen bg-slate-950 text-slate-100 selection:bg-emerald-500 selection:text-black">
<HeroSection />
<FeatureGrid />
</main>
);
}
components/landing/HeroSection.tsx（Client Component - 順暢動畫與精確文案）：
'use client';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { ArrowRight, Sparkles, ShieldCheck } from 'lucide-react';
export default function HeroSection() {
return (
<section className="relative pt-32 pb-20 overflow-hidden">
{/* 背景 Glow 氛圍燈 */}
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[350px] bg-emerald-500/10 blur-[120px] rounded-full pointer-events-none" />
<div className="max-w-6xl mx-auto px-4 text-center relative z-10">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-400 text-sm font-medium border border-emerald-500/20 mb-6">
<Sparkles className="w-4 h-4" /> Vibe Coding 30 天實戰專案成果
</span>
<h1 className="text-4xl md:text-6xl font-extrabold tracking-tight bg-gradient-to-r from-white via-slate-200 to-slate-400 bg-clip-text text-transparent mb-6">
不再對著 Excel 抓頭 <br />
<span className="text-emerald-400">用自然語言</span> 找出你的財務漏洞
</h1>
<p className="max-w-2xl mx-auto text-lg text-slate-400 mb-8">
整合 OpenAI SSE 串流診斷與動態視覺化圖表。每月平均幫使用者抓出 $320 以上的無效訂閱與隱形開支。
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link
href="/dashboard"
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold px-8 py-3.5 rounded-xl transition-all shadow-lg shadow-emerald-500/20"
>
免費體驗 AI 財務診斷 <ArrowRight className="w-4 h-4" />
</Link>
</div>
<div className="mt-6 flex items-center justify-center gap-6 text-sm text-slate-500">
<span className="flex items-center gap-1.5"><ShieldCheck className="w-4 h-4 text-emerald-400" /> 免信用條款綁定</span>
<span className="flex items-center gap-1.5"><ShieldCheck className="w-4 h-4 text-emerald-400" /> AES-256 銀行級加密</span>
</div>
</motion.div>
</div>
</section>
);
}
export const metadata）與 Client-side 特性（如 framer-motion / useState）揉在同一個檔案內。工程師必須非常清楚 Server Component（負責 SEO、資料預載） 與 Client Component（負責微互動、動畫） 的分工，才能兼顧完美的 SEO 爬蟲體驗與流暢的 UI 動畫。明天我們將迎來 30 天挑戰的最終章——賽事結語：30 天 Vibe Coding 的得與失，AI 時代工程師的核心價值思考~!
iThome鐵人賽
看影片追技術