Live Design™ 讓設計從第一天就面對真實世界

長久以來，SOTA 一直用一套不同於傳統交付的方式打造產品。它往往要到合作開始後，才會被客戶真正看見；現在，我們正式為這套方法命名：

Live Design™

這是我們對數位產品開發方式的重新定義：

產品最終在真實環境裡運作，就應該從第一天開始，在真實環境裡被設計。

從專案開始的第一天，我們就在瀏覽器裡設計、測試與溝通，讓客戶體驗到的、設計師調整的，以及工程師最後交付的，完全對齊！

這不是因為 AI 出現才形成的新想法。過去十餘年來，我們一直以這樣的方式設計：盡可能縮短設計與真實產品之間的距離，讓每一項判斷都在可運作的環境中接受檢驗。這套方法也在長期的專案實踐中，不斷取得成功的成果。

傳統設計交付

設計師先在 Figma 或其他 Prototyping 軟體中完成設計稿、操作原型，與客戶來回會議討論、迭代確認細節直到滿意，最後才交給工程師進行傳統的「套版」、「切版」整合開發。

而這樣做的缺點非常多：

• 設計必須被前端工程師重新轉譯
  工程師接到的不是產品，而是一份關於產品外觀與行為的 Mockup（打樣）。不同工程師、每一次轉譯，都可能加入不同理解，使最後成果與原始設計有所不同。
• Figma 無法完整呈現瀏覽器的真實特性
  字型繪製方法、複雜 CSS 效果、視窗尺寸、捲動、鍵盤操作與手機 safe-area 與觸控行為，無法在 Figma 或其他軟體內完整確認，可能因瀏覽器、作業系統與裝置而不同。
• 設計稿很少呈現完整的 fallback（備援機制）
  當字型載入失敗、圖片缺少、資料異常、功能不被支援或網路狀態不穩定時，產品仍然必須提供合理的替代結果。看似工程問題，但仍須設計師完整設計顯示方法。
• Figma 理想內容會掩蓋真實問題
  經過挑選的標題、圖片與資料看起來總是恰到好處，卻無法證明介面能承受真實資料、空狀態、多語言與不可預期的輸入。
• 交付會展開另一輪重複工作
  工程師實作後，設計師必須重新比對成果；雙方反覆溝通與修正，消耗原本可以用來改善產品的時間。且不同的工程師解釋設計稿的方式也有差異。
• 設計問題最終被降級成 bug
  破版、狀態缺漏與平台差異等，直到上線後才被發現，只能在時間壓力下逐項修補，而不是從一開始就被視為產品的一部分，經過完整而精心的規劃。
• 客戶到最後才能看到產品完整的真實樣貌
  客戶往往要等到程式整合完成，才能第一次真正把產品拿在手上使用。此時才發現，瀏覽器裡的尺寸、捲動、操作節奏與整體感受，和當初在會議室裡觀看設計稿時並不完全相同，甚至可能與原先想像有很大的落差。

傳統流程會發生許多「原來用起來是這種感覺」的問題，直到產品上線後才浮現。如果這些感受從設計的第一天就能直接被看見、操作與討論，豈不是更好？

Live Design™ 的細節

SOTA 從一開始就在瀏覽器裡打造產品，並根據客戶的真實環境，建立專屬的亂數資料系統。即便客戶資料庫與後端尚未完成，它模擬實際的資料結構，持續將不同長度的字串、數量、圖片、排列方式與系統狀態帶入設計，讓我們每一次的設計更動，都模擬產品在現實中呈現的樣貌。

這套系統不只產生正常而完整的資料，也能提供零狀態、欄位缺漏、極端內容與預期之外的 Edge Case（邊緣情境）。設計因此不再只展示一個經過挑選的完美情境，而是接受真實世界的壓力測試之下來做各種設計。

這是 Live Design™ 最強大的能力之一：在產品上線以前，就看見介面可能如何失敗。我們能提早定義每一種 fallback、找出設計邊界，並讓產品在正常、異常甚至未曾預期的情況下，依然清楚、穩定而且能夠使用。

AI Agent 帶來的額外加速

Live Design™ 這套方法到了 AI 時代，反而成為加速產品開發最直接的方式。

當 AI Agent 開始能夠快速產生程式碼、調整介面與實作功能，過去存在於設計與開發之間的轉譯過程也隨之大幅縮短。而我們原本就在真實產品中工作的方式，因此能直接承接 AI 帶來的速度：想法可以立即被實作、立即被看見，也立即接受真實環境的檢驗。

AI Agent 也讓這套累積多年的方法，不再只仰賴少數同時熟悉設計與程式的人。設計師可以直接操作 Agent 製作與調整 HTML Prototype，把想法轉化為真正能在瀏覽器中運作的介面，立即檢視不同內容、互動與系統狀態下的成果。

SOTA 並不是為了 AI 改變設計流程，而是原本選擇的設計方式，恰好在 AI 時代獲得了前所未有的速度。

總結

• 從第一天就能呈現產品真實運作的樣子
• 客戶確認的是實際成果，而不是對未來成果的模擬
• 客戶能在任何裝置上體驗自己未來的產品
• 設計師能利用 AI Agent 直接製作與調整成果，不僅節省 token 也提高生成速度
• 專屬亂數資料系統會持續對設計進行真實情境的壓力測試
• 能主動發現過長內容、空資料、欄位缺漏、載入、錯誤與 Edge Case
• 能在開發初期完整設計 fallback，而不視為 Bug
• 能在設計階段處理不同瀏覽器、作業系統與裝置的差異
• 不需要在設計與開發之間重新翻譯
• 大幅降低交付後的認知落差與來回修改
• 設計完成時，前端產品也已接近完成
• 接上正式後端後，便能快速進入穩定運作

注意事項

• 前期必須投入時間與客戶一同建立產品環境與資料結構
• 團隊必須同時具備設計思考與實作能力
• 每一項設計決定都要更早面對技術與真實內容的限制
• 若目的只是快速比較幾個視覺概念，設計軟體仍然更有效率

SOTA 使用 Live Design™ 方法，讓設計從第一天就面對真實世界。

SOTA 並不提供一份等待被實現的完美設計稿。我們選擇直接打造真實的產品，讓問題在設計中發生，也在設計中被解決。當產品被交付時，它已經是一個能完美運作的成果。替客戶打造更堅固、順暢、完美無缺的介面設計。