写在前面

在前端开发中，设计稿还原是一项耗时且需要精细调整的工作。传统的开发流程中，开发者需要根据设计稿手动编写HTML和CSS代码，不仅效率低下，还容易出现视觉偏差。

现在，借助 Qoder 的 AI 能力和 Figma MCP 服务，我们可以实现设计稿的智能化还原。只需提供 Figma 设计链接，Qoder 就能自动生成高质量的前端代码，大幅提升开发效率。

本文将详细介绍如何使用 Qoder 实现 1:1 还原 Figma 设计稿，包括:

1. 获取 Figma 访问密钥
2. 在 Qoder 中配置 Figma MCP 服务
3. 使用 AI 智能还原设计稿
4. 将项目部署到魔搭创空间

让我们开始这段 Vibe Coding 之旅吧！

一、获取Figma密匙

我们需要获取Figma 的 Access Token，才能在Qoder中调用Figma的MCP服务。步骤如下：

1. 访问 Figma官网：https://www.figma.com/，登录账号，如果没有账号，可以单击“Create one”，输入邮箱注册一个账号。

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

界面上显示设置窗口。

3. 在窗口的顶部菜单中，选择 Security。

你已进入安全设置面板。

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

界面上显示 Generate new token 弹窗。

5. 配置你的 Figma Personal Access Token：

   • 输入 Token 的名称。（自定义）

   • 设置 Token 的有效期。（自定义，我设置的是30天）

   • 配置 Token 的权限。（全部勾选即可）

6. 点击窗口底部的 Generate token 按钮。

7. 复制这个 personal access token。（注：这个token只会出现一次，所以一定要将其复制下来，在下一步中要用到）

二、Qoder接入Figma MCP服务

接下来，需要在Qoder中接入Figma的MCP服务，具体步骤如下：

1. 在Qoder中创建并打开项目TEST，单击右上角的“Qoder设置”，打开设置。

2. 单击“MCP服务”，找到Figma，单击“安装”。

3. 安装后，配置Figma的密匙（第一步中获取的Figma密匙）。

4. 测试Figma的MCP服务。

三、1:1还原设计稿

现在，可以让Qoder帮我们复刻Figma的设计稿了，具体步骤如下：

1. 在Figma中设计页面，比如：https://www.figma.com/design/kjJz0WS71z6Ad4yxNHgtUZ/login_page–Community-?node-id=0-1&p=f&t=TE59DTQGLaulnpOo-0，右键选中想要复刻的页面，单击“Copy/Paste as”->“Cope link to selection”。

2. 回到Qoder，在智能会话框输入以下内容，然后单击发送按钮。

请严格按照我提供的 Figma 链接内容，调用相关的MCP工具，生成 HTML 前端页面。UI 要严格还原设计稿，需要实现响应式设计。相关的资源要下载到当前目录，代码结构清晰，视觉细节、页面布局与设计稿一致。禁止擅自修改设计内容，确保忠实还原。Figma链接：https://www.figma.com/design/kjJz0WS71z6Ad4yxNHgtUZ/login_page--Community-?node-id=2-2&t=TE59DTQGLaulnpOo-4

3. 等待Qoder调用智能体生成页面。

生成的页面如下图。

4. 页面布局与Figma设计稿不一致，没关系，可以继续让Qoder帮我们优化。

image.png 请仔细查看这个页面的布局，修改 styles.css ，确保布局一致

优化后的页面如下图。

5. 可以让Qoder帮我们启动index.html，然后预览页面。

本地启动index.html，在Qoder预览

在预览页面的时候，可以单击“发送元素”按钮，选中元素添加到输入框，让Qoder帮我们优化样式。

6. 优化后的页面如下图所示，1:1复刻了Figma设计稿。

7. 可以让Qoder帮我们生成项目说明文档。

四、部署到魔搭创空间

最后，将页面部署到魔搭创空间，分享给大家。

1. 访问魔搭创空间：https://www.modelscope.cn/studios，单击右上角的“我要创建”按钮，然后选中“编程式创建”。

2. 填入基本信息。

3. 单击“创建创空间”按钮。

4. 进入创空间，单击右上角“空间文件”，将Qoder生成的文件上传至创空间。

5. 修改 README.md文件中deployspec的entry_file，将app.py改成index.html。

6. 单击创空间右上角的设置按钮，然后单击“上线”按钮将项目上线。

7. 该项目已上线魔搭创空间，欢迎大家访问：https://www.modelscope.cn/studios/Want595/login_page/summary。你可以将本项目克隆下来，查看并学习。

写在最后

通过本文的实践，我们体验了 Qoder 结合 Figma MCP 服务的强大能力，这种 Vibe Coding 的开发方式，让我们从繁琐的代码编写中解放出来，可以更专注于产品设计和用户体验。

核心优势总结

• 高效还原：从设计稿到代码,只需几分钟即可完成
• 精准度高：1:1 还原设计稿,包括布局、颜色、字体等细节
• 智能优化：AI 可以根据反馈持续优化页面效果
• 响应式设计：自动生成适配不同屏幕的响应式布局
• 快速部署：可直接部署到魔搭创空间，方便分享和演示

适用场景

• 快速原型开发和概念验证
• 设计稿快速落地和迭代
• 静态页面和展示类网站开发
• 学习前端开发的最佳实践

注意事项

• Figma Token 具有时效性，过期后需要重新生成
• 复杂交互逻辑仍需手动编写 JavaScript 代码
• 建议在 AI 生成代码后进行代码审查和优化

希望这篇文章能帮助你开启全新的前端开发体验。如果你有任何问题或建议，欢迎交流讨论！

相关链接:

• Qoder 官网：https://www.qoder.com/
• Figma 官网：https://www.figma.com/
• 魔搭创空间：https://www.modelscope.cn/studios
• 示例项目：https://www.modelscope.cn/studios/Want595/login_page/summary

---

让 AI 成为你的编程伙伴，享受 Vibe Coding 的乐趣！