零基礎AI編程實戰復盤！如何僅用7天做出2個網站？

5 月底臨時需要在團隊內做一場設計師 x AI Coding 的主題分享，因時間緊急（完全利用工作外時間），我決定放棄傳統 PPT 的形式，從零開始利用 AI 工具鏈構建分享網站。

本文是這次 AI 協同實驗的復盤，同時分享我對當前 Agent Coding 工具能力邊界、Agent 交互、協作模式變化的新思考。

往期AI編程干貨：

主力工具：V0（制作分享網站）、Flowith Neo（制作 AI Coding 知識庫）、Manus（前期驚艷，最終任務執行失?。?、Gemini（內容策劃）。

先來看看最終成果：

設計師 x AI Coding 的主題分享網站： https://kzmkbx8qajeeywvv0thi.lite.vusercontent.net/

面向設計師的 AI Coding 知識庫： https://flo.host/mJIyFLi/

一、Agent 實踐復盤 —— 7天，2個網站，1場AI協同實驗

這次實驗我主要使用了大熱的 Flowith Neo 和 Manus 這兩個通用 Agent，感受到了 Agent 對 Coding 效率的極度提升，讓我有更多時間聚焦內容本身，而非局限于分享形式（例如過去的 PPT 美化）上。不過在 Agent 對垂直領域優化做的還不夠成熟的情況下，過程中也走了些彎路。

先說說 Agent 的特點

Agent 接入了 LLM、生圖、生視頻等大模型，能理解復雜、長期目標，并且能自主規劃、調用多種工具來達成目標的，很適合這種極短時間內需要交付的非精確任務。

對比我在上個項目中使用的 Cursor 這樣的 IDE 產品，Agent 給我帶來最大的便捷是可以自動完成數據存儲、網站部署上線等一系列事情，網站內容本身成為創作核心，人類參與制作、執行的時間大幅降低。

在我的整體使用過程中，當下的通用 Agent 更適合 0-1 階段。1-100 的階段還需垂直 Coding 工具接管。和垂直 Coding 工具對比，Agent 的優劣勢會更加具體：

網站 Coding 全過程

① Agent 的 “驚艷開局”與“脆弱的 1-N”

這里我就要展開講講我和 Agent 的協同過程了，好方便大家理解前面的結論是怎么得來的。

我將同一段 Prompt 輸入給了 Flowith、Manus，并通過輸入簡單的設計要求、參考圖、參考網址等方式簡單調教了幾版風格：

起初我對 Manus 生成的效果（左上圖 1）非常滿意，它在理解圖片、鏈接參考上的功能支持比 Flowith 更佳，生成的網頁設計風格、動效都高 Flowith 一籌。在"0 到 1"階段，Agent 快速將模糊想法具象化的能力已經讓我非常驚訝了。

然而，就當我試圖從 1 開始進行深度迭代時，Manus 的脆弱性便開始暴露。

對邊界失敗場景應對不足：

在我嘗試持續修改時，Manus 很快提示上下文達到上限。并反復彈出付費頁面，顯示會員擁有更高上下文長度，

然而即便在我付費 20 多刀后，限制依然存在。這種在關鍵付費節點上的履約失敗，讓我對其可靠性徹底失去信任。

核心交付物質量不足。 抱著“不能白付費”的心態，我嘗試讓 Manus 導出源碼，結果交付的代碼缺失了一半的樣式。

至于缺失的代碼，我確實沒有打字重新描述的動力。對于設計師來說，使用詳細 Prompt 定義設計內容還不如自己設計來的快，通過文字詳細定義設計規范總有些不太對，這違背了設計師視覺感受優先而非文字優先的直覺。

我敢打賭 90%的設計師都不愿寫這樣的 Prompt

② 垂類 Coding 工具來救火

就在我以為 AI 協同實驗即將失敗時，我將 Manus 產出的殘缺代碼和需求交給了垂類 Coding 工具 V0。結果讓我非常驚喜：V0 不僅迅速復刻并補全了所有樣式和動畫，還提供了結構清晰、可供二次開發的完整代碼。

相比 Manus 的不確定性，V0 給我的“安全感”非常強：它在垂類產品中審美在線、版本可隨時回溯、網站無需部署可直接預覽，項目支持無限修改。 終于...我的分享材料有著落了。

③ 知識庫生成，Agent 的舒適區

區別于分享網站的坎坷經歷，「AI Coding 知識庫」的制作相對順利。這次，我使用 Flowith 完成任務，并找到了當下 Agent 的真正優勢所在：處理以復雜內容調研和邏輯為核心，而非以視覺調優、持續迭代的任務。

訪問地址 (PC 體驗更佳)： https://flo.host/mJIyFLi/

展示了從初版到終版的演進，略去部分對話調整

③ Flowith 的核心優勢體現在：

強大的信息整合能力： 得益于 Flowith Neo 無限制的長文本分析整合，出色地完成“調研-總結報告-報告轉化為結構化網頁”的任務，完整度遠超預期。（單這一點，垂類 Coding 工具是做不了的）

較高的指令遵循度： 在后續持續要求內容和結構調整時，能準確執行指令，體驗流暢。

