DEV Community: Kerf

Bring Your Own Gemini Key: How to Build and Edit Custom WordPress Pages with Kerf AI (With Zero Monthly AI Markup)

Kerf — Thu, 22 Oct 2026 14:30:39 +0000

Many WordPress plugins that add “AI” to their name follow the same playbook: wrap a standard LLM API in a proprietary credit system and charge a monthly fee on top of your theme license.

When we built Kerf AI into Kerf, we took the opposite path: every Kerf plan includes the full Kerf AI suite, and it talks directly to Google using your own Gemini API key. Even a free key from Google AI Studio works, and nothing is ever sent to Google until you click an AI button.

5 Ways Kerf AI Speeds Up Your WordPress Workflow

Once you paste your Gemini API key under Kerf → Settings, five specialized tools unlock across your dashboard and Block Editor:

1. Build a Complete Multi-Page Site from a Brief (Kerf → Build with AI)

Don’t have an HTML ZIP yet? Describe your business and select up to twelve photos from your WordPress Media Library. Kerf AI designs a cohesive multi-page HTML/CSS site—including marked Blog, Single Post, and 404 templates—and opens it directly in the Kerf importer check screen.

2. Turn Rough Notes or a Word Doc into a Page That Matches Your Site (Kerf → Make a Page)

What happens a month after importing your site when you need a new Services, Pricing, or About page? Open Kerf → Make a page (or click the Kerf AI icon inside the Block Editor on a new page):

Paste rough notes or upload a .docx Word document, Markdown file, or HTML snippet.
Kerf AI reads your existing site’s rendered HTML structure and CSS stylesheets, then builds the new page using your design’s actual banners, cards, grids, and buttons—keeping your words verbatim.

3. Rework Any Section Inside the Block Editor

Select any section on an existing page and ask Kerf AI to transform it—for example, “Turn this bulleted list into a 3-column feature card grid using this page’s card styles” or “Add an hours-and-rates table below this heading.” Because the change runs inside the Block Editor, standard Ctrl+Z / Undo works immediately.

4. Automatically Wire Up Static Blog & Post Templates

If your HTML ZIP includes a blog.html or post.html file that wasn’t pre-marked with data-kerf-* attributes, click Mark it with AI during the import check. Kerf AI identifies the post card loops, titles, dates, featured images, comments, and pagination and binds them to live WordPress data automatically.

5. Plain-English Import Diagnostics

If an AI-generated ZIP has missing image references or unmatched selectors on the fidelity report, click Explain it under In plain words on the import's Done step to get a plain-English summary and an exact fix-it prompt you can paste back into the tool that generated the design.

Included in Every Lifetime Plan

Kerf AI is included in Personal ($49), Freelancer ($99), and Agency ($199)—pay once, own it for life, and bring your own Gemini key. Read the Kerf AI documentation →

Originally published on kerf.site. Try Kerf free in your browser — a private WordPress with Kerf installed, no sign-up: https://kerf.site/demo/

Static HTML Hosting vs. WordPress for AI Websites: Why Clients Still Need a Real CMS

Kerf — Thu, 22 Oct 2026 14:29:50 +0000

When someone generates their first website with ChatGPT, Claude, or Gemini, the most tempting shortcut is to drag the static HTML folder onto a static host and call it done. For a weekend personal landing page, that works fine.

For a real business or client website, the cracks appear on Day 2.

What Happens on Day 2 of a Static HTML Site

As soon as a business site goes live, non-technical owners and marketing teams need to do five everyday tasks that raw HTML files make surprisingly painful:

Fixing a typo or swapping a team photo: Without a CMS, changing one sentence or replacing a headshot means opening a code editor, editing raw HTML tags, resizing images manually, and re-deploying files.
Publishing articles for SEO: A static blog.html file is just a façade. Without a database, categories, RSS feeds, pagination, and dynamic templates, every new blog post requires duplicating HTML files and manually updating index cards across the site.
Receiving contact form leads reliably: Static HTML <form> tags don’t send email or store submissions without wiring up external third-party form endpoints and paying monthly SaaS fees.
Using standard WordPress SEO & marketing plugins: Businesses rely on Yoast SEO, Rank Math, redirection managers, analytics integrations, and caching tools that work out of the box on WordPress.
Changing a phone number or address across 15 pages: In static HTML, that means search-and-replace across every file.

