Generación IA

1. La IA genera un sitio con atributos

Para: usuarios con un diseño (Figma, boceto, referencia)

Comparta el enlace de esta página con su asistente de IA junto con su diseño. La IA genera HTML con los atributos ya colocados. Usted revisa el informe, solicita correcciones y genera el tema WordPress.

1. Dé a su IA el enlace a esta guía + su diseño (URL de Figma, capturas, referencia)
2. La IA genera HTML con todos los atributos según las reglas
3. Revise el informe de atributos — ajuste si es necesario
4. Genere el tema WordPress a través de ThemeForge

2. La IA añade atributos al HTML existente

Para: desarrolladores con HTML listo (exportación de Webflow, plantilla, código manual)

Ya tiene HTML sin atributos ThemeForge. Comparta esta guía con su IA y pídala que analice el HTML y coloque los atributos en los elementos correctos.

1. Dé a su IA el enlace a esta guía + sus archivos HTML
2. La IA analiza la estructura y añade atributos a textos, imágenes, enlaces
3. Revise el informe — la IA no siempre sabe qué elementos son decorativos
4. Ejecute la validación, corrija problemas, genere el tema

3. Colocación manual en Webflow Designer

Para: usuarios experimentados de Webflow que prefieren control total

Añada atributos personalizados directamente en Webflow Designer (Configuración del elemento → Custom Attributes). Exporte el sitio y ejecute la validación antes de generar el tema.

1. Seleccione un elemento en Webflow → Settings → Custom Attributes
2. Añada el nombre del atributo (ej. fld-text) y el valor (ej. Heading)
3. Exporte el sitio (Code Export o .webflow.io)
4. Ejecute la validación y genere el tema

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.

Secciones y pestañas

fld-tab debe estar en un <div> vacío separado, NO en el mismo elemento que fld-group. Colóquelo como hermano ANTES del grupo.

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

Enlaces — siempre un par

Cada enlace DEBE tener tanto un atributo de enlace como de texto, con DOS nombres — fld-link="X" en <a>, fld-text="X text" en un <div> hijo. Un solo nombre para ambos hace que un campo alimente la URL y el texto. Teléfono/email: solo opt-phone-link / opt-email-link — un atributo rellena el href y el texto visible. Excepción: enlaces de icono sin texto visible.

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

Imágenes

fld-image va SOLO en etiquetas <img>. fld-bg-image en cualquier elemento con imagen de fondo.

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

Opciones del sitio

Elementos en cada página (teléfono, email, logo, dirección) deben usar opt-* en lugar de 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>

Menús

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

Selector de idioma — la receta

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

Los campos globales opt-* (teléfono, dirección, etiquetas de navegación) también son por idioma, así que la cabecera/pie de cada idioma pueden diferir. Márcalos con opt-* como siempre — sin trabajo extra.

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

Opcional: si su sitio ya se sirve desde una dirección localhost, puede indicar esa dirección en el proyecto en lugar de subir el archivo en el sitio (véase «La fuente en tu sitio»). Cree este fichero en la raíz del sitio y arranque el servidor con: php -S localhost:8080 tf-cors.php. Solo se permite themeforge.pro — ningún otro sitio puede acceder a sus archivos.

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

Envíe el conjunto completo en una sola petición: algunas comprobaciones afectan al conjunto y no a un archivo — si existe theme-options.html, si está la página de inicio.

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