看到CCchen 運用AI工具將品牌廣告詞與行銷策略整理成一目瞭然的網頁視覺化呈現,便好奇詢問製作方式(品牌廣告詞與行銷策略視覺化分析 CCChen)。


這時我才明白,原來是用Google Gemini的Canvas模式,就能製作網頁應用程式。以下步驟也解說得非常完整:
Step 1: 進入 Gemini Canvas 模式
- 前往 Gemini 網頁應用程式 (gemini.google.com)。
- 在頁面下方的對話框處,找到並點擊 Canvas 圖示(看起來可能像一個畫布或文件圖示)。
- 進入 Canvas 工作區。
Step 2: 準備基礎文件內容 (核心報告/資料)
在生成網頁之前,需要有一個作為網頁內容基礎的文件或對話紀錄。
- 如果內容已經在現有的 Gemini 對話中:直接在該對話中啟用 Canvas 模式。
- 如果內容還沒有:您可以先輸入指令,讓 Gemini 生成基礎文本,例如:
「請根據XXX,撰寫一份詳細的報告大綱和內容。」
Step 3: 一鍵生成網頁
當有了基礎文本後,就可以指示 Gemini 將其轉換為網頁應用程式。
- 在 Canvas 介面中,找到並點擊右上角的 「建立 (Create)」 按鈕。
- 在下拉選單中選擇 「網頁 (Web Page)」。
直接將 Prompt 輸入指令,例如:「請將上述內容轉換為一個帶有導覽標籤的互動式網頁應用程式。」Gemini 會自動根據您的文本內容生成 HTML、CSS 和 JavaScript 程式碼,並在畫面上提供即時預覽。
Step 步驟 4: 調整與優化網頁 (關鍵步驟)
生成的網頁可能已經包含導覽、區塊、甚至互動式範例或測驗。如果對初稿不滿意,可以直接向 Gemini 下達指令來進行修改:
- 修改內容/修改樣式/新增功能
Step 5: 分享作品
當對結果滿意後,可以將這個網頁分享給其他人:
- 在 Canvas 介面右上角,點擊 「分享 (Share)」 圖示。
- 可以選擇:
- 複製連結:
(1)生成一個公開網址 (g.co/gemini/share/...),其他人可透過這個連結查看您的互動式網頁。
(2)複製程式碼:將完整的 HTML/CSS/JS 程式碼複製下來,將其部署到 Google Sites 或其他網站主機上,進行更專業的應用。
總結
那麼就來看看我做出來的成果吧:

規劃了兩個主要功能:
1. 單詞列表:透過韓文字母(ㄱ, ㄴ, ㄷ...)導覽標籤來瀏覽所有單詞。
2. 翻卡測驗:可選擇一個字母類別,透過「翻轉卡片」進行自我測驗。
總結製作過程的關鍵:
- 工具: 使用 Gemini Canvas 模式。
- 核心: 提供清晰的內容和指令 (Prompt)。
- 精煉: 利用對話式的方式反覆調整,直到網頁符合設計需求。
是不是簡單又另人心動,等不及動手製作自己的Demo頁啦~
快來跟我分享你們最近有用了什麼厲害的AI功能吧!






















