Resume HTML Generator

Create pixel-perfect HTML resumes with advanced layouts, photo support, and PDF export.

Features

• 📄 HTML Output: Beautiful, editable HTML resumes
• 📸 Photo Support: Automatic photo embedding
• 🎨 Advanced Layouts: CSS Grid, Flexbox, custom styling
• 📑 PDF Export: High-quality PDF output via Playwright
• 🎯 Pixel-Perfect: Professional, print-ready design
• 🌍 Multi-Language: Chinese and English presets
• 🖥️ Cross-Platform: Windows, macOS, Linux
• 🎨 10 Presets: 5 Chinese + 5 English styles

Presets Available

Chinese (中文)

English

Trigger Conditions

• "Create HTML resume" / "创建HTML简历"
• "Generate PDF resume" / "生成PDF简历"
• "Make a pixel-perfect resume" / "制作精美简历"
• "resume-html"

How It Works

User provides info
    ↓
1. Generate HTML with CSS
    ↓
2. Embed photo (optional)
    ↓
3. Render in browser
    ↓
4. Export to PDF
    ↓
Output: resume.html + resume.pdf

HTML Template Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
            font-size: 11pt;
            line-height: 1.6;
            color: #333;
            background: white;
        }
        
        .resume {
            width: 210mm;
            min-height: 297mm;
            margin: 0 auto;
            padding: 15mm 20mm;
            background: white;
        }
        
        .header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 3px solid #1a365d;
        }
        
        .name {
            font-size: 28pt;
            font-weight: bold;
            color: #1a365d;
            margin-bottom: 5px;
        }
        
        .position {
            font-size: 14pt;
            color: #666;
            font-style: italic;
        }
        
        .contact {
            margin-top: 10px;
            font-size: 10pt;
            color: #666;
        }
        
        .photo {
            float: right;
            width: 100px;
            height: 120px;
            margin-left: 20px;
            border: 2px solid #1a365d;
            object-fit: cover;
        }
        
        .section {
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 14pt;
            font-weight: bold;
            color: #1a365d;
            border-left: 4px solid #3182ce;
            padding-left: 10px;
            margin-bottom: 10px;
        }
        
        .entry {
            margin-bottom: 15px;
        }
        
        .entry-header {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .company { color: #1a365d; }
        .duration { color: #666; font-weight: normal; }
        
        .responsibilities {
            padding-left: 20px;
        }
        
        .responsibilities li {
            margin-bottom: 3px;
        }
        
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .skill-category {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
        }
        
        .skill-category-title {
            font-weight: bold;
            color: #1a365d;
            margin-bottom: 5px;
        }
        
        @media print {
            .resume {
                margin: 0;
                padding: 15mm 20mm;
            }
        }
    </style>
</head>
<body>
    <div class="resume">
        <!-- Photo (optional) -->
        <!-- <img class="photo" src="photo.jpg" alt="Photo"> -->
        
        <div class="header">
            <div class="name">{{name}}</div>
            <div class="position">{{position}}</div>
            <div class="contact">
                📞 {{phone}} | 📧 {{email}} | 📍 {{location}}
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">求职意向</div>
            <div>职位：{{target_position}} | 期望薪资：{{salary}}</div>
        </div>
        
        <div class="section">
            <div class="section-title">教育背景</div>
            <div class="entry">
                <div class="entry-header">
                    <span class="company">{{school}}</span>
                    <span class="duration">{{education_year}}</span>
                </div>
                <div>{{major}} - {{degree}}</div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-title">工作经历</div>
            {{#each experience}}
            <div class="entry">
                <div class="entry-header">
                    <span class="company">{{company}}</span>
                    <span class="duration">{{duration}}</span>
                </div>
                <div>{{position}}</div>
                <ul class="responsibilities">
                    {{#each responsibilities}}
                    <li>{{this}}</li>
                    {{/each}}
                </ul>
            </div>
            {{/each}}
        </div>
        
        <div class="section">
            <div class="section-title">专业技能</div>
            <div class="skills-grid">
                {{#each skills}}
                <div class="skill-category">
                    <div class="skill-category-title">{{category}}</div>
                    <div>{{items}}</div>
                </div>
                {{/each}}
            </div>
        </div>
    </div>
</body>
</html>

PDF Export

from playwright.sync_api import sync_playwright

def export_to_pdf(html_path, pdf_path):
    """Export HTML to PDF using Playwright"""
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()
        page.goto(f'file://{html_path}')
        page.pdf(path=pdf_path, format='A4', margin={
            'top': '0mm',
            'bottom': '0mm',
            'left': '0mm',
            'right': '0mm'
        })
        browser.close()
    return pdf_path

Usage Examples

User: "Create a beautiful HTML resume"
Agent: Generate HTML with CSS styling

User: "生成PDF简历，包含照片"
Agent: Generate HTML, embed photo, export PDF

User: "做一个科技风格的简历"
Agent: Use Modern style template

Advantages Over Word-based Resume

Notes

• HTML provides pixel-perfect control
• PDF export using Playwright
• Photo embedding with base64
• Cross-platform compatible
• Professional, print-ready output