VIBE CODING · PRACTICE SET

用一段话,
把想法变成可运行的应用

这是一段时间以来我用 Vibe Coding(自然语言描述需求,让 AI 生成代码)在自己的小服务器上快速搭出来的一批小工具。它们多数是 PHP + SQLite 的极简组合,部分搭配前端原生 JavaScript,覆盖日常记录、AI 创作、效率工具和实验性 demo。

📦 26 个项目 🕒 主要集中在 2026 年 6–7 月 🛠 多数基于 PHP + SQLite + 原生 JS
01 bookmarks 书签 · 可视化网格

把浏览器书签变成一张可平移、可缩放的可视化网格。

浏览器原生书签是树状列表,越攒越多之后很难一眼找到想要的页面。bookmarks 把所有书签铺到一个巨大的二维网格上,支持鼠标拖动平移、滚轮缩放、深色 / 浅色主题切换,点击直达。数据存在本地 SQLite,重新整理自己的"数字桌面"。

使用场景:
  • 把成百上千条书签变成一张"地图",按主题分区摆放
  • 对视觉化分类有偏好的人,比传统文件夹更直观
  • 团队内部共享一组常用工具链接,做成"工作台"风格入口
02 briefly 会议录音 · Whisper · LLM 摘要

上传会议录音 → Whisper 转写 → 中英双语摘要 → 可检索的会议库。

Briefly 解决"开完会一周就忘了"的常见痛点。录音文件上传到 PHP 后端,Mac 主机上的 cron 调度 Python 进程每 30 秒拉取一次未处理任务,调用本地的 whisper.cpp 完成转写,再用 MiniMax LLM 生成中英对照摘要。最终文本入库到 SQLite(FTS5 全文索引),可以按时间、标签、关键词快速检索回听。

使用场景:
  • 每周例会、客户访谈的内部分享与复盘
  • 采访、播客、培训课程的文字化存档
  • 需要在大量历史录音里快速定位某句原话
03 china-history 中国历史 · 朝代疆域 · 交互可视化

动态查看中国历代王朝的更替与疆域变迁。

china-history 把中国历史做成一条可交互的时间线:拖动时间轴即可看到每个朝代的起止年代,以及当时疆域在地图上的伸缩变化。每个朝代还罗列了代表性的人物与艺术作品,把抽象的历史变成直观、可视的反馈。

使用场景:
  • 快速厘清各朝代的先后顺序与大致存续时间
  • 在地图上直观感受不同时期版图的扩张与收缩
  • 配合人物 / 艺术作品,做历史学习或科普的可视化素材
04 clock 多主题时钟

同一个时钟,多套主题(极简、像素、复古…),随时切换。

clock 不是一个单纯的"显示时间"的页面,而是一个"主题展示台"。所有主题放在 themes/ 目录下,每个主题一份独立的 CSS / 资源,运行时按 URL 参数或设置切换。可以挂在大屏上当数字时钟,也可以作为浏览器新标签页。

使用场景:
  • 书房 / 工作台当装饰时钟
  • 不同心情切换不同主题(专注 / 放松 / 派对)
  • 前端练习:观察同一份 DOM 在不同 CSS 下的呈现
05 flash 闪卡 · 间隔复习

轻量的闪卡应用,适合单词 / 概念 / 问答的快速复习。

"Flash" 用极简界面实现间隔复习的核心循环:翻面、自我评估(记得 / 不记得)、下一张。支持自定义卡片组,导入 / 导出 CSV 卡片包,所有数据保存在 SQLite。设计上不追求"复杂记忆曲线算法",而是想做到"打开就能复习",所以更贴近日常随手背单词 / 背概念的使用。

使用场景:
  • 英语单词、专业术语、代码片段的日常复习
  • 备考前快速过一遍自己整理的 Q&A 题库
  • 孩子 / 学生用来背古诗、背乘法口诀
06 flash-drop 临时文件中转

轻量的"文件中转站",自动清理、不留痕迹。

类似 WeTransfer / 文叔叔,但更克制:上传文件 → 自动生成取件码 / 取件链接 → 对方下载 → 文件按策略自动过期删除。支持中英双语界面、容量与保存天数可配置。整站只用 PHP + 本地文件,无第三方依赖,适合小团队 / 朋友之间临时传一些不想进网盘的素材。

使用场景:
  • 微信传文件不方便时,发一个取件码给对方
  • 团队 / 客户之间临时交付大文件,避免邮件附件超限
  • 对隐私敏感的资料,不想长期留在第三方云
