实操AI写前端

xyy123
4,088 阅读1分钟

背景

前两天写了篇AI写代码的展望，今天又来实操了，流程算是跑通了。理论上不会代码的人也可以写出像样的代码。

操作流程

1. 使用AI生成原型图

网页地址: js.design/ai

这个网页工具可以根据用户描述生成对应的原型图，可以从生成的四张内选择一条作为网页原型，又或者是再次让AI生成，提供更多的选择。

image.png

生成的四张原型图如下：

image.png

image.png

image.png

image.png

并且这个网页还支持在线发布，发布了一张：js.design/site?id=ai_…

2.导出原型图

点击上方的编辑->保存，将会跳转到个人空间

image.png

image.png

删除多余的三张，保留希望留下的

image.png

在右上方点击导出为sketch文件

image.png

3.使用imgcook生成网页代码

网页地址： www.imgcook.com/

image.png

进入个人工作台后，将刚刚导出的sketch文件导入

image.png

导入后依次点击保存->代码，可以进入代码规范界面，滨崎能够选择需要转换为的前端格式，这里我就选最简单的html了

image.png

image.png

4. 下载到本地

点击右上角的下载按钮即可

image.png

下载成功~

image.png

页面展示

image.png

avatar
文章
阅读
粉丝