可能是一些旧世代的执念作祟,我一直很向往那些有专属域名的个人博客网站。
但是怎么说呢,作为一个完全不懂代码和编程的人,每次观赏别人的建站教程,都是高高兴兴点进去,灰头土脸退出来…… 不是不想学,是一听到各种陌生词汇,就觉得好复杂好累,以后有机会再说吧。
就这样明日复明日,一拖再拖,拖到 AI 时代它终于来了。
昨天,我用 Tabbit 做出了人生中第一个 html 页面,虽然它只是单篇文章的展示页,只有非常基础和简单的互动,但当对话框里第一次显示出网页的预览时,我还是被震撼了。
因为在整个生成过程里,我一行代码都没有写(也不用读),完全用我最熟悉的中国话提出要求,就做出来了。
当然它远远不完美,但我清楚地知道,我的个人博客不远了!
接下来就是我用 9 个 Query 生成 html 网页 的过程:(我知道如果标题叫:零代码,1 个 Query 写出你的梦想网站,一定有更多人点进来看,但很不幸,我就是用了 9 个。一个 Query 不是生不出来,是生出来实在太难看了。
Q1
我找到一篇自己之前写过的文章, 侧边栏调出 Ai 提问 :

嗯…… 可以说是敷衍又潦草,而且搭配着诡异的插图;
原本的文章里,其实是有插图的,所以我问它:
Q2

它给我提供了三种插图的方案,代码看不懂,描述一知半解,但一句话吸引了我的注意:

我选中它,继续提问:
Q3

巴拉巴拉,Tabbit 说了一大堆,头疼啊,说实话我不是很想看,感觉是个很麻烦的事。
然后我想到了 Tabbit 的智能代理模式 。于是:
Q4

果然还是 AI 最懂 AI 在说什么,Agent 自己就能提取出能够用在 html 中的正确格式地址。

不过它的能力并不完善,第一次只提取到了 10 张,而且没有图片尺寸,所以我又让它继续补全所有的地址:

这回完整了。
Q5
我把所有地址给到 Tabbit:

产房传喜讯!它生出来啦!!
请欣赏经典电影「木乃伊」:
Q6
就…… 整体效果也是一言难尽吧,但折叠展示的小设计还可以。
总之,我把其中需要修改的部分,截图粘贴在 Chat 对话框里,告诉它要怎么修改,以及整体设计风格要往什么方向靠拢;网页上的互动形式我希望怎么调整等等。

此时就看出 AI 的局限性了,我想象里的包豪斯设计风格是这样的:








它给我生成的网页是这样的,下面请欣赏续集「木乃伊归来」: 其中有些地方我不太满意,比如第二部分图片缩放之后看不出是什么,于是: Q7 我把想替换图片的位置,截图告诉它,并把替换图片的地址粘贴在对话框里: 它还提醒我,代码比较长,最好用智能代理模式 ,你说啥就是啥呗,执行! 在它执行的过程里,我突然想到,前面文章的最后是空的,看起来有点秃,所以我就继续提出需求: 两个需求它同时执行,最后给我生成了第三部大片「木乃伊与Tabbit」,请看大屏幕: Q8 也不是不行吧,但怎么说呢,规整中透露着一丝粗糙,潮酷中透露着一丝土气…… 所以我,尝试用 AI 能理解的语言描述我想要的设计风格: 然后我得到了第四版,「新 · 木乃伊」: Q9 最后一步,发布成可以转发的页面: 链接附在这里,复制之后打开就能看了: https://go-test.tabbit.site/projects/c79176d7-179a-42bf-948b-379ccc4331bd/index.html 坦白说,这样直接通过 chat 对话生成的 html 页面,具有一定的随机性,比如它随机删减了原文中的部分语句,排版时并不能根据图片的大小调整版式,导航栏的定位也不是很精准…… 虽然还有许多细节需要提升,但它已经基本实现了我最初设想的 html 页面的样子。亲身经历整个诞生过程,也圆满达成了我决定尝试它的目标 —— 不再畏惧开始,迈出建站第一步。 它扫清了许多复杂的、让人疲累和望而却步的障碍,让我确信即便现在不懂编程,仍然有入门的可能性。 我想这是比做出一个完美页面更重要的收获。 好了,以上就是本次的内容。 还没有尝试 Tabbit 的朋友,可以访问官网 www.tabbit.com 或点击 「阅读原文」 进入官网,免费下载使用。