07 gps-tracker 轨迹记录 · OSM

手机端 GPS 实时定位 + OpenStreetMap 轨迹回放。

基于浏览器 navigator.geolocation 的轨迹记录器。前端在手机端定时采集位置(5 米 / 3 秒以上才落点),批量上传到 PHP + SQLite;后台用 Leaflet 在 OSM 上回放完整轨迹,支持暂停 / 续录、重命名、删除、GPX 导入导出。移动 ≥ 5 米且时间 ≥ 3 秒才记录,避免静止时产生冗余数据。

使用场景:
  • 户外徒步、骑行、城市漫步的轨迹日记
  • 把 GPX 导出后丢进 Strava、Google Earth 与朋友分享
  • 私人 / 家庭出行记录(仅自托管,不上传第三方)
08 keep 习惯打卡 · 月历视图

追踪日常习惯(编码、阅读、运动…)并以月历形式可视化。

keep 是一款个人习惯打卡工具。注册账号后可以自定义若干习惯(编程、读书、跑步…),每天一键勾选完成;前端用月历视图把整月打卡密度直观展现,连续天数、断卡情况一目了然。后端用 SQLite 持久化,本地化部署保证数据隐私。

使用场景:
  • 新一年想"每天读 30 分钟 / 跑 5 公里"的人
  • 开发者坚持每日编码 / LeetCode 打卡的可视化
  • 家庭成员共同维护一份习惯表,互相激励
09 light-cam 轻量相机工作流

一个用 PHP 框架搭起来的相机 / 拍摄工作流。

与常见的"放几张图就完事"的展示页不同,light-cam 走的是一套相对完整的 MVC 目录:路由、控制器、视图、会话、配置分层清晰。它把相机相关功能(拍摄、归档、检索、导出)整理成了一条流水线,适合作为"小型图像业务"的基础框架模板。

使用场景:
  • 想要一个"能跑起来"的 PHP MVC 项目骨架作为参考
  • 搭建个人摄影 / 扫描 / 拍摄流水线的原型
  • 教学示例:演示 Request / Router / View 的协作
10 memo 语音备忘录 · PWA

手机即开即录的语音备忘录,可转写为文字。

极简风格的语音速记 PWA。打开页面即可一键录音,本地保存 + 上传到服务端,配合 transcribe.sh 调用转写服务生成文字版。所有记录按时间线展示,可回放、可搜索文字稿。整站按 PWA 标准做了 manifest 与图标,可"添加到主屏幕"当作系统 App 使用。

使用场景:
  • 通勤路上突然冒出的灵感,立刻按住说一段
  • 开会 / 采访场景下不希望敲字时的低负担记录
  • 老人 / 不擅长打字的家庭成员的语音日记
11 music AI 音乐作品集

汇集个人用 AI 生成的所有音乐作品。

与 z-beat 偏向"创作过程"不同,music 是一个成品展示站。把自己在各类 AI 音乐工具上做出来的歌曲 / BGM 集中起来,按风格、心情、项目归档,提供在线试听、封面、歌词(如果有)。页面自带 PWA 能力,可以离线播放本地缓存的曲目。

使用场景:
  • 自己随时回听之前做过的 AI 作品
  • 把合集分享给朋友 / 同事作为"个人创作简历"
  • 为不同主题(学习、运动、放松)准备歌单
12 pic-gen 文生图 / 图生图

基于 MiniMax image_generation 的 AI 图像生成与画廊管理。

完整对齐官方 OpenAPI 规范的文生图 + 图生图工作台。文生图支持 prompt、模型(image-01 / image-01-live)、宽高比、n 张数、seed、负向提示词、风格预设;图生图通过 subject_reference 上传单张主体参考图。所有生成结果会保存到本地画廊,并附带 prompt / 参数 / seed 等元数据,支持搜索、模式过滤、批量删除。

使用场景:
  • 每天生成一张"今日图":cron 8 点自动跑一次,自动存档
  • 设计师拿同一段 prompt 反复 seed 试稿,沉淀可复用的素材库
  • 有主体参考的人物 / 角色风格化二次创作
13 pose-pose 网页游戏 · 摄像头 · 姿态识别

用摄像头捕捉你的动作,按屏幕提示摆姿势得分。

