AI Generation Guide

1. AI generates a site with attributes

For: users with a design (Figma, sketch, reference site)

Share this page link with your AI assistant along with your design. The AI generates HTML with ThemeForge attributes already in place. You review the attribute report, request corrections, and generate the WordPress theme.

1. Give your AI the link to this guide + your design (Figma URL, screenshots, reference)
2. AI generates HTML with all attributes placed according to the rules
3. Review the attribute report — adjust if needed
4. Generate WordPress theme via ThemeForge

2. AI adds attributes to existing HTML

For: developers with a ready HTML site (from Webflow export, a template, or hand-coded)

You already have HTML without ThemeForge attributes. Share this guide with your AI and ask it to analyze the HTML and place attributes on the right elements. Then review and generate.

1. Give your AI the link to this guide + your HTML files
2. AI analyzes the structure and adds attributes to text, images, links
3. Review the attribute report — the AI doesn't always know which elements are decorative
4. Run validation, fix any issues, generate the theme

3. Manual placement in Webflow Designer

For: experienced Webflow users who prefer full control

Add custom attributes directly in Webflow Designer (Element Settings → Custom Attributes). Export the site and run validation before generating the theme.

1. Select an element in Webflow → Settings → Custom Attributes
2. Add the attribute name (e.g. fld-text) and value (e.g. Heading)
3. Export the site (Code Export or .webflow.io)
4. Run validation and generate the theme

Prompt A: Add attributes to existing HTML

Use this when you already have an HTML site and need to add ThemeForge attributes.

I have a finished HTML website that I want to convert into a WordPress theme with an editable admin panel, using ThemeForge.

Read the placement rules and follow them exactly. Start here — it names the rule modules and tells you what to do first:
https://themeforge.pro/ai
Always pull the `core` module; if you are generating the site from scratch, pull `build` too. Then add what this site needs (pages, blog, cpt, woocommerce, deploy).

Then add ThemeForge attributes to every piece of editable content in my HTML:
- Each visual section = a tab + group pair; short headings/labels = text, paragraphs and long wrapping headings = textarea, images on  tags, links as a URL + text pair.
- Repeating cards (features, team, FAQ) = a repeater with 2+ rows.
- Header, footer, navigation, logo and contacts = site-wide options.
- If my site is multilingual, mark the language switcher with wp-menu="Language" and do NOT hardcode any visible text — every label must be a field (each language has its own value).
- Keep image/file paths as they are; do not skip any visible text.

[Add your specific requirements here: which pages, WooCommerce / blog support, languages, etc.]

When done, follow the Final Delivery steps: create the theme-options page with ALL option fields, serve the files locally, and give me the complete list of page URLs to paste into ThemeForge.

Prompt B: Generate HTML with attributes from scratch

Use this when you want the AI to create an HTML site from a design (Figma, screenshot, description) with ThemeForge attributes already included.

I need you to generate an HTML website with ThemeForge attributes already in place, ready for WordPress theme generation.

Read the placement rules and follow them exactly. Start here — it names the rule modules and tells you what to do first:
https://themeforge.pro/ai
Always pull the `core` module; if you are generating the site from scratch, pull `build` too. Then add what this site needs (pages, blog, cpt, woocommerce, deploy).

Here is my design: [ATTACH YOUR FIGMA LINK / SCREENSHOTS / DESCRIPTION]

Generate clean, semantic HTML + CSS and place ThemeForge attributes on all editable content as you build each section (not as a separate pass):
- Each section = a tab + group pair; text vs textarea by line count; images on ; links as a URL + text pair; repeating cards as a repeater with 2+ rows.
- Header/footer/navigation/contacts = site-wide options.
- For a multilingual site, mark the language switcher with wp-menu="Language" and keep every visible string as a field (no hardcoded text).
Use real placeholder content (not lorem ipsum) so data import populates real fields.

[Add your specific requirements here: colors, fonts, number of pages, WooCommerce / blog, languages, etc.]

When done, follow the Final Delivery steps: create the theme-options page with ALL option fields, serve the files locally, and give me the complete list of page URLs to paste into ThemeForge.

Sections & Tabs

fld-tab must be on a separate empty <div>, NOT on the same element as fld-group. Place it as a sibling BEFORE the group.

<!-- ONE wp-fields-group per page on <body> -->
<body wp-fields-group="Home Page">

  <!-- Tab = empty sibling BEFORE the group -->
  <div fld-tab="Hero" wp="delete-element" class="tab-div"></div>
  <section fld-group="Hero" class="hero">
    <h1 fld-text="Heading">Welcome</h1>
    <p fld-area="Description">...</p>
  </section>

  <div fld-tab="Features" wp="delete-element" class="tab-div"></div>
  <section fld-group="Features" class="features">
    ...
  </section>

</body>

Links — Always a Pair

Every link MUST have both a link attr and a text attr, under TWO names — fld-link="X" on <a>, fld-text="X text" on a child <div>. One name for both makes one field feed the URL and the caption. Phone/email: opt-phone-link / opt-email-link alone — one attribute fills both the href and the visible text. Exception: icon-only or decorative links without visible text.

