30 Days of Vibe Coding - Day 30

30 Days of Vibe Coding - 这篇文章属于一个选集。

§ 30: 本文

Day 30。最后一天。我做了个操作系统。

不是真的操作系统。是浏览器里的假操作系统。但是那种你能启动它、登录、打开文件管理器、调整窗口大小、把窗口拖到角落对齐、切换工作区、打开一个能跑neofetch的终端、换壁纸、然后把这个月做的29个项目当作应用启动的那种假。

这是收官之作。过去30天的每一个项目都住在这里面。

提示词
#

“做一个基于Web的桌面OS。带拖拽、缩放、最小化、最大化、窗口吸附的窗口管理。多工作区。任务栏、开始菜单、聚光灯搜索、Alt+Tab。启动画面、登录界面、锁屏、屏保。带强调色的深色和浅色主题。带视差效果的壁纸。桌面小组件。内置应用：文件管理器、文本编辑器、带neofetch的终端、浏览器、计算器、设置、音乐播放器、图片查看器、画图、日历。而且每一个Vibe30项目都应该作为已安装的应用可以访问。”

整个挑战中最大的提示词，给最大的项目。

自己试试看

怎么做的
#

Watchfire把这个拆成了25个任务。不是挑战中最多的（代码编辑器有43个），但这个的范围最广。这不是一个应用。它是一个需要容纳所有其他应用的外壳。

任务涵盖了OS构建（如果能这么叫的话）你能想到的一切：核心窗口管理、工作区系统、任务栏和系统托盘、开始菜单、聚光灯搜索、Alt+Tab切换器、启动和登录流程、锁屏和屏保、主题引擎、带视差的壁纸系统、桌面小组件，然后每个内置应用各自一个任务。最后的任务是把所有30个Vibe30项目整合为可启动的应用，并构建一个欢迎导览。

这是30天里我花手动时间最多的一个。不是写代码，而是测试交互。窗口吸附有一大堆边界情况。拖到角落会怎样？最大化一个已吸附的窗口呢？拖拽窗口时切换工作区呢？就是这些东西我得一个个试，然后反馈。

watchfire-io/watchfire

Better context. Better code.

成果
#

它能启动。有一个带加载条和系统消息滚动的启动动画。然后是登录界面。然后桌面加载出来。

窗口管理真的能用。 拖拽窗口。抓住任何边缘或角落来调整大小。双击标题栏最大化。拖到左边缘左半屏，右边缘右半屏，角落四分屏。最小化到任务栏然后点击恢复。这种事听起来简单，但有无数个小交互细节。

四个工作区。 用Ctrl+1到Ctrl+4切换，或者在任务栏点击。每个工作区有自己的窗口集合。感觉跟真的多桌面一样。

任务栏很正经。 开始菜单按钮、固定应用、打开窗口的指示器、工作区切换器、带时钟的系统托盘。点击开始菜单会弹出分类的应用启动器。按Cmd+K打开聚光灯搜索，输入就能即时找到任何应用。Alt+Tab弹出带预览的窗口切换器。

深色和浅色主题，9种强调色。 打开设置，选主题，选强调色，整个OS重新渲染。有4张带视差效果的壁纸，会响应鼠标移动。

内置应用能用。 文件管理器可以浏览虚拟文件系统。文本编辑器支持撤销/重做，能保存/打开文件。终端能执行命令，有一个能显示miniOs系统信息的neofetch。计算器支持键盘输入。画图能画画。日历能用。

然后是Vibe30应用。 所有30个项目在开始菜单里有自己的分类。Web项目在miniOs窗口内的嵌入式iframe中打开。不能在浏览器里运行的TUI和原生项目会显示一个项目卡片，带有仓库和在线演示的链接。你可以在一个窗口里跑平台跳跃游戏，另一个窗口跑贪吃蛇，第三个窗口跑Wordle，同时后台放着音乐播放器。