0 大綱
- 作為骨灰級程式設計師，咋用 AI flow 提高編碼效率
- 零程式碼基礎，如何使用 AI 輔助程式設計工具實現自己的想法
- 盤點常用的 AI 輔助程式設計工具和使用場景
- 如何選擇適合自己的 AI 輔助程式設計工具
如今的 AI flow 系列軟體包括：Cursor、Bolt、Windsurf、v0、通義靈碼......
1 編碼咋提效？
AI flow已和我日常工作學習和創作無縫融合，使用 AI flow 寫程式碼，體驗非常流暢，程式設計效率大大提升。
1.1 程式碼補全
Tab一下，程式碼自動補全，各廠家有訓練自己的智慧補全模型，在專案工程感知上下文，給出智慧程式碼補全建議。苦了那些只能在雲桌面開發的同學，畢竟私有部署太昂貴！
以前可以叫我 cv 俠，現在請叫我 Tab俠。
1.2 Debug && Fixbug
AI flow 作為各行業都有資深經驗的程式設計大師，助你 Debug 和 Fix 程式碼錯誤。遇到報錯了：
-
以前：複製錯誤資訊，開啟瀏覽器被迫定向到 CSDN 或者 stackoverflow，海底撈針找解決方案，並反反覆覆顛三倒四地改程式碼
-
現在，在提示錯誤的位置，點選 Debug 或 Fix 按鈕，就會結合專案上下文，給出錯因和可行解決方案。甚至給你寫出修復後程式碼，按照 AI flow 的建議修改，或者在給出的修復程式碼上點選 Apply，就可以快速找到和修復問題
有了 AI flow，相當於有了24h技術顧問，隨時幫你自動查問題、分析問題、寫程式碼修復問題。讓你更專注架構設計。再也不用擔心出現偶發的 bug 啦！
1.3 實時對話 && 聯網搜尋
對中國寶寶更友好的的ChatGPT能力和AI search應用。
隨時在 AI flow 編輯器右側開啟對話方塊，激情四射聊任何話題！
在輸入框輸入 @web 即可聯網檢索，具備 AI 搜尋產品標準的 RAG 能力：
再也不用訂閱ChatGPT！
1.4 寫提示詞
想寫提示詞控制 AI 生成內容，而又不太擅長提示詞工程，就能讓 AI flow 幫你寫提示詞。
1.5 寫頁面
做 Web 專案開發，我們經常需要寫前端頁面。我最近一年習慣用 NextJS 框架做全棧開發，頁面元件用 React 寫，使用 TailwindCSS 寫樣式，UI 元件庫用的是 Shadcn/UI。
使用 AI flow 前的登入頁面：
- 在 UI 元件庫找到可以引入的元件
- 或自己寫 HTML + TailwindCSS 實現需要的元件。樣式要調的美觀，耗時良久。
而用 AI flow，一句話描述我的需求快速得到滿足需求的登入元件。
1.6 截圖生成元件
看到某網站的某元件不錯，想將其樣式和邏輯複製到個人專案。只需截圖要抄的元件，讓它仿照寫出。
這比以前Copy別人網站的樣式，透過審查元素檢視 HTML、CSS原始碼，效率高太多。
1.7 寫常用的程式碼邏輯 / 函式
以前從0開始抄寫一個個功能函式，使用 AI flow 只需一句話描述功能需求 / 入參和出參就能快速生成所需函式。還有人會去刷leetcode嗎天天？？
1.8 程式碼重構
技術架構更新時，經常要重構程式碼。
比如以前將老系統從 php 遷移到 java，自己重構一個專案的所有資料庫操作程式碼，需要大量人天資源。
而用 AI flow，一句話描述需求，讓它用新的資料庫客戶端去重構所有的資料庫操作邏輯即可，等它重構完，我需要檢查一遍是否有重構不當的程式碼，讓 AI flow 按我的風格繼續改寫。
只要人工確認過一次重構，剩餘的資料讀寫程式碼，都會參考第一次重構的風格，快速完成。
唉！也難怪即使有很多需要維護的老系統，如今企業還是不招人了！
1.9 國際化
做出海應用，就得支援多語言。
如NextJS框架多語言方案用 next-intl，只需在專案的 messages 目錄下放置語言的 json 檔案。
以前，要先寫好 en.json 內容，再複製到 ChatGPT，讓它翻譯成其他語言 json 檔案，如 zh.json / ja.json 等，再把翻譯好的 json 檔案都放置到 messages 目錄。
每次新增 / 修改 / 刪除要支援多語言的內容，要先更新 en.json 的內容，再按上面流程更新其他語言檔案的內容。之前組內負責國際化的同事每天痛不欲生，我試用期還沒結束，他就離職了！
有了AI flow，還是先更新 en.json 內容，然後到其他語言檔案中，一個Tab，快速補全，自動填充翻譯好的內容。
2 快捷鍵
2.1 Tab
升級pro版，解鎖無限制 Tab 智慧補全。
2.2 Command + L
程式碼看到一半，想快速開啟對話方塊諮詢各種問題。
2.3 Command + K
在檔案中喚起 Ctrl + K 的位置原地寫程式碼，如果點 Apply 就會覆蓋當前位置的程式碼。
一般會在建立一個新的函式，或者重構某段邏輯的時候使用，原地修改程式碼，diff 效果更明顯。
2.4 Command + I
喚起 AI flow Composer 視窗，輸入需求，一次性建立 / 修改 / 刪除多個檔案件 / 檔案。
Composer 是劃時代功能，真正開啟“一句話讓 AI 建立一個專案“的時代。零編碼基礎的人，也可以使用 AI flow Composer 快速建立專案結構，實現基本的程式碼邏輯，對於做一些 demo 類應用開發，非常有用。
另一場景，如多語言適配，只需修改 en.json 一個檔案的內容，透過 AI flow Composer 一次性修改所有語言的 json 檔案！
但涉及多個檔案程式碼生成時，質量肯定比單檔案生成要差，需人工提質。
3 0基礎，學IT，用AI實現每一個idea
我們後端，都不懂前端，咋做一個完整導航出海站呢？
3.1 Composer
新建一個資料夾，作為 AI flow 工程目錄。
開啟Composer視窗，描述需求：
請你生成一個獨立IP展示網站，包含兩個頁面，首頁顯示我所有的自媒體社交平臺，about 頁面顯示我的個人背景介紹。網站主題色使用羊皮紙黃色，要求相容手機端訪問。
一個回車下去！AI flow Composer 會根據你的需求生成一個專案結構，並生成基本的程式碼邏輯。等程式碼生成完，你只需要點 Accept all，生成的程式碼都應用到工程目錄：
由於用的人實在太多，經常會不可用，重試即可讓它繼續完成任務！
瀏覽器開啟專案的入口檔案：index.html預覽：
Composer 對話方塊繼續細化需求，如 “一欄顯示五個作品，配圖使用真實的圖片“，點 Submit 提交，AI flow Composer 會根據你的需求修改程式碼。
repeat這過程：enter你的需求 -> Accept all 應用修改 -> 預覽。直到網站讓你順眼了。
只能感慨，怪不得前端失業了，怪不得招一個 java 就能全棧了，事實如此！
Only AI Flow Can Do！
因為使用 AI flow Composer 只是在PC完成一個專案，還要精通全球分散式部署：如把生成的程式碼打包上傳伺服器部署或用 Vercel / Cloudflare 雲部署平臺。
3.2 使用 Bolt.new 構建產品
完全不懂開發的也別急，還有Bolt.new，網頁版的 AI 輔助程式設計工具：
輸入框描述需求，如：
建立一個課程主頁，介紹課程交付的主頁內容，列出課程資料，課程資料是一個圖文列表，也放一些學員評價，讓課程主頁更加吸引人
看我一個回車！開始生成程式碼，在右側把整個專案的程式碼結構都展示出來。
左側對話方塊繼續細化需求，讓它最佳化程式碼，同時在右側 Preview 皮膚預覽。
一直最佳化到你滿意，點選Deploy或Open in StackBlitz，程式碼即可部署上線，得到可公開訪問的連結：
開啟它，就能看到你的專案：
適合程式設計完全 0 基礎選手，從0建立專案，簡直無門檻，還支援雲端部署功能，讓你的產品直接被全球觀眾鑑賞！
本文已收錄在Github，關注我，緊跟本系列專欄文章，咱們下篇再續！
作者簡介：魔都架構師，多家大廠後端一線研發經驗，在分散式系統設計、資料平臺架構和AI應用開發等領域都有豐富實踐經驗。
各大技術社群頭部專家博主。具有豐富的引領團隊經驗，深厚業務架構和解決方案的積累。
負責：
- 中央/分銷預訂系統效能最佳化
- 活動&券等營銷中臺建設
- 交易平臺及資料中臺等架構和開發設計
- 車聯網核心平臺-物聯網連線平臺、大資料平臺架構設計及最佳化
- LLM Agent應用開發
- 區塊鏈應用開發
- 大資料開發挖掘經驗
- 推薦系統專案
目前主攻市級軟體專案設計、構建服務全社會的應用系統。
參考：
- 程式設計嚴選網
本文由部落格一文多發平臺 OpenWrite 釋出！