較高的執行效率與性價比： 對于復雜的信息處理任務，運行速度快，積分消耗相對合理。

但它同樣暴露了 Agent 在“迭代”上的核心短板：

具體表現為：Flowith 會過早判定任務完成而終止對話；同時它無法提供源代碼。這兩個限制，導致我無法對生成的初版網頁進行持續的精細化修改。

以 V0 為代表的垂類工具，允許用戶直接對代碼進行編輯，并支持下載代碼進入 Cursor 等專業環境再次編輯，能夠滿足 AI 代理快速完成 0 到 1，人來高效掌控 1 到 N 的開放體驗。

而以 Flowith 和 Manus 為代表的 Agent，目前則更像一個“封閉系統”，雖然“0 到 1”可能更自動化，但其后續迭代的“天花板”卻很低。這正是當前我對 Agent 模式最不滿意的地方。

小結：Agent Coding 的正確打開方式

綜合我構建兩個網站的經驗，當前 Agent Coding 的核心價值在于極速完成從 0 到 1 的構建，尤其適合以下兩類場景：

MVP 與概念驗證：Agent 能將一個模糊的產品或設計構想實現，縮短到幾小時甚至幾十分鐘內，變成一個功能可用、可交互的 MVP。這極大地降低了創新和試錯的成本。過去需要一個團隊數周才能完成的工作，現在由一人一 AI 即可實現。

內容驅動型網站的生成。 對于知識庫、Landing Page、活動頁這類以信息展示為核心、結構相對標準化的網站，使用 Agent 可以發揮極大價值。創作者可以跳過調研、資料整理、信息設計階段，直接完成了初步想法 - 拿到結果的快速跨越。

當然，由于通用 Agent 對垂直領域的打磨不足，以及‘持續編輯能力’這個核心癥結尚未解決，它在以下場景中表現得力不從心：

需要精細化視覺調優的生產項目。 正如我的經歷，試圖用文字指令去對齊高度定制化的視覺細節，效率低下且違背設計師直覺。在這方面，V0 這類垂類工具優勢明顯。

需要長期迭代和維護的核心產品。Agent“一次性交付”和“封閉生態”（如無法提供源碼）的特性，使其幾乎無法被納入需要多人協作、持續更新的嚴肅項目工作流中。

對穩定性和可靠性要求極高的任務。Manus 的履約失敗就是一個警鐘，現階段我們還無法將一個有明確 deadline 的關鍵任務，毫無保留地完全托付給 Agent。

二、重新思考 —— Agent Coding還有哪些改進空間？

開始思考之前，我嘗試思考了兩個問題：

從現有用戶體驗角度出發，當下 AI Coding 有哪些痛點是值得被改善的？

相比 V0、Lovable、Bolt 等垂直 Coding 工具直接競爭，Agent Coding 工具如何才能發揮更大優勢？

如設計領域的 Agent Lovart，我想未來可能會出現 Coding 領域的 Agent 產品來解決通用 Agent 當下無暇顧及的問題。基于這個假設我想到了幾點迭代方向：

為 Agent 注入設計品味，彌補創造力短板

在前面的實踐中，我們能感受到不同產品間存在明顯的‘審美差異’。例如，V0、Manus 支持人為輸入參考圖、參考網站，甚至默認輸出的效果都還不錯；而 Flowith 如果不經過的 Prompt 調教，其產出物更像是“功能實現”，而非“設計作品”。

Flowith 最初輸出的網頁效果

大模型本身并不會設計，它本質上是在模仿其訓練語料中的代碼與視覺風格。 它的“品味”，源自 Github 海量的開源項目和網絡上無數的網頁示例。

除了等待大模型自身的進化，Coding 工具也可以主動為 AI 注入審美：

通過系統級提示進行預期管理：Agent 可以通過系統級的指令約束大模型生成，通過預設 AI 的角色和行為約束輸出物下限。

通過綁定組件庫進行審美兜底：如 V0 集成了 Tailwind CSS 和 Shadcn UI，AI 的任務不是自由地創造一個按鈕，而是被強制要求去調用一個本身就設計得很好的按鈕組件。這等于借助一套成熟的設計系統來兜底，巧妙地避免了模型自由發揮導致的審美崩壞。

通過“多模態理解”實現精準還原

符合用戶直覺的體驗是：用戶上傳一張喜歡的網站截圖、鏈接、Figma 設計稿 - Agent 分析其設計語言（色彩、字體、布局、圓角等） - 自動生成結構化的設計參數（Design Tokens） - 調用模型去精準還原或模仿其風格。這種方式能將用戶從繁瑣的文字描述中解放出來，讓 AI 真正成為視覺意圖的延伸。

Runway 可以參考用戶上傳的草稿進行構圖

也許有一天 Coding Agent 也可以做到，這是更符合用戶直覺的體驗

那么，未來的基座大模型會強大到讓這些“微調”失去意義嗎？我認為大概率不會。

