# 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](https://kerf.site/). 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.
1. **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](https://kerf.site/docs/menus-and-links/) so you can create drafts in one click.
1. **Keep shared styles in an external stylesheet (`css/style.css`):** That way every inner page and blog template shares one clean stylesheet in WordPress.
1. **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.
1. **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](https://kerf.site/docs/importing-a-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](https://kerf.site/blog/claude-chatgpt-gemini-to-wordpress/). Try Kerf free in your browser — a private WordPress with Kerf installed, no sign-up: https://kerf.site/demo/*