尝试ai生成figma设计

当听到用ai 自动生成figma设计时，不免好奇这个是如何实现的。在查阅了不少资料后，有了一些想法。参考了：在figma上使用脚本自动生成色谱
这篇文章提供的主要思路是：可以通过脚本的方式构建figma设计。如果我们使用ai 生成figma脚本。然后放到figma 中执行是不是就有可能生成设计图那？

使用ai生成脚本

使用如下提示词：
利用figma 控制台脚本能力，实现登录界面
在这里插入图片描述
生成的代码（改代码有一个错误，把错误交给chatgpt后，chatgpt修改代码后解决）：

// 首先，确保你已加载了正确的字体（如果没有加载，Figma API 会报错）
async function loadFont(fontName) {await figma.loadFontAsync({ family: fontName, style: "Regular" });
}// 创建一个简单的登录页面
async function createLoginPage() {// 加载必要的字体await loadFont("Roboto");// 创建框架const loginFrame = figma.createFrame();loginFrame.resize(320, 480); // 设置框架大小loginFrame.name = "Login Page";loginFrame.layoutMode = "VERTICAL"; // 垂直排列loginFrame.primaryAxisAlignItems = "CENTER"; // 垂直居中loginFrame.counterAxisAlignItems = "CENTER"; // 水平居中loginFrame.paddingTop = 40;loginFrame.paddingBottom = 40;loginFrame.paddingLeft = 20;loginFrame.paddingRight = 20;loginFrame.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 }, // 设置背景颜色}];// 添加标题const title = figma.createText();title.characters = "Login";title.fontName = { family: "Roboto", style: "Bold" };title.fontSize = 32;title.textAlignHorizontal = "CENTER"; // 文本居中loginFrame.appendChild(title);// 创建用户名标签const usernameLabel = figma.createText();usernameLabel.characters = "Username";usernameLabel.fontSize = 16;usernameLabel.textAlignHorizontal = "LEFT"; // 左对齐usernameLabel.y = 80; // 设置位置loginFrame.appendChild(usernameLabel);// 创建用户名输入框（矩形）const usernameBox = figma.createRectangle();usernameBox.resize(280, 40); // 设置宽高usernameBox.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 }, // 输入框颜色}];loginFrame.appendChild(usernameBox);// 创建密码标签const passwordLabel = figma.createText();passwordLabel.characters = "Password";passwordLabel.fontSize = 16;passwordLabel.textAlignHorizontal = "LEFT";passwordLabel.y = 140;loginFrame.appendChild(passwordLabel);// 创建密码输入框（矩形）const passwordBox = figma.createRectangle();passwordBox.resize(280, 40);passwordBox.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 },}];loginFrame.appendChild(passwordBox);// 创建登录按钮const loginButton = figma.createRectangle();loginButton.resize(280, 40);loginButton.fills = [{type: "SOLID",color: { r: 0, g: 0.5, b: 1 }, // 蓝色按钮}];// 创建登录按钮文本const buttonText = figma.createText();buttonText.characters = "Login";buttonText.fontSize = 16;buttonText.textAlignHorizontal = "CENTER";buttonText.textAlignVertical = "CENTER"; // 垂直居中loginButton.appendChild(buttonText);loginFrame.appendChild(loginButton);// 将创建的登录页面添加到当前页面figma.currentPage.appendChild(loginFrame);
}// 调用创建登录页面的函数
createLoginPage();

从运行错误：
在这里插入图片描述
再丢给chatGpt：
在这里插入图片描述
然后又报了一个错误，然后再把错误丢给chatGPt，然后解决。

修改后的代码（没有错误）：

