一个简单Demo彻底理解前后端怎么连的丨Figma + Supabase + Vercel

哈喽，大家好！

我是阿星👋

很多小白编程学了三个月，全是AI做主UI，难以融入自己的设计理念。

甚至不了解前后端到底怎么连通的。

一旦代码出错了，可能和AI对话还要重新理解一遍概念。所以今天，我们通过一个简单的case，把一个完整前后端的核心链路全跑一遍👇🏻

让你能自己把控UI、把控数据库、把控前端、后端。

🗺️ 先看一眼全局流程

整件事分五步，每一步做完了才能进下一步：

1① Figma 画页面 → 
2② 定接口契约 → 
3③ Supabase 建数据库→ 
4④ AI 帮你写连接代码 → 
5⑤ 跑起来
6

🤝 动手之前先定一份「字段名合同」

这件事叫接口契约，说白了就是：前端、后端、数据库，大家提前说好同一个字段叫什么名字。

为什么要说这个？因为如果前端传给后端的是 wishText，后端存数据库用的是 wish_content，数据库字段叫 content。三个地方三个名字，项目还没上线就乱套了。

所以我们先定好两件事：

1、表名叫 wishes（数据库建表用这个，代码里取数据也用这个）

2、愿望内容字段叫 content（前端传进去叫 content，数据库存的叫 content，取出来也叫 content）

其他的——比如每条记录的 id和创建时间 created_at，Supabase 会自动帮你加，不用手动约定。

就这两条，后面所有代码都按这个来，没有第二个名字。

🎨 第一步：Figma 画页面，拿到的是「结构参考」

按 R 画矩形，圆角 8，写「输入你的愿望...」——这就是输入框

再画个蓝色矩形写「提交」——按钮

下面三个灰色方块占位——代表愿望列表

列表区域 → 列表-愿望展示

画完后，给它们各起个 id，方便之后 JavaScript 找到它们：

输入框 → wishInput

提交按钮 → submitBtn

列表区域 → wishList

这三个名字只在前端代码内部用，不是接口契约的一部分，你自己记住就行，后面给 AI 写提示词会用到。

你可以用figma to code插件来导出代码。多种框架格式可选👇🏻

也可以用官方的开发者模式。

功能类似的AI工具也有很多比如Locofy Lightning，你可以搜一下相关mcp，我们今天只讲逻辑，所以不再推荐其他。

先保存这段代码到你本地编辑器里（你可以用sblime这个编辑器）

一会儿让AI照着做

你画的不一样就会和我代码不一样，只是给大家看下大概结构

1<div style="width: 392px; height: 880px; position: relative; background: white">
2  <div style="width: 393px; height: 852px; left: -1px; top: 1px; position: absolute; background: #FFFFBB; overflow: hidden">
3    <div style="width: 255px; height: 194px; left: 78px; top: 326px; position: absolute; background: white; border-radius: 8px; border: 1px black solid"></div>
4  
5  ……
6

这就是 Figma 给你的东西：样式代码，告诉你每个元素长什么样。 但注意——它只管外观，不管逻辑。它不知道点击按钮之后要干什么，更不知道数据要怎么传给数据库。

🗄️ 第二步：Supabase 建数据库（3分钟）

先get一个supabase——

新建项目，

进 Table Editor，新建一张表叫 wishes。

加一列，字段名必须叫 content（和前面定的契约一致），类型选 text。

然后进设置页面，找 API 那栏，把这两个复制出来备用：

- Project URL ：你的数据库地址（ettings → Data API（你还没截到的那页））

- Anon Key ：访问密钥（Settings → API Keys → Publishable key）

这两个是之后连接数据库要用的「门牌号和钥匙」。

🤖 第三步：让 AI 帮你写连接代码

现在你手里有两样东西：Figma 给的 CSS 样式，Supabase 给的 URL 和 Key。

打开 Cursor（或者 Claudecode、Antigravity），

（软件需要你自己解决，新建项目的方法就是在你电脑本地新建文件夹后直接拖入你装的软件里）：

把上面figma里导出的那段代码复制，在项目文件夹里新建一个 figma-style.html

文件粘贴进去，AI 能直接看到它。

然后把下面这段话扔给它，把你的信息替换到我标黄的地方——

我要做一个许愿墙页面。项目里有一个 figma-style.html文件，是 Figma 导出的样式。请用 HTML + JavaScript 引入 Supabase SDK，把那个文件的样式整合进来，页面有一个输入框（id 叫 wishInput）、一个提交按钮（id 叫 submitBtn）、一个列表容器（id 叫 wishList）。点击提交时，把输入框内容存到 Supabase 的 wishes 表，字段名是 content，存完刷新列表显示所有愿望。Project URL 是 [你的URL]，Anon Key 是 [你的Key]。做成一个完整的 HTML 文件。

到这里你会看到AI已经按照你设计的UI还原了基本结构。

你会发现 AI 还原的版本跟 Figma 稿不完全一样——这很正常。

