一、前言

府裡的機關，一樣一樣裝好了：
健口操、益智小遊戲、音樂動一動，還有 Gemini 「平安」陪伴長輩、家人。

但是府裡的門面，
還是當初黑客松做 prototype 時的樣子。

Day1 寫下的期許，還有第三個：

介面設計：透過 Google Stitch，讓 UI 更符合長輩需要的操作介面與美觀。

今天，老爺請來一位妙筆生花的俠客：Google Stitch。

讓我們看看：

Google Stitch 是什麼？要從哪裡開始？
「長輩看得清楚、點得準」，要怎麼跟 AI 說
快問快答、吃金幣、俄羅斯方塊，改版前後差在哪？

今天先在畫布上改版！

二、Google Stitch 是什麼

（一）用說的，產生介面設計

Google Stitch 是 Google Labs 的 AI 介面設計工具。

用文字描述想要的畫面，也可以附上參考圖，
Stitch 會產生畫面的設計圖和 HTML 程式碼；
畫面還可以串成能點、能捲動的原型。

用說的描述畫面，Stitch 交出設計圖和 HTML。

官方入門說明 的第一個重點：

好的設計來自一次次修改，不是第一句提示詞就寫到完美。

（二）這一年的變化

Stitch 推出一年多，這幾次的主要更新：

登入後，介面上的 What's new 也會列出最近的更新：

（三）跟前幾篇的工具差在哪

Stitch 介面上可以選的模型，是 Gemini 3.8 Flash 和 3.5 Flash-Lite（第四節）；
就是 Day18 在 AI Studio 試過的那兩位。

（四）官方文件地圖

官方文件 分成幾個區塊：

今天照 Learn 的順序走一遍。

（五）開始之前

• 確認用量：

  

• 準備上傳的截圖：

  這次用 App 內建的範例題目，截圖裡沒有家人的照片和真名。

  

三、開始之前：長輩友善的檢查表

（一）為什麼要先有一張表

「更符合長輩需要」，要怎麼知道有沒有做到？

沒有標準的話，改版前後只能說「比較好看」。
所以先整理一張檢查表，改版前後逐項比。

參考了這幾份資料：

• W3C WAI：Older Users：
  年紀增長，視力、手部動作、聽力、認知都可能改變。
• WCAG 2.2：
  網頁無障礙的國際標準，對比、文字放大都有具體的數字。
• Apple HIG、Android 開發者文件：
  手機上按鈕的最小尺寸。

WCAG 寫的對象是網頁，這裡是借用它的數字，來檢查 App。

（二）六個檢查項目

對比的算法，是 WCAG 定義的公式：白底黑字是 21:1，同一個顏色是 1:1。

（三）App 原本的樣子

原本的 App 是深色主題：深灰底、白字，主色是綠色。

用這張表看原本的 App（對比是從 iPhone 模擬器的截圖取色算的）：

系統字級開到 200% 的 Android 模擬器上：

• 快問快答：題目只剩「早餐喝的豆漿，」，後半句看不到。
• 吃金幣：提示區的「怕」「往左」被切掉一半。
• 俄羅斯方塊：提示列超出畫面，「啦」被擠到外面。
• 標題：「快問快答」斷成「快問快／答」。

App 的主要按鈕原本就有 56 高，刻意比一般 44pt 的最小建議值大。

（四）為什麼改成淺色

這次的方向:整個 App 從深色改成明亮的淺色。

我的想法有三個：

• 看得清楚：

  希望明亮、簡潔的介面，讓長輩更容易看清楚。
  2013 年的一篇研究 比較了白底黑字和黑底白字，
  不論年輕人或長者，白底黑字的視力測驗和校對表現都比較好。

• 輕鬆自在：

  比起深色，我覺得淺色看起來比較輕鬆、沒有壓力。

• 有溫度的陪伴：

  Day3 寫過，希望把日常訓練變成「容易開始、有溫度、有陪伴」的事；
  也希望淺色的畫面，能傳達這份溫度。

檢查表和淺色的方向，等一下都會寫進 Stitch 的提示詞。

