我花了十分钟 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 聊天后总结的可以一次执行的。做一个技术博客网站前端请你自由发挥后端使用 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.jsfetchJSON、站点 branding、visitorHash - 后台用 admin.jsJWT、renderAdminShell、分页组件 - 图片加 referrerpolicyno-referrerfavicon.svg 青紫渐变 / 图标 【后端约定】 - ResourcePathResolver 自动解析 frontend/public、frontend/admin、data/uploads - 启动时 DDL 补列 cover_image 分批回填 - Security/api/** 需 JWT静态与公开 API permitAll 【部署注意】 - 大陆服务器域名必须 ICP 备案否则外网域名 HTTPS 被云厂商 SNI 拦截IP 能通、域名不通 - Nginx443 仅一个 server 块/api 反代 3000/uploads 走 data/uploads - 可以采用 docker-compose 一键部署服务和数据库网站还有很多小彩蛋、使用教程和工具分享欢迎大家在线体验Web端哦https://106.55.143.151/域名还在 ICP 备案中大家也可以收藏域名https://mdxcoding.cloud最后欢迎欢迎欢迎在评论区留下你的 idea .