AI 為設計師拉高了天花板

Shopify 產品設計工作室（Product Design Studio）負責人 Marvin Schwaibold 認為，AI 已把設計師的工作從產出成品轉為篩選成品：工具如今幾乎什麼都生得出來，真正稀缺的能力是判斷什麼好看，以及把一個複雜構想拆成代理（agent）能逐項執行的子任務。整集大部分時間談的是他由 AI 驅動的工作流程（Figma 當草稿紙、終端機裡的 Codex 與 Claude Code、親手打造的草地著色器，以及用來調參的「Dial Kit」面板），外加五個觀眾投稿的新創網站點評；標題裡的「全端設計師」與其說是被獨立論證的主題，不如說是貫穿前半段的一條線。

Schwaibold 的視角其來有自：他與夥伴 JTel 在布魯克林經營工作室 Molly 約兩年，直到 Shopify 收購並將工作室併入，如今他負責 Shopify 後臺改版與其 Sidekick AI 層。讀者讀完應該帶走三樣東西：他用代理做原型的具體流程、他對落地頁的規則（單一主要動作、漸進揭露、原生捲動、可點選的輪播），以及他對 Nstack、SkillSync、InstaPlay、Mintlify、Nullify、Instinct 的具體批評。

AI 拉高了天花板，但好不好看仍由設計師定奪

Schwaibold 的核心主張是：AI 並沒有改變設計工作反覆迭代、循序推進的本質，改變的只是工具。他仍從 Figma 起手，但把它當草稿紙，讓想法很快「躍升為真的 demo」，再拿到手機或電腦上測試，終端機裡則用 Codex 和 Claude Code。他回頭用 Figma，主要是為了排版，或向 AI 說明意圖。

他的分工講得很明白：人負責駕駛，AI 負責出力，品質控管留在設計師手上。既然產出不再是瓶頸，工作就變成「極度挑剔地決定哪些要繼續往下走」。他形容這個角色像 AI 產出的總編輯——設計師一直都在做這件事，只是以前得靠大量手工的 Figma 勞動才走到這一步。

「AI 確實把我們所有人的天花板拉高了，但它不是工匠。它能執行我手寫不出來的複雜度與技術。它會寫程式，但它不知道什麼好看、什麼難看。那是我來決定的事。」

他描述的實作方法是拆解：先搞清楚要做的東西有多複雜，拆成子任務，再一來一往、一點一點餵給代理。他把代理形容為「一個有無限耐心的協作者」——同一段動畫試到第 91 次，Codex 不會像人類工程師那樣翻臉。

Shopify 設計工作室的兩條路線，方向幾乎相反

截至這次訪談，Schwaibold 的團隊已成立約一年，正在推動一項改造 Shopify 最重要介面的計畫。他把計畫拆成兩塊，說兩者幾乎互相矛盾、卻又互補：

兩條線在行動版 App（Shopify 的「綠色 App」）交會，這個 App 正變得更對話式——商家是跟 Sidekick 談生意，而不是透過介面操作生意。後臺改版在團隊自建的實驗場（playground）裡做原型；那不是正式產品程式碼，也不會被允許進到 Shopify 主要的 GitHub 儲存庫。

Schwaibold 給出的策略背景是：Shopify 約有 20 年歷史，執行長 Tobi（Lütke）告訴團隊，公司「正進入一個新時代，而那個未來需要被設計出來」。Schwaibold 形容 Shopify 是一家創辦人主導、工程主導、且有自覺的組織，設計如今參與形塑公司的敘事——相較於設計過去較小的角色，這是一大轉變。他說原型在內部「像野火一樣」蔓延，Tobi 喜歡的原型可能直接變成開發指令，這也是為什麼工作室是嵌進現有工作流程與產品路線圖，而不是獨立在外。

原型勝過 PRD，現在一兩個人就能做過去一群人的事

Schwaibold 提到最具體的操作面變化，是團隊規模與速度。在 Molly 時，每一段動畫都由工程師手工打造，美術指導得協調「上千個對口」。在 Shopify，他看到「兩個人一組就能做過去一群人的工作」，因為工具讓他們能立刻把想法模擬出來。他說自己加入大公司的原因，是想驗證 Molly 的策略在擁有數百萬使用者的介面範式上是否站得住腳，而不是隻服務那幾個會逛工作室網站的人。

他用一個週末的側專案說明「Figma 當草稿紙」的模式：一個 2×3 格、黃銅研究影片的網格，點選展開、向下拖曳關閉。Codex 把它做出來了，但互動不能中斷——把一個素材往下拉之後，得等它落定才能點下一個。他在 Figma 畫了幾個簡陋的色塊（紅、藍、綠），表示滑動途中點新專案應該打斷前一個，Codex 正確讀懂了這張圖。他的重點是：這段動態他用文字或口語都講不清楚，但他畫得出來，而模型大致照他的意圖讀懂了圖。

一個草地著色器，同時展現代理開發的威力與失敗模式