Why People Hesitated to Use WordPress—Until Now

The main reason designers hesitated to put AI-made HTML sites on WordPress was the conversion tax: nobody wanted to spend two days rebuilding a finished HTML design inside Elementor or watching a theme overwrite their CSS.

How Kerf Gives You Static-HTML Fidelity with a Full WordPress CMS

Kerf eliminates the trade-off between design fidelity and CMS power:

Capability	Raw Static HTML	Traditional WP Page Builder	WordPress + Kerf
The AI's HTML/CSS/JS kept as written	Yes	No — rebuilt by eye	Yes (same tags, classes & CSS)
Visual text & photo editing	No (edit code)	Yes	Yes (Native Block Editor)
Real blog, categories & SEO plugins	No	Yes	Yes (In your design’s look)
Working contact forms + lead inbox	Requires external SaaS	Requires extra plugin	Built in automatically
Client-safe layout locking	No	Limited	Built-in Client Mode

With Kerf, you keep the front-end work your AI tool or designer produced, as written—and gain the publishing power, SEO ecosystem, and client editability of WordPress in a single click.

Originally published on kerf.site. Try Kerf free in your browser — a private WordPress with Kerf installed, no sign-up: https://kerf.site/demo/

The 2026 Agency Playbook: Ship Custom WordPress Client Sites in an Afternoon with AI and Kerf

Kerf — Thu, 22 Oct 2026 14:29:06 +0000

For independent web designers and small agencies, custom WordPress builds under $5,000 used to have razor-thin margins. You either spent days wrestling a bloated multipurpose theme into looking bespoke, or you spent days hand-coding a custom theme from a Figma mockup.

In 2026, the fastest-moving studios use a completely different pipeline: prototype real HTML/CSS designs with AI in the morning, import them into WordPress with Kerf after lunch, and hand off a locked, client-proof CMS before dinner.

1. Prototype in Real HTML Instead of Static Pictures

Instead of showing a client flat images that still have to be rebuilt from scratch once approved, agencies use Claude, ChatGPT, Gemini, or their own front-end library to generate a real multi-page HTML folder. The client previews real responsive typography, hover states, and scroll animations in their browser on Day 1.

2. Import the Entire Multi-Page Site in One Pass

Once the client approves the direction, you upload the ZIP under Kerf → Import design:

Each page of the design becomes a WordPress page, and its marked blog, post and 404 files become templates (Kerf AI can mark them for you).
Internal links across the header, footer, and call-to-action buttons bind automatically to the created WordPress pages.
Contact forms that posted nowhere start emailing notifications and storing leads in Kerf → Form entries.

3. Handle Client Revisions with Section-by-Section Sync

What happens when the client emails two days later asking for a new testimonial carousel on the home page—after your copywriter has already edited the hero and services text inside WordPress?

With Kerf → Update design, you upload the updated ZIP and Kerf diffs the design section by section:

New and updated sections from the mockup are checked and ready to apply.
Sections your team already edited inside WordPress are automatically detected and left unchecked so live copy is never overwritten.
Every update is backed by one-click Undo.

4. Wire Up Site Details & Lock the Layout with Client Mode

Before handing over the WordPress login, two built-in agency features save hours of future support tickets:

Kerf → Site details: Centralizes the client’s business name, phone number, email, physical address, and opening hours. When the client changes their phone number or seasonal hours on that one screen, the header, footer, and contact page update everywhere.
Client mode: Give your client an Editor account and client mode is on for them (Kerf → Settings can turn it off). Your client can freely edit headlines, paragraphs, images, background pictures, and links in the Block Editor—while block movement, deletion, insertion, and HTML class settings are completely locked.

One-Time Lifetime Agency Licensing

Unlike a page-builder subscription renewed every year, Kerf is a one-time payment with lifetime updates: $99 for 5 sites (Freelancer) or $199 for unlimited sites (Agency) at launch pricing. Compare plans →

