写简历必看！用AI+HTML美化，看完你也可以写出好看的简历
最近刷牛客，刷到好多求助“帮看简历”的帖子，真的越看越着急😭 很多同学的简历写得乱七八糟；还有的格式混乱，字体、间距歪歪扭扭，明明是不错的bg，却被简历拖了后腿。
刚好今天我自己重新写了一份简历，亲测用AI搞定内容、HTML做美化，成品比网上的模板精致太多，而且完全个性化，简历做得干净、重点突出，不管是找实习、投竞赛，都能加分不少。
今天就手把手教大家，从0到1用AI写简历内容，再用HTML做美化，全程新手友好，复制粘贴就能改，看完直接上手！
第一步：用AI优化简历内容
很多同学写简历卡壳，要么是不知道写什么，要么是不知道怎么组织语言，AI就能完美解决这个问题。重点是：不要让AI瞎写，要给它明确的指令，结合自己的实际情况修改。
打开豆包,根据个人情况生成自己的简历，我就暂时让AI给我随便生成一份，我不太会写提示词，这里只是做个参考
给我生成一份Java后端简历，仅含个人信息、个人技能，实习经历和项目经历四点，简洁标注熟练度，不堆砌，坚决不能使用精通、深耕这类过于自信的词汇、实习经历和项目经历，遵守STAR法则，分点叙述。不夸大技能、不写空泛话术，全程语言精简无冗余，突出个人真实能力，适配Java后端岗位招聘需求。
AI输出后，先看看有哪些可以修改
- 1：删除夸大表述——比如AI可能会写精通,深耕这种词汇，在简历里面尽量避免，改成符合自己水平的描述
- 2：补充细节——项目经历里，AI可能只写了“开发邮箱登录接口”，最好改为具体干了什么，例如：“使用RabbitMQ异步邮箱加速，将邮箱验证码接口速度提高70％”，突出自己的贡献
- 3：精简冗余——AI可能会写很多套话，比如“具有良好的沟通能力和团队协作精神”，删掉这些空话，HR最讨厌这种看了和没看没有区别的话
修改完之后，就有了一份内容完整、重点突出的简历初稿
接下来就是用HTML美化，优化简历的结构。
第二步：*********
为什么用HTML？因为HTML自由度比Word文档高，可以直接使用AI修改，比Word模板灵活。
这里的提示词最好根据你自己的要求好好写一写，我是真的不会写提示词啊
现在写一个html页面来展示我的简历，并且美化页面，适当增加装饰，要求简历的文字内容不能改变，只优化我的简历结构，加粗关键词，并且增加一个导出为pdf的按钮。
下面是生成的结果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java后端开发工程师-个人简历</title>
<script src="https://cdn.jsdelivr.net/npm/html2pdf.js@0.10.1/dist/html2pdf.bundle.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
body {
background: linear-gradient(135deg, #f0f4f8, #e2e8f0);
padding: 30px 15px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
/* 导出按钮 */
.export-btn {
margin-bottom: 20px;
padding: 12px 28px;
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: white;
border: none;
border-radius: 50px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.export-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}
/* 简历卡片 */
.resume-container {
width: 100%;
max-width: 800px;
background: white;
padding: 35px;
border-radius: 18px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
border: 1px solid rgba(255,255,255,0.8);
position: relative;
overflow: hidden;
}
.resume-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #3b82f6, #2563eb, #1d4ed8);
}
/* 主标题（大标题）美化 */
.resume-title {
text-align: center;
font-size: 28px;
font-weight: 700;
color: #1e293b;
margin-bottom: 25px;
padding: 10px 0;
position: relative;
letter-spacing: 1.5px;
text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.resume-title::before {
content: "";
width: 120px;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #2563eb);
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.resume-title::after {
content: "";
width: 30px;
height: 8px;
background: #2563eb;
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
}
/* 小标题（模块标题）美化 */
.section {
margin-bottom: 22px;
}
.section-title {
font-size: 19px;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
padding: 8px 0 8px 16px;
border-left: 5px solid #2563eb;
background: linear-gradient(90deg, rgba(59,130,246,0.1), transparent);
border-radius: 0 6px 6px 0;
display: flex;
align-items: center;
box-shadow: 0 2px 6px rgba(59,130,246,0.08);
}
/* 内容 - 紧凑版 + 关键词加粗 */
.content {
font-size: 15px;
color: #475569;
line-height: 1.4; /* 保持紧凑行距 */
padding: 0 5px;
}
.content p {
margin-bottom: 6px;
}
.content strong {
color: #2563eb; /* 关键词加粗且变主色，更突出 */
font-weight: 700;
font-size: 15px;
}
.content ul {
list-style: none;
padding-left: 6px;
}
.content li {
margin-bottom: 6px; /* 保持紧凑 */
padding-left: 14px;
position: relative;
}
.content li::before {
content: "●";
color: #2563eb;
position: absolute;
left: 0;
font-size: 12px;
top: 0;
font-weight: bold;
}
/* 分割线优化 */
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
margin: 18px 0;
position: relative;
}
.section-divider::before {
content: "";
width: 40px;
height: 1px;
background: #2563eb;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}
/* PDF 打印适配 */
@media print {
body { background: white; padding: 0; }
.export-btn { display: none; }
.resume-container { box-shadow: none; border: none; padding: 0; }
.resume-container::before, .resume-title::before, .resume-title::after, .section-divider::before { display: none; }
.content strong { color: #1e293b; } /* 打印时关键词加粗不变色，更规范 */
}
</style>
</head>
<body>
<button class="export-btn" onclick="exportPDF()">导出PDF简历</button>
<div class="resume-container" id="resume">
<h1 class="resume-title">个人简历</h1>
<!-- 个人信息 -->
<div class="section">
<h2 class="section-title">个人信息</h2>
<div class="content">
<p>姓名：XXX | 联系电话：138XXXX8888 | 电子邮箱：**********</p>
<p>求职意向：<strong>Java后端开发工程师</strong></p>
</div>
</div>
<div class="section-divider"></div>
<!-- 个人技能 -->
<div class="section">
<h2 class="section-title">个人技能</h2>
<div class="content">
<ul>
<li><strong>Java</strong>：熟练，掌握面向对象编程、集合框架、IO流及多线程基础，能够独立编写基础业务逻辑</li>
<li>框架：<strong>Spring Boot</strong>、<strong>Spring MVC</strong>、<strong>MyBatis</strong>均为熟练掌握，可凭借这些框架搭建基础项目架构</li>
<li>数据库：<strong>MySQL</strong>熟练运用，掌握SQL语句编写、索引基础以及简单事务处理相关操作</li>
<li>工具：<strong>Git</strong>和<strong>Maven</strong>均熟练使用，其中Git掌握提交、分支管理等基础操作，Maven可完成依赖管理与项目构建</li>
<li>其他：了解<strong>Redis</strong>基础用法与<strong>HTTP协议</strong>，同时具备基础的问题排查能力</li>
</ul>
</div>
</div>
<div class="section-divider"></div>
<!-- 实习经历 -->
<div class="section">
<h2 class="section-title">实习经历</h2>
<div class="content">
<p><strong>XXX科技有限公司</strong> | <strong>Java后端实习生</strong> | 202X.XX-202X.XX</p>
<ul>
<li>协助后端团队完成业务接口开发与数据库脚本编写，配合测试人员排查接口异常</li>
<li>使用<strong>Spring Boot</strong>+<strong>MyBatis</strong>开发简单业务接口，编写SQL查询语句并优化简单查询逻辑，提升接口查询效率10%</li>
<li>配合测试反馈修改接口参数校验、异常处理逻辑，用<strong>Git</strong>进行代码提交与版本管理</li>
<li>独立完成3个基础业务接口开发，降低接口异常率15%，协助完成2个数据库表设计与脚本编写，保障业务数据正常存储与查询</li>
</ul>
</div>
</div>
<div class="section-divider"></div>
<!-- 项目经历 -->
<div class="section">
<h2 class="section-title">项目经历</h2>
<div class="content">
<p><strong>简单用户管理系统</strong> | <strong>后端开发</strong> | 202X.XX-202X.XX</p>
<ul>
<li>基于<strong>Spring Boot</strong>+<strong>Spring MVC</strong>+<strong>MyBatis</strong>搭建项目基础架构，设计<strong>MySQL</strong>数据库表并编写SQL语句实现数据存储</li>
<li>负责用户登录模块及注册、信息查询与修改等核心接口开发，解决用户密码加密问题，提升用户数据安全性</li>
<li>添加接口参数校验与简单权限判断，用<strong>Postman</strong>进行接口测试并修复bug</li>
<li>完成8个核心接口开发，实现用户全流程管理功能，将接口响应时间控制在500ms内，保障项目正常运行</li>
</ul>
<p style="margin-top:10px;"><strong>校园公告发布系统</strong> | <strong>后端开发</strong> | 202X.XX-202X.XX</p>
<ul>
<li>参与项目需求梳理，明确公告相关接口开发需求，负责公告发布、修改、删除及列表查询接口开发</li>
<li>使用<strong>MyBatis</strong>实现分页查询并优化查询逻辑，将分页查询效率提升20%</li>
<li>编写接口文档配合前端联调，处理接口异常并完善日志记录，保障联调顺畅</li>
<li>完成6个接口开发，实现公告全流程操作，顺利完成前后端联调，保障系统公告模块正常运行</li>
</ul>
</div>
</div>
</div>
<script>
function exportPDF() {
const element = document.getElementById('resume');
const opt = {
margin: 10,
filename: 'Java后端开发工程师-个人简历.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf().set(opt).from(element).save();
}
</script>
</body>
</html>
生成效果也还不错
导出为PDF试试
好像效果还行，但是肯定是比刚才好看多了，这里不满意的话可以一直让AI给你优化
第三步：修改配色
最后再给大家一个选择配色的网站
************************************
我一般都是选择喜欢的配色,然后发给豆包让他分析我的配色,最后把分析的结果再发给写简历的豆包来修改颜色。
例如，我在网站上看到这个配色很好看：
最终把提示词复制给写简历的AI看看生成效果：
可以看到自由度还是非常高的
总结
其实写一份好看又实用的简历，真的不用花太多时间——AI帮我们搞定内容，比自己用word写快多了；HTML帮我们搞定美化，自由度直接拉满
大家可以按照上面的步骤，先用AI写初稿，再用HTML美化，半小时就能搞定一份属于自己的个性化简历！
最后，祝所有🐮友，都能写出好看的简历，拿到心仪的实习和offer！💪
#简历上如何体现你的“AI”能力？#