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

大家好，我是袋鼠帝

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

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

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

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

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

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

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

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

效果是不是還不錯？我感覺這直接比很多產(chǎn)品的官網(wǎng)都要好了吧？

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

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

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

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

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

做產(chǎn)品官網(wǎng)

比如開頭展示的產(chǎn)品官網(wǎng)，我給了它一個Prompt：

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

第一版效果就已經(jīng)很不錯了：

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

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

最終效果相當nice。

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

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

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

看來專業(yè)的事還得專業(yè)Agent來做

物理實驗3D模型

最近X上生成教育相關的3D模型 網(wǎng)站非常火。

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

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

我的輸入很簡單：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這太爽了，因為以前用Vibe Coding的產(chǎn)品，改個顏色都要在對話框里描述，然后等AI跑一遍。現(xiàn)在終于不用等了。

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

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

3、關鍵設計決策：做著做著發(fā)現(xiàn)需要換主題顏色、換字體這些全局性的東西，正常還是通過對話框改，然后等結果，而且改全局的東西還容易把代碼改崩。

QoderWork現(xiàn)在把配色、間距、圓角、字號這些高頻微調(diào)項直接以可調(diào)參數(shù)暴露出來，拖拽調(diào)整，實時生效，甚至不需要刷新就能看到效果。

還是那句話，不用等。

這三個點加起來，解決了同一個核心痛點：別讓我等，別讓我打字描述，在開發(fā)完成之后，需要的是簡單，快速，精準的去調(diào)整頁面。

不得不說QoderWork跟之前騰訊做的Figma類云端設計工具還是有本質(zhì)的區(qū)別。

騰訊的核心還是在云端協(xié)作的矢量設計上。

QoderWork的定位是原生的AI驅動"設計即代碼"工具：傳統(tǒng)的"純畫圖設計師"和"純寫頁面前端"的界限正在坍塌，設計文件將不再是不可觸碰的黑盒，而是團隊所有人都可以共同維護的視覺資產(chǎn)。

另外QoderWork還內(nèi)置了150多個高品質(zhì)風格參考，有模板的好處是風格對人可控，解決了我一直以來的痛：有審美但做不出來。

極限測試：復刻天花板級網(wǎng)站

為了測試它的極限，我找了一個動效審美都是天花板的網(wǎng)站lusion.co

真的，這絕對是我這輩子見過最炫酷的網(wǎng)站，沒有之一，可以用震撼來形容。

這個網(wǎng)站的交互簡直就像在看好萊塢大片，每一頁翻動都伴隨著極其復雜、絲滑又酷炫的3D變換。

這絕對是極限測試了。我敢說，目前不可能有任何AI能一次性百分百復現(xiàn)這個網(wǎng)站的前端。

1月份的時候，我丟給過Kimi的Agent，它能復刻出大約30%。

但是這次QoderWork生成的，很驚艷，我覺得快到50%了。

可惜的是QoderWork目前沒有視覺能力，lusion.co的錄屏沒法給它看，所以在理解上可能有一定偏差。

另外說下問題，目前QoderWork在處理特別復雜的3D場景和連續(xù)滾動動效時，偶爾會有些卡頓，生成的代碼也不是每次都能一跑就通，有時候需要手動調(diào)一下。

不過這才是第一個版本，這個程度還不錯了。

對了，順便提一句

QoderWork自定義工作臺，除了設計工作臺，還有PPT工作臺、寫作工作臺。

PPT工作臺每一頁演示稿是獨立HTML文件，內(nèi)置各種中文字體，斷網(wǎng)也能渲染。全流程有11個階段，每個階段用戶都能介入，生成的效果，我試了一下，還挺好的。已經(jīng)趕上臧師傅開源的PPT skill了。

寫作工作臺的選中即批注還挺有意思的，可以像審稿一樣圈出某段文字，寫下"改得更正式"、"壓縮到100字以內(nèi)"，AI就能圍繞選中的文本定向修改。

這兩個先mark住，如果大家感興趣的話，后續(xù)可以單獨聊聊。

「最后」

這次嘗試，我覺得我"做不好看"這件事，真的被解決了一大半。

以及我個人覺得，UI和前端確實越來越危險了，不知道UI和前端們怎么看，歡迎評論區(qū)交流。

我這么說不是沒有依據(jù)。特別是現(xiàn)在我做OPC，從我個人的角度來說，如果我自己都能做出這樣的產(chǎn)品官網(wǎng)了，我為什么還要請專業(yè)的UI和前端呢？

因為目前做出來的效果已經(jīng)比市面上很多產(chǎn)品的官網(wǎng)效果要好了。

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

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

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

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

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

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

懂得都懂，真的太痛了。

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

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

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

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

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

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

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

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

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