Skip to main content
The Resume Builder includes an AI-powered template generator that creates custom resume layouts based on natural language descriptions. This feature uses Google’s Gemini AI to generate complete template configurations that match your vision.

​
How it works

The AI template generator:
  1. Takes a natural language description of your desired template
  2. Generates a complete TemplateConfig JSON with colors, fonts, layout, and section variants
  3. Saves the generated template to your browser’s localStorage
  4. Applies the new template to your resume immediately
AI-generated templates are stored separately from the three built-in templates (Classic, Modern, Minimal) and can be managed independently.

​
Accessing the template generator

The Template Generator is available in the template selector interface:
  1. Open the Resume Builder application
  2. Look for the Template Selector card near the top of the editor
  3. Click the “Generate with AI” button to open the generator

​
Creating a custom template

1

Describe your template

Enter a natural language description of the template you want. Be specific about:
  • Style: Modern, traditional, minimalist, creative, corporate
  • Colors: Primary accent colors, sidebar colors
  • Layout: Single-column, two-column with sidebar
  • Typography: Font preferences (serif, sans-serif, monospace)
  • Special features: Skills as tags, timeline for experience, grid for projects
Example prompts:
A creative template with purple accents, large name, and skills in a grid

A conservative corporate template with navy blue, serif fonts, and traditional layout

A minimal tech-focused template with monospace font and dark mode colors
2

Generate the template

Click the “Generate Template” button. The AI will:
  • Parse your description
  • Generate appropriate colors, fonts, and spacing
  • Choose a suitable layout type (single or two-column)
  • Assign section variants that match your style
Generation typically takes 2-5 seconds depending on API response time.
3

Review the generated template

Once generated, you’ll see:
  • Template name: Auto-generated based on your description
  • Description: A brief summary of the template’s characteristics
  • Preview: The template is temporarily applied to see how it looks
If you’re not satisfied, click “Regenerate” to try again with the same prompt.
4

Save and apply

Click “Save & Apply” to:
  • Save the template to localStorage under a unique ID
  • Add it to your custom templates collection
  • Apply it to your current resume
The template will now appear in your template selector alongside the built-in templates.

​
Technical details

​
API endpoint

The template generator calls a Cloudflare Pages Function: 
POST /api/generate-template

Request Body:
{
  "prompt": "Your template description"
}

Response:
{
  "id": "custom-modern-blue",
  "name": "Modern Blue",
  "description": "Contemporary two-column layout...",
  "theme": { /* theme config */ },
  "layout": { /* layout config */ },
  "structure": { /* section structure */ },
  "sectionVariants": { /* variant assignments */ }
}

​
Template configuration structure

Generated templates follow the TemplateConfig type: 
type TemplateConfig = {
  id: string;
  name: string;
  description: string;
  theme: {
    colors: {
      primary: string;
      secondary: string;
      background: string;
      text: string;
      textMuted: string;
      border: string;
      sidebarText?: string;
    };
    typography: {
      fontFamily: string;
      headingFamily?: string;
      baseSize: string;
      lineHeight: string;
    };
    spacing: {
      sectionGap: string;
      itemGap: string;
      pagePadding: string;
    };
  };
  layout: {
    type: 'single-column' | 'two-column';
    columns?: string;
    sidebarPosition?: 'left' | 'right';
  };
  structure: {
    sidebar?: SectionId[];
    main: SectionId[];
  };
  sectionVariants: Record<SectionId, SectionVariant>;
};
See Template Types for complete type definitions.

​
Available section variants

The AI can assign these variants to sections:
  • personal-info: default, centered, minimal
  • summary: default
  • experience: default, timeline, minimal, compact
  • education: default, minimal
  • skills: default, tags, bubbles, bullet-list, sidebar
  • projects: default, grid
  • customSections: default

​
Storage

Generated templates are stored in localStorage under the key custom-resume-templates: 
interface CustomTemplate extends TemplateConfig {
  createdAt: string; // ISO timestamp
}

​
Managing custom templates

​
Viewing custom templates

Custom templates appear in the template selector alongside built-in templates. They are marked with a custom indicator.

​
Deleting custom templates

To delete a custom template:
  1. Navigate to the template selector
  2. Find the custom template you want to remove
  3. Click the delete icon next to the template name
Deleting a custom template is permanent and cannot be undone. If you’re currently using the deleted template, the app will revert to the Classic template.

​
Best practices

Be specific

Include details about colors, fonts, layout preferences, and special styling for sections

Use examples

Reference well-known design styles (e.g., “like a tech startup resume” or “traditional academic CV”)

Iterate

If the first result isn’t perfect, regenerate with a more detailed prompt

Test print

Always preview the PDF export to ensure the template looks good on paper

​
Troubleshooting

This error occurs when the Cloudflare Pages Function doesn’t have access to the GEMINI_API_KEY environment variable. This typically happens in local development.Solution: Deploy the app to Cloudflare Pages with the API key configured, or set up local environment variables for development.
Sometimes the AI generates invalid color codes or spacing values.Solution: Regenerate the template with a more specific prompt, or manually edit the template JSON in localStorage (advanced users only).
The AI interprets prompts based on common design patterns but may not perfectly match your vision.Solution: Add more specific details to your prompt, especially around colors (hex codes), font names, and layout preferences.

​
Next steps

Template system overview

Learn how the template system works under the hood

Creating templates manually

Build custom templates by writing JSON configurations

useCustomTemplates hook

API reference for managing custom templates programmatically

TemplateGenerator component

Component API for the AI template generator UI

Build docs developers (and LLMs) love

Get started for freeTalk to us