【边做边用Figma Make：上篇】借助Figma Make和Gemini仅用3小时！为工作繁忙的社长快速打造可供修改的落地页原型，新一代网页制作流程

大家好！我是 Liberogic Inc. 的 UI 设计师 Hasshi。

我最近的烦恼是：无障碍（Accessibility）服务的全新 LP（落地页）制作进展一直不顺利。

负责公司官网结构规划的社长，承蒙信任，同时还身兼其他重要工作，非常忙碌。但若就这样拖下去，项目还是无法推进……

“好，为了让社长的审阅能稍微轻松一些，我们先自己做个初稿吧！”

这个念头促成了本次的尝试：借助 AI（Gemini）与设计自动化工具（Figma Make）快速制作 LP。本文将从设计师的视角，毫无保留地分享完整步骤以及我真实的内心独白！

本次目标：通过初稿引出社长的“红笔修改”！

反正一开始就不可能做到完美！嗯！首先要抛出一个让社长容易吐槽的“球”，这很关键，没错！

快速 LP 制作的完整步骤（熟练之后会更快！）

以下是本次测试的制作流程及实际时间分配。耗时最长的是“反复修改”环节，即为提升设计精度而不断调整的部分。

1. 【分析】 Gemini老师，您觉得这个LP怎么样？ （15分钟）
2. 【文案生成】 让Gemini生成包含改进要点的LP文案 （15分钟）
3. 【提示词制作】 让Gemini编写用于FigmaMake的“魔法咒语” （5分钟）
4. 【设计生成】 FigmaMake，先一次性交给你了！ （5分钟）
5. 【反复循环】 通过分析与生成的往返来提升精度 （1小时30分钟）
6. 【转为Figma】 使用Html to Design插件导入Figma （5分钟）
7. 【Figma修正】 对布局错位等问题进行最终调整 （30分钟）

那么，让我们来详细看看每个步骤吧！

第1步：【分析】Gemini老师，您觉得这个LP怎么样？（15分钟）

首先，我们让Gemini阅读本公司现有的无障碍访问页面，并获取毫不留情的反馈。

【Gemini提示词示例】

请分析以下URL中关于网页无障碍访问的着陆页，列出其优点与改进点。（后略）

几秒钟后，分析结果出来了。“『没有引入案例或客户反馈，难以想象服务上线后的具体益处』……哇，说得太精准了，句句扎心……！但这是我自己说不出口的问题，谢谢你，Gemini！”它精准地把我隐约察觉却未能言明的问题用文字表达了出来。

好，先从掌握现状开始。这个页面明明是我自己做的，但还是有很多自己察觉不到的地方。那就请Gemini老师干脆利落地指出来吧！

第2步：【文本生成】请Gemini生成包含改进点的着陆页文本（15分钟）

将第1步的分析结果粘贴过去，请它生成包含改进方案的文本。

【Gemini提示词示例】

请以之前的分析结果为基础，制定无障碍访问着陆页的文本结构方案。（中略）新增的内容元素请明确标注为【示例文本】。

如果能生成像“【客户评价示例】〇〇株式会社：通过网站咨询的数量增加了1.5倍！”这样具体的文本，立刻就像一个真正的着陆页了。光是这样，就会让人觉得自己已经完成了工作呢。

好，把刚才拿到的批评清单直接交给Gemini，让它改写成出色的文章吧。这才是善用AI！……哦，对了，为了避免之后自己混乱，得让它加上“【示例文本】”的标记才行。我这人急性子，可得小心……

第 3 步：【编写提示词】请 Gemini 为 FigmaMake 编写“魔法咒语”（5 分钟）

将第 2 步制作的文案结构和想要的设计图像告知 Gemini，请其生成用于 FigmaMake 的英文提示词。

文案完成后，终于轮到设计了！这是最令人期待的部分！……在此之前，还需要为 FigmaMake 撰写一份“请求书（提示词）”。我的英文水平有限，很难准确传达，所以这部分就交给 Gemini 老师吧。全靠您了！

第 4 步：【生成设计】FigmaMake，接下来就拜托你了！（5 分钟）

来吧，复制粘贴魔法咒语，按下回车！……就这样。说不定一次就能得到神级设计呢？……不，大概不会吧。不过，也许会？这种期待感有点像抽卡，还挺有意思的。

复制生成的提示词，点击生成设计按钮。这几秒钟的等待时间，真的让人有点小紧张。然后，第一版设计出现了。

