Vibe Coding： 嵌入式系統GUI開發案例
緣由：
在嵌入式系統或應用程式，開發GUI圖形人機介面是一件費時費工的過程，比如說：調配元件的顏色或元件擺放的位置…等工作。現在用AI協助我們做GUI的開發，AI搭建一個UI的軟體架構後，後續再由我們做細部的開發，這過程非常顯著地縮短了開發時程，參考YT影片連結https://youtu.be/47qwL7LXJQ0。
初步構想：
1. 用Gemini將GUI圖形設計出來，僅僅生成圖片。
2. 用Cursor開發套件，將圖片載入後，讓AI開發程式碼。
3. 我們手動編譯上面的程式碼，有問題再讓AI除錯或調整。
操作步驟：
在Gemini對話，給底下的提示詞
“根據LVGL 8.4版本，LCD屏幕800 x 480，重新設計一個人機的新畫面: 有三個按鈕 (停止, 暫停, 運行)，上面有機台名稱，速度，量產數量的顯示(以英文字為主)，先給我看圖片”，生成圖片如下，如果不滿意內容，繼續讓Gemini調整直到滿意為止。
接下來，在Cursor開發環境，先給它工作區，目錄裡面有參考程式碼，然後給底下的提示詞：
“根據LVGL 8.4 library，參考上傳的圖片設計出 UI 介面，UI程式設計在 lvgl_layout.cpp 檔案裡。”
最後一步，上面生成的程式碼，我們再放到Arduino
IDE去編譯，如果有編譯錯誤，再跟AI回報，AI會根據問題修改。由於我們只讓AI設計GUI畫面，這項工作範圍不會影響到其他檔案的功能。
結論：
上述這個AI開發案例適用於對嵌入式系統開發已經有經驗的工程師，如果是初學者要走這樣的流程可能會遇上不少難點。面對現階段各式各樣的AI IDE工具，資深工程師能利用它們來協助設計開發程式碼，以便大大縮短開發的時程。
留言