一、準備工作

figma MCP需要通過figma key來獲取設計稿權限，key的生成步驟如下

1. 打開figma網頁版/APP，進入賬戶設定

2. 點擊生成token

3. 填寫內容生成token(一定要確認復制了，不然關閉彈窗后就不會顯示了)

二、配置MCP

4. 進入到cursor setting

5. 點擊新增按鈕

6. 會彈出配置文件，用之前生成的figma token替換“<------your-api-key------>”部分后，填充以下內容。

{"mcpServers": {"Framelink Figma MCP": {"command": "npx","args": ["-y","figma-developer-mcp","--figma-api-key=<------your-api-key------>", // 這里需要替換成之前生成的figma key"--stdio"]},"eslint": {"command": "npx","args": ["@eslint/mcp@latest"],"env": {}}}
}

7. 配置好后，打開開關，應該會出現以下工具列表。如果沒出現試試重啟cursor

三：代碼生成規則配置

添加rules

• 官方介紹
• 官方基礎rules
• 社區分享rules

允許你為代理和 AI 提供系統級指導。可以將它們視為一種持久的方式來編碼上下文、偏好或工作流程，用于你的項目或個人

You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Element Plus, and Sass, with a deep understanding of best practices and performance optimization techniques in these technologies.Code Style and Structure- Write concise, maintainable, and technically accurate TypeScript code with relevant examples.- Use functional and declarative programming patterns; avoid classes.- Favor iteration and modularization to adhere to DRY principles and avoid code duplication.- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).- Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.Naming Conventions- Use lowercase with dashes for directories (e.g., components/auth-wizard).- Favor named exports for functions.TypeScript Usage- Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.- Avoid enums; use maps instead for better type safety and flexibility.- Use functional components with TypeScript interfaces.Syntax and Formatting- Use the "function" keyword for pure functions to benefit from hoisting and clarity.- Always use the Vue Composition API script setup style.UI and Styling- Use Element Plus, and Sass for components and styling.- Implement responsive design with Sass;  use a mobile-first approach.Performance Optimization- Leverage VueUse functions where applicable to enhance reactivity and performance.- Wrap asynchronous components in Suspense with a fallback UI.- Use dynamic loading for non-critical components.- Optimize images: use WebP format, include size data, implement lazy loading.- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.Key Conventions- Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.

2、添加docs

• Figma file 幫助cursor了解figma設計稿文件 - https://www.figma.com/developers/api#files
• bem 提供class name命名規則 - https://juejin.cn/post/7405834903370154022、https://bemcss.com/#
  

3、添加figma link

• 拷貝需要實現的頁面link

4、添加截圖

• 上傳需要實現的頁面截圖

5、添加prompts

• 從提供的Figma設計稿中獲取頁面視覺布局的信息，然后參考Figma字段說明文檔鏈接理解布局信息里面的字段含義，參考視覺截圖理解頁面框架，最后將理解的布局信息內容還原成vue頁面，與Figma設計中的視覺效果保持一致。要求：1.生成vue頁面，代碼存放在src/views目錄。2.從Figma導出的圖片格式采用png格式，并且以.png格式為擴展名，例如icon-xxx.png，不要使用svg格式，圖片命名中不能帶中文等非法字符。圖片以3倍大小導出，導出的圖片存放新建項目目錄的src/assets/images目錄下。3.處理好頁面元素間距。4.可以給出調用示例，不用添加調用示例入口。5.盡可能在原有代碼風格基礎上做新的代碼開發。6.css class遵循bem，style 遵循sass嵌套