figma MCP + cursor如何将设计稿生成前端页面

一、准备工作

figma MCP需要通过figma key来获取设计稿权限,key的生成步骤如下

1. 打开figma网页版/APP,进入账户设定

2. 点击生成token

3. 填写内容生成token(一定要确认复制了,不然关闭弹窗后就不会显示了)


二、配置MCP

4. 进入到cursor setting


5. 点击新增按钮

6. 会弹出配置文件,用之前生成的figma token替换"<------your-api-key------>"部分后,填充以下内容。

bash 复制代码
{
  "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

允许你为代理和 AI 提供系统级指导。可以将它们视为一种持久的方式来编码上下文、偏好或工作流程,用于你的项目或个人

bash 复制代码
    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

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嵌套
相关推荐
万少25 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL30 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css