我为什么搭建了自己的 OC 展示网站

从被内容平台的用户协议劝退，到机械专业生的 Vibe Coding 独立建站实践。

起因：那些让人窒息的用户协议

我有个习惯，注册软件时会翻一翻用户协议。

听起来挺认真的对吧？但其实也就是翻翻。那些“永久性、不可撤销、非独家”之类的词，以前看到也就看到了，觉得跟我一个普通用户没什么关系。条款是平台写的，日子是我自己过的，两不相干。

直到前阵子，我打算把自己的 OC 设定、约稿和世界观发到某个内容平台上。

临到头了，隐约记得之前在用户协议里瞥见过相关条款，但具体怎么写的、权限给到什么程度，实在没印象了。于是立马回头把几个主流平台的协议重新翻了出来。

这一翻，确实被钉在了原地。

知乎写道：

用户将其在知乎平台上发表的全部内容，无论用户是否删除，均授予知乎在全世界范围免费的、永久性的、不可撤销的、非独家、可转让和可再授权的许可……

注意那句“无论用户是否删除”。这意味着，即使你删除了内容，知乎仍然可以永久使用它。你的内容，从上传的那一刻起，就不再属于你了。

小红书稍微好一点：

您授予小红书公司免费的、不可撤销的、非排他的、全球无地域限制的许可使用……

至少，小红书没有明确说“无论是否删除”。理论上，删除后可能不再追究。但“不可撤销”的许可仍然存在。

甚至一些小众平台也有类似条款：

用户在本平台上传、发布内容，即视为授予本平台一项非独占的、免费的、可再许可的、全球范围内的许可……

这些条款连在一起，翻译成人话就是：你创作的内容，平台可以随意使用、修改、再授权，甚至用于商业推广。而你作为创作者，没有任何说“不”的权利。

以前看这些词，觉得就是法务的免责模板。现在再看，每一个都在说同一件事：你点的那个“同意”，比你后来写的所有“禁止”都管用。

我也不是不能理解平台。站在开发和合规的角度，不拿点授权，他们可能连正常的图片缩略图分发、服务器备份都做不到。但让人难受的是，现在的协议往往把手伸得太长了。 当许可范围被无限扩大到“修改、推广、再授权”，且期限拉满到“永久”时，作为个体创作者，你根本没办法预料自己的心血未来会被怎么处置。

我的OC，我写的人设，我精心设计的世界观，凭什么要被平台白嫖？

你可能会说：我在简介里写个“禁止商用、禁止搬运”不就好了？

坦白说，那纯粹是写给自己的心理安慰。你注册那天勾选的那个小方框，才是具有法律效力的最高契约。你后来写的所有声明，在法律优先级上，都打不过前面自己签下的那份。

这不是危言耸听。平台的用户协议是双方达成的合同，你点下“同意”的那一刻，就已经做出了明确的授权。单方面声称“不授权”，无法对抗你已经签署的合同条款。

就像你签了租房合同，里面写明了房东有权定期检查。你事后在门上贴张纸条说“房东不能进”，有用吗？

为什么是OC展示站？

我有一只 OC（原创角色），她同时也是我的自设。她是我思想的延伸，是我情感的投射。我想给她一个家，一个真正属于我的家。

我在她身上寄托了很多私心，一点点填补她的性格缺陷、经历，还有那个不怎么完美的世界观。对我来说，她不是一张发在信息流里、转眼就被下一条动态冲走的图片，而是我现实生活的一个切片。

不是微博的140字牢笼，不是小红书的算法囚笼，更不是那些随时可能修改规则、吞掉你数据的平台。

在这个页面里，有详细的自设小说、按画师分类的约稿画廊。我不用去迁就小红书的 4:3 封面，不用管微博的九宫格切图，更不用去理会什么摸不透的推荐算法和限流机制。

我想展示圣堂，想展示那些和画师合作的作品，想让她有完整的介绍和故事。

哪怕这里没有任何人点赞，哪怕这里是一座互联网孤岛，但只要域名和云服务器还在，它就不会因为平台某次弱智的改版而变得面目全非。

在这里，我说了算。

也就是在那个时候，一个念头冒了出来：干脆自己买个域名，从零搭个网站吧。

机械狗的 Vibe Coding 踩坑记

我是学机械自动化控制的。

要说代码，我倒也不是完全没碰过。平时和单片机、PLC、控制系统打交道也得写点 C 语言（指针是邪恶的），但那套逻辑和搞前端网页完全是两个物种。

当我第一次试图搞懂网页是怎么转起来的时候，那种感觉就像走错了考场。光是前端的生态链，就能一口气吐出几十个听起来高级得不行的名词：React、Vue、Next.js、Tailwind CSS…… 每个进去都是一个无底洞。

迷茫了几天之后，决定回归最原始的需求：我不需要做用户注册系统，不需要搞复杂的数据库，更不需要高大上的后台。只想做个好看的静态展示页。