pose-pose 是一个打开即玩的网页体感小游戏。授权摄像头后,它实时捕捉你的肢体动作,屏幕上给出需要模仿的姿势提示;你摆得越像,匹配度越高,得分也越高。规则极简,主打轻松好玩。

使用场景:
  • 聚会 / 课间用来活动身体的小游戏
  • 给小朋友一个“照着做动作”的互动玩法
  • 体感、姿态识别技术的趣味 demo
14 pulse 日程管理 · 飞书 · OpenClaw

个人日程管理,记录每日会议与待办,支持飞书同步。

pulse 是一个类 Google Calendar 的个人日程工具,用来记录每天的会议与待办。日程支持按月、按周切换视图;并接入了 OpenClaw,可以直接通过飞书更新和查阅日程,随手在聊天里就能维护自己的日历。

使用场景:
  • 统一管理会议、待办与个人安排,按月 / 周查看
  • 在飞书里直接添加或查询当天日程,无需打开网页
  • 替代第三方日历,自托管保证日程数据私密
15 qrcode 二维码生成

简洁的网页版二维码生成器。

一个把"文本 / URL / WiFi / 联系人"转成二维码的小工具。粘贴内容即可生成 PNG 或矢量 SVG,可自定义前景 / 背景色、容错等级、模块大小。零账号、零上传:纯前端或本地 PHP 生成,内容不离开浏览器或服务器。

使用场景:
  • 把博客文章 / B 站视频链接做成二维码贴到海报上
  • 家里来客人时直接出示 WiFi 二维码
  • 名片 / 桌牌 / PPT 上嵌入联系方式二维码
16 timely 纪念日 · 倒数提醒

记录重要日子与纪念日,倒数天数可视化提醒。

timely 是一个纪念日管理工具,帮你记下生日、纪念日等重要的日子。当某个日子临近时,它会以可视化的方式提醒你“还剩多少天”,让你不会错过任何一个值得记住的时刻。

使用场景:
  • 记录生日、结婚纪念日等重要日子,提前倒数提醒
  • 追踪各种周期性纪念日,避免遗忘
  • 把“距离某件大事还有多少天”直观展示出来
17 trace-map 地点记录 · GPS · 地图可视化

记录你去过的地点,并在地图上可视化呈现足迹。

trace-map 用来收藏"我曾经到过的地方"。每到一个值得记住的地点——常去的咖啡馆、旅途中的城市、偶然发现的角落——就把它的 GPS 坐标存下来,配上名称与备注;前端在地图上把这些点逐一标注出来,一眼就能看到自己的足迹分布。与偏重连续轨迹的 gps-tracker 不同,trace-map 关注的是"离散的地点集合":不是记录你怎么走的,而是记录你去过哪里。

使用场景:
  • 收藏常去的咖啡馆、餐厅、公园,攒出一张私人地点地图
  • 旅行结束后回顾自己到过的城市与打卡点
  • 把想去的地方提前标在地图上,当作出行清单
18 traffic-monitor 自建站点统计

单租户、零依赖的网站访问监控(PV/UV/在线/GeoIP)。

一个完全自托管的轻量级站点统计工具。嵌入脚本小于 4KB,支持 SPA 路由切换、sendBeacon / fetch / 1×gif 兜底;后台提供总览、14 天趋势、站点管理、可视化嵌入代码;可选接入纯真 IP 库做国内 GeoIP 解析(IPv6 暂不支持)。SQLite 存储,单实例适合每日 100 万 PV 以下的小流量。

使用场景:
  • 个人博客 / 小项目不想挂第三方统计(GA、百度统计)
  • 同时给多个自有站点打点,需要统一后台查看
  • 想保留原始访问日志以便排查问题
19 velo-track 车辆费用 · 油耗电耗记录

管理机动车的日常费用与油耗 / 电耗。

velo-track 基本对标知名的“小熊油耗”:记录机动车的各类日常开销(加油、充电、维修、保险等),并统计每月的油耗与电耗,综合呈现一辆车到底花了多少钱、能耗如何,帮助你看清爱车的真实使用成本。

使用场景:
  • 记录每次加油 / 充电,自动算出油耗、电耗与单公里成本
  • 归集维修、保养、保险等费用,掌握年度养车开销
  • 多车管理,横向对比不同车辆的经济性
20 viverse 2D 虚拟世界

浏览器里的 2D 虚拟空间,可漫步、可交互。

