結果:
🧭 第一步:訪問 Stitch 平臺
- 打開網址:stitch.withgoogle.com
- 使用你的 Google 賬號登錄,無需安裝任何軟件
🧱 第二步:選擇設計模式
Stitch 提供兩種模式:
- 標準模式(Text-to-UI):輸入文字提示,快速生成 UI(適合快速迭代)
- 實驗模式(Sketch-to-UI):上傳草圖或截圖,生成高保真設計(適合視覺引導)
📺 推薦視頻:Google Stitch Tutorial: Create Stunning FULLY FREE UI 展示了這兩種模式的使用方式,包括如何創建網頁和移動應用界面。
?? 第三步:編寫提示語(Prompt)
提示語是設計的核心。你可以參考以下結構:
設計一個移動端的加密貨幣追蹤應用首頁。包含頂部導航欄(左側顯示“CryptoTrack”,右側有通知鈴鐺圖標),投資組合摘要卡片,餅圖展示資產分布,橫向滾動的熱門幣種列表,兩列網格展示漲跌幅最大幣種,底部導航欄(首頁、市場、設置)。
使用深色主題,圓角卡片,現代字體。
🧪 第四步:生成并審查設計
- 點擊“Generate”按鈕,Stitch 會生成多個設計版本
- 檢查是否包含你提示中提到的元素(如導航欄、圖表、卡片等)
- 如果有偏差,可以修改提示語重新生成
🛠 第五步:導出設計
你可以將設計導出為:
- Figma 文件:用于進一步編輯和團隊協作
- HTML/CSS 代碼:用于前端開發
📦 第六步:項目實戰建議
如果你想做一個完整的項目,比如電商網站或訪客管理系統,可以:
- 用 Stitch 生成初始 UI
- 導出 HTML/CSS
- 用你熟悉的工具(如 Grok 4 或 Gemini)將其轉化為 React/Vue 項目