AI генерація

1. AI генерує сайт одразу з атрибутами

Для кого: користувачі з дизайном (Figma, макет, референс)

Поділіться посиланням на цю сторінку з вашим AI-асистентом разом з дизайном. AI згенерує HTML з уже розставленими атрибутами. Ви перевіряєте звіт, просите виправлення та генеруєте WordPress тему.

1. Дайте AI посилання на цей посібник + ваш дизайн (посилання Figma, скріншоти, референс)
2. AI генерує HTML з усіма атрибутами за правилами
3. Перевірте звіт по атрибутах — скоригуйте за потреби
4. Згенеруйте WordPress тему через ThemeForge

2. AI розставляє атрибути на готовий HTML

Для кого: розробники з готовим HTML (експорт з Webflow, шаблон, ручна верстка)

У вас вже є HTML без атрибутів ThemeForge. Поділіться цим посібником з AI та попросіть проаналізувати HTML і розставити атрибути на потрібні елементи.

1. Дайте AI посилання на цей посібник + ваші HTML-файли
2. AI аналізує структуру та додає атрибути на тексти, зображення, посилання
3. Перевірте звіт — AI не завжди знає, які елементи декоративні
4. Запустіть валідацію, виправте проблеми, згенеруйте тему

3. Ручне розміщення у Webflow Designer

Для кого: досвідчені користувачі Webflow, які віддають перевагу повному контролю

Додавайте кастомні атрибути прямо у Webflow Designer (Налаштування елемента → Custom Attributes). Експортуйте сайт та запустіть валідацію перед генерацією теми.

1. Виберіть елемент у Webflow → Settings → Custom Attributes
2. Додайте ім'я атрибута (напр. fld-text) та значення (напр. Heading)
3. Експортуйте сайт (Code Export або .webflow.io)
4. Запустіть валідацію та згенеруйте тему

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.

Секції та вкладки

fld-tab має бути на окремому порожньому <div>, НЕ на тому ж елементі що fld-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>

Посилання — завжди пара

Кожне посилання ПОВИННО мати і атрибут посилання, і атрибут тексту, під ДВОМА іменами — fld-link="X" на <a>, fld-text="X text" на дочірньому <div>. Одне імʼя на обидва — одне поле живить і адресу, і підпис. Телефон/email: лише opt-phone-link / opt-email-link — один атрибут заповнює і href, і видимий текст. Виняток: посилання-іконки та декоративні посилання без видимого тексту.

<!-- 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>

Зображення

fld-image ставиться ТІЛЬКИ на <img> теги. fld-bg-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>

Глобальні налаштування сайту

Елементи на кожній сторінці (телефон, email, логотип, адреса) повинні використовувати opt-* замість 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>

Меню

<!-- 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>

Перемикач мови — рецепт

<!-- 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>

Глобальні поля opt-* (телефон, адреса, підписи навігації) теж зберігаються за мовами, тож шапка/підвал кожної локалі можуть відрізнятися. Розмічайте їх opt-* як зазвичай — без додаткової роботи.

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

Необовʼязково: якщо сайт уже віддається за localhost-адресою, можна вказати в проєкті цю адресу замість завантаження архіву на сайті (див. «Вихідний код на вашому сайті»). Створіть цей файл у корені сайту та запустіть сервер командою: php -S localhost:8080 tf-cors.php. Дозволено лише themeforge.pro — жоден інший сайт не отримає доступу до ваших файлів.

<?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

Надсилайте весь набір одним запитом: частина перевірок стосується набору, а не одного файлу — чи є theme-options.html, чи є головна.

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":"…"}
]}