<!-- CORRECT: fld-link on <a>, fld-text on child, two names -->
<a fld-link="CTA" href="/shop" class="btn w-inline-block">
  <div fld-text="CTA text">Shop Now</div>
</a>

<!-- Phone/email: one attribute fills both href and text -->
<a opt-phone-link="Phone" href="tel:...">+1 234 567</a>

Images

fld-image goes on <img> tags ONLY. fld-bg-image goes on any element with a background image.

<img fld-image="Hero Image" src="images/hero.jpg" alt="Hero" />
<div fld-bg-image="Background" style="background-image:url('img/bg.jpg')"></div>

Site-Wide Options

Elements on every page (phone, email, logo, address) should use opt-* instead of fld-*.

<!-- Header: site-wide, use opt-* -->
<img opt-image="Logo" src="images/logo.png" />

<!-- Navigation: a repeater of link + caption rows (NOT wp-menu) -->
<nav opt-loop="Nav links" class="nav">
  <div class="nav-item">
    <a opt-link="Link" href="/about" class="nav-link w-inline-block">
      <div opt-text="Link text">About</div>
    </a>
  </div>
  …
</nav>

<!-- Footer: contacts — one attribute each -->
<a opt-phone-link="Phone" href="tel:...">+1 234 567</a>
<a opt-email-link="Email" href="mailto:...">info@site.com</a>
<p opt-text="Address">123 Main St</p>

Menus

<!-- Navigation: an opt-loop of link + caption rows (preferred) -->
<nav opt-loop="Nav links" class="nav">
  <div class="nav-item">
    <a opt-link="Link" href="/" class="nav-link w-inline-block">
      <div opt-text="Link text">Home</div>
    </a>
  </div>
  <div class="nav-item">
    <a opt-link="Link" href="/about" class="nav-link w-inline-block">
      <div opt-text="Link text">About</div>
    </a>
  </div>
</nav>

<!-- Language switcher (Polylang): use wp-menu -->
<div wp-menu="Language" class="lang-switcher">
  <a href="/en" class="lang-link">EN</a>
  <a href="/ua" class="lang-link">UA</a>
</div>

Language switcher — the recipe

<!-- Dropdown: toggle shows the CURRENT language (an options field),
     the list is a connected wp-menu="Language" (locales injected) -->
<div opt-hide="Hide language switcher" class="lang-drop w-dropdown">
  <div class="lang-dt w-dropdown-toggle">
    <div opt-text="Current language">UA</div>
  </div>
  <nav class="lang-drop-list w-dropdown-list">
    <div wp-menu="Language" class="lang-switcher">
      <a href="/en"><div>ENG</div></a>
      <a href="/ru"><div>РУС</div></a>
    </div>
  </nav>
</div>

<!-- Simple variant: a flat list of language links -->
<ul wp-menu="Language" class="header__languages">
  <li><a href="/">UA</a></li>
  <li><a href="/ru/">RU</a></li>
  <li><a href="/en/">EN</a></li>
</ul>

Site-wide opt-* fields (phone, address, nav labels) are per-language too, so each locale’s header/footer can differ. Mark them with opt-* as usual — no extra work.

Slug → Template Mapping

Use these exact file names. Custom pages (about, services, contacts, etc.) can use any slug that doesn't conflict with the reserved names below.

tf-cors.php

Optional: if your site is already served from a localhost URL, you can point the project at that URL instead of uploading the archive on the site (see "Source on your site"). Create this file in the site root and start the server with: php -S localhost:8080 tf-cors.php. Only themeforge.pro is allowed — no other site can access your files.

<?php
// ThemeForge CORS Router — place in site root, run: php -S localhost:8080 tf-cors.php
$allowed = ['https://themeforge.pro', 'https://www.themeforge.pro', 'http://localhost:8081'];
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
if (in_array($origin, $allowed, true)) header('Access-Control-Allow-Origin: ' . $origin);
elseif (empty($origin)) header('Access-Control-Allow-Origin: https://themeforge.pro');
header('Access-Control-Allow-Methods: GET, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { http_response_code(204); exit; }
$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$file = __DIR__ . $path;
if (is_dir($file)) $file = rtrim($file, '/') . '/index.html';
if (!is_file($file) && is_file($file . '.html')) $file .= '.html';
if (is_file($file)) {
    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    $types = ['html'=>'text/html','css'=>'text/css','js'=>'application/javascript','json'=>'application/json',
        'png'=>'image/png','jpg'=>'image/jpeg','jpeg'=>'image/jpeg','gif'=>'image/gif','svg'=>'image/svg+xml',
        'webp'=>'image/webp','ico'=>'image/x-icon','woff'=>'font/woff','woff2'=>'font/woff2','ttf'=>'font/ttf'];
    if (isset($types[$ext])) header('Content-Type: ' . $types[$ext]);
    readfile($file); return true;
}
http_response_code(404); echo '404 Not Found';

POST /api/validate-markup

Send the whole set in one request: some checks are about the set rather than one file — whether theme-options.html exists, whether the home page is there.

POST https://themeforge.pro/api/validate-markup
Content-Type: application/json

{"pages":[
  {"name":"index.html","html":"<!doctype html>…"},
  {"name":"about.html","html":"…"},
  {"name":"theme-options.html","html":"…"}
]}