十分钟 Vibe Coding 了一个个人网站，腾讯 UI 风格，经验分享

我花了十分钟 Vibe Coding 出了一个个人网站，参考了腾讯龙虾官网风格，感觉效果还不错，决定和同学们分享。

有同学可能还不知道啥是 Vibe Coding ，在这里简单介绍下：

Vibe Coding（氛围编程），程序员不再一行一行写代码，而是不断用自然语言告诉 AI 自己想要什么，让 AI 写代码，自己负责验证、调整和迭代。

For example：

传统开发流程：

创建 Spring Boot 项目
写 User 实体
写 Controller
写 Service
写 Mapper
写 SQL
调试...

AI 辅助开发流程：

遇到 bug 或者问题，将问题粘贴给 AI 聊天框，生成答案自己写
或者借助一些 AI 插件，tab 补全辅助编程，主力还是自己

Vibe Coding 流程：

我想做一个 xxx 系统
使用 xxx 技术栈
哪里不满意直接跟 Agent 说
你是技术经理，不用写一行代码

著名计算机科学家 Karpathy 戏称："You're not coding anymore. You're just vibing." 其实意思就是是：你已经不是在敲代码，而是在和 AI 一起找感觉。

1. 系统部分效果截图

首页

精选

精选（鼠标悬浮效果）

文章页

百宝箱

文章详情页

关于（个人中心）

2. 本次 Vibe Coding 提示词

一句话版：我要做一个个人技术博客的网站，前端请你自由发挥，后端使用 Springboot + Mysql ，品牌名「迷迭香编程」，网站要兼顾性能与审美，参考 xxx 网站的设计风格，要有动态和鼠标悬浮效果但是不要太花哨，需要光球背景 + glow 卡片 + 代码块占位视觉，品牌与文案全站动态统一，博客内容编辑采用Markdown格式。

以下提示词是我多次与 AI 聊天后总结的，可以一次执行的。

html 复制代码

做一个技术博客网站，前端请你自由发挥，后端使用 Springboot + Mysql ，品牌名「迷迭香编程」，网站要兼顾性能与审美，参考 xxx 网站的设计风格，要有动态和鼠标悬浮效果但是不要太花哨，需要光球背景 + glow 卡片 + 代码块占位视觉，品牌与文案全站动态统一，博客内容编辑采用Markdown格式。

【技术栈】
- 前端：原生 HTML/CSS/JS，无框架
- 后端：Spring Boot 2.7 + JPA + MySQL + JWT
- 部署：Nginx 反代，静态与 API 同域

【目录结构】
tech-blog/
├── frontend/public/    # 用户站（首页/文章/百宝箱/关于）
├── frontend/admin/     # 管理后台
├── backend/            # Spring Boot
└── data/uploads/       # 上传文件

【核心功能】
- 用户端：首页精选+Recent、文章列表（分页+搜索+分类）、文章详情、百宝箱、关于页、访问统计埋点
- 后台：文章/分类/评论/精选/百宝箱/站点设置/个人资料/仪表盘（PV·UV）
- 文章：Markdown 渲染、封面图落库 cover_image、摘要 excerpt、按 slug 访问
- 列表接口：用 PostListView 投影，禁止拉 content 大字段；公开/后台列表均分页

【性能原则】
- 列表 SQL LIMIT/OFFSET，不要先查全表再 subList
- 封面在保存时写入 cover_image，列表不扫正文
- 精选/Recent 固定条数；全部文章分页（公开 10 条/页，后台 20 条/页）

【前端约定】
- 公共 API 封装在 js/api.js（fetchJSON、站点 branding、visitorHash）
- 后台用 admin.js（JWT、renderAdminShell、分页组件）
- 图片加 referrerpolicy="no-referrer"；favicon.svg 青紫渐变 </> 图标

【后端约定】
- ResourcePathResolver 自动解析 frontend/public、frontend/admin、data/uploads
- 启动时 DDL 补列 + cover_image 分批回填
- Security：/api/** 需 JWT，静态与公开 API permitAll

【部署注意】
- 大陆服务器域名必须 ICP 备案，否则外网域名 HTTPS 被云厂商 SNI 拦截（IP 能通、域名不通）
- Nginx：443 仅一个 server 块，/api 反代 3000，/uploads 走 data/uploads
- 可以采用 docker-compose 一键部署服务和数据库

网站还有很多小彩蛋、使用教程和工具分享，欢迎大家在线体验（Web端哦）：https://106.55.143.151/

域名还在 ICP 备案中，大家也可以收藏域名：https://mdxcoding.cloud

最后欢迎欢迎欢迎在评论区留下你的 idea .