體驗完阿里首款 Design Agent，我開始替 UI / 前端焦慮了..
大家好，我是袋鼠帝。作為一名後端程式設計師，我略懂前端，但是對於 UI 設計是一竅不通。
還記得以前上班的時候，公司大部分 UI 設計都是妹子，我連 Figma 都沒打開過。
自從 AI 快速發展起來以後，我雖然能做出各種功能複雜的前端專案，但一直以來有個問題困擾我：做不好看。
我能分辨什麼樣的頁面是高級的、漂亮的，但我就是很難做出那種高級感、帶交互動效的頁面。這種感覺很難受😮💨
本來我還想去學一下 UI 設計和 Figma 的，但一直沒時間。
然後...我就又一次體會到了什麼叫只要你學得慢，就可以不用學。不得不說，這句話還是有一定的道理。
當然，我不鼓勵大家一直不學，畢竟學了，你至少知道這玩意兒是怎麼發展的，底層邏輯是什麼。
先給大家看個好玩的，這是我 20 分鐘左右快速做出來的一個產品官網頁面。
效果是不是還不錯？我感覺這直接比很多產品的官網都要好了吧。
整個頁面的設計就很舒服，然後各種動效，使用者可以互動，效果是很炸裂。關鍵是，這是一個不會 UI 設計的後端程式設計師做出來的（正是在下）。
大家一定很好奇，這個效果，是怎麼做到的？
不賣關子，是QoderWork 的 AI Native 設計工作台（Design Desk）幫忙做的，簡單來說，它是一個設計 Agent。
Design Desk 還真是讓我挺驚艷的，我使用的整個過程非常順手，即便過程中遇到一些問題，不管是對頁面哪部分設計不滿意，還是一些細節（顏色、邊框、間距），都能在畫布上手動快速調整。
而且整個開發流程，對於不熟悉軟體開發但是有自己想法、想要快速折騰出效果的人非常友好（後面會詳說）。
做產品官網
比如開頭展示的產品官網，我給了它一個 Prompt：
為一家音響公司打造產品網站。使用 React、Tailwind CSS 和 Framer Motion 實現所有動畫。產品本身是一件雕塑一樣呈現的。聲音要通過互動來視覺化，而不是單調的虛頭。材質和工程設計要透過捲動來展現。即使在靜態狀態下，網站的使用也應該流暢、捲動絲滑流暢。每個互動元素都要有微互動。網站要完全響應式。參考案例：Transparent Speaker、Bang & Olufsen、Sennos、Tecno、Awwwards 等級。
第一版效果就已經很不錯了。
然後我給 QoderWork 加入了圖片轉 3D 的 Skill：tripo-3d-generation。
在使用 GPT-image2 設計好產品圖之後，讓 QoderWork 直接轉成 3D 產品，並替換到網頁中。
最終效果相當 nice。
說實話，以前一直做的後端程式設計師，我從來沒想到有一天我能做出看起來這麼專業的產品官網（感覺已經比很多產品官網都要高級了）。畢竟我不是前端，更不是設計師。
而且僅僅只花了 20 分鐘。關鍵我都沒怎麼動手，只是做了幾道選擇題（在一些關鍵節點做決策就行了）。
然後我還對比了一下 Codex，我用同樣的提示詞給 Codex，它生成的效果雖然也還不錯，但也能夠明顯看出是不如 QoderWork Design Desk 的。
看來專業的事還得專業 Agent 來做🤝
物理實驗 3D 模型
最近 X 上生成教育相關的 3D 模型網站非常火。
然後我就順便用 QoderWork 做了個高中物理實驗 3D 互動網站。
順便看看，對於不熟悉軟體開發、但有自己想法的人，QoderWork 到底友不友好。
我的輸入很簡單：
幫我設計一個用於高中教學互動的 3D 互動實驗室科學 App，重點是 3D 模型可以互動，演示高中物理不同磁學、原子物理部分，展示一些物理的不同原理。然後全局擴展。
注意，這段話完全沒有任何軟體開發的術語，不需要你有開發思維，也不需要你給它具體的實作方案。
然後它做了一件讓我覺得聰明的事，沒有直接開始幹活，先是追問了幾個問題，幫我深挖更具體的需求。
問完之後也沒有胡亂開始寫程式碼，是生成了一份設計計畫讓我確認。
這份計畫包含交付的產物、技術方案確認、頁面、互動設計以及風險評估。還挺詳細的。
這個流程我覺得是對的。先對齊、再計畫、最後執行。
方向對齊在前，執行在後，這樣一次命中率就高很多，不用反覆重來。也是讓 Agent 生成品質更穩的關鍵。
最後生成的是帶 3D 互動的完整 React + Vite 前端工程檔案。
這一點跟 Claude Design 不一樣，據我所知 Claude 目前只能出 HTML。
QoderWork 則可以直接輸出完整工程檔案，這對於一個專案的維護和迭代來說很重要。
我讓我的前端朋友打開了幾個檔案看了一下，他的評價就是確實不錯，確實符合大部分前端工程師的編寫習慣。
所以我覺得 QoderWork 的 design desk 對於不懂開發的人來說，也很友好。
不需要你懂一些技術術語，它會幫你挖需求、出計畫。門檻比我預期的低很多。
當然，它只是拉高了所有人在做 UI 設計、前端的下限，對於專業的 UI 設計來說，他們用 Design Desk 的上限肯定會更高。
然後在整個體驗中，有三個點讓我覺得效率提升明顯：
- 畫布上直接改：整個工程在無限畫布上，基礎的寬高、位置、拖曳、調整，不用寫程式碼，實時生效。
2.框選修改：以前修改頁面某塊內容，大多要在對話框用文字描述導覽列左上角的那個按鈕顏色改一下...
費勁巴拉打一堆字，關鍵有時候你還真不好描述。現在直接在畫布上框選目標內容，告訴它你要怎麼改就行。
3. 關鍵設計決策：做著做著發現需要換主題顏色、換字體這些全局性的東西，正常還是透過對話框改，然後等結果，而且改全局的東西還容易把程式碼改崩。
QoderWork 現在把配色、間距、圓角、字號這些高頻微調項直接以可調參數暴露出來，拖曳調整，實時生效，甚至不需要重新整理就能看到效果。
還是那句話，不用等。
這三個點加起來，解決了同一個核心痛點：別讓我等，別讓我打字描述，在開發完成之後，需要的是簡單、快速、精準地去調整頁面。
不得不說 QoderWork 跟之前騰訊做的 Figma 類雲端設計工具還是有本質的區別。
騰訊的核心還是在雲端協作的向量設計上。
QoderWork 的定位是原生的 AI 驅動設計即程式碼工具：傳統的「純畫圖設計師」和「純寫頁面前端」的界限正在坍塌，設計檔案將不再是不可觸碰的黑盒，而是團隊所有人都可以共同維護的視覺資產。
另外 QoderWork 還內建了 150 多個高品質風格參考，有模板的好處是風格對人可控，解決了我一直以來的痛：有審美但做不出來。
極限測試：復刻天花板級網站
為了測試它的極限，我找了一個動效審美都是天花板的網站 lusion.co
真的，這絕對是我這輩子見過最炫酷的網站，沒有之一，可以用震撼來形容。
這個網站的互動簡直就像在看好萊塢大片，每一頁翻動都伴隨著極其複雜、絲滑又酷炫的 3D 變換。
這絕對是極限測試了。我敢說，目前不可能有任何 AI 能一次性百分之百復現這個網站的前端。
1 月份的時候，我丟給過 Kimi 的 Agent，它能復刻出大約 30%。
但是這次 QoderWork 生成的，很驚艷，我覺得到 50% 了。
可惜的是 QoderWork 目前沒有視覺能力，lusion.co 的錄屏沒法給它看，所以在理解上可能有一定偏差。
另外說下問題，目前 QoderWork 在處理特別複雜的 3D 場景和連續捲動動效時，偶爾會有些卡頓，生成的程式碼也不是每次都能一跑就通，有時候需要手動調一下。
不過這才是第一個版本，這個程度還不錯了。
順帶一提
QoderWork 自定義工作台，除了設計工作台，還有 PPT 工作台、寫作工作台。
PPT 工作台每一頁簡報是獨立 HTML 檔案，內建各種中文字型，斷網也能渲染。全流程有 11 個階段，每個階段使用者都能介入。生成的效果，我試了一下，還挺好的，已經趕上臧師傅開源的 PPT skill 了。
寫作工作台的選中即批註還挺有意思的，可以像審稿一樣圈出某段文字，寫下改得更正式、壓縮到 100 字以內，AI 就能圍繞選中文本定向修改。
這兩個先 mark 住，如果大家感興趣的話，後續可以單獨聊聊。
「最後」
這次嘗試，我覺得我「做不好看」這件事，真的被解決了一大半。
以及我個人覺得，UI 和前端確實越來越危險了，不知道 UI 和前端們怎麼看，歡迎留言區交流。
我這麼說不是沒有依據。特別是現在我做 OPC，從我個人的角度來說，如果我自己都能做出這樣的產品官網，我為什麼還要請專業的 UI 和前端呢？
因為目前做出來的效果已經比市面上很多產品的官網效果要好了。
前幾天在北京的時候，跟一位老鄉朋友吃飯聊天。她是在北京做了很久的資深律師，她主動聊起她焦慮，並問我有沒有什麼破局的方法。
我當時給出的破局辦法有兩種：
- 打穿並放大：擁抱趨勢，擁抱變化，深度使用 AI。不僅要是行業的專家，更要成為行業 + AI 的專家。
- 把自己變成更稀缺的人才：當一個人既能又能的時候，它的稀缺性是指數上升的。比如一個人，既懂 AI 的關鍵技術，又懂行銷、有網感，還會商務（沒模板也幹），這樣的人是非常稀缺的。所以說你每加一項技能，你的競爭對手就會少非常多，你就越稀缺，越有價值。
這也是我為什麼一直沒有找到我公眾號的技術編輯的原因——因為適合幫我公眾號內容的人太少太少了。
說真的，從 Sketch 到 Figma，設計與研發格式不同的矛盾還在，原來傳統工作頁面，設計到程式碼的還原度平均不足 70%，頁面互動銜接中往往需要經歷 3-5 輪的標註與返工。懂得都懂，真的太痛了。
以前的前端開發流程都是產品確定原型圖，UI 設計師出圖，前端再畫圖。中間有多少溝通成本、多少開發週期。而現在借助 design agent 可能就是幾句的事，輸入自然語言，你就能得到可交付的工程檔案。
所以，如果你對網頁呈現的效果有一定追求，或者想優化團隊現有的開發流程，可以去嘗試一下 QoderWork Design Desk 這樣的設計 Agent。它確實是能提高審美、提高效率的生產力工具。
最後，希望留言區不要再說我販賣焦慮了。因為 AI 的發展太快了，就連我自己也非常焦慮。
但焦慮是正常的。關鍵看你怎麼對待它——採取行動，還是放任不管，都在於你自己。
不過，我家兩代人的經歷告訴我，人不能一直低頭拉車，還得抬頭看路。
能看到這裡的都是鳳毛麟角的存在！
如果覺得不錯，隨手點個讚、在看、轉發三連吧✨
如果想第一時間收到推送，也可以給我個星標⭐
謝謝你耐心看完我的文章～
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
