Recraft AI
Recraft AI 是產生 SVG 向量圖、插圖的免費線上工具。(目前免費)
參考教學文章：https://www.kocpc.com.tw/archives/500892
輸入okinawa travel 點選icon，顏色可以選擇自己喜愛的配色。
出現多個可以選擇，若沒有喜歡的話可以再點按一次Recraft。按右鍵可以存擋，這邊筆者選擇存成png檔案。
Recraft AI令人驚豔的是，可以上傳自己喜歡的風格，ai會依上傳的風格產生指定的圖片，像是從google找了喜歡的line art風格圖。
上傳圖檔並命名為line art風格，圖片大小在生成圖片時可以設定長度寬度，依輸入不同名稱生出三張圖。。
Figma套件-html.to.design
html.to.design 可以讓開發者快速把現成的網站，轉成figma設計稿。(目前免費，有使用次數限制)
打開fimga的html.to.design plugin。輸入網站網址，筆者找到的網站是：https://preview.colorlib.com/theme/original/ (此篇為介紹工具的使用，並無法完整複刻網頁樣式及動畫，若需要完整程式碼可以考慮向原供應商購買。)
按下import，產生網頁的figma完整結構。即便轉換過程有些細節沒有處理到位，還是協助開發節省不少刻輪子的時間。
由於重點在於實作，而非專注於過多繁複的細節，所以下一步是移除過多的元件，保留精簡後的部分。
刪除部分元件，下一步是把內容修改，客製這次「沖繩網站」，裡面文字內容使用 chatGPT 生成。
Figma套件-Builder.io
Builder.io 可以讓開發者快速把figma設計稿轉成程式碼。(目前免費，有使用次數限制)
打開fimga的builder.io plugin。框選要build code的區域，按下generate code。
builder.io會另外開啟視窗。框選區域按右上方的Get code可以取得程式碼。
Builder.io提供選擇語言，可選Vue, React, html等。產出Code分為Fast & Quality。如果要快速生成可以選Fast，較細緻的則選Quality。下方可以與ai互動，輸入希望code如何調適，像是”Use section instead of div”。若一次選擇Get Code的內容太多，會出現請選擇少些區塊的提示。關於這部分，可能會因為批次取程式碼，有相同class名稱而設定不同的副作用。這部分開發者需要自己再加工。
剛設定完，成品如圖所示：
上半部看起來還可以但下半部看起來怪怪的。關於這個部分，先回Figma做圖層順序的調整。再次使用builder.io，再次微調，最終成品如下：
Code Pen 網址連結：https://codepen.io/Jacy-Chu/full/dyLpOjK
跟設計稿相似度有九成，縮小視窗也有做到基本的RWD。
小結
善用AI輔助工具可以提升工作效率。完成從0到簡易的網站demo，發現若能達到靈活運用，加入適當的客製可以讓成品質感升級。
