我在分享一些海外的模型和編碼產品的時候，老是有朋友在評論區問“我們又用不上，老發這些干嘛”。

雖然有些不禮貌，但是也可以理解大家的想法，由于模型或者其他原因國內現在還沒有一個類似 V0、Bolt 或者 Lovable 的功能完善的 Vibe Coding 產品。

沒想到居然是美團補上了這個缺口，他們推出了一款零代碼應用生成工具 NoCode（https://nocode.cn/）。

而且我這幾天試了一下，給我驚到了，沒想到意外的好。

這玩意不是只能寫展示類的網頁，相當復雜的多頁面完整產品他也能一次性搞定，基本不需要我打幾次字，一直點修復就行。

先來看一下產品能力：

• 支持通過提示詞提出要求后生成網頁應用
• 支持 AI 自動優化和發現問題，不需要詳細描述自己會分析 bug 原因
• 支持對提示詞詞進行優化，幫你梳理需求
• 支持快速將生成的網頁服務部署上線，還有專屬域名（早來可以占上）
• 支持 Dev Mode 模式，用類似 Cursor 的在線工具編寫代碼
• 支持 DateBase，讓你的用 AI 生成的產品不再是玩具，可以存儲、管理巨量信息

藏師傅基礎提示詞測試

我先是試了一下藏師傅的展示類提示詞，這個對于 NoCode 來說是小 Case 了。

還是那個特斯拉財報文檔，還是熟悉的提示詞，NoCode 完成的不錯，因為模型本身已經可以做的很好了，所以這個屬于基本能力測試。

整體該有的動效都有，而且信息相對豐富，尤其是圖表的表現很好，圖例、主題色都用上了，也沒有一些其他產品經常出現的圖表顯示問題。

幫我將這個 Claude 4 發布文檔生成網頁，先分析文檔規劃每個部分需要填充的內容，然后再構建網頁，確保不要遺漏信息

根據上面內容生成一個 HTML 動態網頁

1. 使用Bento Grid風格的視覺設計，背景色用#F9F8F4，文字和按鈕色用#151514，高亮色#DA7759
2. 強調超大字體或數字突出核心要點，畫面中有超大視覺元素強調重點，與小元素的比例形成反差
3. 中英文混用，中文大字體粗體，英文小字作為點綴
4. 簡潔的勾線圖形化作為數據可視化或者配圖元素
5. 運用高亮色自身透明度漸變制造科技感，但是不同高亮色不要互相漸變
6. 模仿 apple 官網的動效，向下滾動鼠標配合動效
7. 數據可以引用在線的圖表組件，樣式需要跟主題一致
8. 使用 Framer Motion （通過CDN引入）
9. 使用HTML5、TailwindCSS 3.0+（通過CDN引入）和必要的JavaScript
10. 使用專業圖標庫如Font Awesome或Material Icons（通過CDN引入）
11. 避免使用emoji作為主要圖標
12. 不要省略內容要點

倉庫管理工具測試

你可以在這里使用這個 NoCode 生成的產品：https://nocode.host/7d87b/mg5netrcnavvgig5

剛才那個完成的不錯，然后我直接給他整了個難度相當高的東西，一些美團小商戶都很需要這種工具。

讓他寫一個簡單的倉庫管理工具，需要可以添加商品，執行出庫入庫操作，進行一些品類和商品的管理。

這整個的邏輯已經相當復雜了，我們做一些小買賣或者管理自己的一些物品的話都可以直接用了，我規劃的功能相當完善。先來看一下提示詞：

請幫我創建一個完整的網頁版商品管理工具，具體要求如下：

功能需求 1. 商品管理

• 商品信息錄入：商品名稱、種類/分類、SKU編號、價格、庫存數量
• 商品圖片管理：支持圖片上傳預覽（可用文件選擇器模擬）
• 商品列表展示：表格形式展示所有商品，支持搜索和篩選
• 商品編輯：支持修改商品信息
• 商品刪除：支持刪除商品（需確認提示）

• 入庫操作：增加商品庫存數量，記錄入庫時間和數量
• 出庫操作：減少商品庫存數量，記錄出庫時間和數量
• 庫存記錄：顯示每個商品的庫存變動歷史

