體驗完阿里首款Design Agent，我開始替UI/前端焦慮了..

大家好，我是袋鼠帝

作為一名后端程序員，我略懂前端，但是對于UI設計是一竅不通。

還記得以前上班的時候，公司大部分UI設計都是妹子，我連Figma都沒打開過。

自從AI快速發展起來以后，我雖然能做出各種功能復雜的帶前端的項目，但一直以來有個問題困擾我：做不好看。

我能分辨什么樣的頁面是高級的、漂亮的，但我就是很難做出那種高級感、帶交互動效的頁面。這種感覺很難受

本來我還想去學一下UI設計和Figma的，但一直沒時間。。

然后...我就又一次體會到了什么叫只要你學的慢，就可以不用學 ，不得不說，這句話還是有一定的道理。

當然，我不鼓勵大家一直不學，畢竟學了，你至少知道這玩意兒是怎么發展的，底層邏輯是什么。

ok，先給大家看個好玩的，這是我20分鐘左右快速做出來的一個產品官網頁面。

效果是不是還不錯？我感覺這直接比很多產品的官網都要好了吧？

整個頁面的設計就很舒服，然后各種動效，用戶可以交互，效果真是很棒。關鍵是，這是一個不會UI設計的后端程序員做出來的（正是在下）。

大家一定很好奇，這個效果，是怎么做到的？

不賣關子，是QoderWork的AI Native設計工作臺（Design Desk）幫忙做的，簡單來說，它是一個設計Agent。

Design Desk還真是讓我挺驚艷的，我使用的整個過程非常順手，即便過程中遇到一些問題，不管是對頁面哪部分設計不滿意，還是一些細節（顏色、邊框、間距），都能在畫布上手動快速調整。

而且整個開發流程，對于不熟悉軟件開發但是有自己想法想要快速折騰出效果的人非常友好（后面會詳說）。

做產品官網

比如開頭展示的產品官網，我給了它一個Prompt：

為一家音響公司打造產品網站。使用React、Tailwind CSS和Framer Motion實現所有動畫。產品本身就是一件雕塑——要像雕塑一樣呈現它。聲音要通過交互來可視化，而不是花哨的噱頭。材質和工程設計要通過滾動來展現。即使在靜音狀態下，網站的聲音也應該悅耳動聽。滾動效果要流暢，使用Lenis或locomotive-scroll等技術。每個交互元素都要有微交互。網站要完全響應式。參考案例：Transparent Speaker、Bang & Olufsen、Sonos、Teenage Engineering。網站質量要達到Awwwards級別。

第一版效果就已經很不錯了：

然后我給QoderWork加入了圖片轉3D的Skill：tripo-3d-generation。

在使用GPT-image2設計好產品圖之后，讓QoderWork直接轉成3D產品，并替換到網頁中。

最終效果相當nice。

說實話，以前一直做的后端程序員，我從來沒想到有一天我能做出看起來這么專業的產品官網（感覺已經比很多產品官網都要高級了）。畢竟我不是前端，更不是設計師。

而且僅僅只花了20分鐘。關鍵我都沒怎么動手，只是做了幾道選擇題（在一些關鍵節點做決策就行了）

然后我還對比了一下codex，我用同樣的提示詞給Codex，它生成的效果雖然也還不錯，但也能夠明顯看出是不如QoderWork Design Desk的。

看來專業的事還得專業Agent來做

物理實驗3D模型

最近X上生成教育相關的3D模型 網站非?；稹?/p>

然后我就順便用QoderWork做了個高中物理實驗3D交互網站

順便看看，對于不熟悉軟件開發、但有自己想法的人，QoderWork到底友不友好。

我的輸入很簡單：

幫我設計一個用于高中教學互動的3D交互實驗室的科學App，重點是3D模型可以互動，能根據鼠標展示不同角度，然后里面可以展示一些高中物理的電磁學、原子物理部分。

注意，這段話完全沒有任何軟件開發的術語。不需要你有開發思維，也不需要你給它很具體的實現方案。

然后它做了一件讓我覺得蠻聰明的事，沒有直接開始干活，是先追問了幾個問題，幫我深挖更具體的需求。

