創意思考與設計方法課程講義

Gemini Canvas

Gemini Canvas 特色和功能

將想法化為應用程式、遊戲、資訊圖表等內容。Gemini 2.5 Pro 是 Google 最強大的模型,能在幾分鐘內依提示詞建構原型。

Gemini 的畫布功能提供了一個視覺化的協作環境,擺脫線性筆記的限制,以更自由的方式組織想法,Gemini 的畫布不僅能在上面揮灑創意,更能與 Gemini 深度互動共同探索概念

Gemini 畫布是 Gemini 內建的一項強大功能,提供了一個無限延伸的數位空間,可以將其想像成一張巨大的數位畫布,使用者能自由地添加和排列各種內容元素,不論是放置文字、圖片、手繪塗鴉、連結,甚至是 Gemini 生成的內容都可以。畫布的核心理念是自由的探索和視覺化的思考,打破傳統文件或筆記本的線性結構,能夠以非線性的方式組織資訊,建立不同想法之間的關聯。使用畫布時,除了可以直接透過對話要求 Gemini 使用畫布呈現結果 ( 例如「使用畫布呈現...」或「呈現網頁結果...」),也可以直接點擊 Gemini 輸入欄位的「Canvas」,當 Canvas 變成「藍色」文字,就表示要用畫布呈現描述的內容。

Gemini 畫布特色和功能

  • AI 協同探索與創造:直接與 Gemini 互動,獲取靈感、資訊,並由 AI 生成多樣化內容。
  • 多模態內容整合:畫布支援文字、圖片等多種媒介,根據需求生成圖像,豐富視覺表達。
  • 情境感知智慧輔助:理解上下文,針對畫布內容提供精準且個人化的建議與協助。
  • 便捷的資訊整合:快速整合 Google 搜尋結果,拓展知識視野,並將外部資訊融入創作流程。
  • 未來協作潛力:預計將支援更完善的多人即時協作功能,提升團隊效率。

Canvas簡報生成

Gemini 推出了一個強大的新功能 Canvas 模式,它能讓你透過簡單的文字指令,在幾分鐘內一鍵生成完整的簡報草稿,並無縫匯出至 Google 簡報 (Google Slides) 進行修改。

Gemini Canvas 是 Gemini 的一個進階工作區,可以想像成一個更強大的草稿紙,近期整合了簡報製作功能,成為一個強大的 AI 簡報工具。 它最大的優勢在於整合性,你不需要學習新的簡報軟體,Gemini Canvas 能夠幫你完成 70% 的基礎工作,像是內容架構、初步排版、AI 配圖,然後就可以直接透過 Google 雲端簡報環境中,完成最後 30% 的編輯和精修。

Gemini Canvas 簡報製作

  1. 步驟1:啟動Gemini Canvas模式
  2. 先登入 Gemini 網頁,並且在對話框選單中,點選工具後點選 「Canvas」,測試不管是免費 2.5 Flash 或付費權限都能生成簡報。

    點選工具後點選 「Canvas」
  3. 步驟2:輸入生成Gemini簡報指令
  4. 隨後在底下的對話框(Prompt)中,輸入你希望生成的簡報主題和內容,建議指令要盡可能清晰且具體,像是可以輸入底下Gemini簡報生成指令:

    請幫我製作一個關於「2025 年使用者介面設計趨勢」的 15頁簡報,內容需包含軟體發展的趨勢、使用者經驗、AI趨勢的策略分析,針對figma在使用者介面的趨勢進行詳細說明的補充,圖片及排版也進行設計感的排版設計

    Gemini 也可以直接上傳文件資料、文件檔案或貼上網址,並且要求依照內容摘要總結後直接製作成簡報。

    輸入你希望生成的簡報主題和內容,建議指令要盡可能清晰且具體
  5. 步驟3:即時預覽和修改
  6. 隨後 Gemini 就會在幾分鐘內,直接生成完整的簡報預覽視窗畫面,可以點擊「上一頁、下一頁」來查看所有投影片內容。

    如果對初稿不滿意(例如:太短、語氣不對、缺少圖片),你以繼續在對話框下指令進行修改,例如「請幫我把第三頁的內容擴寫得更詳細」或「幫我更換所有簡報的配色風格為亮色系」。

  7. 步驟4:下載匯出簡報到Google雲端編輯
  8. 滿意後,點擊右上角可以「下載」原始簡報檔案,或是直接按下「匯出成簡報」,Gemini 會自動在你的 Google 雲端硬碟中生成一份 Google 簡報檔案,就可以隨意修改文字大小、字體和顏色,甚至能夠加入 Logo 品牌和新增刪除頁面。

    下載匯出簡報到Google雲端編輯

Canvas網頁生成器

Google Gemini(尤其是 Gemini 1.5 / 2.0)在 Gemini Canvas 環境中提供了「能寫、能改、能即時預覽」的互動式網頁編程能力。可透過自然語言指令生成 HTML / CSS / JavaScript,甚至可建立可操作的互動式網站或小型應用。