• 儀表板：顯示商品總數、庫存總值、低庫存預警等統計信息
• 響應式設計：適配桌面和移動設備
• 數據持久化：使用localStorage保存數據

• CSS框架：使用 TailwindCSS 3.0+ CDN引入
• 圖標庫：使用 Heroicons 或 Feather Icons CDN引入
• 字體：使用 Google Fonts

• 單頁面應用：HTML + CSS + JavaScript
• 模塊化設計：將功能分解為不同的JavaScript模塊
• 數據格式：使用JSON格式存儲商品數據

• 現代化UI：簡潔美觀的界面設計
• 顏色方案：使用專業的商務色彩搭配
• 交互反饋：按鈕點擊、表單驗證等交互效果
• 表單驗證：必填字段驗證、數據格式驗證

請生成完整的HTML文件，包含所有必要的CSS和JavaScript代碼，確保功能完整且可以直接在瀏覽器中運行。

沒想到他第一次迭代出來的就是一個完整的所有邏輯都能跑通的產品，這個太強了，真的。

你們可以拿這個提示詞去 Bolt 或者 V0 試試，很難一次成功，而且能跑起來就已經算好的了。

他在啟動時遇到報錯會自行分析和提供修復策略，然后自動修復，不需要你去管，直到這個網頁服務可以運行，才會停下。

而且，后面如果遇到問題的話，你可以點擊 AI 修復讓他修復，不需要描述一些你不知道或者描述不清楚的概念，這個相當省事。

基本上一直點修復，點著點著發現，產品可以跑了。

之后，我發現他寫的商品分類是寫死的，于是就讓他加了一個商品分類的管理。

他也給直接加好了，還改了對應在商品添加部分的邏輯，非常省心，其他產品基本上只改你讓改的，其他相關邏輯都不管的。

看一下效果吧朋友們，整體邏輯非常完整，每個功能都可用，沒有 Bug，甚至上面的數據卡片的數據都是對的！

路徑分享和規劃工具測試

你可以在這里玩我生成的這個產品：https://nocode.host/7d87b/emzfqabozivsgfi9

上面這個搞定以后，我決定繼續上難度，我規劃了一個設計復雜并且需要外部資源的項目---路徑編輯器。

我們日常騎行、旅游、徒步都需要一些路徑地圖分享的工具，選擇和搜索地區，然后設置順序，在地圖上體現出來。

這個的難度在于需要用到地圖的 API，現有的地圖 API 文檔和使用都相當復雜，而且地圖需要跟網頁的其他地方交互，說實話我都沒想過他能搞定這個需求，我就是試試。

先來看一下提示詞，在提示詞里我還非常詳細的要求了設計風格，在本身邏輯很難的前提下繼續添亂，哈哈。

請創建一個現代化的足跡記錄網頁應用，采用Neubrutalism設計風格，具體要求如下：

設計風格要求

