1.FigmaMCP用于将figma设计稿转成描述页面结构和样式的JSON数据

1.1.其接收figma设计稿地址和figmatoken，输出描述页面描述JSON数据

2.FigmaMCP的执行，依赖支持MCP的ai编码工具，本文以TreaAI为例

3.使用MCP模式进行问答

设置figma token

4 .如何获取figma token？

5.如何触发figma mcp? 在提示词中加入更具figma 设计稿地址生成前端代码的相关描述

6.如何获取figma地址? 

6.1.在figma devMode下，选种某个模块，此时地址栏中的地址就是figma mcp可以访问和解析的地址

7.提示词示例

## 任务描述 
【角色】你是一位前端技术专家，同时非常熟悉figma设计规范，你需要根据figma设计稿，生成对应的前端代码。 

【任务】根据figma设计稿，和页面的交互逻辑，生成对应的前端代码。 

【要求】 
1.请使用React、TypeScript、Ant Design、umi进行开发，请勿使用其他框架。 
2.请在src/pages/agent-info/index.tsx编写代码,并在src/pages/agent-info/index.less编写样式。 
3.页面组件需按照figma的组件结构进行编写，请在 src/pages/agent-info/components目录下编写组件代码，为每个组件在src/pages/agent-info/components下建立单独的文件夹。 

【编码规范】 
1.务必每个组件的文件夹下编写index.tsx文件，用于导出组件。 
2.务必每个组件的文件夹下编写index.less文件，用于编写组件的样式。 
3.务必保持代码样式与UI稿的一致，包括间距、字体大小、颜色等。 
4.请勿过度设计，保持代码的简洁性、可维护性、可扩展性、可复用性。 
5.对于通用型组件，在src/components下建立对应的组件文件夹，并编写组件代码。 
6.你要为你编写的每一个组件，添加prompt.md文件，详细的描述组件的功能和实现方式。 

## 页面名称：智能体注册信息 

### 页面状态： 
编辑态和非编辑态 

### 页面头部背景 
#### figma地址：https://www.figma.com/design/1Y6j4MOhLQpviXldYjzeDv/%E3%80%90%E8%AE%BE%E8%AE%A1%E7%A8%BF%E3%80%91IMS?node-id=2120-11167&m=dev 

#### 图片无法获取，请使用空的Image组件 

### 页面大标题 和 页面编辑按钮 
#### figma地址：https://www.figma.com/design/1Y6j4MOhLQpviXldYjzeDv/%E3%80%90%E8%AE%BE%E8%AE%A1%E7%A8%BF%E3%80%91IMS?node-id=2120-11263&m=dev 

#### 页面大标题 和 页面编辑按钮 覆盖在头部背景上方。 
#### 点击编辑按钮后，页面进入编辑状态，默认情况下页面内容不可编辑。 

### 页面描述 
#### figma地址：https://www.figma.com/design/1Y6j4MOhLQpviXldYjzeDv/%E3%80%90%E8%AE%BE%E8%AE%A1%E7%A8%BF%E3%80%91IMS?node-id=2120-11268&m=dev 

#### 页面描述 显示在页面大标题下方，用于描述当前页面的功能。 

### 页面主要内容 
#### figma地址：https://www.figma.com/design/1Y6j4MOhLQpviXldYjzeDv/%E3%80%90%E8%AE%BE%E8%AE%A1%E7%A8%BF%E3%80%91IMS?node-id=2120-11680&m=dev 

#### 页面主要内容模块： 基本信息、应用凭证、身份鉴权信息 
1. 基本信息模块：智能体名称、智能体简介、智能体标签、智能体图标，智能体图标在编辑态支持上传图标。 
2. 应用凭证模块：agentKey,支持复制和脱敏展示 
3. 身份鉴权信息模块：Table 展示智能体的Client Key、Client Secret、创建时间