Gemini Canvas 是 Google AI 新增的「多模態互動工作區」。

在這裡你可以:

  • 輸入自然語言指令(如:幫我做一個可點擊展開的 FAQ 頁面)
  • Gemini 會自動生成一個 可立即執行的首頁
  • 你可以直接 在右側預覽區操作網頁
  • 隨時讓 Gemini 修改、擴充、加動畫、改配色
  • 還能匯出 HTML/CSS/JS 三檔或 Zip 封裝

用途:

  • 製作教材範例網站
  • 製作展示頁、活動頁
  • 建構互動小工具
  • 快速做 Web Prototype
  • 練習 HTML/CSS/JS

Gemini Canvas 網頁生成器

  1. 步驟1:啟動Gemini Canvas模式
  2. 先登入 Gemini 網頁,並且在對話框選單中,點選工具後點選 「Canvas」,測試不管是免費 2.5 Flash 或付費權限都能生成簡報。

    點選工具後點選 「Canvas」
  3. 步驟2:輸入生成Gemini簡報指令
  4. 隨後在底下的對話框(Prompt)中,輸入你希望生成的簡報主題和內容,建議指令要盡可能清晰且具體,像是可以輸入底下Gemini簡報生成指令:

    你現在在一個可以即時預覽網頁的程式環境(Gemini Canvas)中,請幫我建立一個「AI 商用海報及廣告 圖像生成器」的單頁網站,可以直接生成適合的圖片並使用 HTML、CSS、JavaScript,程式碼請分成三個檔案:index.html、style.css、script.js。

    【網站目的】

    頁面要讓一般使用者輸入:

    • -品牌/店家名稱
    • - 活動名稱或檔期(例如:夏日特賣、開幕慶)
    • - 主標題(Headline)
    • - 副標題(Subheadline)
    • - 產品/服務簡短描述
    • - 優惠資訊(例如:折扣、滿額贈)
    • - 目標族群描述(例如:20–30 歲上班族、親子家庭)
    • - 廣告用途平台(下拉選單:IG 貼文、IG 限時動態、Facebook 貼文、EDM、實體海報)
    • - 視覺風格(下拉選單:極簡高級、科技感、粉嫩美妝、童趣插畫、節慶氛圍)
    • - 圖像風格語言(下拉選單:寫實攝影、動漫風、水彩風、3D 風、霓虹賽博龐克)
    • - 輸出語言(下拉選單:繁體中文、英文)

  5. 步驟3:分享連結
  6. 產生「AI 商用海報及廣告 圖像生成器」,可分享產生之網頁連結,也可持續下指令美化設計。

    「AI 商用海報及廣告 圖像生成器」

    產生「AI 商用海報及廣告 圖像生成器」
  7. 步驟4:將原始碼轉為正式永久網頁
  8. 自動建立整套網頁(index.html / style.css / script.js)

    自動建立整套網頁(index.html / style.css / script.js)

Gemini Canvas 網頁生成器

  1. 步驟1:啟動Gemini Canvas模式
  2. 先登入 Gemini 網頁,並且在對話框選單中,點選工具後點選 「Canvas」

    點選工具後點選 「Canvas」
  3. 步驟2:輸入生成Gemini簡報指令
  4. 隨後在底下的對話框(Prompt)中,輸入你希望生成的簡報主題和內容,建議指令要盡可能清晰且具體,像是可以輸入底下Gemini簡報生成指令:

    「我想製作一個透過Nano banana 製作的形象照片工具,輸入一般生活照,可以透過幾個不同的Prompt選擇,舉例來說黑白、明亮、暗色...等等的一些模式,不需輸入Google Gemini API Key,也能產生效果的相片產生器,另外加上細節條選項」

  5. 步驟3:產生「Nano banana 製作的形象照片工具」
  6. 產生「Nano banana 製作的形象照片工具」,可分享產生之網頁連結,也可持續下指令美化設計。

    「Nano banana 製作的形象照片工具」

  7. 步驟4:分享連結
  8. 分享連結
    分享連結

HomeWork|課後作業

01

Gemini Canvas簡報生成

自訂主題,以Gemini Canvas製作簡報,如以『視覺傳達設計就業趨勢』、『AI應用於視覺傳達設計趨勢』、『視覺傳達設計國際競賽分析與探討』等主題,並修改至滿意為主。

02

Gemini Canvas網頁生成器

自訂網頁生成器主題,先至ChatGpt產生指令產生步驟及條件,再以Gemini Canvas製作,如『不同主題的插畫風格生成』、『不同封面主題的封面圖像生成』、『不同主題電影海報插畫生成』等,並將生成之成果整理修改至滿意的狀態。

03

將成果整理到Notion

將以上兩項成果整理到Notion,可整理不同的網頁生成器