How we extracted standalone HTML files from 7 / 13 AI prototyping tools | ProductNow<br>All posts

How we extracted standalone HTML files from 7 / 13 AI prototyping tools<br>byKadhir Mani<br>(12.4 minutes)

BackgroundPrototypes are one of our favorite ways to work. They're surprisingly fun to build, and they're far more information-dense than a doc or a whiteboard session. A new way of communicating, honestly.And right now, there are so many tools to build them with: Claude, ChatGPT, Lovable, Bolt, V0, Replit, and a dozen others can all spin up a working UI in seconds.We've tried many of them, but we kept running into the same issues:Every tool locks your prototype inside its own environmentSharing means sending a link that sometimes requires an account, or a live URL that may disappearVersion control is a pain, especially when we're trying to get feedbackFor example, I once wanted to try a few different button-layout configurations, light reorganizing, nothing fancy. Should I clone the prototype so I can make multiple versions side by side? How do I send them to the team for feedback? Does each one need its own URL?I ended up using one prototype, taking screenshots, and pasting them into Slack. This setup sucks and defeats the point of doing this in the first place.Honestly, we wanted something simpler: a self-contained HTML file. No dependencies, no login, no cloud. Something we could save and open offline in any browser and expect to work forever. That's a lot easier to work with, very portable.Ideally, we can create a prototype in any tool, point our platform at it, and get a saved snapshot. That way, we get the nice UX of these prototyping tools while still getting an easy-to-share, easy-to-manage artifact.Long story short, we got it to work! Mostly, but holy moly, it was a real pain to get here.The spread alone tells the story: ChatGPT handed us a clean, tiny self-contained 3.2 KB file out of the box, while Canva generated a bloated 3.5 MB bundle that still couldn't run offline. And that's just the file size...we learned a lot more about how each platform works along the way.This post walks through what we had to do and what we learned about each platform. As a fun bonus, you'll get to see how various prototyping applications interpreted the same request 😄.<br>SetupWe used a single, consistent prompt across all tools:"Let's build a fun little todo application. I want it to be galaxy themed, easy to understand."Why this prompt?TODO appUniversal reference point, lots of examples out thereFun + Galaxy themedRoom for interpretation, visual flair, creative renderingEasy to understandShould keep the complexity low, making self-containment easierWhat we're evaluating in the output:Can the result be extracted as a single, self-contained .html file that opens in any browser with no network required?How big is our resolved HTML file?Note: we'll refrain from outright ranking the platforms against each other since they all have their own strengths and weaknesses.After testing thirteen prototyping platforms, here's the full picture we saw + a visualization on file size (y-axis in kb):ChatGPTClaudeGemini CanvasBoltLovableReplitFigma MakeV0HostingerAnythingCanva CodeUX PilotBase44Green = self-contained HTML achieved, Amber = requires HTTP server, Red = not achievableSide note, we've made this functionality free on the platform. Just start a blank doc, add a prototype node, and select "snapshot" in the upload dialog. You can download the HTML after it's done processing.<br>ClaudeRight off the bat, we ended up with two weird problems:Sometimes Claude gave us a TSX / JSX file, other times it gave us an HTML fileWe never figured out a reliable way to understand when Claude would generate one over the other The HTML files did not render identically to the Claude UIWe liked that it gave us a nice, simple file, but the file wasn't self-contained. So we had to do two things:TSX / JSX, throw that into an isolated bundler on our server, which compiled it into an HTML fileTook a bit of iterating, but we ended up using esbuild with some base configurations for thisThe HTML was weird, turns out it needs a bunch of CSS variables to render correctlyWhich fortunately, Claude was kind enough to generate that file for us - attaching it here in case it helps anyone elseThis goes into the final HTML file in a style tag, as requiredAnd with those two problems solved, presto!HTML file achieved ✅️, size = 205 kb<br>ChatGPTSuper straightforward, downloaded as an HTML file, and came out fully resolved out of the box. No changes required. No weird bundling, actually self-encapsulated ⭐️:HTML file achieved ✅️, size = 3.2 kbSo tiny! So exciting!<br>Gemini canvasGave us a TSX file, which okay no problem, we did this for Claude already, should work out of the box.Except in one of our runs, it also included the lucide icon library, and it required tailwind to render correctly. Which we'll admit made the output TSX file super token efficient, but did complicate our...