使用 image2+stitch 設計新風格用 GPT Image2 + Stitch + Claude Code MCP 自動套用 UI 風格設計

使用 GPT Image2 + Stitch + Claude Code 設計新風格本篇示範一套 AI 輔助 UI 風格設計的完整工作流程，從圖像生成到前端套用，全程透過工具鏈串接完成。

1、用 GPT Image2 生成風格參考圖

首先在 GPT Image2 中輸入風格描述提示詞，例如「深色星空背景、粒子光點、漸層藍紫色調」，生成一張視覺風格參考圖。

GPT Image2 根據文字描述快速產出高品質的風格概念圖，當作後續 UI 設計的視覺基準。

2、 將設計稿貼入 Stitch，等待風格分析

將 GPT Image2 生成的圖片貼入 Stitch，提供基礎風格參考，等待 Stitch 完成分析。

Stitch 是 Google 推出的 AI UI 設計工具，能夠自動解析圖片中的色彩系統、字型風格、元件排版規則，並將其轉換為可套用的 UI Token。將

3、選擇風格圖，點擊「匯出」→「MCP」

在 Stitch 中選擇你滿意的風格版本，點擊右上角「匯出」按鈕，選擇匯出方式為「MCP」。

透過 Stitch 的 MCP 匯出功能讓 Claude code 鏈接到 Stitch

4、Claude Code 連接 Stitch MCP，確認連線狀態

透過指令查看目前 MCP 連線狀態，確認 Stitch 已成功接入。

5、套用風格，運行時即時切換

應用程式運行期間可直接切換不同風格，即時預覽效果。