使用Clauder 3.7與Figma MCP生成Flutter界面代碼

視頻

https://youtu.be/7KE_dXtsveA

https://www.bilibili.com/video/BV17XQBYkELW

前言

原文 如何通過Clauder 3.7與Figma MCP高效生成Flutter代碼

上篇文章討論了 Cursor 0.46，但未提及 Model Context Protocol (MCP) 協議。這是一個重要的特性，使 Cursor 能夠訪問外部資料。今天，我將舉例説明如何通過 Figma MCP 來生成界面代碼。

參考

• cursor mcp 説明
• mcp 官網
• figma mcp 開源項目
• mcp composio.dev 在線服務
• mcp.so 收集站

步驟

第一步：獲取 figma token

第二步：配置 cursor mcp

https://github.com/GLips/Figma-Context-MCP

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "figd_cZZ0Jb1ZuDYrYZZJtI2tAuI4YktGof5PrHo8N_W5"
      }
    }
  }
}

我目前是最新的 cursor ，變成了手動輸入 json 配置，之前還是有界面的。

mcp 有兩種模式：

1. command 命令行模式
2. sse 在線服務調用（這種方式由於採用請求中轉轉發，可能有丟包問題。）

第三步：複製 figma 組件鏈接

選中組件後，右鍵選擇 copy link to selection 。

第四步：輸入提示詞

提示詞，我加入了 figma 鏈接和代碼參考要求。

請參考 @https://www.figma.com/design/RPc6qZ3UUymiEIwt3m6fqN/Altegic---Online-Learning-Mobile-App-UI?node-id=0-1327&t=Xcb9LnHfFIQMxDXH-4 設計搞，編寫一個消息頁面。

代碼風格參考 lib/pages/goods/product_list/view.dart

Cursor 自動會識別 mcp 請求，全自動。

記得打開 Yolo 模式。

Agent 自動讀取了 figma mcp 服務返回資料。

返回的是一個 json ，描述了 figma 設計稿的佈局結構、樣式、內容。

代碼生成還是不錯的，目錄結構複合我的規範，視圖view代碼也是採用我的 build 構件法來寫的，結構沒問題細化就自己調幾下好了。

最後：運行

小結

在本篇文章中，我們探討了如何使用Clauder 3.7與Figma MCP工具高效生成Flutter界面代碼。通過結合這兩款強大的工具，開發者能夠顯著提升代碼生成效率和設計一致性。無論是新手還是經驗豐富的開發者，瞭解這些工具的應用將助力您的Flutter開發之旅。希望本文能為您提供有價值的參考，幫助您在Flutter界面設計中取得更好的成果。

感謝閲讀本文

如果有什麼建議，請在評論中讓我知道。我很樂意改進。

貓哥 APP

• SaaS Fast
• Flutter GetX Generator

flutter 學習路徑

• Flutter 優秀插件推薦
• Flutter 基礎篇1 - Dart 語言學習
• Flutter 基礎篇2 - 快速上手
• Flutter 實戰1 - Getx Woo 電商APP
• Flutter 實戰2 - 上架指南 Apple Store、Google Play
• Flutter 基礎篇3 - 仿微信朋友圈
• Flutter 實戰3 - 騰訊即時通訊 第一篇
• Flutter 實戰4 - 騰訊即時通訊 第二篇

© 貓哥
ducafecat.com

end