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

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:

1. 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.
2. 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.
3. Keep shared styles in an external stylesheet (css/style.css): That way every inner page and blog template shares one clean stylesheet in WordPress.
4. 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.
5. 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.