Featured image of post 从零开始 Vibe Coding 自动签到工具

从零开始 Vibe Coding 自动签到工具

一次从"不满意"到"上线"的 AI 协作实录。不是教程,是对话记录和反思。

为什么做这个工具

最近有哥们要💊,我平时不咋签到,偶尔摸鱼逛逛社区,根本发不起💊。正好用这个来磨合一下 skills,尤其是视觉、交互这些我一窍不通,得让 AI 来弥补,最起码自己得看得过去。

目标很简单: Docker 一键部署,每天自动签到,有问题能看日志

不需要复杂的微服务架构,不需要 Redis、Kafka,一个二进制文件 + 一个 SQLite 文件就够了。

开始

告诉他我要签到的网站,定时任务每天自动完成,AI 计划完就开工了,第一版出来功能就已经跑通了,但 UI 实在不忍直视——灰色按钮、emoji 当图标、window.confirm()当弹窗、toggle 开关还错位了。

重写UI

然后开始在网上大量搜 UI 相关 skills,最后安装ui-ux-pro-max-skillshadcn

1
2
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
1
npx shadcn@latest mcp init --client claude

在命令行告诉 Claude:原来的 UI 太单一,需要重写。可以通过 vue-bits 适当添加动态元素,设计风格简约大气一些。

然后 Claude 会跟你不断交互,通过你的回答,最后出具体方案,我看差不多就让他开工了。

总结

最后 AI 交付出来还原度很高,只有一些小细节有调整,后续又加了个刷V站活跃度的功能。全程 vibe,体验还不错。

推荐阅读

Licensed under CC BY-NC-SA 4.0
最后更新于 Mar 27, 2026 06:23 CST