// 加载字体的异步函数
async function loadFont(fontName) {await figma.loadFontAsync({ family: fontName, style: "Regular" });
}// 创建一个简单的登录页面
async function createLoginPage() {// 加载必要的字体await loadFont("Inter");// 创建框架const loginFrame = figma.createFrame();loginFrame.resize(320, 480); // 设置框架大小loginFrame.name = "Login Page";loginFrame.layoutMode = "VERTICAL"; // 垂直排列loginFrame.primaryAxisAlignItems = "CENTER"; // 垂直居中loginFrame.counterAxisAlignItems = "CENTER"; // 水平居中loginFrame.paddingTop = 40;loginFrame.paddingBottom = 40;loginFrame.paddingLeft = 20;loginFrame.paddingRight = 20;loginFrame.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 }, // 设置背景颜色}];// 添加标题const title = figma.createText();await loadFont("Inter");  // 确保字体加载title.characters = "Login";title.fontName = { family: "Inter", style: "Regular" };  // 使用 Inter 字体title.fontSize = 32;title.textAlignHorizontal = "CENTER"; // 文本居中loginFrame.appendChild(title);// 创建用户名标签const usernameLabel = figma.createText();await loadFont("Inter");  // 确保字体加载usernameLabel.characters = "Username";usernameLabel.fontSize = 16;usernameLabel.textAlignHorizontal = "LEFT"; // 左对齐usernameLabel.y = 80; // 设置位置loginFrame.appendChild(usernameLabel);// 创建用户名输入框（矩形）const usernameBox = figma.createRectangle();usernameBox.resize(280, 40); // 设置宽高usernameBox.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 }, // 输入框颜色}];loginFrame.appendChild(usernameBox);// 创建密码标签const passwordLabel = figma.createText();await loadFont("Inter");  // 确保字体加载passwordLabel.characters = "Password";passwordLabel.fontSize = 16;passwordLabel.textAlignHorizontal = "LEFT";passwordLabel.y = 140;loginFrame.appendChild(passwordLabel);// 创建密码输入框（矩形）const passwordBox = figma.createRectangle();passwordBox.resize(280, 40);passwordBox.fills = [{type: "SOLID",color: { r: 0.9, g: 0.9, b: 0.9 },}];loginFrame.appendChild(passwordBox);// 创建登录按钮const loginButton = figma.createRectangle();loginButton.resize(280, 40);loginButton.fills = [{type: "SOLID",color: { r: 0, g: 0.5, b: 1 }, // 蓝色按钮}];// 创建登录按钮文本const buttonText = figma.createText();await loadFont("Inter");  // 确保字体加载buttonText.characters = "Login";buttonText.fontSize = 16;buttonText.textAlignHorizontal = "CENTER";buttonText.textAlignVertical = "CENTER"; // 垂直居中loginButton.appendChild(buttonText);loginFrame.appendChild(loginButton);// 将创建的登录页面添加到当前页面figma.currentPage.appendChild(loginFrame);
}// 调用创建登录页面的函数
createLoginPage();

生成的效果，不理想：
在这里插入图片描述
然后继续叫chatGpt修改结果，让其美观一点：
在这里插入图片描述
生成的代码：

