实现的场景是，在某个设计平台设计好 UI 图，利用 MCP，直接让 Trae 调用 UI 图的分享链接生成网页。

分为两部分，一是内置智能体，二是自定义智能体，二是在一的基础上包了一层，效果一样的。

一、官方内置智能体

需要科学上网条件+Node.js 环境，Node.js 不懂可以看上面的高德 MCP 配置。

1、进入 Figma 设计平台官方

https://figma.com/

2、点击左上角的账户

3、点击 Settings 设置

4、同意权限

5、点击 Security 创建 token

6、输入你自己起的 token 名称

注意：底部的读写权限全部打开。

7、创建成功，这里的 token 要保存好

8、打开 Trae 添加 Figma MCP

9、将上面生成的 token 输入到这个位置

注意，这里我用的是 Github 举例，因为我已经添加完 Figma 的了。

10、点击确认即可生成

11、打开 figma 设计一个网页

这里为方便演示，我直接用的是 figma 提供的模板。

12、生成后点击右上角的 share 复制链接

阅读权限 can view 记得打开，设置为 Anyone 所有人可阅读。

13、打开 Trae 对话框，让 Trae 按照设计好的原型图生成网页


请按照我提供的 figma 链接内容生成单个静态前端页面，UI 要严格还原设计稿，不要有自己的想法在里面。

figma 链接：贴你自己的链接

14、Trae 开始生成代码

15、效果演示

国内版的 Trae 模型能力有限，只有 Deepseek 和豆包，所以效果差，但是流程已经通了，等模型能力跃迁，这些都不是问题。

16、我贴一下源代码，大家可以体验下。

1）html 文件代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Figma设计稿实现</title>
    <link rel="stylesheet" href="style.css">
    <script src="https:
</head>
<body>
    <div class="app-container">
        <header class="app-bar">
            <div class="leading-icon">
                <div class="icon-container">
                    <svg class="icon" viewBox="0 0 24 24">
                    </svg>
                </div>
            </div>
            <h1 class="title">Title</h1>
            <div class="trailing-icons">
                <div class="icon-container">
                    <svg class="icon" viewBox="0 0 24 24">
                    </svg>
                </div>
                <div class="icon-container">
                    <svg class="icon" viewBox="0 0 24 24">
                    </svg>
                </div>
            </div>
        </header>
        <main class="content">
            <div class="bg-yellow-400 p-10">
                <h2 class="text-4xl font-bold text-center">Figma basics</h2>
                <div class="flex justify-center mt-8">
                    <img src="assets/vector_124.svg" alt="Vector 124" class="w-32 h-32">
                    <img src="assets/vector_125.svg" alt="Vector 125" class="w-32 h-32 ml-4">
                </div>
            </div>
        </main>
    </div>
</body>
</html>

2）css 代码

:root {
    --primary-color: #FEF7FF;
    --secondary-color: #E8DEF8;
    --text-primary: #1D1B20;
    --text-secondary: #49454F;
    --border-radius: 28px;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--primary-color);
    color: var(--text-primary);
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #CAC4D0;
}

.icon-container {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background-color: var(--secondary-color);
}

.icon {
    width: 24px;
    height: 24px;
}

二、自定义智能体

这部分的意思是把上述的 MCP 包成一个智能体，其他没有什么区别。

1、进入 Trae 的聊天对话，创建智能体

2、工具引用刚刚创建好的 MCP 服务

提示词这块 Trae 官方给的建议：

根据用户提供的 Figma 链接，精准还原 UI 设计，
生成语义化、响应式的前端页面代码。
代码结构清晰，遵循行业最佳实践，
视觉细节与设计稿高度一致，
默认使用 [React + Tailwind]（可按实际替换），
需支持多端适配。禁止擅自修改设计内容，确保忠实还原。

3、点击创建即可生成

其他路径和内置智能体一样，不再重述。