SitesByMac Toolkit · Case Study
AI-assisted, print-optimized HTML document generation.
A zero-dependency CLI tool that transforms AI-generated copy into structured JSON and outputs self-contained, print-ready HTML files. No build step. No server. No dependencies. Same input always produces the same output.
A real resume generated by the Wizard — letterhead, structured sections, print button.
The Problem
Word and Google Docs produce inconsistent output across machines, printers, and PDF engines. Margin drift, font substitution, and layout collapse are routine. A document that looks right on your screen often prints wrong.
The Gap
LLMs can produce polished copy in seconds, but getting that copy into a branded, print-ready document still requires manual formatting work in tools that were never designed for programmatic output.
The Solution
The Wizard separates content from layout. You provide structured data; the CSS engine handles spacing, hierarchy, and page-break rules. Same JSON input always produces the same output — predictable, auditable, repeatable.
The Constraint
No build step, no server, no runtime. The entire toolchain runs in Node and outputs a single HTML file. Drop it anywhere — it works offline and opens in any browser. One Print button converts it to PDF.
Linear pipeline. Each stage has a single responsibility.
01
Start with raw content from ChatGPT, Claude, or your own prompts. No special formatting required.
02
A structured schema captures headings, sections, contact info, dates, and document metadata.
03
Spacing, typographic hierarchy, page-count rules, and print overrides are applied algorithmically.
04
One file. Embedded styles. One-click Print. Opens anywhere, works offline, prints to PDF.
Raw AI output transformed into a structured, print-ready document.
Travis McCoy Software Engineer Summary: I am a full-stack developer with experience in Django, React, etc. I worked at TDCJ for 7 years blah blah. Skills: Python, JS, TypeScript, React... Experience: SitesByMac - Founder - June 2025 - built stuff - did things Education: General Assembly 2025 Wright State 2007-2009
<header class="letterhead">
<h1>Travis "Mac" McCoy</h1>
<p class="tagline">
Full-Stack Software Engineer
</p>
<div class="contact-row">
<span>Dayton, OH</span>
<span>mac@sitesbymac.dev</span>
</div>
</header>
<section class="content-block">
<h2>Summary</h2>
<p class="summary-text"><!-- mapped --></p>
</section>
<section class="content-block">
<h2>Experience</h2>
<div class="job"><!-- structured --></div>
</section>
<button onclick="window.print()">
Print / Save as PDF
</button>Content is fully data-driven. Structure is enforced by schema, not convention.
{
"template": "resume",
"meta": {
"title": "Travis McCoy — Resume",
"pages": 1,
"theme": "professional"
},
"header": {
"name": "Travis "Mac" McCoy",
"tagline": "Full-Stack Software Engineer",
"contact": {
"location": "Dayton, OH",
"email": "mac@sitesbymac.dev",
"url": "sitesbymac.dev"
}
},
"sections": [
{
"heading": "Summary",
"type": "paragraph",
"content": "Full-Stack Engineer blending security..."
},
{
"heading": "Experience",
"type": "jobs",
"items": [
{
"title": "Founder & Developer",
"org": "SitesByMac",
"dates": "June 2025–Present",
"bullets": [ "..." ]
}
]
},
{
"heading": "Education",
"type": "edu",
"items": [ { "name": "General Assembly", "year": "2025" } ]
}
]
}The rules that make print output deterministic.
/* Page setup — letter size, zero browser margins */
@page { size: letter; margin: 0; }
/* Screen: constrained to print width for WYSIWYG */
body { max-width: 8.5in; margin: 0 auto; padding: 0.45in 0.5in; }
/* Print overrides — strip padding, shrink type */
@media print {
body { padding: 0.35in 0.42in; font-size: 7.8pt; }
.no-print { display: none !important; }
}
/* Content blocks never break mid-section */
.content-block { page-break-inside: avoid; }
/* Force section starts onto a new page when needed */
.page-break-before { page-break-before: always; }
/* Typographic scale — enforced, not inherited */
h1 { font-size: 18pt; line-height: 1.15; }
h2 { font-size: 11pt; line-height: 1.2; margin-top: 10pt; }
p, li { font-size: 9pt; line-height: 1.45; }
/* Negative-space minimization for dense layouts */
.job { margin-bottom: 7pt; }
.job-bullets li { margin-bottom: 1.5pt; }Page-break control
avoid, always — per section
Type scale
Fixed pt values, not em/rem
Print overrides
Separate @media print block
Density tuning
Margin/padding in pt, not px
One command. One file out.
# Generate a resume from structured JSON $ node wizard generate resume.json --template=resume --pages=1 # Generate a cover letter with custom letterhead $ node wizard generate letter.json --template=cover-letter # Generate a multi-section project proposal $ node wizard generate proposal.json --template=report --pages=2 # All commands output a self-contained .html file → output/resume_styled.html → output/cover_letter.html → output/proposal.html
Same pipeline, different schema shapes. Each template is a JSON spec + CSS block.
1–2 pages, modular sections, ATS-safe
Letterhead + body + signature block
Scope, deliverables, timeline
Multi-section with ToC and page numbers
Problem → solution → pricing structure
Print-ready field layout with labels
Table layout · inline CSS · Gmail + Outlook safe
Long-form copy · decorative serif · mobile-responsive
Where the tool is headed — no promises, just direction.
Full source, templates, JSON schema, and CSS engine on GitHub. Clone it, adapt it, or use it as a reference for your own document pipeline.
View on GitHub →Part of the SitesByMac.dev toolkit. Built for developers, writers, and anyone who needs clean, consistent documents fast.