// 加载字体的异步函数
async function loadFont(fontName) {await figma.loadFontAsync({ family: fontName, style: "Regular" });
}// 创建一个美观的登录页面
async function createLoginPage() {// 加载必要的字体await loadFont("Inter");// 创建框架const loginFrame = figma.createFrame();loginFrame.resize(400, 600); // 设置框架大小loginFrame.name = "Login Page";loginFrame.layoutMode = "VERTICAL"; // 垂直排列loginFrame.primaryAxisAlignItems = "CENTER"; // 垂直居中loginFrame.counterAxisAlignItems = "CENTER"; // 水平居中loginFrame.paddingTop = 40;loginFrame.paddingBottom = 40;loginFrame.paddingLeft = 20;loginFrame.paddingRight = 20;loginFrame.cornerRadius = 20; // 设置圆角loginFrame.fills = [{type: "SOLID",color: { r: 1, g: 1, b: 1 }, // 背景颜色为白色}];// 添加标题const title = figma.createText();await loadFont("Inter");  // 确保字体加载title.characters = "Welcome Back!";title.fontName = { family: "Inter", style: "Regular" };title.fontSize = 32;title.textAlignHorizontal = "CENTER";title.textAlignVertical = "CENTER";title.y = 20; // 设置标题位置loginFrame.appendChild(title);// 创建用户名标签const usernameLabel = figma.createText();await loadFont("Inter");usernameLabel.characters = "Username";usernameLabel.fontSize = 14;usernameLabel.textAlignHorizontal = "LEFT";usernameLabel.textAlignVertical = "CENTER";usernameLabel.y = 80;loginFrame.appendChild(usernameLabel);// 创建用户名输入框（矩形）const usernameBox = figma.createRectangle();usernameBox.resize(320, 40);usernameBox.cornerRadius = 8; // 设置圆角usernameBox.fills = [{type: "SOLID",color: { r: 0.95, g: 0.95, b: 0.95 }, // 输入框颜色}];usernameBox.y = 100;loginFrame.appendChild(usernameBox);// 创建密码标签const passwordLabel = figma.createText();await loadFont("Inter");passwordLabel.characters = "Password";passwordLabel.fontSize = 14;passwordLabel.textAlignHorizontal = "LEFT";passwordLabel.textAlignVertical = "CENTER";passwordLabel.y = 160;loginFrame.appendChild(passwordLabel);// 创建密码输入框（矩形）const passwordBox = figma.createRectangle();passwordBox.resize(320, 40);passwordBox.cornerRadius = 8;passwordBox.fills = [{type: "SOLID",color: { r: 0.95, g: 0.95, b: 0.95 },}];passwordBox.y = 180;loginFrame.appendChild(passwordBox);// 创建登录按钮（需要将矩形和按钮文本放入同一个框架中）const loginButtonFrame = figma.createFrame();loginButtonFrame.resize(320, 48); // 按钮大小loginButtonFrame.cornerRadius = 8; // 设置圆角loginButtonFrame.fills = [{type: "SOLID",color: { r: 0, g: 0.5, b: 1 }, // 蓝色按钮}];loginButtonFrame.y = 240;// 创建按钮文本const buttonText = figma.createText();await loadFont("Inter");buttonText.characters = "Login";buttonText.fontSize = 16;buttonText.textAlignHorizontal = "CENTER";buttonText.textAlignVertical = "CENTER";buttonText.fills = [{type: "SOLID",color: { r: 1, g: 1, b: 1 }, // 白色文本}];loginButtonFrame.appendChild(buttonText); // 将文本添加到按钮框架loginFrame.appendChild(loginButtonFrame); // 将按钮框架添加到登录页面// 将创建的登录页面添加到当前页面figma.currentPage.appendChild(loginFrame);
}// 调用创建登录页面的函数
createLoginPage();

运行结果：
在这里插入图片描述
在这里插入图片描述
可以看到以上的控件见的距离还是有些紧凑了。自己手动改改，也还可以。

总结：
总体思路是，

  1. 使用ai生成脚本代码
  2. figma 执行代码，生成界面。

反思：

  1. 提示词过于简单，如果在提示词中增加布局要求、颜色搭配要求、控件间的间隔等等（也就是ui设计师，在设计界面时，所考虑的几个方面）产生的效果会更好（个人实验，写的详细的，生成效果好一些）
  2. 商用级别的实现思路猜测：1.提示词模板对于ui考虑的各方面写得比较详细。2.用描述很详细的ui界面的文字描述和对应的脚本代码数据进行训练，从而得到一个ai模型。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/894767.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【PyQt】pyqt小案例实现简易文本编辑器

【PyQt】pyqt小案例实现简易文本编辑器

pyqt小案例实现简易文本编辑器 分析 实现了一个简单的文本编辑器，使用PyQt5框架构建。以下是代码的主要功能和特点： 主窗口类 (MyWindow): 继承自 QWidget 类。使用 .ui 文件加载用户界面布局。设置窗口标题、状态栏消息等。创建菜单栏及其子菜单项&…
阅读更多...
【电脑系统】电脑突然（蓝屏）卡死发出刺耳声音