那还折腾什么框架？直接上最底层的 HTML、CSS 和 JavaScript 。

说实话，前面那句“直接上 HTML、CSS、JS”纯粹是在硬撑面子。作为一个平时写 C 语言和控制逻辑的人，第一次把 HTML 文件点开，我的第一反应是：这玩意儿也配叫代码？

没有变量声明，没有函数调用，满屏幕都是一堆尖括号套尖括号，div 里面再套个 div，看得人头皮发麻。在 C 的世界里，凡事都有极其明确的输入和输出；而在 HTML 里，你把一堆标签胡乱堆在一起，浏览器居然就能把它变成页面。为什么？不知道，像是在搞玄学。

到了 CSS 阶段，我的世界观直接崩塌了。C 语言里你写 int x = 1;，那它铁定就是 1。CSS 里你写个 width: 100%;这特么是谁的 100% ？谁决定的？我怎么控制它？完全摸不着头脑。JavaScript 稍微好点，长得像 C 的远房亲戚，但那个 document.querySelector 又是哪来的怪物？C 里面哪有直接用手去抠界面元素的玩法。

我知道变量、循环、条件判断，这些底层逻辑在任何语言里都相通。但前端这套东西，语法是新的，运行环境是新的，甚至连“代码怎么变成结果”的渲染过程都是一门玄学。

所以当时我的真实状态是：我极其明确地知道自己想要一个什么样的静态展示页，但我不知道用 HTML 怎么把它码出来。就像我知道目的地在哪，但手里只有一张用火星文写的地图。

对着空荡荡的编辑器发了半小时呆之后，我想起以前在网上刷到过“用 AI 写代码”的视频，我决定向高科技低头。

不过，我没用那种“帮我写个网页”的无脑用法。我把需求拆得很碎，像挤牙膏一样一条一条喂给它。

我的第一个问题是：“怎么写一个三栏布局？左边固定宽度，右边自动撑满。”

AI 啪啪啪吐出了一段 HTML 和 CSS，里面用到了一个叫 flex 的东西。我看不懂，但对照着结构，能猜出三栏分别对应代码里的哪三个标签。于是我继续追问：“display: flex 到底是个什么原理？”

等它解释完，我用 C 的逻辑强行翻译了一下：哦，大概就是把一组元素塞进一个容器，容器当爹，负责给里面的儿子排队。

接着我把代码贴进编辑器，改了改文字和颜色，刷新预览。靠，居然真的出了三栏！

这就是我和赛博军师的第一个回合：我出具体需求，它出示例代码，我追问我不懂的底层概念，直到我彻底理解。 然后，我再在理解的基础上自己动手改，而不是闭着眼睛瞎粘贴。

接下来的几周，这种模式成了常态。遇到布局问题就问布局，遇到交互不会就问交互，报了错就把报错信息整个丢过去让它翻译。

这时候 C 语言的底子确实帮了大忙，我懂“程序是按顺序跑的”、“变量有作用域”、“函数得传参”。这些通用概念让我能把 AI 吐出来的“前端黑话”，快速翻译成我自己能听懂的逻辑。AI 帮我填补的，恰恰是“HTML 语法、CSS 属性、DOM 操作”这块纯纯的记忆空白。

渐渐地，战况发生了变化。从最开始的“AI 写一段我粘一段”，变成了“我知道大概怎么写，但具体属性想不起来，问 AI 确认一下”；从“被 AI 牵着鼻子走”，变成了“我指哪，AI 打哪”。

这就是我真正体验到的 Vibe Coding，不是把大脑外包给 AI，而是把 AI 当成一个随叫随到的高级前端工程师。 我把脑海里的设计翻译成具体需求，AI 把需求翻译成代码，我再把代码翻译成我能掌控的逻辑。在这场三层翻译里，我的大脑从来没有缺席。

中途我还解锁了一个堪称外挂的小插曲：我发现这年头的 AI 居然已经进化到能直接“读懂图片”了。有时候我想做一个稍微复杂点的卡片排版，憋了半天不知道怎么用前端黑话向它描述，干脆在草稿纸上随手画了个结构草图，用手机拍下来直接丢给它。结果它扫了一眼，啪地一下就把 HTML 结构和对应的 CSS 给吐出来了，还原度居然能有个七七八八。这功能简直就像是拿杀鸡的牛刀来帮我砍柴，属于纯粹的降维打击。

折腾到最后，我可能依然写不出多优雅、多炫酷的 CSS。但就像那句话说的，AI 没有替我写完这个网站，而是每一个核心的结构都是我在脑子里先想好路怎么走，它再负责帮我把具体的代码码出来。

随着跟 AI 的配合越来越默契，我是越写越顺手。最后不仅把原本的核心功能做完了，还“买一赠多”，顺手折腾出了好几个用来撑场面的花哨页面。