Preparing an AI or HTML design

Kerf is designed around one core rule: the mockup is the design, and the theme’s job is to get out of its way. You can hand Kerf a single HTML page or a multi-page ZIP folder produced by ChatGPT, Claude, Gemini, Google Stitch, Bootstrap Studio, Pinegrow, or a human front-end designer.

What Kerf accepts

Under Kerf → Import design, you can provide your design in two ways:

• A ZIP archive (recommended): Contains index.html (your home page), any additional HTML pages (about.html, services.html, contact.html, blog.html, post.html), and asset folders (css/, js/, images/, fonts/).
• Pasted HTML: Paste a complete single-file HTML document (including inline <style> and <script> tags or CDN links) directly into the importer.

Recommended ZIP folder layout

Kerf stages your asset tree into WordPress uploads keeping the exact folder hierarchy, so relative URLs like url(../images/hero.jpg) inside stylesheets continue to resolve without rewriting:

my-website.zip
├── index.html          # Becomes your WordPress Front Page (+ shared Header & Footer)
├── about.html          # Imported as /about/ page
├── services.html       # Imported as /services/ page
├── contact.html        # Imported as /contact/ page (forms work automatically)
├── blog.html           # Optional: becomes your WordPress Blog Index template
├── post.html           # Optional: becomes your Single Post template
├── css/
│   └── style.css       # Registered in exact source order
├── js/
│   └── main.js         # Registered in exact source order
└── images/
    ├── logo.svg
    └── hero.jpg        # Imported into the WordPress Media Library + staged for CSS

Copying Kerf’s ready-made AI brief

If you are about to ask ChatGPT, Claude, or Gemini to build a website for you, open Kerf → Import design and, under No design yet?, click Copy the brief. Paste it into your AI tool with a line about your business; it instructs the AI to:

• Use semantic HTML landmarks (<header>, <main>, <footer>) so Kerf can cleanly split your site-wide header and footer parts from page content.
• Keep navigation inside a standard <nav> with real links (href="about.html") so Kerf’s link binder and Menu panel recognize every item.
• Write clean HTML, CSS, and vanilla JavaScript (or CDN libraries like Tailwind Play CDN, Bootstrap, Alpine.js, GSAP, AOS, Swiper, or Owl Carousel) without requiring a Node build step.

Supported vs. unbuilt frameworks

Source / Tool	Works Directly?	Notes
Claude, ChatGPT, Gemini, Google Stitch	Yes (HTML/CSS/JS)	Ask for static HTML/CSS/JS files or a downloadable ZIP.
Bootstrap, Tailwind CSS, Bulma, Custom CSS	Yes	Compiled CSS files and Tailwind Play CDN scripts are captured and served cleanly.
Swiper, Owl, Slick, AOS, WOW.js, Alpine.js	Yes	Enqueued in source order; Kerf’s editor canvas automatically reveals scroll-hidden sections while you edit.
Lovable, Bolt, v0 (Raw React / Vite source)	Export static HTML first	Kerf’s pre-flight check detects raw JSX / Vite source files (src/App.tsx, package.json) and lets you know before importing.