首页 - 神途资讯 > 手绘草图，AI帮你生成UI和代码，做游戏做课件都可以，素人小白化身神笔马良

手绘草图，AI帮你生成UI和代码，做游戏做课件都可以，素人小白化身神笔马良

发布于：2024-04-05 作者：admin 阅读：96

智元宇宙是一家致力于普及AIGC技术与应用的新媒体平台。我们为您提供最新的AIGC行业资讯，精选优质企业应用案例和实用方法，旨在帮助企业和个人迅速掌握人工智能应用技巧。我们的愿景是让人工智能成为普惠企业的基础设施，实现无处不在的智能化服务。

最近有一款超火的开源项目，叫做Draw-a-UI，大家多少都有点耳闻。这是一款基于Next.js开发，结合和GPT-使用的设计应用，可根据你手绘的线框或草图直接生成UI界面，并同时生成html。无论做小游戏开发、网站设计、教学辅助课件等，都可以轻松帮你搞定。

使用AI将UI草图立即换为HTML代码，浏览器就可以操作

只需手绘一个草图，就是你想象中的你的项目的样子，无需特别逼真；也可以只用系统自带的工具栏中的各种工具，就像你使用word一样。画好之后，预览一下生成效果，确实是可以直接用的程度啊，当然你还可以看到由AI给你转换的HTML代码。‍‍‍

不过，目前这款工具还只是个demo，生产慎用，否则，你可能会破产。‍‍

这款工具其直观的界面使得UI设计从原型到HTML变得轻而易举。它利用AI技术大大简化了网页设计和开发过程。

网友评价，不会用AI的前端，可能过不了年了。AI绘画已经让平面设计师瑟瑟发抖，现在也请UI设计师好自为之吧。

它的工作原理是将当前的画布SVG转换为PNG，然后将这个PNG发送到GPT-，指令其返回一个包含的单个HTML文件。

电脑环境：首先，你的电脑上需要已经安装了Next.js。

获取API Key：你需要一个的API密钥，你可以从的官网申请。

下载代码：通过Draw-a-UI的页面下载源代码到你的电脑。

设置环境变量：在项目的根目录中创建一个名为.env.local的文件，并写入以下内容：

OPENAI_API_KEY=你的API密钥


替换你的API密钥。


安装依赖：打开命令行工具，进入下载的项目目录，运行以下命令所需依赖：


npm install


启动项目：安装完成后，运行以下命令来启动Draw-a-UI：


npm run dev


访问应用：在浏览器中输入:3000，即可访问并开始使用Draw-a-UI。


Draw-a-UI官方网址：


使用网址：Draw-a-UI的地址：的地址：


这是//draw-a-ui的一个分支，主打一个真实的体验。


完全技术小白的智元小编，临时在界面也上手试了一把，大脑空空，随便一画。因为还没有进行本地安装，也没有神奇的密钥，就戛然而止了。但不得不说，真的就像我们用word一样。工具栏简单但基本也够用。


这样的工具，对技术咖就不说了，对于我们学校的老师和普通的家长朋友们，用它制作一些辅导和教学辅助课件，直接进行可视化的教学演示，实在是再实用不过了。‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍


想象一下，你只需照着课本画一个你觉得适用于演示的行星星系图，进行适当的说明，就可以生成一幅可交互的八大行星围绕太阳运动的动态轨迹演示课件。随画随用，比现在市面上各种教学课件是不是实惠实用的多？‍‍‍‍‍‍‍‍‍


更神奇的是，如果你对生成效果如果不满意的话，你就直接在页面上写出你的想法，再次点击make real，AI就按照你的想法更新了作品。你不用去改代码！你只要发出一条指令即可，因为代码就是AI生成的。‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍


当然，我们也可以直接用做小游戏哦。比如以下网络大神的案例。


手绘贪吃蛇游戏


贪吃蛇游戏，是大家非常喜欢的一款经典小游戏，国外网友自己手绘了一个贪吃蛇小游戏，这效果也是可以媲美那些小游戏公司了。‍‍‍‍‍‍


手绘敲砖块游戏


大家还记得很久以前我们玩的泡泡龙吗？现在你自己也能做泡泡龙游戏的粗暴版，敲砖游戏。国外网友就做了一个。‍


大家如果想之一时间体验Draw-a-UI，可以到其官网上申请加入候补名单。‍‍‍‍‍‍‍‍


小编反正已经申请了，这个的用途可以非常大哦。‍‍‍‍‍‍‍‍


- END -


智元易成科技有限公司专注于先进人工智能底层技术和专业应用开发，现已推出面向企业专属的AIGC应用平台——元小秘，独有的企业级架构、自主可控的 AI大模型底座、无监督学习技术、低成本微调技术和各类企业级强应用。


长按识别二维码，与元小秘AI小助手对话


点击关注“智元宇宙”，AIGC就在你身边


智元易成


专注于人工智能大模型企业级应用全场景开发
二维码

扫一扫关注我们

版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，请告知我们，本站将立刻删除涉嫌侵权内容。

上一篇：镇魔曲手游霓裳草怎么获得 霓裳草获得方法

下一篇：千古神途元神合击首充号_千古神途元神合击折扣中心

相关文章

本站资讯|联系我们|RSS订阅|网站地图

百度关键词：神途,神途手游,神途发布网

二维码

Copyright © 2022 www.5wst.com All right reserved. 赣ICP备2022000132号-15