大家好，我是袋鼠帝

作為一名后端程序員，我略懂前端，但是對(duì)于UI設(shè)計(jì)是一竅不通。

還記得以前上班的時(shí)候，公司大部分UI設(shè)計(jì)都是妹子，我連Figma都沒(méi)打開(kāi)過(guò)。

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

我能分辨什么樣的頁(yè)面是高級(jí)的、漂亮的，但我就是很難做出那種高級(jí)感、帶交互動(dòng)效的頁(yè)面。這種感覺(jué)很難受

本來(lái)我還想去學(xué)一下UI設(shè)計(jì)和Figma的，但一直沒(méi)時(shí)間。。

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

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

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

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

整個(gè)頁(yè)面的設(shè)計(jì)就很舒服，然后各種動(dòng)效，用戶可以交互，效果真是很棒。關(guān)鍵是，這是一個(gè)不會(huì)UI設(shè)計(jì)的后端程序員做出來(lái)的（正是在下）。

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

不賣(mài)關(guān)子，是QoderWork的AI Native設(shè)計(jì)工作臺(tái)（Design Desk）幫忙做的，簡(jiǎn)單來(lái)說(shuō)，它是一個(gè)設(shè)計(jì)Agent。

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

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

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

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

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

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

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

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

最終效果相當(dāng)nice。

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

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

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

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

物理實(shí)驗(yàn)3D模型

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

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

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

我的輸入很簡(jiǎn)單：

幫我設(shè)計(jì)一個(gè)用于高中教學(xué)互動(dòng)的3D交互實(shí)驗(yàn)室的科學(xué)App，重點(diǎn)是3D模型可以互動(dòng)，能根據(jù)鼠標(biāo)展示不同角度，然后里面可以展示一些高中物理的電磁學(xué)、原子物理部分。

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

然后它做了一件讓我覺(jué)得蠻聰明的事，沒(méi)有直接開(kāi)始干活，是先追問(wèn)了幾個(gè)問(wèn)題，幫我深挖更具體的需求。

問(wèn)完之后也沒(méi)有胡亂開(kāi)始寫(xiě)代碼，是生成了一份設(shè)計(jì)計(jì)劃讓我確認(rèn)。

這份計(jì)劃包含要交付的產(chǎn)物、技術(shù)方案確認(rèn)、頁(yè)面結(jié)構(gòu)、交互設(shè)計(jì)以及風(fēng)險(xiǎn)評(píng)估。還挺詳細(xì)的。

這個(gè)流程我覺(jué)得是對(duì)的。先對(duì)齊、再計(jì)劃、最后執(zhí)行。

方向?qū)R在前，執(zhí)行在后，這樣一次命中率就高很多，不用反復(fù)重來(lái)。也是讓Agent生成質(zhì)量更穩(wěn)的關(guān)鍵。

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

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

QoderWork則可以直出前端框架工程文件，這對(duì)于一個(gè)項(xiàng)目的維護(hù)和迭代來(lái)說(shuō)很重要。

我讓我的前端女朋友點(diǎn)開(kāi)了幾個(gè)文件看了一下，她的評(píng)價(jià)是規(guī)范性不錯(cuò)，確實(shí)符合大部分前端工程師的編寫(xiě)習(xí)慣。

所以我覺(jué)得QoderWork的design desk對(duì)于不懂開(kāi)發(fā)的人來(lái)說(shuō)，也很友好。

不需要你懂一些技術(shù)術(shù)語(yǔ)，它會(huì)幫你挖需求、出計(jì)劃。門(mén)檻比我預(yù)期的低很多。

當(dāng)然，它只是拉高了所有人在做UI設(shè)計(jì)、前端的下限，對(duì)于專業(yè)的UI設(shè)計(jì)來(lái)說(shuō)，他們用Design Desk的上限肯定會(huì)更高。

然后，在整個(gè)體驗(yàn)中，有三個(gè)點(diǎn)是讓我覺(jué)得效率提升最明顯的：

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

這太爽了，因?yàn)橐郧坝肰ibe Coding的產(chǎn)品，改個(gè)顏色都要在對(duì)話框里描述，然后等AI跑一遍。現(xiàn)在終于不用等了。

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

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

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

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

還是那句話，不用等。

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

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

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

QoderWork的定位是原生的AI驅(qū)動(dòng)"設(shè)計(jì)即代碼"工具：傳統(tǒng)的"純畫(huà)圖設(shè)計(jì)師"和"純寫(xiě)頁(yè)面前端"的界限正在坍塌，設(shè)計(jì)文件將不再是不可觸碰的黑盒，而是團(tuán)隊(duì)所有人都可以共同維護(hù)的視覺(jué)資產(chǎn)。

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

極限測(cè)試：復(fù)刻天花板級(jí)網(wǎng)站

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

真的，這絕對(duì)是我這輩子見(jiàn)過(guò)最炫酷的網(wǎng)站，沒(méi)有之一，可以用震撼來(lái)形容。

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

這絕對(duì)是極限測(cè)試了。我敢說(shuō)，目前不可能有任何AI能一次性百分百?gòu)?fù)現(xiàn)這個(gè)網(wǎng)站的前端。

1月份的時(shí)候，我丟給過(guò)Kimi的Agent，它能復(fù)刻出大約30%。

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

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

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

不過(guò)這才是第一個(gè)版本，這個(gè)程度還不錯(cuò)了。

對(duì)了，順便提一句

QoderWork自定義工作臺(tái)，除了設(shè)計(jì)工作臺(tái)，還有PPT工作臺(tái)、寫(xiě)作工作臺(tái)。

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

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

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

「最后」

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

以及我個(gè)人覺(jué)得，UI和前端確實(shí)越來(lái)越危險(xiǎn)了，不知道UI和前端們?cè)趺纯矗瑲g迎評(píng)論區(qū)交流。

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

因?yàn)槟壳白龀鰜?lái)的效果已經(jīng)比市面上很多產(chǎn)品的官網(wǎng)效果要好了。

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

我當(dāng)時(shí)給出的破局辦法有兩種：

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

2. 把自己變成更稀缺的人才：當(dāng)一個(gè)人既能又能的時(shí)候，它的稀缺性是成指數(shù)上升的。比如一個(gè)人，即懂AI，又懂技術(shù)，又懂營(yíng)銷(xiāo)，有網(wǎng)感，還會(huì)寫(xiě)文章（沒(méi)錯(cuò)，正是在下）。這樣的人是非常稀缺的。可以說(shuō)你每加一項(xiàng)技能點(diǎn)，你的競(jìng)爭(zhēng)對(duì)手就會(huì)少非常多，你就越稀缺，越有價(jià)值。

這也是我為什么一直沒(méi)有找到我公眾號(hào)的技術(shù)編輯的原因--因?yàn)檫m合幫我做公眾號(hào)內(nèi)容的人太少太少了。

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

懂得都懂，真的太痛了。

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

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

最后，希望評(píng)論區(qū)不要再說(shuō)我販賣(mài)焦慮了。因?yàn)锳I的確發(fā)展太快了，就連我自己也非常焦慮。

但焦慮是正常的，關(guān)鍵是看你怎么對(duì)待它--是采取行動(dòng)，還是放任不管。都在于你自己。

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

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

如果覺(jué)得不錯(cuò)，隨手點(diǎn)個(gè)贊、在看、轉(zhuǎn)發(fā)三連吧~

如果想第一時(shí)間收到推送，也可以給我個(gè)星標(biāo)?

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