【AI 架站教學】Gemini Canvas 實做：10 分鐘打造你的個人品牌網站（附神級 Prompt）

你是不是也曾經想過：「如果我有個自己的網站就好了？」

可能是為了展示你的作品集、可能是為了推廣你的諮詢服務，或者只是想在這個數位世界裡，有一個真正屬於自己的家。但是，一想到要學 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 生好了內容，卡在「上線」這最後一哩路，歡迎聯繫 外勞芭（Email: tokpmpm1@gmail.com）。外勞芭專門協助創作者快速處理這些看不懂的技術細節，讓你的個人網站從「電腦裡的檔案」變成「全世界都看得到的網址」！

常見問題 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 群共學

外勞芭的文字藝術

搜尋此網誌