大家好，我是冷逸。

前兩天刷到一條消息，胡彥斌靠Vibe Coding給它的粉絲們做了一個APP，巡演地圖、打卡系統、動態廣場、成長體系一應俱全。

這個坐姿，一看就是老Vibe Coder了。

我當時看到這張照片，腦子里只有一個念頭：完了，以后連明星都能寫代碼了，Coding的門檻這是被完全擊穿了。

然后昨天，又刷到一條消息：Andrej Karpathy宣布加入Anthropic。

Karpathy是誰？OpenAI創始成員、前特斯拉AI總監。2025年初，他造了一個詞叫Vibe Coding，大意是“順應感覺，讓AI寫代碼，甚至忘記代碼的存在”。當時大家覺得這人在吹牛，但一年過去，沒人笑了。

不過Vibe Coding跑了一年，大家慢慢發現一件事：用AI生成的代碼能跑通不稀奇，但做出來的東西丑不丑、能不能用，這很考驗Vibe Coder的審美和對真實業務的理解。

但你讓一個沒學過設計的人自己先想好頁面長什么樣——對不起，這比讓他寫代碼還難。

你們懂那種感覺嗎？就是你知道它丑，但你不知道怎么讓它不丑。

恰好，就在胡彥斌搞出APP的同一天，阿里QoderWork上線了「設計工作臺」，定位很直白——說句話就能做設計。你對著它描述想要的界面，它在畫布上給你生成可運行、可編輯、可交付的設計產物。

如果說Vibe Coding解決的是“沒有程序員也能寫代碼的問題”，那QoderWork想解決的就是它前面的那一步——沒有設計師也能做設計。

這兩個東西拼在一起，才算是把普通人做產品的整個鏈路給合上了。

那它到底靠不靠譜？是真的能打，還是又一個demo很美好、用起來想摔鍵盤的東西？我上手跑了一遍。

一手實測

0）前置準備

體驗前，先簡單設置一下。在Chat框左下角，選擇「設計」模式。

包括下面的PPT和寫作模式，也是本次一同發布的新貨，大家感興趣可以體驗一下，詳細見：

然后選擇參考風格，QoderWork提供了161種風格。

比較推薦的有：

• Apple，看名字就知道，非常適合做科技產品網站，極致的留白+克制的層級。

• Figma，如果你想要原生的Web圖形控制和產品色彩，這個風格首選。

• Github，極致的Markdown風格，程序員最愛。

• Notion，文檔式效率工具風格。

• Bold，深色技術產品，做一些信息圖或大字報很有用。

• Claude，Anthropic經典的暖橙色組合，極簡主義。

• Airbnb，特別適合市場營銷。

• Carbon，企業后臺、B端產品首選。

如果拿不準，勾選“自動選擇參考風格”也行，但主動指定出來的效果更可控。

然后指定組件庫，QoderWork預設了三個：

• shadcn/ui，風格比較偏現代極簡，獨立開發者會比較喜愛。

• Spark Design，阿里云的風格包。選這個，做出來的界面視覺和阿里的產品一致。

• Ant Design，螞蟻推出的企業UI資源包，風格偏穩重，適合做正經的B端產品。

設置完進入正式的設計環節。

QoderWork的工作邏輯是一套流水線：自然語言描述需求→AI追問對齊意圖（Questions）→生成設計計劃供確認（Design Plan）→在畫布上生成高保真設計→畫筆框選迭代→參數微調（Nudge）→交付工程文件。

全程不需要打開Figma，也不需要改代碼，用自然語言交互就行。

1）Case1：大明PPT網站

前幾天，我開源了一個項目「」，大家覺得Multi-Agent太復雜，不太好搞。

這次，我想把它做成網站。

輸入開發需求：

根據這個開源項目：https://github.com/woyin2024/lengyi-ppt-agent-team，為所有被PPT折磨的人設計一個AI驅動的PPT自動生成網站，產品名是“大明PPT”，slogan是"朕要做PPT，六部聽旨"。

頁面要求：首屏是圣旨卷軸展開動畫，中間一道輸入框，用戶像擬旨一樣寫下主題（如"2026年新能源汽車出海戰略"），旁邊可選頁數范圍和風格偏好（TED演講風/咨詢報告風/路演融資風）。輸入后頁面進入"六部議事"流程可視化——六個Agent角色（內閣、錦衣衛、東廠、翰林院、工部、織造局）以動態卡片流依次點亮，實時展示當前進度：錦衣衛正在全網搜集情報、東廠正在交叉核查數據、翰林院正在提煉大綱……用戶只能在兩個"御批"節點介入——研究報告終版和最終PPT成品，其余全程旁觀看戲。最終交付頁提供HTML預覽、一鍵下載和分享鏈接，附帶"再擬一旨"按鈕回到首頁。

整體風格：大明宮廷+現代極簡混搭。不是古風貼圖那種粗淺的"中國風"，而是把朱墻金瓦的莊嚴感翻譯成現代UI語言——大量留白、克制裝飾、權威但不壓迫。視覺錨點是"御批朱砂"——關鍵按鈕和確認動作用朱紅色，其余大面積用象牙宣紙底+墨色文字。圣旨、印章、卷云紋只作為微交互元素出現（如loading動畫是卷軸徐徐展開、完成提示是一方玉璽蓋下）。

配色：宣紙象牙白（）+ 御批朱砂紅（）+ 墨色（）+ 金絲楠木暖褐（，僅用于分隔線和邊框點綴）。

字體：中文標題用思源宋體（對標詔書題頭），正文用思源黑體（閱讀優先），數字和英文用JetBrains Mono（保持技術工具的專業感）。

QoderWork并沒有馬上開干，而是先與我對齊意圖，它提了2個問讓我選。

