用时7天,花费30元,我vibe coding这个网站

动机

我有一款 2 年没更新的产品 One-step-admin ,开发初衷是为了更高效的进行跨业务模块操作,但当时设计的交互方式如今回看并不理想。

四月初的时候,我突然有了一个新的交互思路,但那会更多精力集中在发布 Fantastic-admin v6.0 这个全新版本上。但是我让 gemini 先产出了一份原型,验证了一下交互方案的可行性。

相信已经有人看出端倪了,是的,交互这块参考了 MacOS 上的台前调度。

执行

直到五一节前,我准备开始开发这款产品,并且我希望体验一下完全 vibe coding 是什么感觉。

我暂定名称为 One-step Console,中文叫一步控制台,它算是 One-step-admin 的迭代产品,因为目标其实是一致的,还是为了更高效的进行跨业务模块操作。

目前产品还没有对外发布,我先截取了一些图片,方便你了解产品的核心交互设计。

所有功能模块视为一个独立的窗口,每个舞台默认承载一个窗口,所以可以通过切换舞台来实现快速切换窗口。

这样设计的优势在于,传统的网站一个功能模块就是一个独立的路由,如果需要在多个模块间操作,就需要频繁跳转路由,在这前提下,开发中还需要考虑页面保活(KeepAlive)。但现在只需要切换激活舞台即可。

通过拖拽窗口到指定舞台,可以实现多窗口的舞台,每个舞台最多支持 4 个窗口,舞台内的窗口可以进行排序和布局的调整。

可以将多窗口的舞台添加到收藏,方便下次一键打开预设舞台。

未激活的舞台会缩小尺寸并停靠在侧边栏上,除了可以点击切换舞台外,也支持通过拖拽进行预览。

可以根据使用习惯,调整侧边栏的位置和宽度,并且也支持控制侧边栏显示舞台数。并且超出数量限制的舞台,并不会直接销毁,所以不用担心再次唤起舞台时,窗口会被重新渲染,这部分设计遵循了 LRU (Least Recently Used) 缓存淘汰算法。

最后

以上就是我用了 7 天时间,总计花费了 30 元,几乎纯靠 vibe coding 开发的一款产品,接下来我会完善后续工作,尽快将它发布出来。

相关推荐
闪耀之光M7811 分钟前
npm命令解析
前端
咸鱼老弟18 分钟前
AI Agent 的"自主性悖论"——为什么给它的自由度越大,越要配一套更硬的护栏
前端·人工智能
小虎AI生活24 分钟前
从提效到增收,企业级 Agent 的落地路径与实践拆解
ai编程
浩瀚地学26 分钟前
deepagents学习打卡day04
python·agent
RSABLOCKCHAIN1 小时前
antigravity运行vibecoding一般工作原理
ai编程
wangruofeng1 小时前
9 款主流 AI Agent CLI 对比:安装、版本查询与升级命令
aigc·agent·ai编程
智码看视界1 小时前
开源大模型前沿:科研智能体——Intern-S2-397B ,本地可跑的科学文献 Agent
科研·agent·intern-s2-397b·书生-s2·科学多模态大模型·apache 2.0
默_笙1 小时前
💫 闭包是个背包:拆解小米前端面试题里的三道"闭包陷阱"
前端·javascript·面试
墨心@1 小时前
实验 2-6 豆包版复现分析:Agent Skills 从论文生成演示文稿
自然语言处理·nlp·agent·智能体·datawhale共学
机械改造鹅1 小时前
拆解 prime-agent 系列——(2)Python runtime 与 kernel
agent