构建一个Figma AI助手- Ollie The Dev - Medium

[

](https://medium.com/@olliethedev?source=post_page-----a33a1c32a377--------------------------------)

Figma文字到设计 (opens new window)插件可能看起来像是魔法。但是插件的最新改进并非偶然。

这是多个月来对AI提示、UI/UX和多模式LLMs进行实验的结果。

以下是一些有趣的发现:

提高每个标记的信息密度

该插件通过使用LLM生成HTML+CSS，然后将其转换为Figma图层面板中看到的所有不同类型的元素。

插件的初始版本只是生成原始的CSS和HTML，但为了提高输出的速度和质量，我必须找到一种方法，将尽可能多的样式数据打包到生成的代码中，同时保持系统提示和输出的简洁性，避免产生幻觉。

解决方案是使用Tailwind和FontAwesome CSS类来提示LLM使用更高级别的样式抽象。这样可以获得更好的质量结果，减少幻觉，并且生成时间更快，因为结果在每个标记中具有更高的信息密度。

未来可以在更高层次的抽象方面做更多工作。

下面是旧方法和新方法之间的区别:

内联设计预览

自初始发布以来最大的用户体验改进是内联设计预览。

在最初的插件发布中，我有三种不同的聊天模式供用户切换，一种是用于一般对话但不生成设计，第二种仅用于生成设计但没有对话，第三种仅用于生成图像。这导致用户体验较差。

为了解决这个用户体验的噩梦，我将聊天和设计模式合并为一个。这使用户可以在单个对话上下文中提问并对设计进行更改。

以下是LLM聊天响应的高级拆分：

未来的改进将是将图像生成模式合并为一个统一的聊天模式。

多模式魔法

最后一个挑战！我如何让用户通过与LLM聊天来修改他们现有的Figma元素？

最初的明显解决方案是将现有的Figma元素转换为HTML表示形式，并将结果传递给LLM。

然而，今年11月，OpenAI推出了一个多模式chatGPT模型，令人惊讶的是，它以更低的标记成本获得了更好的结果。这带来的额外好处是能够将任何视觉输入（现有设计、网站截图、涂鸦、线框图、移动应用程序屏幕等）转换为HTML，最终转换为Figma元素。

双赢。

未来的改进将是使用用户项目中现有的Figma设计系统（组件和 结论

如果您正在构建一个使用LLMs的SaaS，准备好在几天甚至几周内专注于一个单一的问题，测试新颖的解决方案并研究最新的发展，您的结果将会像魔术一样！

祝您建设愉快，

Ollie 🍻