Next.jsReact作品集工具站

ai-resume-builder — Next.js 作品集模板

作者 mihretu-dev

AI Resume Builder 是一个基于 Next.js App Router 的全栈 Web 应用，使用 Gemini/OpenAI 生成简历摘要、工作经历要点和求职信，支持多套 ATS 模板切换、实时预览与 PDF 导出，并通过 Zustand 持久化到 LocalStorage。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-14查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

使用 Gemini API 提示管道生成职业摘要、工作经历要点和技能部分

可根据特定职位描述生成配套的 ATS 求职信

提供 Classic ATS、Modern Elegant 和 Minimalist 三种可即时切换的模板

采用无图标联系方式行（以 | 分隔）和标准化 URL 等 ATS 友好格式

带交互式实时预览画布，支持直接下载 PDF

通过 Zustand（含 Persist）将草稿自动保存到 LocalStorage，并支持 JSON 导入导出

模板详细介绍

该项目面向求职者、软件开发者等需要针对 ATS 优化简历的人群。README 说明其核心能力包括：通过 Gemini API 提示管道实时生成职业摘要、工作经历要点和技能部分；为特定职位描述生成配套求职信；在 Classic ATS、Modern Elegant 和 Minimalist 三种布局间即时切换；提供无图标的联系方式行（以 | 分隔）和标准化 URL 等 ATS 友好格式；带交互式实时预览画布并支持直接下载 PDF；使用 Zustand（含 Persist）将草稿自动保存到 LocalStorage，并支持 JSON 导入导出备份。技术栈方面，README 列出 Next.js App Router、JavaScript（ES6+）、Tailwind CSS、OpenAI/Gemini API、Lucide React 图标和 Zustand 状态管理。本地运行需要 Node.js v18 或更高版本，以及 npm、yarn 或 pnpm，并在 .env.local 中配置 NEXT_PUBLIC_AI_API_KEY 与 GEMINI_API_KEY。README 未说明数据库、用户账户或服务端持久化方案，也未提供生产环境部署、性能或安全方面的说明。

Next.jsReact作品集工具站

适合你的项目吗？

适用场景

为特定职位描述快速生成简历摘要、工作经历要点和技能部分
在投递前切换不同 ATS 模板并导出 PDF 简历
根据目标职位生成配套的求职信
将简历与求职信数据导出为 JSON 备份，或重新导入继续编辑

适合人群

需要针对 ATS 优化简历的求职者
希望用 AI 辅助撰写工作经历要点和摘要的软件开发者
需要同时准备简历与求职信的专业人士
希望本地运行并自行配置 AI API 密钥的开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要 Node.js v18.x 或更高版本，以及 npm、yarn 或 pnpm
2
克隆仓库后运行 npm install 安装依赖
3
在项目根目录创建 .env.local，配置 NEXT_PUBLIC_AI_API_KEY 和 GEMINI_API_KEY
4
运行 npm run dev 后访问 http://localhost:3000
5
README 未提供生产环境部署、数据库或用户账户相关说明

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
运行 AI 生成功能需要自行提供 AI API 密钥，并在 .env.local 中配置 NEXT_PUBLIC_AI_API_KEY。
使用 Gemini 相关功能需要自行申请并配置 GEMINI_API_KEY，可能涉及第三方服务的费用与条款。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

NEXT_PUBLIC_AI_API_KEY=your_ai_api_key_here
README 原文

GEMINI_API_KEY=your_gemini_api_key_here
README 原文

https://github.com/mihretu-dev/ai-resume-builder/blob/main/LICENSE https://github.com/mihretu-dev/ai-resume-builder/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-14。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 88 / 100
技术栈: Next.js · React
网站类型: 作品集 · 工具站

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-08-12
截图检查日期: 2026-10-14

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261015 · 2026-10-15

查看当时使用的来源资料

SHA-256: 1371d23b9c3380a7993ed1f3fd4feb9d6eb00154d56cb5c3595dfeb1c2eb85fc

2026-10-14T21:14:36.831Z

来源文件 / 仓库

# 🤖 AI Resume Builder

> **AI-powered career document generator, ATS-friendly template editor & cover letter generator.**