哇，做出来了！！不过还是有些简陋呢……接下来，我们将继续在设计层面调整，并打磨文案。

不过，嗯，果然真正的重头戏才刚刚开始。

第 5 步：【反复迭代】通过分析与生成的往返循环提升精度（1 个半小时）

接下来进入与 AI 头脑风暴的时间。一边查看 FigmaMake 生成的设计，一边向 Gemini 提出“想要这样改”的需求，持续改进提示词。这是一项扎实而踏实的工作。

“啊，不是那边！”不知不觉就自言自语得很大声。估计办公室都听得到吧。不过，这种来回调整的过程越来越有意思，也挺奇妙的。

是的，果然没能一次就OK呢！我就知道！不过心里还是有点期待的！接下来才是正题，要和AI携手并进。我是导演，Gemini则像是教练？

最终输出的结果如下

比第一次绘制的版本整理得好多了。但是……删除不需要的部分或者添加内容都很麻烦（大概是因为我把日语翻译成英文后再下达指令，所以很多时候意图没能准确传达吧……）。

觉得仅靠FigmaMake已经很难再继续改进了，于是决定先把内容转换成Figma数据再进行修改，算是一种硬办法。

STEP 6：【转换为Figma】使用 Html to Design 插件导入 Figma（5 分钟）

设计方向大致确定后，终于可以把数据迁移到Figma了。具体步骤如下。

1. 先将在FigmaMake中生成的设计以网页的形式发布。
2. 启动 Figma 插件「Html to Design」。
3. 输入已发布的FigmaMake网址，然后执行导入！

使用的是插件「Html to Design」。只需将 FigmaMake 上发布的页面 URL 复制粘贴，然后点击按钮，即可将网页转换为 Figma 图层。科技真是越来越方便了……。

发布 FigmaMake

首先发布 FigmaMake。点击“发布”后，状态会切换为“已发布”。

启动 Figma 插件「Html to Design」，输入已发布的 FigmaMake URL，然后执行导入！

启动插件，粘贴刚才获取的 URL。然后点击导入按钮即可完成！

几分钟后，输出的设计稿将显示在 Figma 中。

最后，将发布状态改回未发布

完成所有操作后，点击“取消发布”即可恢复为未发布状态。

注意事项

目前已发布状态下没有设置密码或创建开发环境等功能，因此在将其用于企业网站改版等场景时，需注意信息泄露等风险。

基本上，如果只使用自家内容制作，或者使用虚拟数据制作草稿，通常不会有影响，因此建议根据项目情况区别使用（对于不允许外部使用的项目，请绝对不要使用）。

好，已经越来越有感觉了！接下来轮到我的主场，Figma 出场！让你久等了，老搭档！

STEP 7：【Figma 修正】最终调整版式错位等问题（30 分钟）

刚导入的数据还很粗糙。有莫名其妙的分组，文本框超出边界，槽点满满。

接下来就是踏实细致的修正工作：重新应用自动布局，把散乱的元素做成组件，整体调整留白……。正是这些功夫，才能让设计质量明显提升，成为一份“像样的草稿”。

完成后的效果如下

LP 越往下，设计的精细度就越低。这是 AI 的局限所致，还是我的指令下得不够好呢……？今后我也会继续反复摸索尝试。

导入完成。……嗯，比想象中更有活力，版式都开始“放飞”了！不过，这也是 AI 努力的结果嘛。接下来就是我大显身手、把它好好收拾整齐的时候了。

总结：亲自制作后明白的“AI 协作设计”要点

这次制作流程让我真切感受到：AI 不是“万能魔杖”，而是“优秀的搭档”。

• 初稿制作的节省时间效果显著: 比从零开始苦思构思大纲要快得多。
• 反复试错是关键: 要做出好的设计，需要反复与AI对话，保持耐心。
• 最后还要靠人工: 不能全盘照单全收AI的产出，由设计师带着明确的意图进行润色，才是决定品质的关键。

顺便一提，我战战兢兢地把这份初稿拿给社长看后…… “哦，很有意思！这样讨论起来就顺畅多了！有个初稿就完全不一样了，谢谢！” 社长这样说道。

太好了！没白费力气……！今晚的啤酒一定特别好喝！

本篇就到这里！实际制作LP的部分，将在社长修改批注后完成设计，作为【后篇】发布！

各位是否也想尝试一下，与AI协作进行全新的设计制作呢？