AI帮你写前端！OpenUI让码农解放！
先附上OpenUI 在线体验⽹址：https://openui.fly.dev/ai/new
是免费的哦！
曾⼏何时，作为前端开辟大概向往前端开辟的⼩伙伴们是否有过如许的向往：只需轻轻刻画⼼中的UI蓝图，它便能出如今屏幕之上？
https://i-blog.csdnimg.cn/img_convert/ae1baa9ba95bb7d5352b3fae335c97b0.jpeg
如今OpenUI就可以帮助我们实现这个愿望！
OpenUI ⽀持以下三⼤功能：
1.AI⽣成前端：告别繁琐的⼿动编码，只需输⼊简朴的⾃然语⾔描述或上传UI截图，OpenUI背后的强⼤⼤型语⾔模子（LLM）便会智能剖析，为你⽣成⾼质量的前端代码。这不仅极⼤地提升了开辟服从，更让创意的实现变得亘古未有的简朴。
2.及时预览：能直接看到 UI 渲染效果，⽅便调解和迭代，你的每⼀次修改都能即时反映在屏幕上，⽆需等候编译过程，所⻅即所得。
3.多平台⽀持：⽆论你的项⽬是基于React、Svelte 照旧其他前端框架，OpenUI都能轻松应对，将你的设计⽆缝转换为所需代码，实现跨框架的灵活开辟。
⽽且如今⽀持多种模子切换：
https://i-blog.csdnimg.cn/img_convert/4fb289e1affaa59899e70d9f976adbdb.jpeg
是不是更加⼼动了！
接下来就把本⼈亲⾃体验过程奉上：
以构建⼀个简朴的搜索⽹⻚为例
第⼀步：打开OpenUI 在线⽹址：https://openui.fly.dev/ai/new，只需使⽤个⼈ github 账号即可登录，非常⽅便
https://i-blog.csdnimg.cn/img_convert/26395d0297aefbb5187500dcea3675c2.jpeg
第⼆步：描述⼀下搜索⻚的构成和布局？NO！直接去截⼀张搜索⽹站的图⽚
https://i-blog.csdnimg.cn/img_convert/88a7104fea1065b253f00ea840852bda.jpeg
第三步：发送截图获得代码和UI效果，可以看到给出了根本元素和布局，但是还差点意思
https://i-blog.csdnimg.cn/img_convert/e4b6e17f4beaef659cbc8d8e7cad2bf5.jpeg
第四步：发送修改哀求及时修改样式
例如：加上头部的导航栏；搜索框和搜索按钮放在⼀块；下⾯的消息变成卡⽚的情势等等，如今是不是就有点意思了，元素更加丰富了
https://i-blog.csdnimg.cn/img_convert/67048c90d31148b1224c84661c24410f.jpeg
别急！还有更故意思的！点击左下⻆的邪术棒全部勾选然后点击“Make Magic”
https://i-blog.csdnimg.cn/img_convert/7199647a585ade9f27c3290998e811df.jpeg
你会发现⻚⾯更加具有创造性了，多了许多hover和阴影效果。
第五步：样式修改的差不多了，接下来就是坐收代码了哈哈哈！
https://i-blog.csdnimg.cn/img_convert/7935555e3e8573314b5d9a5cea2ab703.gif
导出代码⽀持 HTML/VUE/REACT 等多种格式任君挑选！
https://i-blog.csdnimg.cn/img_convert/a0a7aa0601c3ce8e086a348999bd1627.jpeg
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]