55萬人圍觀！這款代理意外燃爆了！產(chǎn)品感知力爆表！一張截圖復(fù)刻蘋果官網(wǎng)，一句話生成真運行App，F(xiàn)igma導(dǎo)入調(diào)整細節(jié)，要變天了
原創(chuàng) 精選出品 | 51CTO技術(shù)棧（微信號：blog51cto）
今天凌晨，一款A(yù)gent工具意外出圈了。
一位熱衷 AI 攝影導(dǎo)演的 X 博主 @EHuanglu 分享了他試用一個名叫 HeroUI 的 AI 工具的經(jīng)歷，并放出了自己近日來生成的 6 個精美 App 或網(wǎng)站，精美程度堪比蘋果、迪奧。
“我只用文字 prompt，就在幾分鐘內(nèi)創(chuàng)建了一個完整的項目管理應(yīng)用。”“它可以模仿任意網(wǎng)站界面，只要你提供截圖。”“還能導(dǎo)入 Figma 文件繼續(xù)編輯。”“甚至 prompt 寫不清楚？它會幫你補?！?/p>
圖片
HeroUI，名字一聽就是一個超級能干的 AI UI 設(shè)計師。
這些帖子快速引來了超過 54 萬網(wǎng)友的圍觀，可以說是一起見證了「UI 設(shè)計師消失」的第一步。
雖然聽起來有些夸張，但相信各位體驗之后，也會如同網(wǎng)友一般大為驚嘆。
一、HeroUI 究竟厲害在哪里？
我們先來看 @EHuanglu 的真實流程：
登錄這個網(wǎng)址：heroui.chat。沒錯可以免費使用。
圖片
1.一句話，一個可運行的真·App
“幫我做一個項目管理工具，有任務(wù)面板、日歷視圖和團隊協(xié)作功能?！?/p>
HeroUI 就會自動生成對應(yīng)的界面和交互邏輯，像 Notion + Trello 的結(jié)合體。生成的頁面可以在瀏覽器中直接運行，并不是靜態(tài)圖，而是真實代碼驅(qū)動的產(chǎn)品原型。
來源：https://h23yxt-5173.csb.app/
用 Agent 來生成 App 這個例子已經(jīng)有不少了。然而，目前市面上真正能做到的如此突出的使用效果的，小編認為就這一家。
2.上傳截圖，直接「克隆」網(wǎng)站界面
如果你不知道怎么描述想要的頁面樣式，也可以直接上傳參考圖。比如把 Apple 官網(wǎng)、Notion 首頁截圖上傳，HeroUI 會自動生成結(jié)構(gòu)相似的設(shè)計：
“想復(fù)制誰的設(shè)計？截圖拖進來，它來幫你模仿?！?/p>
用 EHuanglu 的原話來形容：「AI 幾乎 1:1 還原，只用了不到 2 分鐘?！?/p>
3.一鍵增強 Prompt，AI 補全你沒想到的細節(jié)
當然，更多的網(wǎng)友的需求則是——不太會寫 UI 設(shè)計的 prompt，這就是 HeroUI 的厲害之處，現(xiàn)在：
你輸入一句話，HeroUI 會自動加上這些你可能遺漏的元素：
- 頁面布局結(jié)構(gòu)
- 動畫和過渡效果
- 色彩搭配和按鈕樣式
這就像讓 AI 自動“腦補”你的模糊想法，讓初級用戶也能生成高級結(jié)果。
4.導(dǎo)入 Figma，AI 繼續(xù)幫你改
你以為這就完了？當然沒有。
HeroUI 并不是封閉系統(tǒng)，它還可以直接接入 Figma。如果你有設(shè)計師做的初版稿圖，上傳進來后，AI 會自動識別各個元素并繼續(xù)編輯優(yōu)化。
這意味著：
HeroUI 既可以成為設(shè)計師的副駕駛，也可能是創(chuàng)業(yè)者的第一位產(chǎn)品合伙人。
整體上看：
以前，我們需要三人團隊來構(gòu)建一個原型：產(chǎn)品經(jīng)理 + 設(shè)計師 + 前端開發(fā)而現(xiàn)在，一句話 + 一個截圖 + 一個 Prompt 增強器，就能完成 80% 的原型制作。
傳統(tǒng)角色 | AI 新角色 |
設(shè)計師 | Prompt+圖片上傳 |
產(chǎn)品經(jīng)理 | 一句話概述需求 |
前端工程師 | 自動代碼生成 |
這里再給大家一個展示幾個相當酷炫的例子，從科幻感滿滿風(fēng)格的AI初創(chuàng)公司的網(wǎng)站，再到高端奢侈品 Dior 的品牌官網(wǎng)，展現(xiàn)力十足。
二、網(wǎng)友：Prompt is All Your Need
評論區(qū)網(wǎng)友看罷炸鍋了：Prompt 的能量正在指數(shù)級爆發(fā)。
圖片
原來，我們只拿 prompt 寫段落、生成圖片，現(xiàn)在卻能“提示生成整個 App”，甚至用 Prompt 推動品牌上線（“Dior launch”）。
再加上“可以調(diào)用在線數(shù)據(jù)”，也就是聯(lián)網(wǎng)和插件/API 調(diào)用的結(jié)合，這已經(jīng)不是單純的“提示詞”，而是在變成一種新型編程語言、新型產(chǎn)品啟動方式。
圖片
一句話，現(xiàn)在的 Prompt 不只是創(chuàng)意語言，而是正在演化成一種產(chǎn)品構(gòu)建工具。
三、這一次的 Agent，與 Manus 們有何不同？
正如上文所提及的，進入2025以來，市面上越來越多的 Agentic AI 產(chǎn)品問世。AI 可以自主調(diào)用工具完成任務(wù)的能力，正在被眾多創(chuàng)業(yè)者們盯上，開啟了新一輪的創(chuàng)業(yè)浪潮。
雖然說，如今提供類似功能的 Agent 已經(jīng)涌現(xiàn)出了不少優(yōu)秀的產(chǎn)品，比如 Manus、Fellou、Lovart ，甚至 Google 的 Gemini、Anthropic 的 Claude 都在做“一句話生成一個 App” 的功能。
那么 HeroUI 究竟有何不同？ 這里有兩點。
先來看最明顯的一個例子。我們可以對比下 Manus 和 HeroUI 的界面。
圖片
圖片
這兩款的產(chǎn)品界面非常相像。但 Hero UI 更進一步的做到了一點：貼近實際用戶的使用場景，比如：為不太懂如何設(shè)計 Prompt 的用戶提供了“增強/補全 Prompt”的能力，再比如面向生產(chǎn)場景，可以導(dǎo)入 Figma 文件來搞定 UI 原型的產(chǎn)出。
這是一個非常細節(jié)的地方。在實際生產(chǎn)環(huán)境中，用戶是怎樣的需求？能不能達到生產(chǎn)的效果？往往是注定一款產(chǎn)品能否長期走下去的動力。
現(xiàn)在不少 AI 產(chǎn)品發(fā)布還沉迷在酷炫的 Demo 功能演示上，而 HeroUI 似乎正在從實際使用場景中的訴求靠攏。
第二點，對比其他產(chǎn)品，在小編看來，Hero UI 展現(xiàn)出了前所未有的產(chǎn)品 sense。
之前打造 AI 產(chǎn)品的一個邏輯是，以 AI 代碼生成的能力為基礎(chǔ)，進而衍生出各種用途的 AI 工具產(chǎn)品，但很明顯，這條思路雖然可行，但造出來的工具實在猶如雞肋，比如 Devin，實際體驗起來，讓人有種如芒刺背的感覺，缺少一款真正的產(chǎn)品該具備的“懂你”的靈魂。
HeroUI 的可怕之處在于，它不只是個代碼生成器，而是具備一定“產(chǎn)品感知力”的 Agent。
- 可以根據(jù) prompt 理解“項目管理工具”是什么樣子
- 能自動加動畫、風(fēng)格
- 接入 Figma 實現(xiàn) AI + 人類協(xié)作
從某種程度上說，HeroUI 這類工具，似乎正在模糊「設(shè)計師」「開發(fā)者」「產(chǎn)品經(jīng)理」之間的邊界。
甚至，你或許不是其中任何一種身份，但只要你懂產(chǎn)品想法 + 會寫 Prompt，你就能生成一個界面+邏輯都完整的產(chǎn)品雛形。
而且，如果你表達不出來想法或沒有時間，可以用“圖像上傳 + Prompt Enhancer + Figma 導(dǎo)入”的方式，使得生成結(jié)果更精細、更自動化。
相較之下，Manus 則似乎顯得冷冰冰的樣子，同樣是生成一個項目管理的App，不僅耗時長，而且最后也只是給到了一個項目包，讓我部署運行看看。
圖片
四、寫在最后
通過 HeroUI，小編越來越感到一種強烈的信號：Agent 產(chǎn)品未來將會呈現(xiàn)出“職業(yè)化”的特質(zhì)，它或許通用能力很強，但其本身的“職業(yè)”屬性能否真正 hold 用戶的實際使用場景，才是未來持續(xù)成功的關(guān)鍵。
正如 OpenAI 的 Sam Altman 在一次采訪中所言，目前他對現(xiàn)在的AI產(chǎn)品，包括 ChatGPT 的 UI 并不滿意。甚至上周還宣布聯(lián)手前 Apple 首席產(chǎn)品設(shè)計官 Simo，揚言要打造下一代消費級 AI 產(chǎn)品。
從這個層面上看，AI 原生應(yīng)用、Agent、又或者說 Agentic AI 產(chǎn)品，真的只是剛剛開始，各位破局的創(chuàng)新機會，可謂多多！
期待以后更多優(yōu)秀的 AI 產(chǎn)品問世！
最后，想體驗一把 HeroUI 的朋友，可以去官網(wǎng)體驗一番。