基座大模型就像 iPhone 相機，它的目標是拍出讓大多數人滿意的“好照片”。而 AI Agent 或垂類 Coding 工具，則更像是為這臺相機配備的“專業鏡頭與風格濾鏡”。 它們讓創作者有機會超越“標準美”，去實現更具個性的藝術表達，讓你從“記錄”走向“創作”。

主打生成更具設計品味代碼的 Coding 產品 Variant 已經開啟測試邀請，申請地址: https://www.variant.ai/

Chat 模式外，擴展垂類場景交互

當前多數 AI 產品還采取一個聊天框解決所有問題的范式，在處理專業、精細的垂直任務時，顯得低效且違背直覺。 這種割裂感體現在各種需要深度介入的場景中：

例如 Manus 可以生成需求文檔，但我無法直接在其中直接修改，必須經歷“下載到本地 → 用Word編輯 → 再重新上傳”的繁瑣步驟。

例如網站設計優化時，當需要進行像素級微調時，用語言去精確描述，其效率遠低于所見即所得的視覺操作。

一些 Coding 工具已經開始向該方向優化，V0 上周更新的 Design Mode，則允許用戶在預覽窗口中，像使用 Figma 等設計軟件一樣，通過圖形化的控件去修改組件的字體、顏色和間距等細節。

另外 Lovable、V0 都集成了專業后端服務，讓用戶可以直接在一個成熟、強大的專業界面中管理自己的數據。

V0 集成了后端服務、數據庫、數據緩存等基礎設施

Agent 的未來，也不應只是一個聊天框，而應是一個能根據需要，調用各領域專業工具臺的中樞。

拓展能力邊界，從編碼執行到全鏈路助理

雖然在產品打磨好以上兩點體驗之前說這個話題顯得有些為時尚早，但這確實是 Agent 產品存在的意義所在 —— 連接產品與市場、打通從“想法”到“增長”的全鏈路。

上游：市場調研到產品定義

目前，領先的通用 Agent 已經初步具備了處理“上游”任務的能力。但當下，這些任務往往是孤立的。Agent 生成的分析報告，還需要我們手動消化，再轉化為對編碼任務的具體要求。

想象一下未來的工作流：

用戶下達一個模糊的想法。Agent 首先自主完成市場掃描和競品分析，然后與用戶一同進行頭腦風暴，將討論結果固化為一份結構化的 PRD。最關鍵的是，它接下來的編碼工作，會嚴格依據這份自己參與制定的戰略藍圖，比如優先開發哪個核心功能，采用什么樣的技術棧能更好地服務目標用戶等。

這時的 Agent，不再是被動響應指令生成代碼，而是帶有充分商業理解和產品思考去生成代碼。

下游：從被動交付到主動增長

在充分發揮前期調研、信息整合的優勢后，網頁產品制作完成只是一個開始，后續的工作如數據跟蹤 - 主動優化、運營推廣、SEO 優化等場景都有 Agent 可發揮的空間。

再想象一下：

網頁上線后 Agent 持續監控數據，當某些頁面核心指標異?；蛭催_平均水平時，Agent 會給出進一步分析及優化方案。在你發布產品新功能后，Agent 可以根據優化點自動撰寫推廣文案甚至自動化廣告投放與社媒運營...

AI 驅動網址內容優化工具，根據實時數據調整頁面細節并創建 SEO 友好的內容

Agent 領域的未來，也許不是寫出更好、更快的代碼，而是將“寫代碼”這個原本孤立的技術環節，深度融入到“定義產品、創造產品、運營產品”的整個商業閉環之中。

結語 —— Coding 和設計領域正在迎來范式轉移

即使當下通用 Agent 還存在種種不成熟，也面臨“只能做玩具”的質疑和挑戰。但如果你體驗過這種效率的直線提升，你就會感受到新的協作模式正在悄然形成，我們正身處一個新協作模式的開端。

這種模式下，人類的價值回歸到了戰略思考、需求洞察和創造性定義上。AI 則成為了最高效的執行引擎，負責將定義好的 What，轉化為最終的 How。

在這場變革中，單純的執行技能正被快速標準化。無論是繪制標準化的 UI 組件，還是編寫模板化的功能代碼，AI 的效率都將遠超人類。這也不可避免地導致了專業邊界的模糊化：懂需求的設計師通過 Agent 涉足了實現，而開發者也更多地參與到產品的前期構思與快速驗證中。

傳統的、線性的協作模式正在瓦解，取而代之的，是創作者這一角色的崛起 —— 善于思考，洞察本質，以AI為杠桿，將想法高效轉化為現實。

最后，感興趣的朋友歡迎訪問我在這場協同實驗中制作的網站

我在團隊內部進行「設計師 x AI Coding」主題分享的網站： https://kzmkbx8qajeeywvv0thi.lite.net/

如果你是不懂代碼的設計師、產品經理，這個面向小白群體的 AI Coding 知識庫值得一看： https://flo.host

另外給大家推薦 V0 官方推特評論區，有很多網友腦洞大開制作的有趣案例： https://x.com/v0/status/

如果你對小白 AI Coding 領域有什么想要了解的，歡迎評論、后臺留言～

如果你覺得本文對你有所幫助，歡迎幫忙轉發，非常感謝！