之前已經有寫過關於用 AI 生成圖片的 Midjourney, 但是出來的圖片通常都是點陣圖。想要用在系統 UI 介面上的向量圖, 設計師通常想要的是 SVG 格式, 最近發現了一款 Recraft.ai 他剛好就可以生成向量 SVG 格式, 而且出來的風格很適合拿來放在 UI 介面上, 非常好用！！

最近工作上需要寫一隻全新的 chatbot plugin, 因為這種 case 很吃 UI 的畫面, 所以除了 js 外一定會用到 html + css, 而且由兩個人以上共同維護。之後這個 plugin 將會接到各 website 上, 所以想要出來的成品能輕量化且高執行效率。我開始爬文比較各種 JS, CSS 框架，最終選擇 Vite & Svelte & TailwindCSS, 作為 plugin 的基底, 他們都有很完整的文件, 對於多人開發很方便。接下來針對這個組合一一做介紹。程式放在 github。

通常繪製 prototype 的時候多少會需要一些假資料來模擬畫面。大部分使用假資料 User 都能接受, 畢竟實際上還是需要程式動態讀取出來的。但最近還是難逃要用實際資料模擬的需求, 我遇到的情境是類似大量 excel 動態計算欄位。因為 User 會想要討論每個欄位的計算公式, 初版用假資料出去, 結果就被打回來 QQ。只好認真的跟 User 要了實際資料, 但我敢說一定不會有人想要把值一格一格貼, 手絕對會斷掉！而且還下不了班！所以這篇就是紀錄我如何用 plugin 來解決貼實際值的問題。

Webpack 雖然在前端很強大，起專案和 HMR 的速度也跟著套件裝越多越慢，但隨著 IE 的沒落，很多套件其實都不需再使用。這時候新一代的技術 Vite 颳起一陣旋風，利用現代瀏覽器支持 ES 模塊的特性，直接用瀏覽器的資源做更快速的打包 & HMR，用了一次之後就回不去 Webpack 了 XD ~ 本篇說明如何用 NET 6 + Vite + Vue 3 來起一個新專案。

最近有藝術作品利用 AI 繪圖技術 Midjourney 製成參加比賽獲獎，有很多篇新聞報導，讓大眾開始反思 AI 繪圖的可能性。(AI 作品奪藝術獎：究竟甚麼是藝術？) 基於好奇，所以我也去試玩看看。

最近將舊的 Sketch 檔案匯入 Figma 時，會發生找不到 “Helvetica” 字體的問題。但我覺得這麼“基本”的字體應該 Figma 會有吧？！仔細一找真的不在 Figma 字體的下拉清單（眼神死…），所以我就跑去找有什麼相似的字體可以做替換。幸好，找到了不錯的資源，就趕緊記錄下來。

介紹如何用 SSMS 匯入 Azure DB。

很久沒來觀摩 Naver 的設計，剛好最近看到一篇關於穿戴式裝置 Apple Watch 的應用設計，所以想來學習學習。

最近因緣際會下本來想做個讀取 Google Sheet API 的 web app 放在 github page，但發現 github 有擋住部分功能，所以想說看能不能改放在 Azure 雲端上，搜尋之後發現這個神奇的 plugin，Azure Static Web Apps 可以在 vscode 做一些簡單的設定，就能把 github 上的前端 web app 自動透過 github Action，CICD 到 Azure Cloud 上，底層還是會在 Azure 建立一個 Azure Function。話不多說，直接來說明怎麼設定吧～

最近 Figma 功能換到團隊的訂閱制，終於可以使用 Library 的功能了！但之前還沒換過去之前，檔案內的 Components 都是在 Local 原檔案中，現在該是 Refactor 整理的時候了，把共用的 Components 改用 Library 的，並重新整理檔案。此篇紀錄其中碰到的問題並寫出使用了哪些 Plugin 來改善 Refactor 的效率。