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