---
# System prepended metadata

title: 有設計稿情境下適合什麼工具？

---

# **如何使用 AI 快速進行切版(Figma)**  

### **推薦工具：Cursor**  
### **使用方式**  

#### **1. 申請 Figma Access Tokens**  
- 參考 [Figma access-tokens](https://www.figma.com/developers/api#access-tokens) 步驟申請。

#### **2. 安裝並啟動 Figma MCP Server**  
- 到 [專案 Repo](https://github.com/GLips/Figma-Context-MCP) Clone 專案到本地環境。
- 下指令啟動 **MCP Server**
```
npx figma-developer-mcp --figma-api-key=<your-figma-api-key>
```


#### **3. 新增 Cursor MCP Server**  
- 開啟 Cursor 點擊右上角設定 -> 打開MCP -> 點擊 Add new MCP server
- 輸入 Name (設好分辨的名字) -> 選擇 Type : sse -> 輸入上面啟動 Figma MCP Server 的 endpoint (下方提供懶人複製) -> 點擊 Add
```
http://localhost:3333/sse
```
![截圖 2025-03-12 晚上11.24.07](https://hackmd.io/_uploads/BkYQDXyhJl.png)

完成畫面
![截圖 2025-03-12 晚上11.28.57](https://hackmd.io/_uploads/SkMUd7y3kl.png)

#### **3. 複製 Figma 設計稿連結**  
- 開啟 Figma 設計稿 -> 選擇區塊 -> 滑鼠右鍵 -> Copy/Paste as -> Copy link to Selection

![截圖 2025-03-12 晚上11.30.39](https://hackmd.io/_uploads/B1LhOXknJl.png)

#### **4. 使用 Cursor Agent Mode生成程式碼**  
- 回到 **Cursor** 中打開 Chat Agent Mode(快捷鍵：Command ⌘ + I) 
- 貼上 Figma 設計稿連結 -> 下Prompt描述要使用的框架、工具需求後送出

#### **5. Prompt 調整或直接進行開發**  
- 依照個人評估決定是否繼續下Prompt調整，若大部分 UI 都符合設計稿可以直接進行程式碼微調


## **效果對比**  
設計稿
![截圖 2025-03-12 下午1.28.38](https://hackmd.io/_uploads/SkIDJEkh1l.png)

最終成果
![截圖 2025-03-12 晚上11.56.46](https://hackmd.io/_uploads/r1NRAXy3Je.png)

