国际站
返回博客列表

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

可能是一些旧世代的执念作祟,我一直很向往那些有专属域名的个人博客网站。

但是怎么说呢,作为一个完全不懂代码和编程的人,每次观赏别人的建站教程,都是高高兴兴点进去,灰头土脸退出来…… 不是不想学,是一听到各种陌生词汇,就觉得好复杂好累,以后有机会再说吧。

就这样明日复明日,一拖再拖,拖到 AI 时代它终于来了。

昨天,我用 Tabbit 做出了人生中第一个 html 页面,虽然它只是单篇文章的展示页,只有非常基础和简单的互动,但当对话框里第一次显示出网页的预览时,我还是被震撼了。

因为在整个生成过程里,我一行代码都没有写(也不用读),完全用我最熟悉的中国话提出要求,就做出来了。

当然它远远不完美,但我清楚地知道,我的个人博客不远了!

接下来就是我用 9 个 Query 生成 html 网页 的过程:(我知道如果标题叫:零代码,1 个 Query 写出你的梦想网站,一定有更多人点进来看,但很不幸,我就是用了 9 个。一个 Query 不是生不出来,是生出来实在太难看了。

Q1

我找到一篇自己之前写过的文章, 侧边栏调出 Ai 提问 :

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

嗯…… 可以说是敷衍又潦草,而且搭配着诡异的插图;

原本的文章里,其实是有插图的,所以我问它:

Q2

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

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

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

我选中它,继续提问:

Q3

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

巴拉巴拉,Tabbit 说了一大堆,头疼啊,说实话我不是很想看,感觉是个很麻烦的事。

然后我想到了 Tabbit 的智能代理模式 。于是:

Q4

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

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

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

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

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

这回完整了。

Q5

我把所有地址给到 Tabbit:

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

产房传喜讯!它生出来啦!!

请欣赏经典电影「木乃伊」:

Q6

就…… 整体效果也是一言难尽吧,但折叠展示的小设计还可以。

总之,我把其中需要修改的部分,截图粘贴在 Chat 对话框里,告诉它要怎么修改,以及整体设计风格要往什么方向靠拢;网页上的互动形式我希望怎么调整等等。

完全不会代码,我用 Tabbit 做了人生第一个 html 页面

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

完全不会代码,我用 Tabbit 做了人生第一个 html 页面
完全不会代码,我用 Tabbit 做了人生第一个 html 页面
完全不会代码,我用 Tabbit 做了人生第一个 html 页面
完全不会代码,我用 Tabbit 做了人生第一个 html 页面
完全不会代码,我用 Tabbit 做了人生第一个 html 页面
完全不会代码,我用 Tabbit 做了人生第一个 html 页面
完全不会代码,我用 Tabbit 做了人生第一个 html 页面
完全不会代码,我用 Tabbit 做了人生第一个 html 页面

它给我生成的网页是这样的,下面请欣赏续集「木乃伊归来」: 其中有些地方我不太满意,比如第二部分图片缩放之后看不出是什么,于是: 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 或点击 「阅读原文」 进入官网,免费下载使用。