第一次嘗試vibe coding 一樣是做出老掉牙的todolist。
這個時間點大約是 7/21號左右，當時的GPT生成的代碼雖然還行，但總有一些小錯誤，尤其是UI外觀方面完全沒有涉及，顯得有些簡陋。

流程:
1.問GPT -> 2.上傳githut -> 3.開啟builderio 並授權給githut -> 4.輸入 prompt 給 builderio
-> 5. 完成後確認分支給 githut -> 6.上傳 vercel 就可以看到結果了。

先上全部完成圖:

試試看

gpt提詞

https://github.com/SortableJS/Sortable#cdn
參考上面網址
我想做一個可以用來牽拖的todolist
可以用  html、css、js、Vue3、SortableJS來實現。
我想先在codepen 上面試試看

todolist具體功能:
1.會有4個區塊分別為:ideabox、緊急、重要、已完成；會有兩顆按鈕，分別為輸入點子，刪除已完成。

2.第一個區域為input叫做 ideabox可以收集點子，每條任務的最前面都有一個方塊，方塊打勾後任務會有刪除線。

3.當我把任務輸入完成後，可以用拖曳的方式進行分類，可以拖進 緊急區、重要區、已完成區。

4.當我按下刪除已完成時，已完成區域的任務會清空，其他區域的任務繼續保持。

好啦然後gpt就做成這樣了

codepen

接下來就是上傳githut 然後連結builderio

這裡是builderio的題詞

其他：同天我也使用了其他AI工具按完成度排名：builder.io、figma、V0、uizard。
以下是與 builder.io 的題詞內容：

1.設計適合他的外觀可以參考概念的風格加上一些圖案和一些互動

2.完成上面的輸入框與下面的收集框要一樣的寬度，看起來比較美觀，清晰沒有功能

3-1.任務打勾完成後要手動移去已完成 2.收集箱的名稱可以自行更改 3.可以手動新增或減少收集箱的數量

4.明確已完成與新增收集盒的位置子對調

提詞完後就完整了 下一篇再來接紹builderio的操作。
PO文好麻煩= =
我本來想要當個版OP文 沒想到文章會發出會先至頂.....先閃了掰掰