A Web Page to a One-Page PDF in Seconds — I Open-Sourced the Skill

Let me share a genuinely useful skill. Having AI generate all kinds of beautiful web pages as our reporting deliverables is very popular right now. But there’s a problem I run into in my own work: when you send that page to a client or a partner over a chat app, sometimes they can’t open it — or they open it and what they see is a mess, nothing like the page we generated.

Why a web page falls apart when you send it

Why does this happen? On phones, our chat apps can’t render web pages directly; they need you to hand the link off to a browser. That’s still a bit of a hassle on a phone, and some people simply won’t bother.

So I started thinking about how to solve this. My first instinct: just print the page to a PDF file — that’s what we’ve always done. But that runs into quite a few problems of its own. A PDF renders on A4 paper by default, so it chops our beautiful long page into disconnected slices; nothing flows anymore. And web pages are full of motion and translucency effects whose colors come out wrong in print.

How this skill works

So I built this skill, which turns our web pages into pixel-tight one-page PDFs. Here’s how it does it:

• Render the page once first, measuring its actual width and height;
• Build a container at that exact height and generate the PDF pixel-tight to it;
• At the same time, trim the excess white margin off the page, producing a completely clean one-page PDF;
• Any frosted-glass or translucency effects in the page get swapped for real colors, so nothing renders wrong.

The resulting PDF auto-fits the width when you open it on a phone or a tablet, and it looks great.

Open source, one sentence to use it

I’ve already open-sourced this skill, so you can download it directly. Once you have it, just tell Claude Code: “Here’s the repo URL for a skill, go take a look at how to use it” — it’ll install the relevant dependencies, load the skill into your project folder, and from then on it’s dead simple to use.

Take the intro page shown in this episode — I actually generated it in Claude Code with a single sentence: “We have a skill that turns web pages into one-page PDFs. Generate a PPVI light-style web page that explains it to people in plain language, and once you’re done, turn that page into a one-page PDF.” And it produced the PDF, ready to share with anyone. A genuinely handy, genuinely useful skill.

I’ve got two episodes prepared today, and this first one is on the shorter side. Go to my profile for the second video, which covers the Fable model Claude shipped today and how to wring it completely dry, for everything it’s got, during its limited free window. See you in the next one.

Source: EP0035_audio.mp3 · ASR model gemini-2.5-pro (chunked parallel) · full text of the original recording

[00:00] Let me share a particularly useful skill with you. So lately it’s been really popular to use AI to generate all kinds of beautiful web pages as the deliverable for our reports. But there’s a problem I run into at work: when I send that web page to a client or a partner over a chat app, sometimes they can’t open it, or they open it and what they see is a mess, nothing like the page we generated. Why is that? Well, on a phone, our chat apps have no way

[00:25] to render a web page directly. It needs the user to call up a browser to get that done. And that operation is honestly a bit of a hassle on a phone, and some people just won’t bother. So I got to thinking about how to solve this problem. At first, my instinct was to print our web page to a PDF file, right? That’s what everyone used to do. But you actually run into quite a few problems. For instance, a PDF file renders on A4 paper by default,

[00:51] so it chops our beautiful long web page into segment after segment of content instead of one continuous piece. And on top of that, our web pages have a lot of motion effects and some transparency effects, and their color rendering actually comes out wrong. So I made this skill, which can turn our web page into a one-page PDF with no seams at all. How does it do it? It renders the web page first,

[01:16] measures the page’s actual width and height, and then uses that exact height to make a container, so the PDF comes out perfectly seamless. At the same time it trims off the excess white margin around the page, producing one complete, single-page PDF. Open it on a phone or on a Pad and it adapts to the width — it presents really nicely. And at the same time it can also take some of the blank areas on our page,

[01:42] or the special frosted-glass or semi-transparent rendering effects, and replace them with the real colors, so it doesn’t break the display. And I’ve already put this skill on my Git and open-sourced it, so you can go download it directly. Once you’ve downloaded it, just tell Claude Code: here’s the repo address for this skill, go take a look at how this skill is used. And at that point Claude Code will go install

[02:07] the dependencies for you, and once it’s loaded the skill into your project folder, it’s dead simple to use. For instance, this page here — I generated it in Claude Code with a single sentence. I said, look, we have a skill that turns a web page into a PDF, a one-page PDF. Please generate a PPVI light-style web page that introduces this skill to people in plain, easy language. And once you’re done generating,

[02:32] turn that page into a one-page PDF. And at that point it produces the PDF, and we can share it with other people. A really handy, really useful skill. Now, today I’ve actually got two episodes ready. Today’s first one is fairly short, so you can go to my profile and watch the second video, which is about the Fable model Claude shipped today, and how we should squeeze it as dry and as thoroughly as we can during its limited-time free window.

[02:59] OK? See you next episode, bye.