問完之后也沒有胡亂開始寫代碼，是生成了一份設計計劃讓我確認。

這份計劃包含要交付的產物、技術方案確認、頁面結構、交互設計以及風險評估。還挺詳細的。

這個流程我覺得是對的。先對齊、再計劃、最后執行。

方向對齊在前，執行在后，這樣一次命中率就高很多，不用反復重來。也是讓Agent生成質量更穩的關鍵。

最后生成的是帶3D交互的完整的React + Vite前端工程文件。

這一點跟Claude Design不一樣，據我所知Claude目前只能出HTML。

QoderWork則可以直出前端框架工程文件，這對于一個項目的維護和迭代來說很重要。

我讓我的前端女朋友點開了幾個文件看了一下，她的評價是規范性不錯，確實符合大部分前端工程師的編寫習慣。

所以我覺得QoderWork的design desk對于不懂開發的人來說，也很友好。

不需要你懂一些技術術語，它會幫你挖需求、出計劃。門檻比我預期的低很多。

當然，它只是拉高了所有人在做UI設計、前端的下限，對于專業的UI設計來說，他們用Design Desk的上限肯定會更高。

然后，在整個體驗中，有三個點是讓我覺得效率提升最明顯的：

1、畫布上直接改：整個頁面顯示在無限畫布上，頁面的元素你可以直接手動調整，不用靠代碼?；A的顏色、位置、間距、邊框、字體，手動改，實時生效。

這太爽了，因為以前用Vibe Coding的產品，改個顏色都要在對話框里描述，然后等AI跑一遍?，F在終于不用等了。

2、框選修改：以前修改頁面某塊內容，大多要在對話框用文字描述"導航欄左上角的那個按鈕顏色改一下..."

費勁巴拉打一堆字，關鍵有時候你還真不好描述?，F在直接在畫布上框選目標內容，告訴它你要怎么改就行。

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和前端呢？

因為目前做出來的效果已經比市面上很多產品的官網效果要好了。

前幾天在北京的時候，跟一位老鄉朋友吃飯聊天。她是在北京做了很久的資深律師，她主動聊起她很焦慮，并問我有沒有什么破局的方法。

我當時給出的破局辦法有兩種：

1. 打不過就加入：擁抱趨勢，擁抱變化，深度使用AI。不僅要是行業的專家，更要成為行業+AI的專家。

2. 把自己變成更稀缺的人才：當一個人既能又能的時候，它的稀缺性是成指數上升的。比如一個人，即懂AI，又懂技術，又懂營銷，有網感，還會寫文章（沒錯，正是在下）。這樣的人是非常稀缺的?？梢哉f你每加一項技能點，你的競爭對手就會少非常多，你就越稀缺，越有價值。

這也是我為什么一直沒有找到我公眾號的技術編輯的原因--因為適合幫我做公眾號內容的人太少太少了。

說真的，從Sketch到Figma，設計與研發格式不同的矛盾存在了十年。在傳統工作流中，設計到代碼的視覺還原度普遍不足70%，單頁面在傳統交接中往往需要經歷3到5輪的標注與返工。

懂得都懂，真的太痛了。

以前的前端開發流程都是產品確定原型圖，UI設計師出圖，前端再畫圖。中間有多少溝通成本，多少開發周期。而現在借助design agent可能就是一句話的事，輸入自然語言，你就能得到可交付的工程文件。

所以，如果你對網頁呈現的效果有一定追求，或者想優化團隊現有的開發流程，可以去嘗試一下QoderWork Design Desk這樣的設計Agent。它確實是能提高審美、提高效率的生產力工具。

最后，希望評論區不要再說我販賣焦慮了。因為AI的確發展太快了，就連我自己也非常焦慮。

但焦慮是正常的，關鍵是看你怎么對待它--是采取行動，還是放任不管。都在于你自己。

不過，我家兩代人的經歷告訴我，人不能一直低頭拉車，還得抬頭看路。

能看到這里的都是鳳毛麟角的存在！

如果覺得不錯，隨手點個贊、在看、轉發三連吧~

如果想第一時間收到推送，也可以給我個星標?

謝謝你耐心看完我的文章~