[![Next.js](https://img.shields.io/badge/Next.js-16-black?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org/)
[![JavaScript](https://img.shields.io/badge/JavaScript-ES6+-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
[![AI Powered](https://img.shields.io/badge/AI_Powered-Gemini_%2F_OpenAI-8E44AD?style=for-the-badge&logo=openai&logoColor=white)](https://ai.google.dev/)
[![Live Demo](https://img.shields.io/badge/Live_Demo-Online-success?style=for-the-badge&logo=vercel&logoColor=white)](https://ai-resume-builder-wr7g.vercel.app/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](LICENSE)

---

## 📌 Overview

**AI Resume Builder** is a full-stack web application that leverages modern LLMs to craft tailored, ATS-friendly resumes and cover letters in seconds. Designed for job seekers, software developers, and professionals who want to optimize their career documents for Applicant Tracking Systems with maximum visual presentation and ease.

🌐 **Live Demo:** [https://ai-resume-builder-wr7g.vercel.app/](https://ai-resume-builder-wr7g.vercel.app/)

---

## ✨ Key Features

* ⚡ **Real-Time AI Generation**: Generate professional summaries, work experience bullets, and skill sections using Gemini API prompt pipelines.
* ✉️ **AI Cover Letter Generator**: Draft tailored, ATS-ready cover letters paired with your resume for specific job descriptions.
* 💾 **LocalStorage Auto-Save**: Seamless client-side state persistence so your draft edits are automatically saved and hydrated.
* 📥/📤 **JSON Export & Import**: Backup your resume and cover letter data as a `.json` file and reload past drafts anytime.
* 🎨 **Multi-Template ATS Switcher**: Instantly toggle between **Classic ATS**, **Modern Elegant**, and **Minimalist** layouts.
* 📝 **ATS-Friendly Formatting**: Clean, icon-free contact lines divided by `|` and standardized URLs (`https://...`) optimized for automated screeners.
* 📄 **Live PDF Export & Preview**: Interactive real-time preview canvas with direct PDF download functionality.
* 🌙 **Dark Mode & Clean UI**: Built with Next.js App Router, Tailwind CSS, trademark **MH** splash screen, and glassmorphic UI components.

---

## 📸 Screenshots

| Resume Form & AI Generator | Live Preview & Export Canvas |
| :---: | :---: |
| ![Resume Form & AI Generator](./public/screenshots/form-generator.png) | ![Live Preview & Export Canvas](./public/screenshots/live-preview.png) |

---

## 🛠️ Tech Stack

| Technology | Layer / Category | Description |
| :--- | :--- | :--- |
| **Next.js (App Router)** | Framework | Full-stack React framework powering serverless API routes and fast render times. |
| **JavaScript (ES6+)** | Language | Modern ES6+ JavaScript & JSX implementation for dynamic application logic. |
| **Tailwind CSS** | Styling | Utility-first CSS framework with custom glassmorphism and sleek dark mode theme. |
| **AI APIs (OpenAI / Gemini)** | Intelligence | LLM integration for AI-assisted bullet point polishing, summaries, and cover letters. |
| **Lucide React** | UI Icons | Modern vector iconography for clear user interactions. |
| **Zustand (with Persist)** | State Management | Reactive state store with LocalStorage persistence and JSON backup actions. |

---

## 🚀 Quick Start & Environment Setup

Follow these simple steps to set up the project locally on your machine.

### Prerequisites

- **Node.js** (v18.x or higher)
- **npm**, **yarn**, or **pnpm**

### 1. Clone the Repository

```bash
git clone https://github.com/mihretu-dev/ai-resume-builder.git
cd ai-resume-builder
```

### 2. Install Dependencies

```bash
npm install
```

### 3. Configure Environment Variables

Create a `.env.local` file in the root of the project:

```env
# Gemini / OpenAI API Key configuration
NEXT_PUBLIC_AI_API_KEY=your_ai_api_key_here
GEMINI_API_KEY=your_gemini_api_key_here
```

### 4. Run the Development Server

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser to view the application.

---

## 🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you have ideas for new features, template designs, or improvements.

---

## 📄 License

Distributed under the MIT License. See `LICENSE` for details.

反馈内容错误