前言

任务：利用AI+Figma还原1张你觉得好的页面
案例：12306车票购买页面

工具1：stitch（Stitch - Design with AI）
工具2：google aistudio（Build | Google AI Studio）

由于stitch可以import as figma，所以首选stitch去还原，但是感觉它不够“智能”，所以直接转战google aistudio。以下是分别是使用过程。

一、google aistudio

第1轮对话：

提示词：这是12306APP中的车片购买页面，请你帮我1:1复刻出来。

AI原型：

第2轮对话：

提示词：
你复刻的图片有以下问题：
1。要求页面大小为375*812
2.第一行，合肥到南京的图标与原图不一致。
3.日期切换这一行，我原图最右边还有一个日历的图标，点击后会弹出日期选择，你复刻时漏掉了。
4.直达和中转这一行：你的上下间距不对，太小了。 你的背景是一个纯白的底色，但是我的图中是渐变，而且选中时的背景和未选中的不一样，而且还有圆角。
5.只看高铁这一行：你的背景和我图中的背景不一样，请检查并重新修正。
6.合肥这一行：你的背景和我图中的背景不一样，请检查并重新修正。
7.订单卡片; 虽然你完整的复刻出了内容，但是字体大小，间距都不对。 请检查并重新修正。

AI原型：

第3轮对话：

提示词：

1.日期切换这一行，我原图最右边还有一个日历的图标，点击后会弹出日期选择，你复刻时漏掉了。 请检查并重新修正。
2..直达和中转这一行：你现在选中时左边有圆角，右边是直角，但是我的图中右边是有点弧度的，请检查并重新修正。 而且你未选中的这个背景色明显比我图中要深一些。
4.只看高铁这一行：你现在复刻的页面中，选择框里的白色背景，但是我的图中它和底色是一样的。
5.合肥这一行：检查字体大小和内边距，以及左右之间的外间距，和我图中不一样，请检查并重新修正。
6.订单卡片：时间的字体偏大，字重偏大。 价格和时间之间的距离太近了。 硬卧和候补在同一行，但你现在是两行。 你的分割线颜色太浅了。 请检查并重新修正。
7.底部筛选项：筛选等图标明显太大了。

AI原型：

第4轮对话：

nothing，因为第三轮结果和第二轮差不多，所以剩下的细节准备利用figma微调。开始研究怎么把Google AIstudio设计转成html，然后在通过figma插件把html转成figma design（插件名称：html.to.design）

一、把Gemini3生成的应用，免费部署成自己的网站

参考链接：
把Gemini3生成的应用，免费部署成自己的网站 - 知乎

说明：全程跟着帖子操作（我是部署到了vercel），当然由于距离帖子已经发布了几个月，所以实际操作时个别步骤反而简化了。

二、把html转成figma design

1.在figma中搜索html.to.design插件

2.在vercel打开刚才部署的项目，复制网页链接

3.粘贴链接到import via url

4.调整尺寸大小和语言

5.点击import按钮后figma页面就有页面了