·8 分鐘閱讀

Stitch 逆向工作流程：從 URL 擷取設計系統

以參考網站 URL 為起點擷取整套設計系統的可重現工作流程：操作步驟、語音改稿話術公式、design.md 匯出與跨專案沿用，並說明與 Brand Kit 正向流的分工。

S
Stitch Prompt Team
Content Team
StitchUI Design教學

用 AI 生成介面的常見起點是寫一段描述：「現代、簡潔、留白充足」。問題是，這類形容詞每個人理解都不同，生成結果也常常「差點意思」。

換一個思路：與其描述風格，不如直接引用一個風格。給 Stitch 一個參考網站的 URL，它會擷取這個站點背後的設計系統——顏色、字型、圓角、元件風格——並生成一套可以繼續迭代、可以匯出沿用的規範。

這就是本文要講的「逆向工作流程」：從 URL 到設計系統，再到 design.md，最後把規範帶進你自己的專案。

說明：URL 擷取屬於社群實測驗證的能力，官方尚未給出完整的功能邊界文件；複雜站點的擷取效果建議以實際測試為準。

一、從「描述風格」到「引用風格」：為什麼 URL 比形容詞好用

形容詞是模糊的，參考物是具體的。當你說「大膽現代風」時，模型要在無數種可能裡猜；當你給出一個具體站點時，模型要做的只是「讀懂並翻譯」。

這帶來三個直接好處：

  • 對齊成本低：團隊說「像這個站」比說「高級一點」有效得多。
  • 風格一致性強：多個頁面從同一套擷取結果出發，不容易各寫各的。
  • 可沉澱：擷取結果可以匯出為 design.md，成為跨專案沿用的資產。

二、實作：用 URL 擷取一套設計系統（以 fireship.dev 為例）

操作步驟

  1. 選定一個參考網站（以開發者社群常見的 fireship.dev 為例）。
  2. 把 URL 作為設計系統擷取的輸入交給 Stitch。
  3. 等待 Stitch 輸出整套設計系統定義。
  4. 檢查擷取結果中的顏色、字型、圓角與元件風格是否符合預期。
  5. 在生成的專案裡繼續對話迭代，或匯出 design.md 留存。

擷取結果裡有什麼

  • 顏色體系：主色、背景、文字與邊框層級。
  • 字型與字級：標題與內文的搭配和比例。
  • 形狀語言：圓角大小、按鈕與卡片的形態。
  • 元件風格：導覽、卡片、表單等元素的視覺規則。

還有一個容易被忽略的點：生成結果是可互動的元件，而不是一張靜態圖。這意味著擷取出來的風格可以立即進入「繼續改」的狀態，而不是停在截圖層面。

三、語音改稿的正確話術：功能 + 氣質錨點

用語音或對話繼續改稿時，把描述結構化成一個簡單公式：

功能 + 氣質錨點（引用已知產品）。

比形容詞堆疊有效得多。三個可以直接套用的例子：

  • 「做一個聊天功能，感覺類似那種大膽現代風的社群產品。」
  • 「保持當前設計系統，新增一個設定頁，包含帳號、通知、隱私三個分組。」
  • 「把首頁改得更像開發者工具網站，資訊密度高一些，顏色保持克制。」

擷取指令本身也可以公式化：

以 [參考網站 URL] 的設計系統為起點，生成一套可沿用的設計規範，
包含顏色、字型、間距、圓角和元件規則，並保持各頁面風格一致。

四、匯出 design.md：讓設計系統跨專案沿用

擷取只是第一步，可沿用才是目的：

  1. 把擷取結果匯出為 design.md。
  2. 檢查 token 是否完整（顏色、字型、間距、圓角等）。
  3. 在新專案裡讓 Coding Agent 引用這份檔案（例如在 AGENTS.md 中宣告「UI 工作前先讀 DESIGN.md」）。
  4. 用官方 lint 工具定期驗證規範是否被破壞。

這套流程與 DESIGN.md 進 CI 中介紹的驗證方式完全相容——先擷取、再凍結、最後用工具守住底線。

五、與 Brand Kit 的分工：什麼時候正向、什麼時候逆向

Stitch 同時支援兩種進入設計系統的路徑，方向相反，適用情境不同：

工作流程起點適合不適合
Brand Kit（正向）自己的品牌 VI、Logo、產品圖已有品牌資產，要生成符合品牌規範的介面還沒有明確的品牌視覺
URL 擷取（逆向）參考網站的設計系統快速對齊一種成熟風格、探索方向需要完全原創的視覺識別

一個實用建議：早期探索階段用逆向工作流程找方向，產品進入品牌化階段後切換到正向工作流程。

六、邊界與注意事項：風格參考 ≠ 抄襲

擷取設計系統擷取的是規則，不是具體設計稿。使用時有幾條邊界要守住：

  • 不要直接複製參考站點的具體頁面版面和素材。
  • 擷取出的顏色和字型盡量做一輪自己的調整，形成差異化。
  • 商業專案中確認參考站點的品牌元素（Logo、插畫）不被沿用。
  • 對生成結果做一次「AI 味自檢」：字級層級是否合理、間距是否機械、元件狀態是否完整。

七、常見問題（FAQ）

Q1：任何網站都能擷取嗎？

公開可存取的頁面通常可以嘗試；結構複雜或強互動的站點效果差異較大，建議先小範圍實測再進入正式流程。

Q2：擷取出來的設計系統可以直接用於商業專案嗎？

擷取的是風格規則，可以啟發你自己的設計；但具體設計、素材與品牌元素需要保持原創，避免直接複製。

Q3：擷取之後，怎麼保證多個頁面風格一致？

把結果匯出為 design.md 並凍結，讓所有頁面生成與程式碼實作都引用同一份規範，再用 lint 定期驗證。

八、總結

逆向工作流程解決的是「從 0 到 1 找風格」的效率問題：一個 URL 代替一段形容詞，一套設計系統代替一次性的視覺嘗試。把它和 design.md、Agent 工作流程串起來，就得到一條可以沿用的完整鏈路。

繼續閱讀：

← ← 返回部落格