【电脑系统】电脑突然（蓝屏）卡死发出刺耳声音

文章目录 前言问题描述软件解决方案尝试硬件解决方案尝试参考文献 前言 在 更换硬盘 时遇到的问题，有时候只有卡死没有蓝屏 问题描述 更换硬盘后，电脑用一会就卡死，蓝屏，显示蓝屏代码 UNEXPECTED_STORE_EXCEPTION 软件解决方案…
阅读更多...
【大模型LLM面试合集】大语言模型架构_Transformer架构细节

【大模型LLM面试合集】大语言模型架构_Transformer架构细节

Transformer架构细节 1.Transformer各个模块的作用 （1）Encoder模块 经典的Transformer架构中的Encoder模块包含6个Encoder Block. 每个Encoder Block包含两个⼦模块, 分别是多头⾃注意⼒层, 和前馈全连接层. 多头⾃注意⼒层采⽤的是⼀种Scaled Dot-Pr…
阅读更多...
【华为OD-E卷 - 113 跳格子2 100分（python、java、c++、js、c）】

【华为OD-E卷 - 113 跳格子2 100分（python、java、c++、js、c）】

【华为OD-E卷 - 跳格子2 100分（python、java、c、js、c）】 题目 小明和朋友玩跳格子游戏，有 n 个连续格子组成的圆圈，每个格子有不同的分数，小朋友可以选择以任意格子起跳，但是不能跳连续的格子&#xff…
阅读更多...
国防科大：双目标优化防止LLM灾难性遗忘

国防科大：双目标优化防止LLM灾难性遗忘

📖标题：How to Complete Domain Tuning while Keeping General Ability in LLM: Adaptive Layer-wise and Element-wise Regularization 🌐来源：arXiv, 2501.13669 🌟摘要 🔸大型语言模型（LLM…
阅读更多...
Verilog基础（一）：基础元素

Verilog基础（一）：基础元素

verilog基础 我先说，看了肯定会忘，但是重要的是这个过程，我们知道了概念，知道了以后在哪里查询。语法都是术，通用的概念是术。所以如果你有相关的软件编程经验，那么其实开启这个学习之旅，你会感受到熟悉，也会感受到别致。 入门 - 如何开始 欢迎来到二进制的世界，数字…
阅读更多...
多无人机--强化学习

多无人机--强化学习

这个是我对于我的大创项目的构思，随着时间逐渐更新 项目概要 我们的项目平台来自挑战杯揭绑挂帅的无人机对抗项目，但是在由于时间原因，并未考虑强化学习，所以现在通过大创项目来弥补遗憾 我们项目分为三部分，分为虚…
阅读更多...
Python----Python高级（并发编程：进程Process，多进程，进程间通信，进程同步，进程池）

Python----Python高级（并发编程：进程Process，多进程，进程间通信，进程同步，进程池）

一、进程Process 拥有自己独立的堆和栈，既不共享堆，也不共享栈，进程由操作系统调度；进程切换需要的资源很最大，效率低。 对于操作系统来说，一个任务就是一个进程（Process）&#xff…
阅读更多...
在Mapbox GL JS中“line-pattern”的使用详解

在Mapbox GL JS中“line-pattern”的使用详解

在Mapbox GL JS中，line-pattern 是一种用于在地图上绘制带有图案的线条的样式属性。通过 line-pattern，你可以使用自定义的图像作为线条的图案，而不是使用纯色或渐变。 1. 基本概念 line-pattern: 该属性允许你指定一个图像作为线条的图案。…
阅读更多...
C++ Primer 算术运算符

C++ Primer 算术运算符

欢迎阅读我的 【CPrimer】专栏 专栏简介：本专栏主要面向C初学者，解释C的一些基本概念和基础语言特性，涉及C标准库的用法，面向对象特性，泛型特性高级用法。通过使用标准库中定义的抽象设施，使你更加适应高级…
阅读更多...
【大数据技术】本机PyCharm远程连接虚拟机Python

