SOSFactory

I built a complete 13-page interactive handbook in a single day.
(Link in the first comment).

Using a surprisingly simple stack:

• VS Code
• Live Server
• Claude Code (Haiku)
• Plain HTML/CSS
• Chrome Print-to-PDF

The workflow ended up being far more efficient than using traditional document tools.

Process:

✅ Create a clean local project in VS Code (open source)
✅ Use Live Server free extension for instant preview
✅ Connect Claude Code directly to the project folder
✅ Extract and structure website content into modular HTML pages
✅ Keep each page as its own lightweight file
✅ Use reusable CSS instead of heavy design tools
✅ Store images locally for speed and consistency
✅ Export through Chrome’s print engine
✅ Final result: both a printable interactive PDF and a web-ready HTML version from the same source

The biggest insight: HTML/CSS works extremely well as a “source of truth” for documentation.

You get:

* fast iteration
* reusable layouts
* proper version control
* web + PDF outputs
* very low operating cost

A few practical observations after building the handbook:

1. Browser chat tools are fine for small edits, but iterative visual work becomes expensive and inefficient quickly because the model keeps regenerating large blocks of code without direct filesystem awareness.

2. Claude Code is exceptionally good for this type of work because filesystem access enables surgical edits instead of full rewrites. Small visual changes become extremely cheap and fast.

3. Visual AI design tools are useful for exploration and mockups, but they still struggle with production-ready editorial systems:

* reusable architecture
* print-safe layouts
* modular components
* long-form pagination
* maintainable HTML/CSS

4. PrinceXML is still the gold standard for enterprise PDF publishing, especially for large-scale automated workflows. But for handcrafted handbooks and guides, Chrome’s print engine is often more than sufficient and dramatically cheaper.

5. Puppeteer is excellent for automation pipelines, but it doesn’t improve rendering quality since it still relies on Chromium underneath. For manually designed documents, Chrome alone is often enough.

The most interesting part is that this workflow combines:

* AI-assisted editing
* real project structure
* reusable web output
* professional PDF generation
* extremely low cost

without depending on Word, Canva, or proprietary publishing systems.

For documentation, onboarding guides, training manuals, internal playbooks, or branded PDFs, this setup is honestly hard to beat right now.

AI‑generated views help manufacturers understand the character from every angle.

These images aren’t final deliverables, but they make approvals faster and the costume build more accurate by showing proportions, volumes and details before production begins.

Another example of how AI lets us preview the final product long before it exists with zero effort.

There's a difference between slapping your logo on a bag and actually building a product around your brand.