---
# System prepended metadata

title: '[ figma to code - 4 ] 0926-1016'
tags: [figma to code]

---

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

## 上週結論
* 測大型專案
* 測試 prototype 有沒有用
* ==確認 ai 讀網頁可行性==
* 開放元件庫後
    * 測試 react、angular 是不是都可以讀 
    * 測試報告
        1. 單獨記錄不同類型的頁面轉 code 的結果
        1. 貼進我們開發的程度比較(％)(時間)

## 本週進度
* ai 讀網頁可行性
    * AI 直接透過網址讀網頁，確實有點困難
    * 目前有測試，讓他讀讀看 [靜態網站](https://c107165108.github.io/builderio-test/get-start.md) ，確實讀不到
    * 要讓 ai 讀元件庫的話，需要把元件庫變成開源、多人討論 ( 需要很多時間 )
* 用 builderio 測大型專案
    :::info
     [ABC v.2 設計稿](https://www.figma.com/design/GKhFu29qjmf92HGBxvwXX2/%5BCUBE%5D%5BABC%5D-CUBE-%E6%AC%8A%E7%9B%8A%E6%96%B9%E6%A1%88%E7%AE%A1%E7%90%86%E5%B9%B3%E5%8F%B0-Phase-1-UI-Mockup-%5B%E9%A6%96%E9%A0%81%5D-%2B-%5B%E5%89%8D%E5%8F%B0%E9%A1%AF%E7%A4%BA%E7%AE%A1%E7%90%86%5D?node-id=1-263&node-type=canvas&t=uSlwffaCf3gutaQC-0)
    :::
    * [ANGULAR](https://gitlab.ipe.codes/00596300/builderio-test)
    * [REACT](https://gitlab.ipe.codes/00597649/builderio-react-test/-/tree/develop)
    * VUE
* 測試 prototype to code 有沒有用
    :::info
    develop hub ➡ [prototype](https://www.figma.com/proto/bNW8ZsiWAtKkdwNiDTFkhO/%F0%9F%8E%A8--Cathay-Developer-Hub-%5BPasskeys%2B%E7%95%AB%E9%9D%A2%5D-UI-Mockup-(Copy)?node-id=2149-58672&node-type=canvas&t=oub1pWZqcDzf1aDh-0&scaling=min-zoom&content-scaling=fixed&page-id=20%3A10255&starting-point-node-id=2149%3A58672&show-proto-sidebar=1) / [設計稿](https://www.figma.com/design/bNW8ZsiWAtKkdwNiDTFkhO/%F0%9F%8E%A8--Cathay-Developer-Hub-%5BPasskeys%2B%E7%95%AB%E9%9D%A2%5D-UI-Mockup-(Copy)?node-id=20-10255&node-type=canvas&t=oub1pWZqcDzf1aDh-0)
    :::
    * builderio 沒有這個功能
    * 目前搜尋過其他工具也沒有這個功能 ( 大部分都是在第三方工具上另外設定，但也不是直接從 figma 轉換來的
    * builderio 遇到 button 等元件，他會按照語意生成對應的 function（已經算蠻方便的了）
        :::spoiler
        `// component.html`
        ![截圖 2024-09-30 16.19.58](https://hackmd.io/_uploads/Hkaiky_RA.png)
        `// component.ts`
        ![截圖 2024-09-30 16.20.04](https://hackmd.io/_uploads/HJTiyku0A.png)
        :::
* 科長說要做一份簡報：`\\pfdepnas48\中台發展部\02_各科專屬文件\05_運營發展科\05_F2E\03 PrimeNG & Html\前端工作說明`

## 下週預計
1. 修改前端簡報(多加說前端執行複雜度)
2. 繼續試用 builderio，看需不需要買一個帳號大家共用

## 其它
> [!Note]元件庫
> * 【angular】https://ipe-portal-midlxaco01.oa.apps.epaas.cathdevelop.intra.uwccb/primeng
>* 【vue】https://ipe-portal-vue-midlxims01.oa.apps.nc.cathdevelop.intra.uwccb/primeng
>* 【react】https://ipe-portal-react-midlxims01.oa.apps.nc.cathdevelop.intra.uwccb/primeng
 
 >[!Important] 待確認怎麼讀元件庫
    >~~如果元件庫可以讀成功，`前端開發規範指引手冊`是不是也可以開放讓 ai 閱讀~~ 