A free HTML website generator with a 502 line blueprint file shipped into every sandbox
Most tools in this category give you a template and a form. mk0r ships a 502 line website-builder skill into the sandbox that writes your site. No signup. No card. Claude Haiku as the free model. Every section, color variable, and class string the agent writes comes from a file you can open and read.
Free in this category usually means friction
Look at the pages that currently rank for this topic. Most resolve to one of three shapes. The first is a form to snippet converter: you click through dropdowns for layout, colors, copy, and get a lump of HTML. The second is a drag and drop canvas attached to a hosted builder with a free tier that walls off the things a real site needs: custom domains, watermark removal, export. The third is a static template gallery where free means you can copy the markup if you credit the author.
In all three cases, free is a marketing label attached to a restricted tier. You sign up, you hit the wall, you pay. The output is what the template author decided five years ago, and any structural choice the tool made is locked behind a proprietary engine you cannot inspect.
mk0r is free in a different way. The path from a cold visit to a working HTML website has no signup form. The free model writes the site. The structural choices come from a plain markdown skill file in a public TypeScript module that you can read, fork, and argue with. Scroll down for the anchor fact.
The anchor fact: 502 lines of blueprint, free to audit
Open src/core/vm-claude-md.ts in the appmaker repo and go to line 1527. There is a TypeScript constant called skillWebsiteBuilder. The backticks that open the template literal are on line 1527, the backticks that close it are on line 2028. Subtract one, and the body is 502 lines of markdown. That markdown is the blueprint the agent reads before it writes your HTML.
The first major section starts at line 1542 with Theming with CSS Variables (Tailwind v4). Lines 1546 to 1555 define a concrete @theme block with six CSS variables. The pattern is written as a reference, not a suggestion: every component blueprint lower in the file uses the same semantic names.
Those six variables appear everywhere in the skill. When the agent writes Hero, it uses text-primary and bg-cta. When it writes Testimonials, it uses bg-primary and text-accent. You change the color palette of the whole site by editing the two places in the @theme block and letting Tailwind v4 regenerate.
What the six homepage section blueprints look like
Line 1713 of src/core/vm-claude-md.ts opens the Homepage Section Blueprints heading. Under it, six numbered sections in the order the agent is expected to stack them. This is the full Hero blueprint from line 1717, copied verbatim out of the skill, so you can see that a blueprint means a real tsx snippet with class strings, not a sentence.
Read the classes. text-primary for the tagline, bg-cta for the primary button, border-2 border-primary for the secondary button. These are the variables from the @theme block two sections above. Your Hero always binds to your palette, because the blueprint was written to.
Everything the website-builder skill actually contains
Nine distinct blueprints plus three reference tables, all inside those 502 lines. Every title below is a line number you can grep for.
Line 1546: Tailwind v4 theme
Six CSS variables under @theme set the entire palette: primary, primary-dark, cta, cta-dark, accent, accent-light. Every section class in the skill references these semantic names so one edit retones the site.
Line 1561: Font pairing table
Four named pairings for four business shapes: Professional (Inter + Oswald), Creative (Lato + Playfair), Tech/SaaS (DM Sans + Space Grotesk), Legal/finance (Source Sans 3 + Merriweather). Agent picks against your brief.
Line 1596: Header component
Sticky nav with logo, CSS-only dropdown menus, a hamburger for mobile, and an uppercase tracking CTA pill. React state only where HTML cannot carry the behavior.
Line 1664: Footer component
Four column grid on a primary-dark background: brand, company links, resources, CTA and contact. Inherits text-accent for column headings so it matches the palette.
Line 1713: Six homepage section blueprints
Hero, Stats Bar, Benefits Card Grid, Process, Testimonials on a dark background with glass cards, Final CTA. Each is a full tsx snippet with exact Tailwind classes, not a description.
Line 1844: FAQ accordion
Two implementations side by side: an HTML-only version using native <details> and a React version with useState for animation control. Agent picks based on whether the rest of the page is already client.
Line 1907: Case study card
A 2/5 plus 3/5 split with industry badge, quote with border-l-4, and bulleted results. For pages where testimonials are not enough and you need a full narrative block.
Line 1945: Typography and color quick reference
Two tables. Typography maps page h1, section h2, card h3, body, label, stat number, CTA button to exact class strings. Color maps each context to light-section and dark-section classes.
Line 1989: JSON-LD structured data
Three snippets: Organization for the root layout, BreadcrumbList for every page, FAQPage for pages with FAQ sections. The agent drops these as <script type="application/ld+json"> tags.
How the skill actually reaches the sandbox
The shipment path is one line in one build script. scripts/prepare-e2b-context.ts imports skillWebsiteBuilder from src/core/vm-claude-md and writes it to docker/e2b/files/root/.claude/skills/website-builder/SKILL.md. The E2B template build copies that directory into the image at the same path. Every new sandbox starts with the file on disk.
The agent that writes your HTML does not fetch the skill over the network. It does not lazy-load it. It is in the sandbox image when the VM boots. When Claude Code starts, it scans /root/.claude/skills at session start, reads the description line of every skill, and activates the right one based on your prompt.
What reaches the agent before it writes a single class
What the free tier actually includes
Free here is not a restricted tier. It is the default path. Here is what every anonymous visitor gets without signing in.
Where the free model is set in code
Haiku as the free default is not a pricing page claim, it is a constant in a route handler. src/app/api/chat/model/route.ts line 5 sets it. Line 17 enforces it: if you try to switch to another model and you are not a logged-in subscriber, the route returns 403. You do not need to know or care, because the free path uses Haiku by default. The point is that the floor is enforceable from a single line.
One full session, from cold tab to live URL
Here is what the terminal timeline looks like for one visit. Anonymous sign-in, sandbox claim, skill load, file writes, preview URL. No account, no form, no wait on a cold boot.
Numbers you can grep for in the repo
Each of these resolves to a specific part of src/core/vm-claude-md.ts. Clone the repo, open the file, count the lines.
Free HTML generator in this category vs. mk0r
| Feature | Typical free HTML generator | mk0r |
|---|---|---|
| Signup required before generating | Yes: email at minimum, often card on file for anything useful | No: anonymous Firebase session created on page load (auth-provider.tsx line 68) |
| What you actually get as output | A templated HTML snippet or a widget hosted on their domain | A running Vite dev server with a preview URL at <vmId>.mk0r.com serving real HTML |
| Source of structural choices | A template author's frozen taste, baked into the tool | A 502 line skill file at src/core/vm-claude-md.ts line 1527, readable in the repo |
| Number of blueprinted homepage sections | Depends on the template, usually a single landing layout | Six numbered sections plus FAQ, Inner Page Hero, and Case Study Card |
| Color system setup | Theme picker from a dropdown | A Tailwind v4 @theme block written to app/src/index.css with six CSS variables |
| Cost of switching brand color | Regenerate the whole page from a new template | Change two lines in the @theme block, Vite HMR updates every section |
| Free model used for generation | n/a, template engines do not use a model | Claude Haiku, set by FREE_MODEL = "haiku" at api/chat/model/route.ts line 5 |
| Where to audit the floor structure | Hidden inside a proprietary template engine | Plain TypeScript file, line 1527 to line 2028 of src/core/vm-claude-md.ts |
Walk-through of one prompt, in the order it happens
Six steps from cold tab to a preview URL with six real sections in it. Every step either happens before you interact with the page, or it is the agent applying the skill.
Anonymous session opens while the page paints
src/components/auth-provider.tsx line 68: signInAnonymously(auth) is called on the first auth state callback where user is null. The UI never blocks on it. By the time you focus the prompt input, Firebase has already issued an anonymous uid and tied it to a sandbox slot.
A prewarmed sandbox is claimed from the pool
Sandboxes are kept warm so the model-generates-HTML phase does not wait on a cold boot. The claim attaches the vmId to your anonymous session. Preview URL becomes live at <vmId>.mk0r.com.
Claude Haiku loads the website-builder skill
Inside the sandbox, /root/.claude/skills/website-builder/SKILL.md is already on disk. The model reads its description line (skillWebsiteBuilder header, line 1528) and decides to activate the skill the first time your prompt mentions building a website or a landing page.
The @theme block lands in app/src/index.css
The six CSS variables from the blueprint at line 1546 to 1555 become your site's color system. The model picks concrete hex values appropriate to the business you described, writes them into the block, and Tailwind v4 generates every bg-primary and text-accent class against them.
Homepage sections get written in blueprint order
Hero first, exact pattern from line 1717. Then Stats Bar from line 1741. Then Benefits from 1758, Process from 1779, Testimonials from 1798, Final CTA from 1827. Each file lands in app/src/components/, Vite HMR reloads the preview, and you see the section appear in the preview URL as it is written.
You iterate by describing changes
Follow-up prompts edit the existing files, not the template. Ask for a different hero, the agent rewrites Hero.tsx against the same blueprint slot. Ask for a pricing section and it adds a new component against the skill's patterns. No regeneration from scratch, no template switching.
Why a blueprint beats a template
A template is a finished artifact. You pick one, you get what it had. Edits push you off the template. A blueprint is a set of rules and patterns the agent applies each time, tailored to your brief. When you ask for a pricing section the agent has not seen before, it synthesizes one against the blueprint rules rather than pretending the template already had it.
That is the whole difference between a generator that outputs HTML and a generator that outputs a website. A website has shape, and the shape here is in a file you can read.
When this is the wrong tool
If you need a single HTML snippet to paste into an existing page, a form-to-snippet generator is faster. If your goal is a visual canvas where you move boxes around with a mouse, use a hosted builder. If you are writing constraint-heavy email HTML where tables are the layout language, the blueprint here does not translate.
mk0r fits when you want the default output to be a real multi-section website, you want the structural choices to be traceable to a file in a repo, and you do not want to sign up before you start.
Watch a website get written against the 502 line blueprint
Bring a brief. We will open src/core/vm-claude-md.ts line 1527 together on the call, then run a live generation so you can watch the agent pull patterns out of the skill as it writes.
Frequently asked questions
Frequently asked questions
What does free actually mean here? No account at all, or free tier with signup?
No account at all. src/components/auth-provider.tsx line 68 calls signInAnonymously(auth) the first time you hit the site. Firebase issues an anonymous user id in the background, the session owns your prototype, and you can build a full HTML website without ever typing an email. You only sign in if you want to link the session to a permanent Google account, publish to a custom domain, or switch off the free model.
Which model runs on the free tier, and where is that set?
Claude Haiku. src/app/api/chat/model/route.ts line 5 has a constant FREE_MODEL = "haiku". Line 17 enforces it: if a request tries to use a different model and the user is not an anonymous session with an active subscription, the route returns 403 subscription_required. Haiku is the default, Haiku is what anonymous visitors get, and Haiku is what writes your HTML unless you explicitly upgrade.
What is this 502 line skill file you keep referencing?
Open src/core/vm-claude-md.ts in the appmaker repo and go to line 1527. There is a TypeScript constant called skillWebsiteBuilder. The backtick template literal runs from line 1527 to line 2028. That is 502 lines of markdown. scripts/prepare-e2b-context.ts line 98 writes that constant to docker/e2b/files/root/.claude/skills/website-builder/SKILL.md, which ships inside every E2B sandbox image. When Claude Code starts inside the sandbox and you ask it to build a website, it loads that skill and follows the patterns in it.
Which sections does the blueprint cover exactly?
The Homepage Section Blueprints heading is at line 1713 of src/core/vm-claude-md.ts. Under it: 1. Hero at line 1717, 2. Stats Bar at 1741, 3. Benefits Card Grid at 1758, 4. Process / How It Works at 1779, 5. Testimonials on a dark background with glass cards at 1798, 6. Final CTA at 1827. After that: FAQ Accordion at line 1844 with both HTML-only and React versions, Inner Page Hero at 1894, Case Study Card at 1907. Each section is a real tsx snippet with exact Tailwind class strings, not a description.
Does the skill set up the color system too, or just components?
It sets up the color system first. Lines 1546 to 1555 give a Tailwind v4 @theme block with six CSS variables: --color-primary, --color-primary-dark, --color-cta, --color-cta-dark, --color-accent, --color-accent-light. Every section blueprint below uses those semantic names (bg-primary, text-cta, text-accent). When the agent picks brand colors for your site, it writes them into the same @theme block so the whole site stays consistent.
Do I get real HTML or a hosted widget?
Real HTML, rendered by a real Vite dev server. The E2B template runs npm create vite@latest at build time and overlays the mk0r specific bridge files on top. scripts/prepare-e2b-context.ts line 68 writes app/vite.config.ts, line 69 writes app/src/_mk0rBridge.ts, line 70 writes app/src/index.css. When your session is live you get a preview URL at <vmId>.mk0r.com that serves the rendered HTML. You can copy the HTML out of the VM, run Inspect, and read exactly the Tailwind classes from the skill.
How fast can I get from landing on the site to a live HTML website?
One prompt. Open mk0r.com, the anonymous session is created while the page loads, a sandbox pool is kept warm, and typing a description hands the prompt to the agent inside an already booted VM. For a straightforward landing page, the first section blueprint lands in the preview URL in under two minutes. No signup form is in the path.
Can I keep the website after the session ends?
Yes. The preview URL at <vmId>.mk0r.com is persistent for the session, and src/app/api/publish/route.ts exposes a deploy action that submits a custom domain request. You trade an email at that step because mapping a real domain needs one, not because the generation was gated. If you just want the raw HTML, the files are in /app/src inside the sandbox and the agent will copy them into your clipboard on request.
Is the skill file load actually enforced, or just a suggestion?
Enforced. Claude Code reads skill files in /root/.claude/skills on session start as persistent context. The description line in the skill header (line 1528 to 1529 of src/core/vm-claude-md.ts) tells the model exactly when to load website-builder: when the user wants to build a website, create a landing page, add sections, add navigation, build homepage sections, create a product page. Any prompt that lands in that space activates the skill automatically.
How do I verify any of this myself?
Two minutes: clone github.com/your-fork-of appmaker or your own copy of the repo, open src/core/vm-claude-md.ts, search for the string export const skillWebsiteBuilder. Jump to that line. Read. Then run npm run e2b:prepare and look at docker/e2b/files/root/.claude/skills/website-builder/SKILL.md. That is the literal file that ships in the image. Every claim on this page points at a line number, and the file is plain TypeScript and plain markdown.
When is this the wrong tool?
If you need a five second HTML snippet to paste into an existing page, open a template generator instead. If you want a drag and drop canvas with visual box manipulation, use a hosted builder. mk0r is the right pick when you want a full multi section website, want the default structure to come from a readable blueprint rather than a template author's frozen taste, and want to skip the signup form entirely on the way from idea to live URL.