过去 2 周，我用 Gemini 3 把 42 本书，分别转化成了网页

[sjtugzj]

过去 2 周，我用 Gemini 3 把 42 本书，分别转化成了网页，用可视化的方式去呈现每本书独有的 Vibe 。

不过，我想最近你也看了很多 Gemini 3 做的酷炫的网页，兴许有些厌倦了，更别说是书籍这一让人昏昏欲睡的东西了。

但如果你想要看看兔子洞里面究竟有什么东西，那么洞口在这里：

www.vibary.art

之所以做这个项目，是源于之前对媒介的思考。不同媒介可以传达不同的信息和感受，在你跟媒介接触的时候，你便能感受到。

如果你想要具体，就去看视频，如果你想要效率，就去刷社媒，如果你想要触动，就去听歌，如果你想要体验，就去玩游戏，如果你想要深入，就去读书。不要抗拒某种媒介。

AI 的存在使得不同媒介之间可以相互转化，人们已做了许多的尝试。而在众多媒介当中，网页这一古老的媒介，总是时不时吸引我的注意力，因此我也在做着不同的实验，去看看我们能用网页承载什么东西。

Vibary 是其中一个粗浅的尝试，我试图把另一更加古老的媒介书籍，转化成网页，看看会有产生什么效果

这个项目有接近 10 万行的代码量，99.9% 的代码都是 AI 写的，对于一个只有前端没有后端，且网站的各个部分都相对独立的项目，vibe coding 完全可以胜任。

我会同时开多个编辑器，并行让不同 AI 做不同的事情。sonnet 4.5 负责想一个故事线来讲述一本书，gemini 3 负责设计和前端，codex 负责剩下的脏话累活。

由于代码是 AI 写的，加上时间有限加上，现在的 Vibary 的内容和体验是不完善甚至有误的，所以游玩时请小心，但请不要恐慌，这个网站基本无害。

[yuuluu]

gemini 这前端能力真强啊

[w88975]

做的不错, 我更想知道, 基本全部都是 vibe coding 做出来的网页, 为什么你做出来的 UX/UI 能这么牛逼, 有什么提示词或者技巧吗

[ga9]

有惊喜，有艺术表达，真不错

[sjtugzj]

@w88975 最强大的模型，往往采用最简单的提示方式

[sjtugzj]

@ga9 文艺复兴

[sjtugzj]

@yuuluu 真的，和其它模型不是一个水平的

[craftsmanship]

这也太猛了

[ynxh]

真不错啊，求开源

[lxdlam]

这个有点意思，点赞

[sjtugzj]

@lxdlam 感谢

[sjtugzj]

@ynxh 书籍是属于人类共同的财产，我有考虑过，但是自己没有维护过开源项目，目前还是先闭圆，时机成熟后再开源。

[muyi]

网站非常惊艳，收藏了……很好奇，每本书的不同网页风格，是 AI 根据书的内容生成的吗？

[Amber2011]

挺有意思的,多本书之间还有点联动,但是可视化的网页只能承载部分信息,适合做导读.

[lyxxxh2]

Gemini 3 前端确实强,但是 api key 经常出问题,恶心了。
明明没到限制,偶尔能用,很慢,我忍了。
但是经常抽风,根本没法用。

[Katrol]

在公司打开网站好卡

[huangyezhufeng]

做得很好，赞！楼主后续有考虑做下按作者来分别游览书籍吗，比如每个作者的书籍在一个 Subspace 这种。比如卡尔维诺和王小波的书各自在一个 Space ，然后他们之间也可以有 link 这种。感觉这样也会很有意思。

另外放一下直接做的一个关于《看不见的城市》的可视化站点: https://calvino.datahonor.com/city, 当时的目标是做成楼主这种科技和文学碰撞的感觉，但确实水平有限，就只能做成这样了:)

[mscsky]

太牛了，特别是三体

[LASockpuppet]

太棒了，这不比直接看书更有有意思

[Razio]

怎一个牛皮🐮了得

[sjtugzj]

@muyi 对的，AI 会根据每本书的内容，去设计视觉风格

[sjtugzj]

@lyxxxh2 哈哈哈哈 好像是容易报错，我用 antigravity 也是常常会提示用不了。

[Linczh]

前端效果确实不错，不过有点卡

[sjtugzj]

@huangyezhufeng 好想法，这个要等书籍有一定数量了，可能可以做你说的这个。

实不相瞒，我原来也做过《看不见的城市》这本书，但实在没有做好，就丢弃了。感觉你这个图片还不错啊，前端其实可以让 gemini 3 改一版。

[shuhsio]

太卡了

[ZAN0029]

