# Figma + Uebfaqe：从设计稿到上线网站

> 连接 Figma，AI 会读取设计中的画框、颜色和文字，据此搭建网站。只有在你确认后，它才会在 Figma 中留下评论。

- 规范网址: https://uebfaqe.ai/zh/jicheng/figma
- 板块: 集成
- 语言: zh
- 发布方: Uebfaqe (https://uebfaqe.ai)

## 摘要

如果你在 Figma 中已有完成的设计，AI 可以把它当作起点。连接它，让 AI 按照画框、颜色和文字来制作页面。

## 关键事实

- 按画框制作页面: AI 读取 Figma 文件，按其中的版块顺序和文字搭建页面。
- 设计中的颜色和字体: AI 从设计中获取颜色、字体和间距，并用于整个网站。
- 确认后留下评论: 让 AI 在 Figma 文件中留下评论，比如给设计师的问题。只有在你确认后才会执行。

你的 Figma 设计，变成网站

## 你可以让 AI 做什么

把应用连接到网站后，可以在对话中输入的示例。

- 按 Website 2026 文件中的 Home Desktop 画框搭建首页。
- 在整个网站中使用 Figma 里 Brand Kit 文件的颜色和字体。
- 在 Figma 的“联系我们”画框上留言，询问移动版的设计。

## 如何连接

1. **打开“集成”**: 在 Studio 中，打开你想使用 Figma 的那个网站的“集成”，并在“浏览”标签页中找到它。
2. **点击“连接”**: 点击“连接”，在弹出的窗口中登录你的 Figma 账户并授权访问。该连接只对这个网站有效。
3. **告诉 AI**: 在对话中说出你需要 Figma 提供什么。AI 会读取所需内容，并在应用中执行任何操作前先请你确认。

## 一切由你掌控

AI 会在需要时直接读取你的数据，但任何在应用中发送、修改或删除内容的操作，都要等你在对话中确认。你的数据保持私密，除非你要求，否则绝不会出现在你的网站上。

## 常见问题

### AI 会逐像素复制设计吗？

AI 遵循设计的结构、颜色和文字，搭建一个在任何屏幕上都能正常使用的真实网站。之后你可以在对话或编辑器中微调。

### 如果我在 Figma 中修改了设计，网站也会变吗？

不会。AI 在你要求时读取设计。修改之后，让 AI 更新页面并重新发布。

### AI 会修改我的 Figma 文件吗？

不会。AI 读取设计，只有在你确认后才能留下评论，但不会改动你的画框。

## 更多集成

- [Google Photos](https://uebfaqe.ai/zh/jicheng/google-photos): 在相册中存储、整理和分享你的照片。连接后，AI 就能处理你的照片和相册。
- [Zeplin](https://uebfaqe.ai/zh/jicheng/zeplin): 连接设计师和开发者的设计交付工具。连接后，AI 就能处理你的界面和组件。
- [Canva](https://uebfaqe.ai/zh/jicheng/canva): 简单易用的设计工具，提供社交帖子和演示文稿模板。连接后，AI 就能处理你的设计。

---

来源: https://uebfaqe.ai/zh/jicheng/figma