著色器專案是整集最詳細的案例。他把一段真實草地的影片丟給 Codex，要求用同樣的十六進位色碼做出畫素級還原的網頁著色器。第一版成果「顯然完全不像」最終結果。於是他把失敗畫面截圖，拿去問 ChatGPT 的代理，為什麼另一個代理聽不懂他。那個代理的建議是：講清楚光從哪裡來、用了哪些陰影，並把畫面拆成大約六個部分，分別渲染後再組合。

轉折點來自一張地形圖。模型原本把草當成平的圖層；一旦它理解底下有一層深淺高低不一的地形，在那個結構之上重新渲染草地，就做出了逼真的場景。把底層結構攤開來看，也暴露出原本的地形圖「完全錯誤、歪斜」——那是五個提示之前就埋下、他毫不知情的錯誤。

與同事 Josh 的一頓午餐催生了調參層：他們把 Dial Kit 裝進 demo，讓 Schwaibold 能直接檢視各項變數。他問 Codex 到底有幾種草葉變化，得到的答案是約 217,000 種，彼此只差約 0.6–0.8 的數值——於是他們做了一個開關來看變化，另外加上草葉長度與風的控制項。他指出，這種自製控制面板以前根本不值得任何人花時間；現在做個小工具把某個變數調到位，輕而易舉。

Dial Kit 之所以存在，是因為聊天不是調手感的介面

Schwaibold 示範的 Dial Kit，是一個能讓人在任何專案裡輕鬆建立與微調變數的產品——從作者網站用 npm run 或一句提示就能安裝。他展示了第二種用法：一個靈感來自設計主管 Mike Mattis 作品集的輪播，把卡片往下拖再放開，會送出一圈能量漣漪，撞上相鄰的卡片。經過「91 個提示」之後，側邊面板讓他能掀開引擎蓋看「pull boost」這類引數——拖曳時加速增幅提升多少。他的論點是：他知道手感不對，但一來一往的聊天到不了那裡；數值必須被攤開來看。

這也連回他在網站點評中反覆強調的原則：介面必須可中斷，因為人的思緒本來就可中斷。他舉 Apple 的軟硬體作為長年以來的明證。

落地頁之所以失敗，是因為沒有任何東西告訴眼睛該看哪裡

點評段落是 Schwaibold 的規則最具體的地方。他反覆使用的診斷工具來自一位德國字型設計教授：一張海報若沒有「命令感」（dictatish），眼睛就找不到落點。他把這套標準套用在五個網站上。

這些批評背後有幾個具體數字與細節。談 SkillSync，他建議把功能集壓縮成三欄、只留前三項能力，每一項點開成一個面板——並指出這個頁面短到把功能拆成更長的捲動頁也無妨。談 InstaPlay，他指出註冊牆出現在使用者看到自己生成的遊戲之前，等於打斷了獲客迴圈；價值必須先到位，分享才會成為成長動能。談 Nullify，他認為公司該用自家產品——頂部放影片而不是成段文字，因為「反正這些我們一個字也不會讀」。談 Instinct，他希望發射片段滑過就立刻播放（注意力只有半秒），並建議三段影片可以同時迴圈，因為每段都只是一瞬間。

點評還產出兩個可重複使用的資產。Schwaibold 建議把三欄元件當作功能區塊的預設版型；他也推薦同事 Jasper Voss 打造的 Blossom Carousel——一個免費的 GitHub 輪播元件，在手機上可滑動、可捲動、可堆疊，是他對「一堆只吃箭頭按鈕的輪播」的解答。

Molly 的手感優先路線，是一場延續到 Shopify 的押注

Schwaibold 進 Shopify 之前在 Molly 的經歷，說明瞭他貫穿全集的標準。這間他與 JTel 經營約兩年的工作室，合作過 Collins、Apple、Google 與較小的客戶，同時最多隻接兩三個案子以保持專注。他們為 Collins 做的網站，用一座案例研究的書架呈現，書會升級、彼此疊落；一位專職工程師 Jesper 負責那個彈跳效果，因為要有機地落下，才能讓人「感受到」書架是活的。首頁影片輪播背後的環境漸層，抄自壁掛電視後方的燈光——JTel 把影片複製一份並模糊化，讓背景跟得上畫面的節奏。

問他為什麼一間工作室願意花一個人的時間在一個頁籤互動上，他的回答是：會找品牌工作室的客戶，把工藝視為一種訊號。一家代理商若在自己的網站埋彩蛋，就會在客戶的專案裡埋彩蛋；若它為了一套色票建立系統，而不是挑五個自己喜歡的顏色，那就是它願意付出的講究程度。Molly 把他們的內容結構方法稱為「primal」——所有東西都只差一層、漸進揭露，讓使用者自己去探索，而不是被對著大吼。

這集留下的未解張力，是 Schwaibold 自己點出的那個：AI 讓生成變體變得輕而易舉，於是篩選與品味成了真正的限制；但同一批工具，也讓一個單人創辦人做出一個有五種字級、還會劫持捲動的網站。工具能產出的東西，與團隊能判斷的東西之間的落差，就是他預期設計角色——以及工程與 PM 角色——會持續往全端收斂的地方。