viverse 是一段"探索型"实验:在浏览器里用 2D 视角搭建一个可漫游的小世界,配合 php 后端处理账号、状态、存档。它不追求 3D 沉浸感,而是用低门槛的方式实现"在网页里走动 / 触发事件"的小乐趣。

使用场景:
  • 个人作品集 / 自我介绍页用"进入一个小世界"的入口
  • 小型互动叙事 / 解谜小游戏的原型
  • 给小朋友一个浏览器里就能玩的小空间
21 workspace 虚拟桌面

一个跑在浏览器里的"虚拟桌面"环境。

workspace 把操作系统"桌面"的概念搬到了网页里:图标、窗口、任务栏、文件资源管理器一应俱全。后端基于自研轻量 PHP 框架(Router + Database + Logger + Template),整套逻辑在一个项目里走通,是非常不错的"手搓桌面"教学样本。

使用场景:
  • 教学示例:演示一个完整 PHP 框架从路由到模板的协作
  • 搭建个人"网页版工作台",把常用 Web App 集中调度
  • 当作 Nextcloud / 文件中心替代方案的轻量入口
22 world-history 世界历史 · 交互可视化

动态查看世界历史事件的演变。

world-history 是 china-history 的世界版:用同样的交互时间线呈现世界范围内的历史进程,拖动时间轴即可查看不同时期的重大事件与格局变化,帮助建立跨地区、跨文明的历史全局观。

使用场景:
  • 把世界史的关键节点串成一条可浏览的时间线
  • 对照同一时期不同地区正在发生的事
  • 作为通识 / 科普的历史可视化工具
23 z-agent 个人 AI Agent

对标 Claude Code 的本地 AI Agent:CLI + 工具调用 + 多轮循环。

z-agent 还在规划阶段(仅含 PLAN.md),但目标已经清晰:做一个本地、可深度定制的 AI Agent,参考 Claude Code / OpenClaw / Hermes 等项目的能力。计划分阶段迭代:Hello Agent → 流式输出 + 工具循环 → 上下文管理 → 文件编辑 → Skills / Slash 命令 → 子 Agent → MCP / Permission / Hook / TUI,最终形成一个"自托管版的 Claude Code"。

使用场景:
  • 把 AI Agent 跑在自己的服务器 / 本地,不依赖商业 CLI
  • 对工具权限、子 Agent、上下文压缩有更细粒度的自定义需求
  • 作为学习材料:完整走通一个 Agent 项目从骨架到 MCP 的全流程
24 z-beat AI 音乐创作

通过提示词生成 AI 音乐的创作工具。

"Z Beat" 把自己定位为"AI 鼓手":用户输入风格、情绪、节奏描述,后端调用音乐生成模型得到可播放的 Beat。支持试听、收藏、下载与历史版本管理,所有生成结果存档到本地,便于反复迭代同一首作品的多个版本。

使用场景:
  • 为短视频、Vlog 找一段氛围合适的 BGM
  • 独立游戏 / 个人项目需要原创配乐时的灵感起点
  • 在没有乐器基础的情况下体验"创作"本身
25 z-image-editor 网页版简易 PS

"简易版 Photoshop":Canvas 实时预览 + PHP/GD 服务端处理。

一个无需安装的网页图片编辑器。前端用 HTML5 Canvas 完成所有实时绘制(毫秒级反馈),后端 PHP + GD 负责最终导出与格式转换(JPG / PNG / WebP)。内置画笔、橡皮、形状、文字、裁剪、吸管、12 种一键滤镜、亮度对比度饱和度、旋转翻转、撤销重做(30 步)等能力,可通过 Docker 一键部署。

使用场景:
  • 不想打开 Photoshop 也能快速修图、改尺寸、加水印
  • 为博客 / 公众号文章准备头图、二次创作素材
  • 在服务器端批量处理图片(格式转换、质量压缩)
26 z-voice TTS · 声音克隆

基于 MiniMax TTS API 的文字转语音与声音克隆工作台。

一站式 TTS 工具:左侧栏分类管理 TTS 合成、声音库、克隆声音、历史记录与设置;主区域支持多模型(speech-2.8-hd 等)、音色选择、语速音量调节,并可以把自定义音频克隆为可复用的声音 ID。生成的音频可直接下载或加入历史库,便于二次调用。

使用场景:
  • 短视频 / 播客 / 公众号的有声化配音
  • 用克隆出来的个人声音批量生成固定栏目
  • 为演示稿准备不同风格、不同语速的讲解音频