看到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功能吧!