好酷的创意！

[BeFun]

有点卡

[BeFun]

还没做完把

[Oilybear]

这个前端审美全部来自于 gemini 吗还是你这不给了他一些调性，我觉得这个审美相当可以

[NullWithMe]

有点东西，收藏了~~

[huangyezhufeng]

@sjtugzj #23 图片是 DALL-E 3 生成的，前端后面我再瞅瞅怎么改。

[bomb77]

太强了

[sjtugzj]

@BeFun 还很粗糙，性能没优化，请见谅

[sjtugzj]

@Oilybear 80% gemini + 20% 我

[iyuanze]

目前进入不了书籍了

[jinxjhin]

网站打开很慢

[kassadin]

略卡，效果很惊艳

[c0xt30a]

建议 OP 测试的时候看一下竖屏，我这边只有两个竖屏，点开几本书进去，看上去非常凌乱

[roding]

很强！

[InkAndBanner]

效果很棒 重点是模型可以把之前不值得做的事情都做一遍

[InkAndBanner]

而且媒介转化这个思路很有趣

[Hancock]

可以 NB 的模型需要 NB 的人

[blushyes]

woc ，我最近也在做这个，撞 idea 了

[JShen]

牛逼。

[sjtugzj]

@blushyes 有空可以聊聊？我微信 sjtugzj

[sjtugzj]

@c0xt30a 感谢提示，自适应还没有怎么搞

[songsongqaq]

太牛了

[blushyes]

@sjtugzj 可以，加你了

[Bssn]

很炫酷，但感觉好卡，是我的问题吗😂

[wqlken]

赞一个

[shanex]

Gemini 3 你用的什么套餐啊？使用了下免费的感觉不如 Claude 4.5

[evan9527]

本来想进来嗤之以鼻，看了以后五体投地。

[monmon]

太太太太太赞！

[sjtugzj]

@shanex antigravity 免费的账号，我好几个账号换着用

[sjtugzj]

@evan9527 嘻嘻

[ButcherHu]

贼帅，但是我觉得帅的点是有点像模板网站，或者简历，展示个人能力或者模型能力的。
作为一个介绍书的产品，感觉看完有点不太想看这个书，典型的就是故事书或者社科类的书，就是找几个点也没啥并列或者组合关系，然后给你拼凑一下，拼凑的不好的话让没看过这个书的人摸不到头脑，牛 x 的动画会放大这种感觉。不过有些书真不错，平面设计的书好像跑的挺好的，动画也挺喜欢的。

[gimp]

佩服，很 6️⃣！

[flyingcmz]

牛，很好看

[lengrongec]

@sjtugzj 怎么就觉得和做人一样，真诚才是必杀技。

[sjtugzj]

@ButcherHu 多谢指教。目前确实，没有把内容做得很好，这些需要时间去优化

[zenoeithz]

好厉害，牛牛牛。好有创意

[pandoudousteve]

牛逼坏了，大佬的提示词思路可以分享一下么，今天蹬 gemini3 感觉的确很强，但是我主要蹬后端，比较想看看前端提示词的思路

[zacheryWu]

点赞，有些书和用户的互动方式很贴切。

[Creabine]

牛逼牛逼

[simo]

真棒！
如果看过书，这么一过，很立体

[shanex]

@sjtugzj 我一个任务还没完成就不让用了😂

[ilylx2008]

这对比度，真晃眼。打开赶紧关掉。

[iv2ex]

做的真的很好👍

[Yuan24]

牛逼，做的真好。

[Yuan24]

太牛逼了，就点进去看了 1984 和悉达多的页面，不禁感叹这种创意能有一个就已经非常的难得了，竟然还能批量做。可能是我眼界太窄了，真的跪服

[wt0210]

太酷了

[rabbbit]

这些图表和动画都是 AI 自己想出来的吗？
还是楼主指定的

[momodesuka]

网站是做得真的非常超出想象的好啊！！！佩服！

[sjtugzj]

@Yuan24 all credit to gemini3

[sjtugzj]

@rabbbit 大部分 AI 想的，部分是我给一个方向

[pikko]

编辑失业……或者说产出 double

[bjfane]

good job,币拿去！

[zsuxiong]

太棒了，生产过程（提示词）啥时候也分享下

[Dimen61]

op 这个作品充分地证明了 AI 最大的能力是通过自动化把创造力批发了。。

[yuhuij]

太棒了，想象力或者产品力感觉更重要了

[sepends]

太厉害了，手动点赞

[GWesley]

最近看到最酷的东西

[Slengl]

效果很赞 眼前一亮

[dxpy]

牛啊，这效果绝了