Gemini + Canvas 快速生成網站設計樣板

用 Gemini + Canvas 快速生成網站設計樣板:從零開始為太太的公司打造視覺起點

最近我幫太太的公司網站進行重新設計,這次我嘗試了一個全新的流程——用 Gemini 模型生成風格提案,再透過 Canva 快速產出設計樣板。這種 AI + 模板化的方式,讓我們能在幾小時內建立出可以討論的「視覺雛型」,並讓設計溝通清晰又高效。

這篇文章我想分享整個流程,以及我為什麼認為這種方法未來會成為中小企業建立品牌形象的關鍵工具。


第一步:用 Gemini 幫我定義「風格方向」

很多人做網站時卡在第一步:「到底要什麼風格?」

我在 Gemini 的 prompt 這樣寫:

“幫我設計一個專業、可信、但又溫暖親切的公司網站首頁樣板,適用於提供機器與技術解決方案的 B2B 公司,請用簡約現代風格,搭配品牌色為深藍與橘色。”

不到幾秒鐘,Gemini 就給我一組很完整的建議,包括:

  • 導覽列區塊(品牌 logo、選單、Call-to-Action)
  • 英雄區主視覺與行動號召語
  • 三大服務項目 icon 排版
  • 客戶推薦區塊樣式
  • Footer 採信任建立導向的安排

這比起從空白開始設計,省去了我和太太「從 Pinterest 找靈感 + 瞎猜設計師會怎麼設計」的流程。更重要的是,這些建議是有邏輯且可編排的,不會陷入「單張圖漂亮但沒結構」的陷阱。


第二步:把 Gemini 給的結構丟進 Canva 實作

我用 Canva 做這件事主要因為:

  • 它有大量 RWD 預設模組(好套好改)
  • 有商用字型與 icon,不怕侵權
  • 它可以分享樣板連結給設計師,進行協作編修

我直接根據 Gemini 提供的區塊指引,從 Canva 的「網站模板」功能開始調整。不到一個早上,我就做出了三種風格變化的「網站首頁草稿」,讓太太挑選。從討論「要什麼設計」變成「這三個草稿你最喜歡哪一個?」——效率差異極大。


第三步:樣板化建立討論基礎,而不是終點

我們並不指望 Canva 的結果是最終成品,但它提供了:

  • 明確風格方向:用圖像溝通比文字快太多
  • 設計結構起點:讓真正的設計師有東西改,而不是從零開始問問題
  • 決策邏輯:每個元件位置都有 Gemini 給的理由支撐,太太也容易理解為何這樣安排

這比過去丟給設計師一句:「我們想要很專業、但又溫暖一點的感覺」,來得具體太多。


技術小訣竅:如何組合 Gemini 與 Canvas

  1. Prompt 寫得越精準越好,加入產業、色系、品牌性格、受眾。
  2. 讓 Gemini 給你 layout 建議而不是單張圖片:重點是排版邏輯。
  3. Canvas 用「網站」模板切入,不要用社群圖或簡報模板
  4. 設計完成後導出 PDF、或直接用 Canvas 的分享功能進行協作評論

結語:設計不該是遙不可及的專業,而是一種可以被 AI 幫助起步的「溝通過程」

對我來說,這次幫太太做網站設計不是展現什麼超強設計力,而是用最短時間建立起「可討論的起點」。

這也是我推廣的系統設計精神:讓人生變簡單的不是工具,而是你是否能掌握流程邏輯,把它變成可複製、可調整、可討論的系統

如果你也想試試用 Gemini + Canvas 幫你做設計起步,或需要我幫你寫 prompt/整合 Notion 任務流程,留言給我吧!

下面點選進去可以看制作出來的網頁:


Posted

in

, ,

by

Tags: