专栏名称: 字节跳动技术团队
字节跳动的技术实践分享
目录
相关文章推荐
51好读  ›  专栏  ›  字节跳动技术团队

玩转MCP第一弹|手把手教你将 Figma 设计稿转化为前端代码

字节跳动技术团队  · 公众号  · 架构  · 2025-05-15 17:34

正文

请到「今天看啥」查看全文


powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

4. 执行 source $HOME/.local/bin/env 命令,加载 uvx 所需的运行时环境变量和初始化配置。

5. 执行以下命令,验证是否安装成功。

uvx --version

若安装成功,终端中会输出已安装的 uvx 的版本号。


uvx 安装完成后,使用以下步骤安装 Node.js:

  1. 请前往 Node.js 官网,下载并安装 Node.js 18 或更高版本。

  2. 安装完成后,在终端中运行以下命令确认是否安装成功。

node -v
npx -v

若安装成功,终端中会输出已安装的 Node.js 的版本号,例如:

v18.19.0
10.2.0
3. 重启 Trae IDE 以使 Node.js 生效。
图片

第三步:获取 Figma 的 Access Token

配置 Figma AI Bridge 时,需要填入你的 Figma Personal Acccess Token。你可以在 Figma 安全设置中心获取它。步骤如下:

  1. 登录 Figma。

  2. 点击页面左上角的用户头像,然后在菜单中选择 Settings。

图片

界面上显示设置窗口。

3. 在窗口的顶部菜单中,选择 Security。
图片

你已进入安全设置面板。

4. 移动至 Personal access tokens 部分,然后点击 Generate new token 按钮。
图片

界面上显示 Generate new token 弹窗。

图片
5. 配置你的 Figma Personal Access Token:
  • 输入 Token 的名称。

  • 设置 Token 的有效期。

  • 配置 Token 的权限。直接复用下表中的配置:

权限类型







请到「今天看啥」查看全文


推荐文章
食尚知味  ·  此视频,太震撼了,看了八遍!
8 年前
每日健康知识  ·  什么都舍不得的人,也无法拥有幸福生活
8 年前
新材料在线  ·  一张图看懂100大新材料市场规模预测
7 年前