Originally published on kerf.site. Try Kerf free in your browser — a private WordPress with Kerf installed, no sign-up: https://kerf.site/demo/

Why Page Builders Ruin Custom HTML Designs (And How Zero-Wrapper Block Conversion Fixes It)

Kerf — Thu, 22 Oct 2026 14:27:40 +0000

Every front-end developer who has tried to bring a custom HTML/CSS mockup into WordPress has experienced the same quiet heartbreak. In the browser, the static HTML file looks razor-sharp. Ten minutes after moving it into a page builder or block converter, the navigation height is off by 6 pixels, the pricing table borders have vanished, a CSS Grid has collapsed into a single column, and half the inline SVGs refuse to scale.

Why does that happen—even when you copy the exact same CSS file into WordPress? The answer lies in DOM wrapper pollution and cascade order.

1. How Extra Wrappers Break Modern CSS

Modern CSS relies heavily on parent-child relationships: Flexbox, CSS Grid, direct child combinators (>), and adjacent sibling combinators (+). Consider a simple rule from a designer’s stylesheet:

body > header + main > .pricing-grid > article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Look at what happens in a typical WordPress theme or page builder:

Full Site Editing wraps the page in <div class="wp-site-blocks">, wraps the header in <header class="wp-block-template-part"><header>..., and wraps the body in <div class="entry-content wp-block-post-content">. Now body > header + main never matches.
A page builder wraps every widget in 3 to 5 layers of .elementor-widget-container or .et_pb_module divs. Direct CSS Grid and Flex items cease to be children of the grid container.
WordPress’s own core/table block wraps every <table> in a <figure class="wp-block-table">, breaking .pricing > table.

2. How Kerf Keeps the Same DOM

When we engineered Kerf, we set a strict benchmark: success is not “does it look close,” but “is the rendered DOM the same DOM?”

Unwrapped document chrome: Kerf unwraps core/template-part and core/post-content at render time and copies your mockup’s <html> and <body> classes and data-* attributes onto the real document tags.
kerf/div renders one element with one set of attributes: A <section class="hero"> becomes a block that renders <section class="hero">. A <td> renders a <td>. Nothing is normalized or wrapped.
Additive-only core blocks: Headings (core/heading) and paragraphs (core/paragraph) use native WordPress blocks so you get rich text editing and Yoast/Rank Math compatibility without inserting wrapper elements.
Case-accurate inline SVG: PHP’s DOMDocument::loadHTML() normally lowercases viewBox to viewbox and linearGradient to lineargradient, breaking SVG scaling. Kerf restores canonical SVG camelCase and sanitizes against a strict DOM allowlist.

3. Proving It: Pixel-by-Pixel Image Subtraction

