
过去 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 3 天前 gemini 这前端能力真强啊 |
2 w88975 3 天前 做的不错, 我更想知道, 基本全部都是 vibe coding 做出来的网页, 为什么你做出来的 UX/UI 能这么牛逼, 有什么提示词或者技巧吗 |
3 ga9 3 天前 有惊喜,有艺术表达,真不错 |
7 craftsmanship 3 天前 via Android 这也太猛了 |
8 ynxh 3 天前 真不错啊,求开源 |
9 lxdlam 3 天前 这个有点意思,点赞 |
12 muyi 3 天前 网站非常惊艳,收藏了……很好奇,每本书的不同网页风格,是 AI 根据书的内容生成的吗? |
13 Amber2011 3 天前 挺有意思的,多本书之间还有点联动,但是可视化的网页只能承载部分信息,适合做导读. |
14 lyxxxh2 3 天前 |
15 Katrol 3 天前 在公司打开网站好卡 |
16 huangyezhufeng 3 天前 做得很好,赞!楼主后续有考虑做下按作者来分别游览书籍吗,比如每个作者的书籍在一个 Subspace 这种。比如卡尔维诺和王小波的书各自在一个 Space ,然后他们之间也可以有 link 这种。感觉这样也会很有意思。 另外放一下直接做的一个关于《看不见的城市》的可视化站点: https://calvino.datahonor.com/city, 当时的目标是做成楼主这种科技和文学碰撞的感觉,但确实水平有限,就只能做成这样了:) |
17 mscsky 3 天前 太牛了,特别是三体 |
18 LASockpuppet 3 天前 via iPhone 太棒了,这不比直接看书更有有意思 |
19 Razio 3 天前 怎一个牛皮了得 |
22 Linczh 3 天前 前端效果确实不错,不过有点卡 |
23 sjtugzj OP @huangyezhufeng 好想法,这个要等书籍有一定数量了,可能可以做你说的这个。 实不相瞒,我原来也做过《看不见的城市》这本书,但实在没有做好,就丢弃了。感觉你这个图片还不错啊,前端其实可以让 gemini 3 改一版。 |
24 shuhsio 3 天前 太卡了 |
25 ZAN0029 3 天前 好酷的创意! |
26 BeFun 3 天前 有点卡 |
27 BeFun 3 天前 还没做完把 |
28 Oilybear 3 天前 这个前端审美全部来自于 gemini 吗还是你这不给了他一些调性,我觉得这个审美相当可以 |
29 NullWithMe 3 天前 有点东西,收藏了~~ |
30 huangyezhufeng 3 天前 @sjtugzj #23 图片是 DALL-E 3 生成的,前端后面我再瞅瞅怎么改。 |
31 bomb77 3 天前 太强了 |
34 iyuanze 3 天前 目前进入不了书籍了 |
35 jinxjhin 3 天前 网站打开很慢 |
36 kassadin 3 天前 略卡,效果很惊艳 |
37 c0xt30a 3 天前 建议 OP 测试的时候看一下竖屏,我这边只有两个竖屏,点开几本书进去,看上去非常凌乱 |
38 roding 3 天前 很强! |
39 InkAndBanner 3 天前 效果很棒 重点是模型可以把之前不值得做的事情都做一遍 |
40 InkAndBanner 3 天前 而且媒介转化这个思路很有趣 |
41 Hancock 3 天前 可以 NB 的模型需要 NB 的人 |
42 blushyes 3 天前 woc ,我最近也在做这个,撞 idea 了 |
43 JShen 3 天前 牛逼。 |
46 songsongqaq 3 天前 太牛了 |
48 Bssn 3 天前 很炫酷,但感觉好卡,是我的问题吗 |
49 wqlken 3 天前 赞一个 |
50 shanex 3 天前 Gemini 3 你用的什么套餐啊?使用了下免费的感觉不如 Claude 4.5 |
51 evan9527 3 天前 本来想进来嗤之以鼻,看了以后五体投地。 |
52 monmon 3 天前 太太太太太赞! |
55 ButcherHu 3 天前 贼帅,但是我觉得帅的点是有点像模板网站,或者简历,展示个人能力或者模型能力的。 作为一个介绍书的产品,感觉看完有点不太想看这个书,典型的就是故事书或者社科类的书,就是找几个点也没啥并列或者组合关系,然后给你拼凑一下,拼凑的不好的话让没看过这个书的人摸不到头脑,牛 x 的动画会放大这种感觉。不过有些书真不错,平面设计的书好像跑的挺好的,动画也挺喜欢的。 |
56 gimp 3 天前 佩服,很 6! |
57 flyingcmz 3 天前 牛,很好看 |
58 lengrongec 3 天前 @sjtugzj 怎么就觉得和做人一样,真诚才是必杀技。 |
60 zenoeithz 3 天前 好厉害,牛牛牛。好有创意 |
61 pandoudousteve 3 天前 牛逼坏了,大佬的提示词思路可以分享一下么,今天蹬 gemini3 感觉的确很强,但是我主要蹬后端,比较想看看前端提示词的思路 |
62 zacheryWu 3 天前 点赞,有些书和用户的互动方式很贴切。 |
63 Creabine 3 天前 牛逼牛逼 |
64 simo 3 天前 真棒! 如果看过书,这么一过,很立体 |
66 ilylx2008 3 天前 这对比度,真晃眼。打开赶紧关掉。 |
67 iv2ex 3 天前 做的真的很好 |
68 Yuan24 3 天前 牛逼,做的真好。 |
69 Yuan24 3 天前 太牛逼了,就点进去看了 1984 和悉达多的页面,不禁感叹这种创意能有一个就已经非常的难得了,竟然还能批量做。可能是我眼界太窄了,真的跪服 |
70 wt0210 3 天前 太酷了 |
71 rabbbit 3 天前 |
72 momodesuka 3 天前 网站是做得真的非常超出想象的好啊!!!佩服! |
75 pikko 3 天前 编辑失业……或者说产出 double |
76 bjfane PRO good job,币拿去! |
77 zsuxiong 3 天前 太棒了,生产过程(提示词)啥时候也分享下 |
78 Dimen61 3 天前 op 这个作品充分地证明了 AI 最大的能力是通过自动化把创造力批发了。。 |
79 yuhuij 3 天前 太棒了,想象力或者产品力感觉更重要了 |
80 sepends 3 天前 太厉害了,手动点赞 |
81 GWesley 3 天前 最近看到最酷的东西 |
82 Slengl 3 天前 via iPhone 效果很赞 眼前一亮 |
83 dxpy 3 天前 牛啊,这效果绝了 |
84 Dionysus19 3 天前 这也 ~ 太牛逼了吧,沙丘有那味了 |
85 RyougiShiki 3 天前 发挥 AI 效率的正确方式 |
86 fengye0509 2 天前 好看,多整几本,支持! |
88 l1905 2 天前 非常棒, 看书的过程中, 对书中的一些画面, 需要先在头脑中想象出来,效果还是因人而异的 现在是借助 AI ,可以直接具象通过图表、交互方式展示出来,更直观,给人的印象更深刻,非常棒的创意! 如果微信读书现在的 AI 问书,具备这个能力, 想想都非常好玩 |
89 greensy 2 天前 优秀啊这视觉 |
90 fashionash 2 天前 真的牛逼,怪不得各个大厂现在开始压缩前端和测试的 HC 了 |
91 RuHe 2 天前 自己感觉酷炫的动画和高对比度、明暗差别极大的页面会把想要传递的主要信息给压抑,只适合极短时间的查看,不适合长时间深入阅读。 |
92 xhxh 2 天前 确实很棒 |
93 geying 2 天前 可以 内容还是不够充实 看了几个感觉有点空洞 |
94 Lexin914 2 天前 很牛,就是有些动画有点卡顿 |
95 ktyang 2 天前 好看,但是除了好看,感觉问题也蛮多的。随便点进去了几本读过的书,确实有一些书里的那种感觉,但是给出来的交互一塌糊涂,配图也是风马牛不相及。又点了几本没看过的书,完全不理解要讲什么。总感觉完成度还差的有点多。 |
96 poorcai 2 天前 页面确实很酷,但是看了一下没明白怎么通过这个网页来读懂一本书的 |
97 paceewang1 2 天前 |
98 gahanglin750 2 天前 厉害,果然创意很重要,ai 也太强了。 |
99 yanng 2 天前 主页这个风格的 prompt 是什么 或者这个 ui 风格有什么关键字吗 |