四、第一次使用：從 App 截圖開始

照官方 Learn 的順序：
建立專案 → 選模型 → 寫提示詞 → 一次改一件事 → 變化版本 → 原型。

（一）建立專案：選 App

① 用 Google 帳號登入 stitch.withgoogle.com

② 選 App 或 Web

官方說明 兩種的差別，不只是螢幕大小：

健口動一動是手機 App，選 App。

平板怎麼辦呢？XD
介面上只有 App、Web 兩個選項，Learn 文件也是這兩種；
平板留到 Day28 再看。

（二）選模型：Speed 或 Balanced

輸入框右下角的選單，可以選產生設計用的模型：

官方文件 寫的是四種設計模式（Thinking with 3 Pro、Redesign、2.5 Pro、Fast），
跟介面上看到的不一樣；這裡以介面為準（2026-10-11）。

這次用預設的 Balanced。

（三）第一個提示詞

官方建議 的提示詞分成四段：

官方在 Iterate with Coding Agents 也提醒：

如果一次請它設計整個 App，畫面的角落常會被塞進小圓點、小標籤、假的導覽列；
所以要寫清楚畫面上該放什麼，其他的都不要。

這句提醒，剛好也是長輩介面需要的：只放必要的東西。

官方也建議，與其說「做得酷一點」，
不如用 具體的風格詞，定義出明確的樣子。

所以這次不寫「適合長輩」，而是把檢查表拆成一句一句具體的要求。

照這四段，寫成提示詞：

Idea：
長輩和家人一起玩的「快問快答」App，這是作答畫面。

Theme：
明亮的淺色風格，文字和底色的對比要高。
字要大；按鈕要大，彼此分開。
一個畫面只做一件事。
圖示旁邊都要有文字。
答對、答錯除了顏色，也要有文字。
只放必要的元素，不要狀態點、小標籤、
裝飾用的導覽列。

Content：
上方是題目「早餐喝的豆漿，是用什麼做的？」。
中間是前鏡頭的畫面，錄下作答的樣子。
下方是兩個選項「1 黃豆」「2 綠豆」。
旁邊顯示倒數的秒數。
所有文字用繁體中文。

Image：
附圖是 App 現在的作答畫面（深色版）。
請參考它的版面和內容，配色改成上面寫的淺色風格。

GIF：

官方文件沒有列出支援哪些語言，只示範過一句 換語言的提示詞：
把 App 的商品文案和按鈕文字，全部換成西班牙文。
繁體中文的字型、用字、標點，要看實際產生的畫面。

這次產生的畫面：

• 繁體中文：畫面上的字都是繁體，標點是全形的「，」「？」。
• 斷行：題目在逗號後換行，「早餐喝的豆漿，／是用什麼做的？」；
  原本的 App 斷在「是」的後面。
• 設計說明：畫布左邊會用繁體中文，列出它怎麼照提示詞設計，
  例如「溫馨的米白底色搭配深墨黑文字」「一個畫面只做一件事」。

（四）一次改一件事

官方建議 一次只改一個地方：

① 在畫布上點一下要改的畫面

② 在下方的輸入框，寫一個具體的修改：改哪個元件、怎麼改

這次拿掉第一次生成多出來的兩個標籤：

把畫面最上方的兩個標籤「第 3 題／共 5 題」和「視訊錄影中」拿掉，
其他部分都不要改。

GIF：

改完的畫面，上方的兩個標籤不見了，題目、倒數、選項都維持原樣：

一次只改一件事，比較看得出改了什麼。

（五）變化版本：一次看好幾種

變化版本（Variations）一次產生 1～5 個版本，
要選「離現在的設計多遠」：

一般修改建議一次改一件事；
變化版本可以一次大改，因為會產生好幾個讓你挑。

選取畫面後，在上方的 Generate 選單選 Variations：

這次選 3 個版本、Creative，產生的過程：
GIF：

• 變化 1：倒數移到最上方「剩餘 12 秒 快快按！」，選項加上外框。
• 變化 2：兩個選項改成左右並排的大方塊。
• 變化 3：題目變成對話框、鏡頭改成圓形，選項旁加「請按這裡」。