• Neubrutalism風格：使用粗體Sans-serif字體（如Inter Black、Helvetica Bold）
• 配色方案：主色調為鮮艷的霓虹綠(#00FF88)和深黑色(#000000)，輔助色包括亮黃(#FFFF00)、電藍(#0080FF)、洋紅(#FF0080)
• UI元素：厚重的黑色邊框(4-8px)、高對比度陰影效果、幾何形狀按鈕
• 布局特點：不對稱布局、重疊元素、大膽的幾何圖形裝飾

左側編輯面板 (40%寬度)：

• 頂部搜索欄：輸入框+霓虹綠搜索按鈕，帶厚重黑邊框
• 足跡信息卡片：標題輸入、描述文本框、類型選擇（美食/徒步/騎行/城市）
• 地點列表：可拖拽排序的地點卡片，每個卡片包含地名、圖片縮略圖、時間設置
• 媒體上傳區：圖片上傳拖拽區域，已上傳圖片的網格展示
• 底部操作按鈕：保存、分享、預覽按鈕，使用對比色設計

右側地圖區域 (60%寬度)：

• 全屏交互式地圖（建議使用谷歌地圖API）
• 路線可視化：粗線條連接各個地點，使用漸變色彩
• 地點標記：自定義圖標，根據類型顯示不同顏色和形狀
• 懸浮圖片卡片：鼠標懸停顯示地點照片和信息，帶Neubrutalism風格邊框和陰影

1. 搜索功能：實時地點搜索，支持POI和地址搜索
2. 拖拽編輯：地點卡片可拖拽排序，直接影響路線順序
3. 多媒體支持：圖片上傳、預覽、編輯功能
4. 路線類型：美食地圖、徒步路線、騎行路徑、城市探索等預設模板
5. 分享功能：生成精美的分享卡片，包含路線圖和關鍵信息

• 按鈕懸停效果：顏色反轉+3D按壓效果
• 卡片交互：點擊展開詳情，拖拽時有明顯視覺反饋
• 地圖交互：點擊地點顯示詳情彈窗，支持縮放和平移
• 響應式設計：移動端自動調整為上下布局

• 使用現代CSS Grid和Flexbox布局
• 集成地圖API（推薦Mapbox GL JS）
• 實現文件上傳和預覽功能
• 添加平滑的CSS動畫和過渡效果
• 確?？鐬g覽器兼容性

• 頁面標題："? FOOTPRINT STUDIO ?" (大號黑體，霓虹綠色)
• 搜索提示文字："Search amazing places..."
• 按鈕文本："ADD PLACE"、"SAVE JOURNEY"、"SHARE ROUTE"
• 類型標簽：使用emoji+文字組合

請生成完整的HTML、CSS和JavaScript代碼，確保界面美觀、功能完整、用戶體驗流暢。

結果這個項目確實有難度，他一直出錯，我就一直點自動修復，大部分問題他都能自己修復。

后面有一個點一直修復不了我發現是他沒有谷歌地圖的 API Key，于是我就去找了一個給他讓他寫進去，立刻就搞定了。

還有一個版本是因為過于實誠了，把網頁的按鈕描邊樣式寫成了全局樣式，把網頁地圖的樣式也給改了，雖然風格化挺強挺有感覺，但是看不到地圖的文字了，讓他修復他也可以聽懂要求，一次就改好了。

來看一下效果吧，朋友們。

這么復雜的項目他最后能搞定也真是奇跡了，而且完美的遵循了提示詞的要求，沒有自己發揮。

其他特色功能：Dev Mode & Database

這時候有朋友就說了，我有時候看他修復不了我急得很，我知道咋寫，我想自己編輯代碼。

可以的兄弟，可以的，你可以點擊右上角的 Dev Mode ，美團給你塞了一個 Cursor 在網頁里，基本上 AI IDE 該有的能力都有。

右邊是自動編碼的 Agent，中間可以預覽開發結果和代碼，可以自己寫，也可以選中其中一段代碼讓 AI 幫你改。

然后就是 DateBase ，這個也很重要，我們很多網頁其實非常依賴數據庫工具，因為涉及到相當多的數據存儲，只是把內容存在網頁里是沒有辦法給大量用戶提供服務的。

NoCode 自帶了 DateBase ，服務，這樣你的用戶使用的數據就可以云端存在 DateBase 里面，換了設備也可以調用和保存。

那你肯定想說，數據庫這么復雜我搞不定怎么辦，這個 AI 也可以幫你搞定。

你只需要點擊右上角的 DateBase 按鈕，然后跳轉去點一下創建，之后回到項目里跟 AI 說幫我把數據存在 DateBase 里面他就會開始幫你處理了。

這次的測試和產品介紹就到這里了。

作為很看好 Vibe Coding 的人，我是非常希望國內有很好的 Vibe Coding 氛圍和社群的，但是能用&好用的產品實在是太少了，美團這次 NoCode 的發布真的讓很多有需求，但是沒辦法用國外產品的朋友看到了曙光。

這個產品目前是免費而且不需要邀請的，如果你有自己想寫的網頁但是苦于沒有合適的工具的話可以玩玩看。

如果你覺的教程對你有幫助的話可以幫我點個贊或者喜歡，也可以推薦給你需要的朋友們！

最后歡迎在評論區或者其他平臺 @ 我，交作業