
过去 2 周,我用 Gemini 3 把 42 本书,分别转化成了网页,用可视化的方式去呈现每本书独有的 Vibe 。
不过,我想最近你也看了很多 Gemini 3 做的酷炫的网页,兴许有些厌倦了,更别说是书籍这一让人昏昏欲睡的东西了。
但如果你想要看看兔子洞里面究竟有什么东西,那么洞口在这里:
之所以做这个项目,是源于之前对媒介的思考。不同媒介可以传达不同的信息和感受,在你跟媒介接触的时候,你便能感受到。
如果你想要具体,就去看视频,如果你想要效率,就去刷社媒,如果你想要触动,就去听歌,如果你想要体验,就去玩游戏,如果你想要深入,就去读书。不要抗拒某种媒介。
AI 的存在使得不同媒介之间可以相互转化,人们已做了许多的尝试。而在众多媒介当中,网页这一古老的媒介,总是时不时吸引我的注意力,因此我也在做着不同的实验,去看看我们能用网页承载什么东西。
Vibary 是其中一个粗浅的尝试,我试图把另一更加古老的媒介书籍,转化成网页,看看会有产生什么效果
这个项目有接近 10 万行的代码量,99.9% 的代码都是 AI 写的,对于一个只有前端没有后端,且网站的各个部分都相对独立的项目,vibe coding 完全可以胜任。
我会同时开多个编辑器,并行让不同 AI 做不同的事情。sonnet 4.5 负责想一个故事线来讲述一本书,gemini 3 负责设计和前端,codex 负责剩下的脏话累活。
由于代码是 AI 写的,加上时间有限加上,现在的 Vibary 的内容和体验是不完善甚至有误的,所以游玩时请小心,但请不要恐慌,这个网站基本无害。
1 yuuluu 6 小时 14 分钟前 gemini 这前端能力真强啊 |
2 w88975 6 小时 13 分钟前 做的不错, 我更想知道, 基本全部都是 vibe coding 做出来的网页, 为什么你做出来的 UX/UI 能这么牛逼, 有什么提示词或者技巧吗 |
3 ga9 6 小时 7 分钟前 有惊喜,有艺术表达,真不错 |
7 craftsmanship 6 小时 1 分钟前 via Android 这也太猛了 |
8 ynxh 6 小时 0 分钟前 真不错啊,求开源 |
9 lxdlam 5 小时 54 分钟前 这个有点意思,点赞 |
12 muyi 5 小时 46 分钟前 网站非常惊艳,收藏了……很好奇,每本书的不同网页风格,是 AI 根据书的内容生成的吗? |
13 Amber2011 5 小时 45 分钟前 挺有意思的,多本书之间还有点联动,但是可视化的网页只能承载部分信息,适合做导读. |
14 lyxxxh2 5 小时 44 分钟前 |
15 Katrol 5 小时 43 分钟前 在公司打开网站好卡 |
16 huangyezhufeng 5 小时 35 分钟前 做得很好,赞!楼主后续有考虑做下按作者来分别游览书籍吗,比如每个作者的书籍在一个 Subspace 这种。比如卡尔维诺和王小波的书各自在一个 Space ,然后他们之间也可以有 link 这种。感觉这样也会很有意思。 另外放一下直接做的一个关于《看不见的城市》的可视化站点: https://calvino.datahonor.com/city, 当时的目标是做成楼主这种科技和文学碰撞的感觉,但确实水平有限,就只能做成这样了:) |
17 mscsky 5 小时 22 分钟前 太牛了,特别是三体 |
18 LASockpuppet 5 小时 22 分钟前 via iPhone 太棒了,这不比直接看书更有有意思 |
19 Razio 5 小时 20 分钟前 怎一个牛皮了得 |
22 Linczh 5 小时 11 分钟前 前端效果确实不错,不过有点卡 |
23 sjtugzj OP @huangyezhufeng 好想法,这个要等书籍有一定数量了,可能可以做你说的这个。 实不相瞒,我原来也做过《看不见的城市》这本书,但实在没有做好,就丢弃了。感觉你这个图片还不错啊,前端其实可以让 gemini 3 改一版。 |
24 shuhsio 5 小时 4 分钟前 太卡了 |
25 ZAN0029 5 小时 1 分钟前 好酷的创意! |
26 BeFun 4 小时 56 分钟前 有点卡 |
27 BeFun 4 小时 54 分钟前 还没做完把 |
28 Oilybear 4 小时 51 分钟前 这个前端审美全部来自于 gemini 吗还是你这不给了他一些调性,我觉得这个审美相当可以 |
29 NullWithMe 4 小时 42 分钟前 有点东西,收藏了~~ |
30 huangyezhufeng 4 小时 41 分钟前 @sjtugzj #23 图片是 DALL-E 3 生成的,前端后面我再瞅瞅怎么改。 |
31 bomb77 4 小时 40 分钟前 太强了 |
34 iyuanze 4 小时 4 分钟前 目前进入不了书籍了 |
35 jinxjhin 4 小时 2 分钟前 网站打开很慢 |
36 kassadin 3 小时 57 分钟前 略卡,效果很惊艳 |
37 c0xt30a 3 小时 36 分钟前 建议 OP 测试的时候看一下竖屏,我这边只有两个竖屏,点开几本书进去,看上去非常凌乱 |
38 roding 3 小时 36 分钟前 很强! |
39 InkAndBanner 3 小时 33 分钟前 效果很棒 重点是模型可以把之前不值得做的事情都做一遍 |
40 InkAndBanner 3 小时 30 分钟前 而且媒介转化这个思路很有趣 |
41 Hancock 3 小时 30 分钟前 可以 NB 的模型需要 NB 的人 |
42 blushyes 3 小时 28 分钟前 woc ,我最近也在做这个,撞 idea 了 |
43 JShen 3 小时 14 分钟前 牛逼。 |
46 songsongqaq 3 小时 9 分钟前 太牛了 |
48 Bssn 3 小时 5 分钟前 很炫酷,但感觉好卡,是我的问题吗 |
49 wqlken 2 小时 22 分钟前 赞一个 |
50 shanex 2 小时 17 分钟前 Gemini 3 你用的什么套餐啊?使用了下免费的感觉不如 Claude 4.5 |
51 evan9527 2 小时 13 分钟前 本来想进来嗤之以鼻,看了以后五体投地。 |
52 monmon 2 小时 7 分钟前 太太太太太赞! |
55 ButcherHu 1 小时 53 分钟前 贼帅,但是我觉得帅的点是有点像模板网站,或者简历,展示个人能力或者模型能力的。 作为一个介绍书的产品,感觉看完有点不太想看这个书,典型的就是故事书或者社科类的书,就是找几个点也没啥并列或者组合关系,然后给你拼凑一下,拼凑的不好的话让没看过这个书的人摸不到头脑,牛 x 的动画会放大这种感觉。不过有些书真不错,平面设计的书好像跑的挺好的,动画也挺喜欢的。 |
56 gimp 1 小时 46 分钟前 佩服,很 6! |
57 flyingcmz 1 小时 33 分钟前 牛,很好看 |
58 lengrongec 1 小时 30 分钟前 @sjtugzj 怎么就觉得和做人一样,真诚才是必杀技。 |
60 zenoeithz 1 小时 22 分钟前 好厉害,牛牛牛。好有创意 |
61 pandoudousteve 1 小时 6 分钟前 牛逼坏了,大佬的提示词思路可以分享一下么,今天蹬 gemini3 感觉的确很强,但是我主要蹬后端,比较想看看前端提示词的思路 |
62 zacheryWu 1 小时 3 分钟前 点赞,有些书和用户的互动方式很贴切。 |
63 Creabine 1 小时 0 分钟前 牛逼牛逼 |
64 simo 58 分钟前 真棒! 如果看过书,这么一过,很立体 |
66 ilylx2008 47 分钟前 这对比度,真晃眼。打开赶紧关掉。 |
67 iv2ex 39 分钟前 做的真的很好 |
68 Yuan24 36 分钟前 牛逼,做的真好。 |
69 Yuan24 32 分钟前 太牛逼了,就点进去看了 1984 和悉达多的页面,不禁感叹这种创意能有一个就已经非常的难得了,竟然还能批量做。可能是我眼界太窄了,真的跪服 |
70 wt0210 29 分钟前 太酷了 |
71 rabbbit 27 分钟前 |
72 momodesuka 25 分钟前 网站是做得真的非常超出想象的好啊!!!佩服! |
75 pikko 3 分钟前 编辑失业……或者说产出 double |