This document provides a comprehensive recap of a training session focused on utilizing artificial intelligence tools in combination with the Press-Works web application to create professionally formatted PDF documents. The session covered fundamental concepts of modern web development, application architecture, AI interaction strategies, and practical PDF generation workflows applicable to business documentation needs.
The core objective was to demonstrate how leveraging established frameworks and libraries produces superior document quality compared to allowing AI systems to generate formatting from scratch. Participants learned to set up development environments, navigate project file structures, work with AI systems effectively, and customize document templates for specific business requirements.
A critical concept introduced during this session is the organizational principle that each folder in a development environment represents a discrete application. This means that the Press-Works folder contains all necessary components, configurations, dependencies, and code required to run the PDF generation application independently. This self-contained structure is fundamental to modern web development practices and enables portability and version control.
Press-Works is a specialized web application built on the Next.js framework, which itself is constructed on top of React. The application's primary purpose is to generate professionally formatted PDF documents using programmatic rendering rather than manual layout tools. The application employs the Puppeteer library, a headless browser automation tool, to render HTML and CSS into high-quality PDF output.
When AI systems are instructed to create PDFs without utilizing established libraries, they attempt to construct layouts programmatically from basic principles. This often results in inconsistent spacing, poor typography, formatting errors, and unprofessional appearance. The output may include irregular margins, misaligned elements, and spacing issues.
In contrast, when AI systems are directed to use established libraries such as Puppeteer, React components, or CSS frameworks, they leverage pre-built, tested design patterns and rendering engines. This produces consistent, professional output that adheres to established design principles and typographic standards.
Analogy: Consider the difference between asking an employee to hand-draw a poster using only pens versus providing them with professional stencils, templates, and pre-made design elements. The former requires extensive skill and time with variable results; the latter produces consistent, professional output efficiently.
Next.js is a React-based framework that provides server-side rendering, static site generation, and API routing capabilities. It follows a file-system-based routing convention where the folder structure directly maps to URL routes. This makes navigation and file organization intuitive once the pattern is understood.
The session began with the fundamental task of setting up the Press-Works application in the local development environment. This process demonstrates the typical workflow for working with downloaded or shared web applications.
The Press-Works application was provided as a compressed archive (ZIP file). The first step involved extracting this archive into the appropriate project directory. In this case, we created and used a folder called "pdf-room" as our working directory for PDF-related projects.
Within Visual Studio Code, we accessed the integrated terminal by right-clicking on the project folder and selecting "Open Integrated Terminal." This provides command-line access within the context of the project directory, ensuring all subsequent commands execute in the correct location.
The most critical and time-consuming step is installing dependencies. When a Node.js application is shared, the actual library code (dependencies) is typically not included due to size constraints. Instead, the package.json file contains a list of required dependencies. The npm install command reads this file and downloads all necessary libraries into a folder called node_modules.
This process can take considerable time depending on the number and size of dependencies. The node_modules folder is typically the largest component of any Node.js project, often containing hundreds of megabytes or even gigabytes of code. We observed during the session that this folder represents the bulk of the application's disk usage.
Once dependencies are installed, the application can be started using the development server command:
This command starts a local web server, typically on port 3000, making the application accessible at localhost:3000 in a web browser. The development server includes hot-reloading capabilities, meaning changes to source files are automatically reflected in the browser without requiring manual refresh.
After executing the development server command, we verified successful installation by navigating to localhost:3000 in a web browser. The Press-Works application interface appeared, displaying example PDF templates and generation options. This confirmed that all dependencies were correctly installed and the application was functioning as expected.
Understanding where files are located and how they relate to application functionality is fundamental to effective development work. The Press-Works application follows Next.js conventions for file organization.
The primary application code resides in the "app" folder. This folder contains:
In Next.js, the file system directly maps to URL routes. This was demonstrated with several examples:
| File Path | URL Route | Description |
|---|---|---|
| app/page.tsx | localhost:3000/ | Homepage showing available templates |
| app/engagement/page.tsx | localhost:3000/engagement | Engagement letter template page |
| app/parent-meeting/page.tsx | localhost:3000/parent-meeting | Parent meeting document template |
| app/api/pdf/route.ts | localhost:3000/api/pdf | API endpoint for PDF generation |
During the session, we practiced navigating between files and URLs. We modified the homepage (page.tsx) by removing text, saved the file, and immediately observed the changes reflected in the browser. This demonstrated the hot-reload functionality and confirmed our understanding of the file-to-URL mapping.
Files with the .tsx extension are TypeScript React components. These files contain both the structure (HTML-like JSX syntax) and logic (TypeScript code) for rendering pages and components. When we edit these files, we are directly modifying what appears in the browser.
Markdown files provide a simpler way to author content. These files use plain text with simple formatting markers and can be rendered into HTML or PDF. However, markdown files are more limited in their ability to share data between different parts of the application compared to TSX files.
The API folder contains server-side code that handles requests, processes data, and generates PDFs. These files do not render in the browser directly but instead provide endpoints that other parts of the application can call to perform server-side operations.
The session utilized Claude AI as the primary tool, though comparisons were made with ChatGPT. When working with AI systems, it is important to understand their current capabilities and select the appropriate tool for the task.
At the time of this session, Claude was preferred for code generation and document creation tasks due to its strong performance with structured output and technical content. However, different AI platforms have varying strengths, and the landscape continues to evolve rapidly.
Rather than asking AI to create documents from abstract descriptions, we provided specific examples of existing documents. For instance, when creating an engagement letter for accounting clients, we showed Claude the existing parent-meeting template and asked it to create something similar but adapted for the new context.
The instruction pattern we used:
When working with AI on technical projects, explicitly stating technical constraints and requirements produces better results. We specified:
Professional results rarely emerge from a single prompt. The workflow demonstrated in this session involved multiple iterations:
To communicate effectively with AI about document formatting, it helps to understand standard terminology used in professional document design. During the session, we referenced concepts such as:
We discussed how reading style guides, such as those from academic institutions like Northwestern University, helps develop the vocabulary needed to request specific formatting from AI systems. Understanding these concepts allows for more precise communication and better results.
The primary document creation task involved generating an engagement letter for accounting clients. The instruction given to Claude was approximately:
Claude then generated a complete TSX file with appropriate structure, styling, and content. This file was placed in the appropriate location within the app directory structure.
Adding company branding required a different approach. We instructed Claude to:
This demonstrated that AI can handle not just text generation but also layout integration of graphical elements when properly instructed.
Before creating new documents, we thoroughly examined existing templates in the Press-Works application. This involved:
This analysis phase is critical because it informs how we structure our requests to AI systems. By understanding existing patterns, we can ask AI to replicate those patterns in new contexts.
We began by clearly defining what the new document needed to contain:
With requirements defined and example templates identified, we provided comprehensive instructions to Claude. The AI generated a complete document template including:
The generated code was placed in the appropriate directory within the app structure. We then:
After initial generation, we made several refinements:
Each change was made by instructing Claude to modify specific aspects of the code. The AI would then provide updated code, which we would save, and immediately see reflected in the browser due to hot-reload functionality.
During the session, we discussed methods for obtaining company logos:
We demonstrated downloading a logo file from a website and preparing it for use in the document.
Logo files come in various formats. We discussed the merits of each:
For best results in PDF documents, PNG with transparency or SVG are preferred.
We briefly discussed tools for removing backgrounds from logos when only JPG versions are available. Services like remove.bg can convert logos with backgrounds into transparent PNG files suitable for professional documents.
During the session, we encountered storage space issues on the development machine. This led to a discussion about managing disk space in development environments.
The node_modules folder is notoriously large. We examined the storage impact:
We demonstrated using Claude AI to analyze disk usage on the machine. The process involved:
This demonstrated that AI tools can assist not just with code generation but also with system administration and troubleshooting tasks.
We discussed Visual Studio Code extensions that enhance the development experience:
For viewing markdown files while editing, the Markdown Preview extension provides live rendering of MD files within the editor.
This extension color-codes matching brackets and parentheses, making code structure easier to understand visually.
While not installed during this session, we mentioned other useful extensions for web development work with React and TypeScript projects.
The Press-Works application provides multiple ways to export documents:
We practiced each method and discussed when each approach is most appropriate.
On macOS, we encountered an issue where PDFs were opening with the default Preview application. We discussed alternative PDF viewers and how to configure default applications for file types.
The techniques learned in this session have broad applicability to business documentation needs:
Each of these document types can be templated using the approaches demonstrated, allowing for quick generation of professional, branded materials.
The session highlighted significant efficiency improvements over traditional document creation methods:
Traditional Approach: Creating a professionally formatted engagement letter might take several hours or even days, involving layout work in word processors, manual formatting, review cycles, and quality control.
AI-Assisted Approach: With properly configured tools and clear instructions, the same document can be generated in minutes, with formatting handled automatically by established libraries and content created by AI based on requirements and examples.
Beyond speed, the approach demonstrated provides additional benefits:
The session introduced several valuable professional skills:
Do not attempt to recreate solutions from scratch when established, tested tools exist. Using libraries like Puppeteer for PDF generation produces professional results with minimal effort compared to building custom rendering systems.
Before making changes to a system, invest time in understanding its organization and architecture. Knowing where files are located and how they interconnect makes all subsequent work more efficient and reduces errors.
Whether instructing AI systems, colleagues, or contractors, specificity in requirements leads to better outcomes. Vague requests produce vague results. Clear, detailed specifications with examples produce professional outputs.
Professional results emerge through iteration. Generate initial output quickly, then refine through multiple cycles of review and adjustment. This approach is more efficient than attempting perfection in a single pass.
The session established several repeatable workflows that can be applied to future projects:
| Command | Purpose | Example |
|---|---|---|
| cd | Change directory | cd press-works |
| mkdir | Create new directory | mkdir pdf-room |
| unzip | Extract compressed archive | unzip press-works.zip |
| npm install | Install all dependencies | npm install |
| npm run dev | Start development server | npm run dev |
| ls | List directory contents | ls -la |
| File/Folder | Purpose | Notes |
|---|---|---|
| app/ | Main application code | Contains all pages and components |
| app/page.tsx | Homepage | Root route of application |
| app/api/ | API endpoints | Server-side code |
| node_modules/ | Dependencies | Generated by npm install, very large |
| package.json | Project configuration | Lists dependencies and scripts |
| public/ | Static assets | Images, logos, fonts |
To reinforce and expand upon skills learned in this session:
For those interested in deeper technical understanding:
Potential extensions of the techniques learned:
The following interactive assessment tests your understanding of the key concepts covered in this training session. You will have 60 seconds to complete 10 questions. After submission, you will receive feedback on incorrect answers and be given the opportunity to retry those questions until mastery is achieved.
This training session successfully demonstrated how modern AI tools, combined with established web development frameworks and libraries, enable rapid creation of professional-quality business documents. The key insight is that leveraging existing, tested tools produces superior results compared to attempting to build solutions from first principles.
The participant gained hands-on experience with:
These skills are immediately applicable to business documentation needs and provide a foundation for further learning in web development, AI-assisted workflows, and document automation.
The methodologies demonstrated are not limited to PDF generation but represent broader patterns applicable to many technical tasks: understand existing solutions, leverage proven tools, communicate requirements clearly, and iterate toward professional results.