變化 1、3 又出現了帶圓點或小標籤的元素，
例如「視訊鏡頭運作中」「聽題目」「第 1 題」。

（六）原型：點點看

選取畫面 → Generate → Instant Prototype，
設計圖會變成能點、能捲動的 原型。

靜態的設計圖，看不出按起來的感覺：
按鈕好不好按、字看不看得清楚，點點看就知道。
GIF：

點正確的選項，那一格會變成淡綠色；點錯的選項，那一格變成淡紅色。

五、三個功能改版前後

Day6 的功能清單裡，
這三個功能寫著「Google Stitch 優化 UI」：

（一）快問快答

產生其他狀態的畫面：Missing States

同一個作答畫面，其實有好幾種樣子：
作答中、答對、答錯、時間到。

Generate 選單裡的 Missing States，
可以從選取的畫面，產生其他狀態的畫面。

從作答畫面按下去，Stitch 產生了三個畫面：

三個畫面的下方，也都加上了「下一題」按鈕。

畫面上的文字，也要對照 App 的說話原則：
Day18 寫的是「用正面的說法，不說『錯了』」，
這裡有「答錯了」「下次手腳要更快喔」，帶回 App 時再改寫。

Stitch 自己的無障礙檢查

選取畫面 → Generate → Accessibility Audit，
Stitch 會在畫布上產生一份「WCAG 2.1 / 2.2 無障礙檢測報告」；
選取報告 → More，可以匯出、下載，View Code 也看得到全文。

• 目標使用者：
  它從提示詞整理出「長輩、低視力長者、
  動作敏捷度較低之銀髮族群及同樂家人」。
• 審查標準：WCAG 2.1 / 2.2 AA，以及部分 AAA。
• 做得好的：
  字放大、留白夠；選項高 64px 以上，選項之間留 16px 以上。
• 要補強的：
  語意化標籤、螢幕報讀（ARIA）、鍵盤焦點，
  以及倒數計時要能延長或關閉，照顧反應速度比較慢的長者。
• 總結：WCAG 2.1 AA 合規度 88%，高齡友善體驗指數 92%。

對比的部分，拿報告寫的色碼自己算一次：

報告建議把橘色加深到 #c2410c，
用公式算約 5.2:1，就會超過 4.5:1。

AI 的檢查可以當起點，數字還是自己算一次比較安心。

（二）小精靈吃金幣

用詞跟 App 不一樣的地方：
說明寫「控制吃豆人方向」，App 裡叫「小精靈」。

（三）俄羅斯方塊

「結算」是整個畫面最顯眼的按鈕，
白字配亮綠底只有約 2.8:1，沒有到 4.5:1。

六、小結

• Google Stitch：
  用文字和參考圖描述畫面，產生設計圖、HTML 和原型。
• 長輩友善檢查表：
  字夠大、對比夠、按鈕夠大、一次一件事、
  圖示配文字、對錯不只靠顏色。
• 提示詞：
  Idea、Theme、Content、Image 四段；
  檢查表寫進 Theme，只放必要的元素。
• 修改：
  選取畫面、在輸入框一次改一件事；
  想看不同方向用變化版本。
• Generate 選單：
  Missing States 產生答對、答錯、時間到的畫面；
  Accessibility Audit 產生無障礙檢測報告。
• 自己量一次：
  報告寫通過的橘色「1」，用公式算約 3.6:1；
  「結算」按鈕約 2.8:1，都沒有到 4.5:1。

先定好標準，再請 AI 設計，改版前後才比得出差別。

七、預告

設計圖有了，接下來要帶回 App。

Stitch 給的設計，跟照檢查表自己改的淺色版，各有什麼取捨？
HTML 要怎麼變成 Flutter？手機、平板都好用嗎？

讓我們明天繼續看下去～

感謝有緣看到這邊的你～
希望佛菩薩也祝福你：🌟自在開心 幸福順遂🌟
南無觀世音菩薩🍀 南無地藏菩薩🏠 南無阿彌陀佛☀️