> [目錄](https://hackmd.io/EGd-7VhjSqGWXqq4Iw6WUg?view)
> 筆記目錄：
> [TOC]

## 上週結論
1. builderio 第二個方法可行，因此要找 builderio / locofy 的價錢方案
2. 研究 builder.io - [Bring your own components](https://www.builder.io/blog/figma-to-code-ai#:~:text=Bring%20your%20own%20components)
3. 研究 locofy 有沒有其他方法，可以匯出自定義的元件
4. 繼續收集測試案例
6. 繼續尋找其他 figma to code 工具
## 本週進度
### 1. builderio / locofy 價錢方案
> builderio
* 有分月費跟年費，下圖是月費，年費一個月便宜5~10美
* 總結與分析:
* Free 方案適合個人或小團隊入門，基本功能免費，但限制在代碼生成次數和上下文窗口的大小。
* Basic 方案在免費方案基礎上增加了更多的代碼生成和上下文窗口，適合需要更大規模協作的小型團隊。
* Growth 方案提供了豐富的增強功能，尤其是更高級的 Visual CMS 功能，非常適合希望進行內容優化和數據分析的中型團隊。
* Enterprise 方案完全針對大規模企業，提供了高級的定制選項和支持，適合有更高技術和運營需求的用戶。

* 註: 上下文窗口（Context Window）在這裡指的是 AI 或代碼生成工具能夠「記住」的上下文訊息的範圍大小。上下文窗口越大，AI 能「記住」更多的信息，這樣它就能更好地理解和生成符合你需求的內容。

> locofy
* 價格方案，[使用 LDMtokens](https://www.locofy.ai/how-ldmtokens-work)
* 最便宜的方案是一個 US$0.030
* 設計稿一層花費一個 LDMtokens，每一層都計算
:::spoiler
:::
* 一年會過期
* 有插件可以預先計算會花多少，如果花太多，可以優化設計稿減少花費
* 缺點：設計師需重新調整設計稿 / 每次轉換時都需要算錢 / 蠻貴的
* 用公司的專案去計算，通常 5 個頁面花費 ⬇️ 2300 LDMtokens
* 用 abc 專案去算的話，不重複的頁面大約 17 個
所以大約總花費 7820 LDMtokens ( *0.030 = 234 美金)，一年 $1000 的話只能生成 4 個專案
:::spoiler
:::
* 只有第一次轉成 code 的時候需要 LDMtokens，後續調整都是免費的
:::spoiler
:::
### 2. library 測試
* builder.io - Bring your own components
* angular 安裝：https://www.builder.io/c/docs/figma-components
* [node version](https://forum.builder.io/t/err-with-npm-install-for-dependency-builder-io-react-latest/4919/6) 至少要 v18.20.2 以上，我用 v20.11.0
* [angular version](https://forum.builder.io/t/need-help-installing-builder-io-angular-module-in-angular-16-application/5415) 至少要 16.3 以上，我的範例是18.2.5，目前沒有遇到什麼問題
* 專案需要先 install builder.io，並且建立 builder.io 帳號的連結
<video src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F1ecb547fc7074825b5ae306a12e0df5d%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=1ecb547fc7074825b5ae306a12e0df5d&alt=media&optimized=true" muted=true autoplay=true width=100%></video>
* 實際操作：
1. 選擇要轉的設計稿內容，選擇使用 plugin
2. 進入畫布後選擇 Design System 的 tab
3. 如上圖所示，可以選擇該元件需要建立在你的專案的哪個現存的元件（如下圖）之中
* locofy
* 匯入自定義元件
* 用 github 匯入，目前用 primeng 的元件庫測試
缺點：要把元件庫放到 github 上
* 用 storybook 匯入，目前不支援了
* 用 codebase cli 匯入，需 node 18 以上
* 看看有沒有其他方法可以自定義元件
* 試著轉換成 code 看看，只會單純生成 code，沒有 ai 可以輔助調整
### 3. 收集測試案例
:::info
[figma 設計稿連結](https://www.figma.com/design/ktLFS5ogrnlMtQtToJAvkZ/figma-to-code-%E7%A0%94%E7%A9%B6?node-id=0-1&node-type=canvas&t=bl8aG2JtxALrz8pi-0)
:::
## 下週預計
1. 測大型專案
2. 單獨記錄不同類型的頁面轉 code 的結果
3. 測試 prototype 有沒有用

測試報告
* 開放元件庫後測試 react angular 是不是都可以讀
* 測試 react vue angular
* 貼進我們開發的程度比較 ％