Topics

大家好！我是 Hasshi，Liberogic有限公司的 UI 设计师。

我最近担心的是，我在为我的辅助功能服务创建新的 LP（登录页面）方面没有取得太大进展。

幸好，负责设计我们公司网站的CEO忙得不可开交。但照这样下去，我们根本无法继续下去……

“好吧，至少在这里起草一份草稿，以便总统更容易审查！”

一切都始于这个想法，使用 AI（Gemini）和设计自动化工具（FigmaMake）快速制作 LP这次我会以设计师的角度来分享整个过程和我的真实想法！

我们这次的目标是：让总统对草案做出一些“红色评论”！

从一开始就不可能做出完美的东西！是的！首先，一定要做出总统可以轻松评论的东西，这一点绝对重要！

创建超快 LP 的完整过程（一旦习惯了，速度会更快！）

这次尝试的生产流程实际的时间分配如下： 最耗时的是“重复”部分，是为了提高设计的准确性。

1. 【分析】双子座老师，您觉得这张 LP 怎么样？（15分）
2. [文本生成]让 Gemini 创建包含改进内容的着陆页文本（15分）
3. [即时创作]让 Gemini 在 FigmaMake 上施展你想要的“魔法”（5分）
4. [设计生成]FigmaMake，我先订了！（5分）
5. [重复循环]通过分析和生成之间的往返来提高准确性(1.5小时)
6. 【Figma化】使用 Html to Design 插件导入 Figma（5分）
7. 【Figma修正】对布局问题的最终调整（30分）

现在让我们仔细看看每个步骤！

STEP 1：【分析】双子老师，您觉得这张LP怎么样？（15分钟）

首先，我们让 Gemini 阅读我们现有的可访问性页面并获得诚实的反馈。

[双子座提示示例]

请分析以下 URL 上的网页可访问性登录页面，并列出其优点和缺点。

几秒钟后，分析结果就出来了：“‘没有案例分析，也没有客户评价，所以很难想象实施该服务的具体好处’……哇，太准确了，真是让人心痛！不过，这是我自己说不出口的话，所以谢谢你们，Gemini！”他们能够准确地用语言表达出我隐约感觉到的问题。

嘛，首先先了解一下现在的情况吧。这个页面是我创建的，不过总之，我自己没注意到的地方我会请双子老师指出的！

步骤 2：[文本生成] 让 Gemini 创建包含改进内容的 LP 文本（15 分钟）

我们将复制并粘贴步骤 1 的分析结果，并要求您创建包含改进建议的文本。

[双子座提示示例]

根据以上分析结果，请为网页无障碍落地页创建文本结构方案。（略）请将新增元素清晰标记为[示例文本]。

当你添加一些具体的文字，例如“客户评价示例：XXXX有限公司：网站咨询量增加了1.5倍！”时，它立刻就变得更像一个落地页了。光是这一点就足以让你感觉你的工作已经完成了。

好的，我会把收到的批评清单交给 Gemini，让他们把它变成一些很酷的东西。这才是人工智能的最佳用途！……哎呀，我得确保他们把它标记为“[示例文本]”，这样我以后就不会搞混了。我有点急于下结论……

步骤 3：[创建提示] 让 Gemini 在 FigmaMake 上施展“魔法咒语”（5 分钟）

您将被要求提供在步骤 2 中创建的文本结构提案和您想要创建的设计图像，并为 FigmaMake 生成英文提示。

文字写好后，就该设计了！这才是最有意思的部分！不过在此之前，我得先给 FigmaMake 写个“提示”。我的英语不太好，表达不通，所以就交给 Gemini 老师吧。指望他了！

步骤 4：[设计生成] FigmaMake，剩下的交给我们！（5 分钟）

现在，复制粘贴魔法咒语，然后按回车键！……或者说，你这么说。也许我能一次性得到一个神圣的设计？……也许不行。或者也许？这种兴奋有点像扭蛋，很有趣。

复制并粘贴生成的提示，然后点击“生成设计”按钮。这几秒钟的等待出乎意料地令人紧张。然后，第一个设计就出现了。

哇，完成了！不过还是有点简单……我们会继续调整设计和措辞。

但是，真正的行动从这里开始。

步骤 5：[重复循环] 通过在分析和生成之间来回切换来提高准确率（1.5 小时）

接下来，就到了与 AI 进行头脑风暴的时间了。我们一边查看 FigmaMake 生成的设计图，一边与 Gemini 商讨想要改进的地方，并稳步改进提示。

“哦不，不是那样！”我大声地自言自语道。我的声音大概在办公室里回荡了。但奇怪的是，我却越来越喜欢这次集会了。

是的，第一次尝试不太顺利！我知道会的！但我还是抱有希望！真正的行动从这里开始，一场与人工智能的三足比赛。是不是就像我是导演，Gemini是教练一样？

这是最终的输出

比第一张图好多了。不过，删除或添加不必要的部分很麻烦（可能是因为说明书是从日语翻译成英语的，所以意图经常无法准确传达……）。

我认为在 FigmaMake 上可能无法再做任何事情，因此我采取了将其转换为 Figma 数据然后进行更正的蛮力方法。

步骤 6：[Figmaize] 使用 Html to Design 插件导入 Figma（5 分钟）

当设计方向确定到一定程度后，就可以将数据迁移到 Figma 了。具体步骤如下。

1. FigmaMake 生成的设计首先以网页的形式发布。
2. 启动 Figma 插件“Html to Design”。
3. 输入已发布的 FigmaMake 的 URL 并执行导入！

你只需要使用“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所创造的东西，而是有意图地完成它。

顺便说一句，当我胆怯地将这份草稿展示给总统时……“哦，这太有意思了！这样讨论就更容易推进了！有了起点就有很大的不同，谢谢！”他们就是这么说的。

太棒了！努力都值得……！今晚的啤酒味道真好！

暂时就这些！等社长把红墨水加完之后，LP 的正式版会作为后半部分发布！

为什么不尝试与人工智能合作创造新的设计呢？