最近AI圈很火的chrome devtools mcp

 

洨邊假設大家知道mcp是什麼了，直接上官方github，文件寫得很清楚

https://github.com/ChromeDevTools/chrome-devtools-mcp

這邊以codex為例

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

基本上就裝好了

接著就來實際操作一下

我們來切一個figma版

首先把下面選項選到箭頭，第二步選擇頁面的標題按右鍵，找到copy as > copy link to selection，複製這個頁面的網址（取得node_id）

咒語：

使用chrome devtools訪問figma中設計好的頁面，用tailwindcss完整的復現這頁面：{網址}

然後你就靜靜看著他完成吧

這個token吃挺兇的

9/30

第一次嘗試，大失敗，他完全沒有參考我給的figma自己亂切東西，還吃了我一大堆token....