第三：Figma MCP使用指南

1.FigmaMCP用于将figma设计稿转成描述页面结构和样式的JSON数据1.1.其接收figma设计稿地址和figmatoken输出描述页面描述JSON数据2.FigmaMCP的执行依赖支持MCP的ai编码工具本文以TreaAI为例3.使用MCP模式进行问答设置figma token4.如何获取figma token5.如何触发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-id2120-11167mdev#### 图片无法获取请使用空的Image组件### 页面大标题 和 页面编辑按钮#### figma地址https://www.figma.com/design/1Y6j4MOhLQpviXldYjzeDv/%E3%80%90%E8%AE%BE%E8%AE%A1%E7%A8%BF%E3%80%91IMS?node-id2120-11263mdev#### 页面大标题 和 页面编辑按钮 覆盖在头部背景上方。#### 点击编辑按钮后页面进入编辑状态默认情况下页面内容不可编辑。### 页面描述#### figma地址https://www.figma.com/design/1Y6j4MOhLQpviXldYjzeDv/%E3%80%90%E8%AE%BE%E8%AE%A1%E7%A8%BF%E3%80%91IMS?node-id2120-11268mdev#### 页面描述 显示在页面大标题下方用于描述当前页面的功能。### 页面主要内容#### figma地址https://www.figma.com/design/1Y6j4MOhLQpviXldYjzeDv/%E3%80%90%E8%AE%BE%E8%AE%A1%E7%A8%BF%E3%80%91IMS?node-id2120-11680mdev#### 页面主要内容模块 基本信息、应用凭证、身份鉴权信息1. 基本信息模块智能体名称、智能体简介、智能体标签、智能体图标智能体图标在编辑态支持上传图标。2. 应用凭证模块agentKey,支持复制和脱敏展示3. 身份鉴权信息模块Table 展示智能体的Client Key、Client Secret、创建时间