哈喽小伙伴们大家好，我是小李。好久不见，距离上次发表文章也有好长一段时间了。最近闲来无事儿，使用AI 做了一个个人的博客，整体效果我看着还是比较满意的。
先给大家看看效果：
首页：
文章分类页面：
标签页面：
关于我页面：
资源导航页面：
怎么样，整体效果还不错吧。
目前这个项目已经上线了，如果你想要体验一下的话，可以后台私信我，发你链接哦~
下面，来给大家分享一下详细的过程。
首先，你要明白自己要做一个怎样的博客。里面大概包含哪些内容。风格是怎样的，是动态还是静态的？用哪种框架实现？你要用这个博客系统干啥？你打算只做前端还是前后端都做？
比如我的这个博客就是纯前端的，页面也是静态的，后面我如果有时间的话可能会加点后端进去，也会整理一些核心的内容然后在这里分享给大家~
我这里用的是kiro来写的，用trae应该也可以，我没尝试过，大伙儿感兴趣可以试试看。
下面，我把提示词也放在这里：
---
## 🎯 提示词模板
```
我需要做一个个人博客的前端项目，使用 Vue 3 + Vite 构建。请帮我完成这样一个系统。
## 一、基本信息
### 个人信息
- 姓名：【你的姓名/昵称】
- Slogan：【你的个人标语，如"专注全栈实战，分享踩坑笔记"】
- 身份标签：【如"全栈开发者"、"技术博主"等，可多个】
### 技术栈
- 前端：【如 Vue.js, React, JavaScript/TypeScript, HTML5/CSS3, Webpack, Vite】
- 后端：【如 Node.js, Express, Python, Django, MySQL, MongoDB】
- AI/机器学习：【如 PyTorch, LangChain, OpenAI API，如不涉及可删除此项】
- 工具：【如 Git, Docker, Nginx, Linux, VS Code】
### 工作/实习经历
【按时间倒序填写，格式如下：】
1. 时间段 - 公司名称 - 职位 - 工作内容简述
2. 时间段 - 公司名称 - 职位 - 工作内容简述
【可添加多条】
### 教育经历
- 时间段：【如 2021-2025】
- 学校：【学校名称】
- 专业：【专业名称】
- 学历：【本科/硕士/博士】
### 兴趣方向
【列出你的技术兴趣方向，如：】
- 前端工程化与性能优化
- 微信小程序开发
- Node.js 后端开发
- AI 应用开发
【可自由添加】
### 社交账号
【填写你的社交平台链接：】
- GitHub：【你的 GitHub 链接】
- 知乎/掘金/CSDN：【选择你使用的平台及链接】
- 邮箱：【你的邮箱地址】
【可添加其他平台】
## 二、核心功能要求
### 必需页面
1. **首页**
- Hero 区域展示欢迎信息
- 最新文章列表展示
2. **关于我页面**
- 个人头像（支持本地图片）
- 个人简介、技术栈
- 工作/教育经历时间线
- 兴趣方向列表
- 社交账号链接
3. **分类页**
- 按技术领域分类：【如前端开发、后端实战、工具测评、踩坑笔记】
- 点击分类查看该分类下的文章
4. **标签页**
- 标签云展示（字体大小根据文章数量）
- 点击标签筛选文章
5. **文章详情页**
- 文章标题、元信息、标签
- 文章正文（支持 HTML）
- 分享按钮
- 评论区预留位置
6. **资源导航页**
- 学习网站、开发工具、设计资源、API 接口、技术社区等分类
- 【可选】编程导航、CDN 服务等
7. **404 页面**
- 友好的错误提示
- 返回首页按钮
### 设计风格
- 配色方案：【选择一种】
- 科技感深色主题（深色背景 + 霓虹蓝/紫色调）
- 清新亮色主题（白色背景 + 蓝色系）
- 其他：【描述你想要的风格】
- UI 特点：
- 响应式设计，适配各种设备
- 流畅的动画过渡效果
- 卡片式布局
- 【其他特殊要求】
## 三、示例文章内容
【提供 3-6 篇示例文章，格式如下：】
### 文章 1
- 标题：【文章标题】
- 分类：【所属分类】
- 标签：【标签1, 标签2, 标签3】
- 摘要：【文章简短摘要】
- 内容：【可以简单描述文章主题，AI 会生成完整内容】
### 文章 2
【同上格式】
【至少提供 3 篇，最多 6 篇】
## 四、技术要求
- 框架：Vue 3 + Vite
- 路由：Vue Router 4
- 样式：原生 CSS（使用 CSS 变量）
- 图标：Font Awesome 6
- 数据存储：前端 JavaScript 文件（后续可对接后端 API）
## 五、项目结构要求
- 清晰的目录结构
- 组件化开发
- 代码注释完整
- 提供 README 文档
- 包含 .gitignore 文件
## 六、特殊需求
【如有其他特殊需求，在此说明：】
- 【如：需要暗黑模式切换】
- 【如：需要文章搜索功能】
- 【如：需要阅读进度条】
- 【如：特定的动画效果】
---
请按照以上要求，帮我搭建完整的个人博客前端项目，包括所有页面、组件、样式和示例数据。
```
---
## 💡 填写示例
以下是一个填写完整的示例，供参考：
```
我需要做一个个人博客的前端项目，使用 Vue 3 + Vite 构建。请帮我完成这样一个系统。
## 一、基本信息
### 个人信息
- 姓名：张三
- Slogan：热爱编程，分享技术，记录成长
- 身份标签：前端工程师、开源爱好者
### 技术栈
- 前端：Vue.js, React, TypeScript, Tailwind CSS, Vite
- 后端：Node.js, Express, MySQL, Redis
- 工具：Git, Docker, VS Code, Figma
### 工作/实习经历
1. 2023/06 - 至今 - 某互联网公司 - 前端开发工程师 - 负责 Web 应用开发
2. 2022/07 - 2023/05 - 某科技公司 - 前端实习生 - 参与企业级项目开发
### 教育经历
- 时间段：2018-2022
- 学校：某某大学
- 专业：软件工程
- 学历：本科
### 兴趣方向
- 前端工程化与性能优化
- Vue.js 生态系统
- TypeScript 最佳实践
- 开源项目贡献
- 技术写作与分享
### 社交账号
- GitHub：https://github.com/zhangsan
- 掘金：https://juejin.cn/user/xxx
- 邮箱：zhangsan@example.com
## 二、核心功能要求
### 必需页面
（使用默认配置）
### 设计风格
- 配色方案：清新亮色主题（白色背景 + 蓝色系）
- UI 特点：
- 响应式设计
- 简洁现代
- 卡片式布局
## 三、示例文章内容
### 文章 1
- 标题：Vue 3 组合式 API 最佳实践
- 分类：前端开发
- 标签：Vue3, Composition API, 最佳实践
- 摘要：深入探讨 Vue 3 组合式 API 的使用技巧和最佳实践
- 内容：介绍 setup、ref、reactive、computed 等核心概念的使用
### 文章 2
- 标题：前端性能优化实战指南
- 分类：前端开发
- 标签：性能优化, Webpack, 最佳实践
- 摘要：从多个维度分析前端性能优化的方法和技巧
- 内容：包括代码分割、懒加载、图片优化、缓存策略等
### 文章 3
- 标题：TypeScript 类型体操入门
- 分类：前端开发
- 标签：TypeScript, 类型系统, 进阶
- 摘要：通过实例学习 TypeScript 高级类型技巧
- 内容：介绍泛型、条件类型、映射类型等高级特性
## 四、技术要求
（使用默认配置）
## 五、项目结构要求
（使用默认配置）
## 六、特殊需求
- 需要代码高亮功能
- 文章支持 Markdown 格式
---
请按照以上要求，帮我搭建完整的个人博客前端项目。
```
---
## 🎨 配色方案参考
### 科技感深色主题（当前项目使用）
- 主色：霓虹蓝 #00d4ff
- 辅色：紫色 #7c3aed
- 背景：深色 #0a0e27
- 卡片：#1a1f3a
- 文字：#e2e8f0
### 清新亮色主题
- 主色：蓝色 #409eff
- 辅色：绿色 #67c23a
- 背景：浅灰 #f5f7fa
- 卡片：白色 #ffffff
- 文字：深灰 #303133
### 温暖橙色主题
- 主色：橙色 #ff6b35
- 辅色：黄色 #f7931e
- 背景：米白 #fef9f3
- 卡片：白色 #ffffff
- 文字：深灰 #2c3e50
---
## 📝 注意事项
1. **个人信息**：请如实填写，这些信息会显示在"关于我"页面
2. **社交账号**：填写真实可访问的链接，或使用 # 作为占位符
3. **文章内容**：至少提供 3 篇示例文章，AI 会生成完整的文章内容
4. **配色方案**：可以选择预设方案，也可以自定义颜色
5. **特殊需求**：如有特殊功能需求，请详细描述
---
## 🚀 生成后的使用步骤
1. AI 生成项目后，安装依赖：
```bash
npm install
```
2. 启动开发服务器：
```bash
npm run dev
```
3. 访问 http://localhost:3000 查看效果
4. 自定义内容：
- 修改 `src/views/About.vue` 更新个人信息
- 修改 `src/data/articles.js` 添加/编辑文章
- 修改 `src/assets/style.css` 调整配色
- 替换 `src/assets/images/avator.jpg` 为你的头像
5. 构建生产版本：
```bash
npm run build
```
---
## 🎯 项目特点
基于此模板生成的博客项目具有以下特点：
✅ 完整的页面结构（首页、关于、分类、标签、文章详情、资源导航、404）
✅ 响应式设计，适配各种设备
✅ 现代化的 UI 设计
✅ 流畅的动画效果
✅ 清晰的代码结构
✅ 易于定制和扩展
✅ 包含示例文章和数据
✅ 完整的文档说明
---
## 📚 扩展建议
生成基础项目后，你可以考虑添加：
- 🌙 暗黑模式切换
- 🔍 文章搜索功能
- 📊 访问统计
- 💬 评论系统（Gitalk、Valine）
- 📱 PWA 支持
- 🎨 主题切换
- 📖 文章目录导航
- 🔖 阅读进度条
- 📡 RSS 订阅
- 🌐 多语言支持
---
## 💻 技术栈说明
- **Vue 3**：渐进式 JavaScript 框架
- **Vite**：下一代前端构建工具
- **Vue Router**：官方路由管理器
- **Font Awesome**：图标库
- **CSS Variables**：便于主题定制
---将上面的模板复制后，根据你的实际情况填写【】中的内容，然后发送给 AI 助手即可生成你的个人博客项目。
生成之后，如果你打算部署到服务器上的话，需要使用npm run build 来打包 ，打包成功之后把dist 目录下的内容全部复制到服务器上对应的位置就行；如果你使用vercel 这类工具来部署的话直接在vercel 的个人项目种导入github 的仓库，然后deploy就行。
最后，感谢大家的阅读，如果对你有帮助的话，欢迎给个三连支持哦！（大家的支持是我不断更新的动力！）我们下期再见