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. Запустите валидацию и сгенерируйте тему

Промт А: Расставить атрибуты на готовый HTML

Используйте, когда у вас уже есть HTML-сайт и нужно добавить атрибуты ThemeForge.

У меня есть готовый HTML-сайт, который я хочу превратить в WordPress-тему с редактируемой админкой через ThemeForge.

Прочитай правила расстановки атрибутов и строго следуй им. Начни отсюда — по этой ссылке перечислены модули правил и сказано, что делать первым:
https://themeforge.pro/ai
Модуль `core` тяни всегда; если генерируешь сайт с нуля — тяни ещё `build`. Дальше добавь те, что нужны этому сайту (pages, blog, cpt, woocommerce, deploy).

Затем расставь атрибуты ThemeForge на весь редактируемый контент моего HTML:
- Каждая секция = пара таб + группа; короткие заголовки/подписи = текст, абзацы и длинные переносящиеся заголовки = textarea, картинки на тегах , ссылки парой URL + текст.
- Повторяющиеся карточки (преимущества, команда, FAQ) = репитер с 2+ строками.
- Шапка, подвал, навигация, логотип и контакты = общие опции сайта.
- Если сайт мультиязычный — пометь переключатель языков как wp-menu="Language" и НЕ хардкодь видимый текст: каждая подпись должна быть полем (у каждого языка своё значение).
- Сохрани пути к картинкам/файлам как есть; не пропускай ни одного видимого текста.

[Добавь свои требования: какие страницы, поддержка WooCommerce / блога, языки и т.д.]

После расстановки выполни шаги «Финальной доставки»: создай страницу theme-options со ВСЕМИ полями-опциями, запусти файлы локально и дай мне полный список URL страниц для вставки в ThemeForge.

Промт Б: Сгенерировать HTML с атрибутами с нуля

Используйте, когда нужно, чтобы ИИ создал HTML-сайт по дизайну (Figma, скриншот, описание) с уже расставленными атрибутами ThemeForge.

Мне нужно, чтобы ты сгенерировал HTML-сайт с уже расставленными атрибутами ThemeForge, готовый для генерации WordPress-темы.

Прочитай правила расстановки атрибутов и строго следуй им. Начни отсюда — по этой ссылке перечислены модули правил и сказано, что делать первым:
https://themeforge.pro/ai
Модуль `core` тяни всегда; если генерируешь сайт с нуля — тяни ещё `build`. Дальше добавь те, что нужны этому сайту (pages, blog, cpt, woocommerce, deploy).

Вот мой дизайн: [ПРИКРЕПИ ССЫЛКУ НА FIGMA / СКРИНШОТЫ / ОПИСАНИЕ]

Сгенерируй чистый, семантический HTML + CSS и расставляй атрибуты ThemeForge на редактируемом контенте по мере сборки каждой секции (не отдельным проходом):
- Каждая секция = пара таб + группа; текст vs textarea по числу строк; картинки на ; ссылки парой URL + текст; повторяющиеся карточки = репитер с 2+ строками.
- Шапка/подвал/навигация/контакты = общие опции сайта.
- Для мультиязычного сайта — пометь переключатель языков как wp-menu="Language" и держи каждую видимую строку полем (без хардкода текста).
Используй реальный контент-заполнитель (не lorem ipsum), чтобы импорт заполнил реальные поля.

[Добавь свои требования: цвета, шрифты, количество страниц, WooCommerce / блог, языки и т.д.]

После генерации выполни шаги «Финальной доставки»: создай страницу theme-options со ВСЕМИ полями-опциями, запусти файлы локально и дай мне полный список URL страниц для вставки в 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-* как обычно — никакой доп. работы.

Слаг → Шаблон

Используйте эти точные имена файлов. Кастомные страницы (about, services, contacts и т.д.) могут использовать любой слаг, не совпадающий с зарезервированными ниже.

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