【大数据技术】本机PyCharm远程连接虚拟机Python

本机PyCharm远程连接虚拟机Python 注意：本文需要使用PyCharm专业版。 pycharm-professional-2024.1.4VMware Workstation Pro 16CentOS-Stream-10-latest-x86_64-dvd1.iso写在前面 本文主要介绍如何使用本地PyCharm远程连接虚拟机，运行Python脚本，提高编程效率。 注意： …
阅读更多...
MyBatis-Plus笔记-快速入门

MyBatis-Plus笔记-快速入门

大家在日常开发中应该能发现，单表的CRUD功能代码重复度很高，也没有什么难度。而这部分代码量往往比较大，开发起来比较费时。 因此，目前企业中都会使用一些组件来简化或省略单表的CRUD开发工作。目前在国内使用较多的一个组件就是…
阅读更多...
Maven jar 包下载失败问题处理

Maven jar 包下载失败问题处理

Maven jar 包下载失败问题处理 1.配置好国内的Maven源2.重新下载3. 其他问题 1.配置好国内的Maven源 打开⾃⼰的 Idea 检测 Maven 的配置是否正确，正确的配置如下图所示： 检查项⼀共有两个： 确认右边的两个勾已经选中，如果没有请…
阅读更多...
2.5学习

2.5学习

misc buuctf-假如给我三天光明 下载附件后得到了一个压缩包和一个图片，压缩包为加密压缩包，需要解出密码，然后注意到这个图片并非简单的一个封面，在下方还有诸多点，有黑有灰。经过搜索，发现这是盲文通过与…
阅读更多...
java进阶1——JVM

java进阶1——JVM

java进阶——JVM 1、JVM概述 作用 Java 虚拟机就是二进制字节码的运行环境，负责装载字节码到其内部，解释/编译为对 应平台上的机器码指令行，每一条 java 指令，java 虚拟机中都有详细定义，如怎么取操 作数&#xff0c…
阅读更多...
搭建集成开发环境PyCharm

搭建集成开发环境PyCharm

1.下载安装Python（建议下载并安装3.9.x） https://www.python.org/downloads/windows/ 要注意勾选“Add Python 3.9 to PATH”复选框，表示将Python的路径增加到环境变量中 2.安装集成开发环境Pycharm http://www.jetbrains.com/pycharm/…
阅读更多...
《redis4.0 通信模块源码分析(一)》

《redis4.0 通信模块源码分析(一)》

【redis导读】redis作为一款高性能的内存数据库，面试服务端开发，redis是绕不开的话题，如果想提升自己的网络编程的水平和技巧，redis这款优秀的开源软件是很值得大家去分析和研究的。 笔者从大学毕业一直有分析redis源码的想法&…
阅读更多...
开源安全一站式构建！开启企业开源治理新篇章

开源安全一站式构建！开启企业开源治理新篇章

在如今信息技术日新月异、飞速发展的数字化时代，开源技术如同一股强劲的东风，为企业创新注入了源源不断的活力，然而，正如一枚硬币有正反两面，开源技术的广泛应用亦伴随着不容忽视的挑战。安全风险如影随形，…
阅读更多...
DeePseek结合PS！批量处理图片的方法教程

DeePseek结合PS！批量处理图片的方法教程

​ ​ 今天我们来聊聊如何利用deepseek和Photoshop（PS）实现图片的批量处理。 传统上，批量修改图片尺寸、分辨率等任务往往需要编写脚本或手动处理，而现在有了AI的辅助，我们可以轻松生成PS脚本，实现自动化处…
阅读更多...
Verilog基础（三）：过程

Verilog基础（三）：过程

过程(Procedures) - Always块 – 组合逻辑 (Always blocks – Combinational) 由于数字电路是由电线相连的逻辑门组成的，所以任何电路都可以表示为模块和赋值语句的某种组合. 然而，有时这不是描述电路最方便的方法. 两种always block是十分有用的： 组合逻辑： always @(…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023