這個機制你可能比較熟了，它叫Ask user questions，信息不夠的時候AI需要先追問，做問題澄清，不自己瞎猜瞎干。

我回答問題后，它出了一份詳細的Design Plan，把布局、風格、資源選擇、交互設計都列了出來，讓我確認后再動手。

沒過多久，一套完整的設計產物就做好了。

這套設計產物的整個體驗過程，我給大家錄了個屏，你們可以感受下。

從演示效果來看，我覺得確實有點“大明風華”那個味道了。

對于這份設計產物，想修改也很簡單：可以用畫筆直接圈出想要調整的地方，用自然語言描述需求即可。

也可以點選編輯，顏色、間距、布局、描邊這些，都可以在Nudge參數面板里直接微調，實時生效。

這兩套，你可以組合搭配：畫筆解決“改哪里”，面板解決“改什么參數”。它比你單純打字描述意圖要精準得多。

最后，所有的設計物都放在了你的本地文件夾，打開就能用。

這還沒完，這整套設計產物，只需要點一下，就可以提交到Qoder這類IDE里繼續開發。

這對于開發者來說，是真的省事。它產出的從來都不是圖片，而是可以直接運行的代碼，而且是可以與其他編程工具無縫連接的前端代碼。

2）Case2：小區閑置交換H5

前面的Case，我需求給得很詳細。第二個Case，我故意給了一個模糊需求——為小區業主設計閑置交換工具。

設計任務：

為小區業主設計一個鄰里閑置交換工具，產品名“樓下的”，slogan是"與其掛閑魚被砍價，不如換給樓下鄰居"。

這次，QoderWork提了三個問題幫我細化。

我選擇做移動端H5，核心包含首頁物品列表、詳情頁、發布頁三個主屏，視覺走溫暖親切路線。

最終生成的暖色調輕量化卡片設計，確實很適合這種社區類H5。

可以看到，需求模糊也沒有關系，它會主動幫你挖清楚。

3）Case3：食材管理小工具

我又做了一個專門給“記不住冰箱里有什么”的人設計的小工具。

設計任務：

為記不住冰箱里有什么的人設計一個食材管理工具，產品名是“快爛了”，slogan是"別讓西蘭花死在冷藏室第三層"。

頁面要求：首頁是按保質期倒計時的食材卡片流，顏色從綠漸變到紅——今天必須吃的在頂部標紅閃爍。支持快速錄入（打字或語音："買了雞蛋一盒、菠菜一把"），自動估算保質期。底部有一個"今晚吃什么"按鈕，根據現有食材推薦菜譜，優先消耗快過期的。

整體風格像廚房計時器混搭庫存看板，配色冰箱白+番茄紅+保鮮綠。

給大家看下效果。

這個工具我自己已經用起來了。因為我就是那種老把東西放冰箱放到過期的人。

4）Case4：蘋果風格產品網站

最后一個Case，我指定Apple風格，給一款名為Aura的AI藍牙耳機做產品官網。

設計任務：

給AI藍牙耳機Aura設計一個產品網頁。

這是一款來自「沃垠科技」生產的AI藍牙耳機，產品叫Aura，融合頂尖降噪技術與智能語音助手，帶來清晰純凈的音質體驗。輕巧貼耳、全天舒適佩戴，讓音樂、通話和AI助手隨時隨地觸手可及。Aura，讓每一次聆聽都更聰明、更自由。

設計要求：

1、網頁的整體風格和布局，參考蘋果網站風格。

2、主Hero區域放一個產品宣傳視頻，用附件的視頻素材。

3、整體高級審美，大師級作品，頂級前端網頁設計。

最終輸出的效果確實有蘋果官網那個味道了——極簡留白、克制的色彩、精致的排版。

作為一個沒有任何UI設計能力的Vibe Coding開發者（正是在下），我是真的沒想到自己能產出這種品質的東西。

過去這一年，各種AI Coding工具已經把“能不能跑通”卷到了很高的水位。但跑通之后呢？一個灰底黑字、毫無排版的頁面，跟一個能拿出去見人的產品，中間差的從來不是代碼能力，是設計能力。

而設計這個東西，以前是有門檻的。你得會Figma，得懂排版、配色、信息層級。這些東西不是看兩篇文章就能學會的，是要練的。

QoderWork做的事其實就是把這道門檻打掉了。它沒有去跟Figma搶飯碗，也不是要替代設計師，而是讓“做出好看的東西”這件事不再需要你會用專門的工具。

你只需要知道你想要的調性是什么，剩下的交給它。

當然，不瞞你們說，這東西確實還有局限。復雜3D場景的還原度、一些極端動效的流暢性以及與最終實際產物的結合度，都還有提升空間。但說實話，第一個版本能做到這個程度，我覺得已經超出預期了。

我寫這篇文章的時候一直在想一個問題：當一個毫無設計基礎的人，能在十幾分鐘內做出審美在線的產品官網，這件事意味著什么？

不是要販賣焦慮，我覺得它意味著另外一件事——創作的人群正在以前所未有的速度擴大。

以前你得先學會一門技能，才能把一個想法變成看得見的東西。現在這個鏈條被壓縮到了極致。你想做的東西離你做出來，只差了你能不能清楚地表達出來。

這感覺怎么說呢，有點像小時候第一次拿到畫筆的感覺。你不需要知道顏料怎么調的、透視怎么算的，你只需要知道你想畫什么，然后畫就是了。

而且，它還直接把印刷環節也給接上了。你設計的產物，直接拖進編程工具里馬上就可以進行開發。

說實話，我現在有點上頭。不是因為QoderWork有多厲害，而是我發現自己突然能做很多以前想都不敢想的東西了。那些在腦子里放了很久的想法，慢慢有了樣子。

這大概就是AI最打動我的地方。