你是不是也曾經想過：「如果我有個自己的網站就好了？」
可能是為了展示你的作品集、可能是為了推廣你的諮詢服務，或者只是想在這個數位世界裡，有一個真正屬於自己的家。但是，一想到要學 HTML、CSS，或者是看到外包報價單上那好幾萬的數字，那個念頭就被你默默吞回去了。
親愛的，我完全懂那種感覺。但今天我要告訴你一個好消息：這個時代已經變了。
前幾天，我幫好朋友大女孩愛咪做了一個測試。我們不寫一行程式碼，只用了 Google 最新的 Gemini Canvas（畫布功能） 加上一段精心設計的指令（Prompt），就在喝完一杯咖啡的時間裡，生成了一個質感超好的個人品牌網站。
今天這篇文章，我不藏私，直接把這套「網站生成模版」送給你。不管你是金錢療育師、健身教練還是斜槓接案者，只要複製貼上，你也能擁有自己的網站。
文章目錄
為什麼選擇 Gemini Canvas 而不是 ChatGPT？
大家可能都知道 AI 能寫程式，但為什麼我這次特別推薦 Google Gemini 的 Canvas 功能？
因為它解決了我們這種「程式小白」最大的痛點：「看不懂程式碼，怎麼知道改哪裡？」
Gemini Canvas 是一個專門為了協作而設計的介面。當你要求它寫網頁時，它會在視窗右側開啟一個獨立的「畫布」。你可以在這裡直接看到程式碼，甚至（在某些支援的情況下）預覽效果。更重要的是，你可以像在 Google Docs 裡選取文字一樣，選取某一段程式碼，直接叫 AI「幫我把這個按鈕改成粉紅色」，完全不需要重新生成整大串文字。
準備工作：你需要的只是個 Google 帳號
在開始之前，請確保你已經登入 Google 帳號。雖然免費版的 Gemini 也能使用，但我強烈建議如果是為了工作或架站，訂閱 Gemini Advanced (Gemini Pro) 會獲得更長、更完整的程式碼輸出能力，避免網站寫到一半「斷片」。
操作步驟很簡單：
- 打開 Gemini 網頁版。
- 確認選到了 Canvas。
- 在對話框輸入下方的指令。
【核心乾貨】個人品牌網站生成指令（Prompt）模版
這是這篇文章最有價值的地方。這是我經過多次測試、為了大女孩愛咪量身打造，但又具備高度通用性的 Prompt。
你只需要把【中括號】裡的內容，換成你自己的資料，然後整段貼給 Gemini 即可。
任務說明：請幫我製作一個個人品牌網站的 HTML/Tailwind CSS 程式碼。請根據以下設定進行設計：
1. 角色與定位設定
- 主角名稱：【你的名字，例：大女孩愛咪】
- 身份標籤：【例：單親媽媽、金錢療育師】
- 故事主軸：【簡述你的人生轉折。例：因結婚、生子與先生癌逝的人生大轉彎，靠著學習理財、房地產投資、存股，打造「小金雞系統」...】
- 目標受眾：【你的讀者是誰？例：因婚姻、離婚、育兒而在經濟上受影響的女性】
- 語氣：溫柔、有力量、像閨蜜但仍然專業可信。
2. 網站視覺風格
- 氛圍：【例：溫暖、療癒、安全感、女性力量】
- 色彩：【例：粉色系＋米白為主、金色點綴】
- 版面：Mobile first（手機優先），大量留白，適合閱讀。
3. 網站結構要求 (請生成單頁式 Landing Page)
- Hero Section (首屏)：包含品牌主標語、副標語、2-3行故事簡介、兩個 CTA 按鈕（例：預約諮詢、加入社群）。
- 關於我：用條列式重點描述主角故事（如：低谷重生的經歷），文案要真誠。
- 三大服務區塊：卡片式設計，列出你的核心服務（例：生活理財、信念療癒、被動收入），每張卡片都要有 CTA。
- 給目標客戶的一段話：一段溫暖的「閨蜜對話」，告訴讀者這裡也是他們的避風港。
- 見證/回饋區塊：設計 3 個學員回饋卡片（先用虛擬資料填充，需包含不同背景的人物）。
- 強力 CTA 區塊：頁尾前的最後呼籲，例如「不用一個人硬撐」，引導加入 Line 或填寫表單。
- Footer：版權宣告、簡單的一行品牌宣言、社群媒體連結 Placeholder。
4. 技術要求
- 使用 HTML + Tailwind CSS (CDN版本) 以便直接預覽。
- 確保在手機版上顯示完美。
- 文案請自動潤飾，不要只是填充，要寫得打動人心。
▲ 複製上方灰色底的文字，直接貼給 Gemini 即可。
實戰案例：大女孩愛咪的網站分析
當我把關於「大女孩愛咪」的真實故事套入上述模版後，Gemini Canvas 生成的結果讓我非常驚艷。
它做對了幾件事（這也是 SEO 及 GEO 的重點）：
- 結構清晰：H1、H2 標籤運用得當，這對 SEO 非常重要。
- 情感連結：AI 沒有寫出冷冰冰的「服務介紹」，而是用了「陪你一起養出小金雞」這種溫暖的語句，完全符合愛咪「金錢療育師」的人設。
- 行動呼籲（CTA）明確：在首屏、服務介紹、頁尾都安排了按鈕，這是將訪客轉化為客戶的關鍵。
用 Google Canvas 輕鬆設計個人品牌網站
常見問題：生成完之後怎麼變真的網站？
拿到程式碼只是第一步，這就像是你畫好了房子的設計圖，但你還需要一塊地（伺服器）和一個門牌（網域）。這部份對於非技術背景的朋友來說，確實是較大的門檻。你需要：購買網域、租用主機、上傳程式碼。
如果你覺得這一步太麻煩，或者看到黑底白字的終端機就頭痛，這裡有個私藏的小撇步：
💡 專家救援傳送門：
如果你已經用 AI 生好了內容，卡在「上線」這最後一哩路，歡迎聯繫 外勞芭。外勞芭專門協助創作者快速處理這些看不懂的技術細節，讓你的個人網站從「電腦裡的檔案」變成「全世界都看得到的網站」！
常見問題 Q&A
Q1: 用 Gemini Canvas 做網站真的完全免費嗎？
A: Gemini 有免費版，但生成程式碼建議使用付費的 Gemini Advanced 效果較好。至於網站上線，通常購買網域（一年約 $400-$800 台幣）是基本開銷，主機則有免費（如 Vercel）或付費的選擇。
Q2: 我不懂 Tailwind CSS，之後要怎麼改文字或換圖片？
A: 這就是 Canvas 的好處！你可以直接在對話框跟 Gemini 說：「幫我把第二段的標題改成...」或是「把背景圖片換成這張...」，讓 AI 幫你改 Code。
Q3: 生成出來的網站手機看會跑版嗎？
A: 在我們的 Prompt 模版中已經加入了「Mobile first（手機優先）」的指令，Gemini 會優先考量手機排版。不過建議上線前還是要用手機實際檢查一下喔！
Q4: 我做好了，但還是不會上傳怎麼辦？
A: 術業有專攻，別讓技術卡住你的夢想。建議直接聯繫外勞芭，把專業的事交給專業的人，你專心經營品牌就好！
希望這篇文章能給你一點信心，其實 AI 沒有那麼難，它只是我們手上的畫筆。現在，拿起你的畫筆，去畫出屬於你的個人基地吧！
 |
| 想學 AI 但又常常撞牆，歡迎入 Line 群共學 |
留言