Figma 给的是绝对定位的视觉稿，AI 重新用了更合理的布局方式实现它。

外观七八成像，但功能是真实的。如果你要像素级对齐，那是下一阶段的事了。

AI 会给你一段完整代码。

我把关键部分展示一下，让你看清楚发生了什么。先扫一眼汉字就行。

1<!-- HTML：结构来自 Figma 的设计，id 名字自己取 -->
2<input type="text" id="wishInput" placeholder="输入你的愿望...">
3<button id="submitBtn">提交</button>
4<div id="wishList"></div>
5

1// JavaScript：这部分 Figma 给不了，AI 帮你生成
2const { createClient } = supabase;
3const db = createClient('你的Project URL', '你的Anon Key');
4
5document.getElementById('submitBtn').addEventListener('click', async () => {
6    const myWish = document.getElementById('wishInput').value;
7
8    // 注意这里：传给数据库的键名是 content（契约定的那个）
9    await db.from('wishes').insert([{ content: myWish }]);
10
11    loadWishes();
12});
13
14async function loadWishes() {
15    const { data: wishes } = await db.from('wishes').select('*');
16    document.getElementById('wishList').innerHTML =
17        wishes.map(w => [`<p>${w.content}</p>`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.p.md)).join('');
18}
19
20loadWishes();
21

整个原理其实是这样的：

❤️ 第四步：规定数据表权限

这个时候你运行还会报错，因为你的数据库没有设置策略，不设置即无法访问

去 Supabase 控制台 → SQL Editor，

粘贴运行下面代码，即设置你的数据访问策略

1-- 1. 先确保 RLS 是开启状态
2ALTER TABLE wishes ENABLE ROW LEVEL SECURITY;
3
4-- 2. 所有人（含未登录）可以查看所有愿望
5CREATE POLICY "public_select"
6ON wishes FOR SELECT
7TO anon
8USING (true);
9
10-- 3. 所有人（含未登录）可以提交愿望
11CREATE POLICY "public_insert"
12ON wishes FOR INSERT
13TO anon
14WITH CHECK (true);
15
16-- UPDATE 和 DELETE 没有策略 = 默认全部拒绝，无需额外写
17

🏗️ 第五步：想做得更真实，加一层后端

上面这个许愿墙能跑，但还不是真实公司的做法。

真实项目，前端不会直接连数据库。中间会有一层后端 API：

1用户浏览器（前端）→ 你的服务器（后端）→ 数据库
2

为什么要多这一层？

现在你的 Publishable key 写在前端代码里，任何人打开开发者工具都能看到。你写的前端校验逻辑，他们都能绕过，因为那些代码跑在他们自己的机器上，不在你的服务器上。

后端不一样。后端代码跑在你控制的服务器上，用户根本摸不到，所有校验必须经过你。

我们刚才演示的，是supabase充当了你的后端。实际工作中，你的项目本身可以有一个后端。

改成后端版本，变化只有一个地方：

前端不再直接调 Supabase，改成调你的后端接口：

1javascript
2// 之前：直接插数据库
3await db.from('wishes').insert([{ content: myWish }]);
4// 加后端后：调你的接口
5await fetch('/api/wishes', {
6    method: 'POST',
7    headers: { 'Content-Type': 'application/json' },
8    body: JSON.stringify({ content: myWish })
9});
10

想让 AI 帮你搭，给它这段话，在我们前面的提示词上新增的就是标黄的这一句：

_我有一个许愿墙项目，前端目前直接连 Supabase。**现在帮我加一层 Node.js 后端，用 Express 框架。后端提供两个接口：POST /api/wishes 接收 { content } 存进 Supabase 的 wishes 表，GET /api/wishes 返回所有愿望列表。*_后端校验 content 不能为空、不超过 200 字。Supabase 的* URL *和 Secret key 只放在后端**环境变量**里，前端代码里不出现任何密钥。*

然后你的文件结构就会变成

1改造前：
2  浏览器 —— Supabase SDK（含 anon key）——→ Supabase
3
4改造后：
5  浏览器 ——→ Express（/api/wishes）——→ Supabase（service role key 在服务器上）
6

数据库仍然可以丝滑访问，只不过这一次AI会让你在新代码里用另一个key，

Secret key。

❤️ 第六步：上线

这个时候你运行还会报错，因为你的数据库没有设置策略，不设置即无法访问

加完后端之后，你的项目就需要一台跑着 Node.js 的服务器——

可以是本地测试

也可以部署到 Vercel、Railway 这类平台，

额度够个人项目用。

比如想直接部署到vercel只用追加这么一段话。

1帮我把它改成 Vercel 能部署的结构：前端放根目录，后端 API 改写成 Vercel Serverless Functions 格式，放在 /api文件夹下（api/wishes.js），同时生成 vercel.json配置文件。Supabase 的 URL 和 Secret key 放在 Vercel 环境变量里，不写死在代码中。最后给我一个完整的文件结构和部署步骤
2