Design PDFs with Claude, no code, just conversation

What if you could design professional PDFs just by describing what you want? No Figma, no HTML, no CSS. Just a conversation.

With Claude connected to PDF4.dev via MCP, that's exactly what happens. You describe the document, Claude writes the HTML/CSS, creates a template, and renders a preview, all in one conversation. Then you iterate: "make the header bigger", "add a logo placeholder", "switch to landscape".

This article walks through the complete workflow, from zero to production-ready PDF template.

Prerequisites

You need two things:

1. A PDF4.dev account with an API key (sign up free)
2. Claude Desktop (or Cursor, VS Code, Windsurf) with the PDF4.dev MCP server connected

If you haven't set up MCP yet, add this to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "pdf4dev": {
      "url": "https://pdf4.dev/api/mcp",
      "headers": {
        "Authorization": "Bearer p4_live_xxx"
      }
    }
  }
}

Walkthrough: Designing an invoice

Step 1: Describe what you want

Start with a natural language prompt. Be as specific or as vague as you like, Claude will ask clarifying questions if needed.

"Create a modern invoice template. Clean design, dark header with white text, company name and logo area at the top, bill-to section, line items table, subtotal/tax/total at the bottom. Use Inter font. Variables for: company_name, client_name, client_email, invoice_number, date, due_date, items (I'll handle the loop later, just show a few static rows for now), subtotal, tax, total."

Claude will:

1. Write full HTML with inline CSS
2. Call create_template to save it to your account
3. Call render_pdf to generate a preview

You get a PDF back in the same conversation. Open it, check the design.

Step 2: Iterate

Don't like something? Just say so.

"The header is too tall. Make it more compact, 60px padding instead of 100. Also, the line items table needs alternating row colors. And move the total to be right-aligned."

Claude calls get_template, modifies the HTML, calls update_template, then render_pdf to show you the result. Each iteration takes seconds.

More examples of iteration prompts:

• "Add a 'PAID' watermark diagonally across the page when status is paid"
• "The font is too small on the line items. Bump it to 14px."
• "Add a footer with page numbers and your company address"
• "Switch to A4 landscape format"
• "The colors feel too corporate. Make it warmer, use a navy blue instead of black."

Step 3: Add Handlebars variables

Once the design looks right, ask Claude to parameterize it:

"Now replace the static data with Handlebars variables. Company name should be , client name , etc. Keep the sample data as default values."

Claude updates the template with {{variables}}, sets up sample_data with defaults, and saves it. Your template is now ready for dynamic PDF generation.

Step 4: Test with real data

"Generate a PDF using the invoice template with this data: company_name: Acme Corp, client_name: Bob Smith, invoice_number: INV-2026-042, date: March 8 2026, due_date: April 8 2026, subtotal: $4,200, tax: $378, total: $4,578"

Claude calls render_pdf with your template and the data. You get a production-quality PDF.

More design examples

Certificate

"Design an elegant completion certificate. Centered layout, ornamental border (CSS only, no images), large recipient name in a serif font, course title, completion date, instructor signature line. Gold accent color (#B8860B). Variables: recipient_name, course_title, completion_date, instructor_name."

Receipt

"Create a minimal receipt. Single column, very compact. Store name at top, list of items with prices, horizontal rule, total, payment method, date/time at the bottom. Black and white only, no colors. Monospace font for the items list to look like a thermal printer receipt."

Report cover page

"Design a report cover page. Full-page dark background (#1a1a2e), large white title text centered vertically, subtitle below it, author and date at the bottom. Add a subtle geometric pattern using CSS (repeating linear gradients). Variables: title, subtitle, author, date, department."

Shipping label

"Create a shipping label. 4x6 inches format (custom size). Bold 'FROM' and 'TO' sections with address blocks. Barcode placeholder area. Large tracking number at the bottom. Dashed border around the whole thing for cut lines."

Tips for better results

Be specific about dimensions. "Make the logo area 120px wide" works better than "make the logo bigger."

Reference design styles. "Like a Stripe invoice" or "Apple-style minimal" gives Claude strong design direction.

Use CSS, not images. Claude can create complex designs with pure CSS, gradients, borders, shadows, patterns. This keeps templates lightweight and fast to render.

Ask for print-friendly CSS. Add @media print rules and page-break properties for multi-page documents.

Start simple, iterate. Don't try to describe the perfect template in one prompt. Start with the structure, then refine the details.

Save intermediate versions. If you like the current state, ask Claude to duplicate the template before making big changes: "Duplicate my invoice template first, then modify the copy."

The workflow advantage

Traditional PDF template design:

1. Open Figma/Sketch, design the layout (30 min)
2. Convert to HTML/CSS (1-2 hours)
3. Add Handlebars variables (30 min)
4. Upload to PDF4.dev
5. Test with sample data
6. Find issues, go back to step 2

With Claude + MCP:

1. Describe what you want (30 seconds)
2. See the PDF (10 seconds)
3. "Make the header blue" (10 seconds)
4. Done

What used to take an afternoon now takes 5 minutes. And you never leave your conversation window.

Beyond design: full workflow automation

Once your template is ready, you can use it in production through the REST API:

curl -X POST https://pdf4.dev/api/v1/render \
  -H "Authorization: Bearer p4_live_xxx" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "invoice",
    "data": {
      "company_name": "Acme Corp",
      "client_name": "Bob Smith",
      "total": "$4,578"
    }
  }' -o invoice.pdf

Or keep using Claude for one-off generations:

"Generate 12 monthly invoices for Acme Corp, January through December 2026, total $4,578 each, incrementing invoice numbers from INV-2026-001."

The AI agent handles the loop, calling render_pdf twelve times.

Get started

1. Create a free PDF4.dev account
2. Set up MCP in your preferred AI client
3. Say: "Design me a simple invoice template"

See the full AI Integration guide for detailed setup instructions for every client, all 7 MCP tools, and more example prompts.