On the Kerf home page, we show the Copperline Studio template opened as a static HTML file on the left and rendered by WordPress after a one-click Kerf import on the right. When you blend the two 1440×900 screenshots with CSS mix-blend-mode: difference, identical pixels subtract to pure black (#000000).

Copperline Studio on WordPress — 134/134 selectors matched

The rendered WordPress page keeps every tag, class, stylesheet, and script in source order.

Want to test how your most complex stylesheet holds up? Launch the live WordPress Playground demo and drop in your ZIP to see your selector match score in seconds.

Originally published on kerf.site. Try Kerf free in your browser — a private WordPress with Kerf installed, no sign-up: https://kerf.site/demo/

ChatGPT, Claude & Gemini Write Great Websites — Here Is the Exact Prompt Brief to Make Them WordPress-Ready

Kerf — Thu, 22 Oct 2026 14:26:38 +0000

Large language models have crossed a threshold in front-end web design. When given clear art direction, Claude, ChatGPT, Google Gemini, and Google Stitch don’t just write passable boilerplate—they produce bespoke layouts, cohesive CSS custom-property systems, micro-interactions, and responsive breakpoints that rival custom studio builds.

However, how you prompt the model determines whether you get a disconnected code demo or a clean, multi-page HTML package that drops straight into WordPress via Kerf. Here is the exact structural brief we use—and why each instruction matters.

The 5 Rules of WordPress-Ready AI HTML

Although Kerf’s converter handles everything from messy inline styles to third-party carousels, asking your AI tool for five specific habits turns a good import into an effortless one:

Use semantic top-level landmarks (<header>, <main>, <footer>): Kerf splits your home page at these boundaries so your navigation header and footer automatically become shared WordPress Template Parts across the whole site.
Use real file links in navigation (href="about.html", not href="#"): When links name their target page, Kerf automatically binds them to the matching WordPress pages on import and lists any uncreated pages under Kerf → Links so you can create drafts in one click.
Keep shared styles in an external stylesheet (css/style.css): That way every inner page and blog template shares one clean stylesheet in WordPress.
Output standard HTML, CSS, and vanilla JS (not an unbuilt React/Vite repo): Browsers—and WordPress—run HTML, CSS, and JS directly. If you use Tailwind, ask for a compiled CSS file or the Tailwind Play CDN script rather than a package.json build step.
Optional—add data-kerf-* attributes for live blog & site details: A single attribute on a blog card (data-kerf-loop="latest") or phone number (data-kerf-site="phone") makes it dynamic on import (or you can let Kerf AI mark it automatically!).

The Copy-Paste Prompt Brief for Claude, ChatGPT & Gemini

Every copy of Kerf includes a ready-made brief on Kerf → Import design, under No design yet? → Copy the brief. You can also copy this universal template directly into your next AI session:

Build a complete, responsive website as plain HTML, CSS, and JavaScript files packaged for a ZIP folder (no React, Vite, or build step required).

Pages to include:
- index.html (Home page)
- about.html (About page)
- services.html (Services page)
- contact.html (Contact page with a standard <form>)
- blog.html (Blog listing page)
- post.html (Single blog post template)

Structure & conventions:
1. Wrap the top navigation bar in <header>, the page body in <main> with semantic <section> blocks, and the site footer in <footer>.
2. Inside <header>, use a <nav> with real relative links (index.html, about.html, services.html, blog.html, contact.html).
3. Put shared styles in css/style.css and shared scripts in js/main.js. Keep relative asset paths clean (e.g. images/...).
4. On contact.html, use a semantic <form> with named <input> and <textarea> fields and a <button type="submit">.
5. For dynamic WordPress binding (Kerf markup contract):
   - Mark business details with data-kerf-site="name|phone|email|address|hours".
   - On blog.html, mark the first post card with data-kerf-loop="main" and its inner elements with data-kerf-field="image", data-kerf-field="date", data-kerf-field="title permalink", and data-kerf-field="excerpt".
   - On post.html, mark the post title with data-kerf-field="title", date with data-kerf-field="date", featured image with data-kerf-field="image", and body container with data-kerf-field="content".

What Happens When You Drop That ZIP into Kerf

When you upload the resulting ZIP into Kerf → Import design:

index.html, about.html, services.html, and contact.html become editable WordPress pages with every link bound.
blog.html and post.html become your live WordPress Blog and Single Post templates—rendering your real WordPress articles inside your AI design’s cards.
The contact form on contact.html immediately starts sending emails and saving leads under Kerf → Form entries.
Your phone number, email, address, and opening hours are wired to Kerf → Site details so you can update them in one place.

Already Generated a Site Without the Brief?

Don’t worry—you don’t need to re-prompt from scratch. Kerf imports unmarked HTML designs cleanly, and Mark it with AI on the import screen can add the blog and post markers for you automatically.

Originally published on kerf.site. Try Kerf free in your browser — a private WordPress with Kerf installed, no sign-up: https://kerf.site/demo/

How to Turn an AI-Generated HTML Website into a WordPress Site in One Click (Without Elementor or Rebuilding)

Kerf — Thu, 22 Oct 2026 14:25:36 +0000

Building a custom website used to take three weeks of wireframing. Today, you can open Claude, ChatGPT, Gemini, or Google Stitch, describe your business, and get back a genuinely great multi-page website in twenty minutes—complete with custom typography, responsive CSS Grid layouts, smooth scroll animations, and interactive scripts.

And then comes the moment every founder, freelancer, and agency hits the wall: “How do I put this on WordPress so my team or client can actually edit it?”

Until now, every answer to that question was painful. In this guide, we’ll compare the traditional ways people bring HTML into WordPress—and walk through how Kerf imports an AI tool's or a designer's HTML ZIP into a real, editable WordPress site in one click. (Not yet: React apps that need a build step, such as Lovable, Bolt or v0 — Kerf's check tells you before anything changes.)

Why the 3 Traditional Ways Break Your AI Design

When you download a .zip folder of HTML, CSS, and JavaScript from an AI tool, you have a finished front-end design. Look at what happens when you try to move it into WordPress the old-fashioned way:

Approach	Time Required	What Happens to Your Design
1. Rebuild by hand in Elementor / Divi	1–3 days per site	You recreate every section by eye inside a proprietary widget tree. Spacing shifts, custom CSS animations disappear, the page fills with the builder's wrappers, and you pay an annual plugin subscription forever.
2. Convert to core Gutenberg blocks	4–8 hours of fixing CSS	Standard block converters normalize your markup—wrapping tables in `<figure class="wp-block-table">` and replacing your `<nav>` with `wp_nav_menu()`. Suddenly stylesheet selectors written for your original markup stop matching.
3. Hand-code a custom PHP theme	Days of PHP, or a developer's bill	Splitting `header.php`, `footer.php`, `functions.php`, and registering editable fields in ACF works—but the moment you want to edit a section visually, you’re back in code.

The Root Cause

The usual HTML-to-WordPress routes convert your design into their own widget or block vocabulary. Every wrapper element or renamed class is a markup decision your designer didn’t make—and the cost shows up as CSS that quietly breaks.

How Kerf Imports HTML into WordPress Without Rewriting Your Markup

We built Kerf around a simple rule: the mockup is the design, and the theme’s job is to get out of its way. Instead of forcing your HTML into opinionated widgets, Kerf is a WordPress full-site-editing theme with a deterministic DOM converter and asset pipeline built inside.

Here is the entire workflow from AI ZIP to live WordPress site:

Step 1: Drop Your ZIP into Kerf → Import Design

In your WordPress admin, open Kerf → Import design and drag in your ZIP archive (or paste a single page’s HTML). Kerf runs a pre-flight check before touching your site—counting your pages, stylesheets, scripts, and images, and flagging any missing files up front.

copperline-studio.zip — Pre-import check

Kerf inspects every page, stylesheet, script, and image in your ZIP before importing.

Step 2: Click Import and Check the Match

In a single pass (a few seconds for a design like our sample), Kerf:

Stages your asset folders (css/, js/, fonts/, images/) keeping the folder hierarchy intact so relative url(../images/...) paths in CSS resolve without rewriting.
Imports content images into the WordPress Media Library so you can swap any photo in the editor while keeping responsive srcset support.
Registers stylesheets and scripts in exact source order through WordPress’s dependency graph.
Splits <header>, <main>, and <footer> into shared FSE template parts and editable pages.
Audits every CSS selector in your stylesheets against the rendered WordPress DOM and prints your fidelity report.

Fidelity Report — 134 of 134 CSS selectors matched (100%)

On our Copperline Studio design, 134 out of 134 CSS selectors match on the first pass.

Step 3: Edit Words, Pictures, Menus, and Forms in Place

Open the imported page in the WordPress Block Editor and you’ll see your actual design—with your stylesheets loaded inside the canvas, scroll-hidden sections automatically revealed for editing, and every HTML tag and class named clearly in List View.

Click any text or image to edit it in place.
Open the Menu panel to rename, reorder, or re-link navigation items without losing your <nav> markup.
Select any <form>—it already sends emails and saves entries under Kerf → Form entries automatically.

Test It Right Now in Your Browser (No Sign-Up)

You don’t have to take our word for it—or even spin up a WordPress server to test your own ZIP. Click Try it free in your browser to launch a private WordPress Playground with Kerf pre-installed, and drop in either our sample Copperline Studio ZIP or your own AI-made website.

Originally published on kerf.site. Try Kerf free in your browser — a private WordPress with Kerf installed, no sign-up: https://kerf.site/demo/