07 · 零程式碼做一個本地小應用
速覽
| 解決什麼 | 想要一個趁手的小工具，但沒有現成的，也不會寫程式碼 |
| 需要什麼 | 「代码开发」模式；一個空資料夾 |
| 大概多久 | 最小可用版本 5–10 分鐘；除錯和迭代看複雜度 |
| 風險等級 | 中——會生成並執行程式碼 |
場景
你想要一個記錄靈感的小工具：能新增、能搜、能分類，介面簡潔，資料存本地。
市面上的筆記軟體不是太重就是要訂閱，而你要的功能其實只有四個。
開始前的準備
- 新建一個空資料夾當工作空間，例如
我的小工具 - 新建任務時選**「代码开发」模式**——它面向程式碼場景，預設配置更合適
- 權限保持「默认权限」
用空資料夾
生成程式碼會往目錄裡寫不少檔案。放在空目錄裡，出問題直接刪整個資料夾重來，不會牽連別的東西。
提示詞
第一輪：最小可用版本
帮我做一个本地可运行的灵感记录小工具。
功能就四个：
1. 新增一条记录（标题 + 正文 + 标签）
2. 按关键词搜索
3. 按标签筛选
4. 编辑和删除
要求：
- 单页应用，双击 HTML 就能打开，不需要装任何东西
- 数据存在浏览器本地，关掉再打开还在
- 界面简洁，浅色，适合长时间看
- 手机上也能用
先做这四个功能，跑起来再说。不要加其他功能。「先做最小可用版本」是這個案例的核心
官方建議的原話：先完成核心功能，再逐步增加複雜能力。
一次要十個功能，結果是十個都半殘，而且你沒法判斷是哪裡出的問題。四個功能跑通了，加第五個就很容易。
第二輪：確認能跑
生成完之後，在右側「浏览器」視圖裡開啟預覽。挨個點一遍那四個功能。
第三輪：報錯怎麼說
点保存按钮后页面白屏，控制台提示 TypeError: Cannot read properties of null。
复现步骤：
1. 点「新增」
2. 标题填「测试」，正文留空
3. 点保存
正文填了内容的时候不会出错。描述具體現象比說「不好使」有效十倍。 三個要素：
- 現象——具體看到了什麼（白屏、報錯文字、按鈕沒反應）
- 復現步驟——怎麼操作會出現
- 邊界——什麼情況下正常，什麼情況下不正常
第三條最有價值。「正文填了就不出錯」直接把問題範圍縮小到了空值處理。
為什麼這麼寫
「雙擊 HTML 就能開啟，不需要裝任何東西」。 這一句決定了技術選型。不說的話，它可能給你一個需要 npm install 和 node server.js 的專案——對不寫程式碼的人來說那就是不可用。
「資料存在瀏覽器本地」。 明確了持久化方式。不說的話可能重新整理就沒了。
「先做這四個功能，不要加其他功能」。 模型有強烈的加功能傾向。不禁止的話，你會拿到一個帶標籤雲、匯出、主題切換、快捷鍵的版本，然後其中三個是壞的。
「跑起來再說」。 給它一個明確的完成標準：能跑 > 功能全。
驗收清單
- [ ] 雙擊檔案能開啟，不需要任何額外步驟
- [ ] 四個功能挨個試一遍都正常
- [ ] 關掉瀏覽器再開啟，資料還在
- [ ] 手機上開啟，佈局沒亂
- [ ] 輸入空值、超長文本、特殊字元，不會崩
- [ ] 右側「变更」視圖裡看得懂它生成了哪些檔案
試試異常輸入
標題留空、正文粘 5000 字、標籤裡輸入 <script>——AI 生成的程式碼在正常路徑上通常沒問題，翻車都在邊界情況。
花兩分鐘試這幾個，比上線後再修省事。
持續升級
工具跑起來之後，可以在使用中持續擴充套件。官方給的幾個方向：
| 需求 | 它可能怎麼做 |
|---|---|
| 希望支援模糊搜尋，不依賴精確關鍵詞 | 接入本地向量或語義檢索能力 |
| 每天早上自動推送待處理任務 | 配置自動化任務並彙總待辦 |
| 通過 QQ 或微信隨時錄入內容 | 對接訊息平臺並增加移動端輸入通道 |
| 新增內容時自動關聯已有記錄 | 增加關聯分析與知識整理能力 |
一次只加一類能力
「把升級需求拆開提」——一次只增加一類能力，更利於穩定迭代。
同時提三個需求，改壞了你分不清是哪個改動導致的。
升級時的寫法：
现在加一个功能：导出。
支持导出成 Markdown 和 CSV 两种格式，
导出当前筛选结果（不是全部）。
只加这一个，别动其他地方。最後那句很有用——明確劃定改動範圍，減少它順手「最佳化」別的地方的機率。
變體
從設計稿開始
走「设计创意」模式：先對話生成介面設計稿，在 Ardot 畫布上改到滿意，然後一鍵生成應用程式碼。
兩種觸發方式：在對話中說「將當前畫布中的設計稿生成應用」，或點畫布 Tab 頂部的「生成應用」按鈕。
生成後還能繼續用對話調程式碼：「用 React 重寫」「加一個 dark mode」「改成 Tailwind 樣式」。
這條路適合你對介面有明確要求的時候。 直接寫提示詞生成的介面通常能用但不驚豔。
資料存在檔案裡而不是瀏覽器
改一下数据存储：不用浏览器本地存储，
改成读写工作空间里的 data.csv。
这样我能直接用 Excel 打开看，也方便备份。這個改動讓工具和 資料庫的 CSV 資料來源思路 接上了——資料和介面分離，改資料不用碰程式碼。
一個純本地的小指令碼
不需要介面的話，讓它寫指令碼：
写一个脚本，扫描 D:/照片 目录下所有图片，
按 EXIF 拍摄日期整理到 YYYY-MM 子文件夹。
要求：
- 先 dry-run 输出计划，不实际移动
- 加 --execute 参数才真的执行
- 遇到没有 EXIF 的文件跳过并记录
- 每一步打印日志dry-run 這個設計值得學：讓指令碼自帶預覽模式，和 批次重新命名案例 裡「先預覽後執行」是同一個思路，只不過固化進了程式碼。
常見問題
Q：生成的程式碼我看不懂，安全嗎？
對純前端單頁應用（HTML + JS，資料存瀏覽器）來說，風險很低——它跑在瀏覽器沙箱裡。
需要警惕的是會跑在你係統上的指令碼：Python、PowerShell、Shell。這類先讓它解釋：
把这个脚本每一行在做什么解释一遍，
特别标出：会读哪些文件、会写哪些文件、会不会联网、会不会删东西。看不明白就別執行。這也是預設權限會在執行指令碼前攔你一下的原因。
Q：改著改著越改越壞怎麼辦？
兩個辦法：
- 開新任務重來。 會話太長之後模型容易「前說後忘」，與其在爛上下文裡死磕，不如開新任務，把當前程式碼和需求重新說一遍
- 讓它先備份。
改之前先把当前版本复制成 index-v1.html
Q：能做成真正的桌面軟體嗎？
能生成 Electron 之類的專案，但打包、簽名、分發這些超出了「零程式碼」的範疇。
如果你的目標是自己用，單頁 HTML 就夠了，而且沒有任何分發和更新的麻煩。
Q：這些工具能給同事用嗎？
單頁 HTML 直接發文件就行，資料各存各的。需要共享資料的話，考慮用 資料庫的輕量釋出——把 HTML 釋出成線上連結，配合 CSV 做資料來源。