vscode添加MCP

figma mcp使用

参考配置

• https://juejin.cn/post/7538737860544626727#heading-4
• https://www.cnblogs.com/volcengine-developer/articles/18932461

获取 Figma 的 Access Token

• 1、 MCP Server 市场
• 2、找到Figma AI Bridge添加
• 3、在 Figma 页面上复制先前创建的 Figma Personal Access Token，然后粘贴至输入框中
• 4、创建智能体 （创建Figma Agent） => Figma Agent助手
• 5、提示词配置
  • 如：根据用户提供的Figma链接，精准还原UI设计，生成响应式的HTML格式的前端页面代码。代码结构清晰，视觉细节与设计稿高度一致。禁止擅自修改设计内容，确保忠实还原
• 6、调用智能体
  • 如：https://figma链接， 请严格按照我提供的Figma 链接内容生成HTML 前端页面。UI必须严格还原设计稿，需要实现响应式设计

Figma Token：figd_dRDYVGWgSf61L4MdAPUNR1vhBQQEskg6que9mSmB

Context7配置

• API Key 的配置

  • 基础使用：Context7 提供免费额度，在很多情况下（尤其是个人轻度使用）可以不填 Key 直接运行。

    进阶需求：如果你发现请求受限（Rate Limited）或者想要更快的响应速度，建议去 Context7 官网 (context7.com) 注册一个免费账号并获取 API Key。

• 参考配置

  • https://github.com/upstash/context7/blob/master/i18n/README.zh-CN.md

• 在context7官网中生成key

  • https://context7.com/dashboard

如：完成xxx需求，使用Context7查阅相关文档来实现