用 Stitch 設計：核心入門指南

歡迎使用 Stitch。今天你將學習從設計出發，進入靈感發想。關鍵是不要想太多。

好的提示詞來自好的設計過程

發想。 最難的是面對空白頁。做出更好設計的最佳方式是疊代，而不是一步到位的完美提示詞。讓我們遵循一個簡單的公式。

初始提示詞範例

一個好的初始提示詞遵循這個公式：

第一個提示詞不需要完美。描述你希望在頁面上呈現的具體內容和整體氛圍，暫時不用糾結具體的字型選擇或十六進位色碼。Stitch 會幫你完成這個發想過程。我們需要擺脫空白提示詞，進入創造狀態。

以下是一個例子。

選擇裝置類型

App 還是 Web？先隨便選一個。一開始不用太糾結裝置類型，憑直覺選一個你覺得最合適的格式。隨著疊代，Stitch 提供了很多方式在兩種模式之間轉換。

然後點擊產生。

畫布導覽與操作

讓我們先熟悉一下畫布。

快速鍵

把畫布上的主要互動分成兩種模式來理解：選擇與導覽。V 鍵切換 Select（選擇）工具，H 鍵切換 Pan（平移）工具，用於快速拖曳導覽。畫布很大，很容易迷失方向。如果發生這種情況，按 ⌘← / Ctrl+← 跳轉到最近的畫面。你可以用 ⌘→ / Ctrl+→ 和 ⌘← / Ctrl+← 在畫面之間循環切換。

按 ? 可以查看所有可用的快速鍵清單。

開始發想過程

真正的發想過程從設計出現的那一刻開始。你很可能會喜歡初始生成結果的某些方面，而不喜歡另一些。Stitch 提供了工具來調整你不喜歡的部分，並進一步放大生成得好的部分。

一次只做一處大改動

挑一件你想改變的事，就一件。選中你想修改的畫面，點擊 Edit、Add to Chat，然後寫提示詞。要具體說明改什麼、怎麼改。 例如，如果價格表需要突顯最具性價比的方案：

針對具體元件

具體的視覺指令

UI/UX 關鍵字

更新價格表以突顯中間那張卡片。增加它的容器高度並加入陰影。縮小相鄰卡片的比例，建立清晰的視覺層級。

你可以一直沿用這個公式：找到一處改動，用 UI/UX 關鍵字寫出清晰、有指向性的提示詞，然後產生。

編輯主題（Edit Theme）

如果你的改動屬於設計的核心主題範疇，Stitch 有一個專門的功能可以更快完成這類特定修改。

選中畫面，點擊 Generate，然後選擇 Edit Theme。在這裡你可以修改主題的核心要素，例如淺色/深色模式外觀、強調色、元件的圓角半徑和字型。

從設計到原型

當設計達到比較滿意的狀態後，讓我們試駕一下。點擊畫面，點擊 Generate，然後選擇 Prototype。這會建立一個可捲動、可互動的原型，幫你感受設計實際運作的樣子。

在這裡你可以檢查靜態設計中看不到的互動狀態。試試按鈕、連結、卡片等元件的懸停樣式。在文字框中輸入一段訊息，看看對於預期的文字量來說它是否太小或太大。想想這個原型將來會如何被實際使用。然後基於這些新的互動因素繼續發想。

下載程式碼與圖片

當你準備好把設計變成現實時，就該下載程式碼和圖片了。Stitch 會同時產生圖片和 HTML 程式碼兩種產出。

點擊某個畫面，或拖曳選中所有想匯出的畫面，點擊下載。這會把一個 zip 檔案下載到你的裝置，你可以把它整合到各種工具中，讓它真正落地。

HTML 可以轉換成多種格式

需要理解的一點是：HTML 程式碼是一個轉換的基礎。LLM 非常擅長把 HTML 和參考圖結合，轉換成其他元件格式，例如 React、Angular、Vue，或者 Jetpack Compose、Flutter、SwiftUI 等非 Web 平台。

想了解如何產生特定的元件格式，請查看 Build Strategies 章節。

繼續發想，繼續創造

獲得更好結果的關鍵是有效的提示詞和發想過程。不斷疊代，直到找到感覺對的設計。