AI开发：claude+Figma+VS CODE 从UI到页面

视页面复杂度而定，大概页面还原度80%左右吧。

还原效果：左边是AI生成的页面，右边是原型图

提示词www.figma.com/design/ 。 根据提供的 Figma 链接，精准还原 UI 设计（不要修改现有导航栏，不要绘制链接中导航栏），绘制在pages/index中，不要做其他改动。如果无法访问Figma链接退出执行。

1. VS CODE 搜索安装插件claude

2. 在这里注册购买（新人有优惠）。

www.bigmodel.cn/glm-coding?…

然后添加apik,复制一下。

找到 Claude Code 的配置文件（通常在 ~/.claude/settings.json，Windows 在 C:\Users<用户名>.claude\settings.json。如果没有settings.json文件创建一个）。加入以下内容：

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "yourkey here",
    "API_TIMEOUT_MS": "3000000",
    "ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
    "MCP_TOOL_TIMEOUT": "30000"
  },
  "permissions": {
    "defaultMode": "bypassPermissions"
  },
  "alwaysThinkingEnabled": false
}

使用：要下载Figma客户端并打开， 打开vscode -> 终端，输入claude -> /ide 。然后在claude中就可以发消息了。

注意：如果claude中出现获取不到 Figma 链接 ，它就会自己瞎画。

解决办法：1.确认Figma客户端是否打开 2.重新打开终端输入claude -> /ide。

如果有其他问题，请参考下面链接

参考内容：

1. claude code安装

Claude Code如何集成到VSCode、PyCharm IDE及使用技巧 - 狂师 - 博客园

2. claude code 配置GLM4.6

zhuanlan.zhihu.com/p/195737068…

3. Figma MCP配置VSCODE

Figma