KI-Generierung

1. KI generiert eine Seite mit Attributen

Für: Benutzer mit einem Design (Figma, Entwurf, Referenz)

Teile diesen Seitenlink mit deinem KI-Assistenten zusammen mit deinem Design. Die KI generiert HTML mit bereits platzierten Attributen. Du prüfst den Bericht, forderst Korrekturen an und generierst das Theme.

1. Gib deiner KI den Link zu diesem Leitfaden + dein Design (Figma-URL, Screenshots, Referenz)
2. KI generiert HTML mit allen Attributen nach den Regeln
3. Prüf den Attributbericht — pass bei Bedarf an
4. Generiere das WordPress-Theme über ThemeForge

2. KI fügt Attribute zu bestehendem HTML hinzu

Für: Entwickler mit fertigem HTML (Webflow-Export, Template, handcodiert)

Du hast bereits HTML ohne ThemeForge-Attribute. Teile diesen Leitfaden mit deiner KI und bitte sie, das HTML zu analysieren und Attribute zu platzieren.

1. Gib deiner KI den Link zu diesem Leitfaden + deine HTML-Dateien
2. KI analysiert die Struktur und fügt Attribute auf Texte, Bilder, Links hinzu
3. Prüf den Bericht — die KI weiß nicht immer, welche Elemente dekorativ sind
4. Validierung ausführen, Probleme beheben, Theme generieren

3. Manuelle Platzierung im Webflow Designer

Für: erfahrene Webflow-Benutzer, die volle Kontrolle bevorzugen

Füg benutzerdefinierte Attribute direkt im Webflow Designer hinzu (Element-Einstellungen → Custom Attributes). Exportiere die Seite und validiere vor der Theme-Generierung.

1. Element in Webflow auswählen → Settings → Custom Attributes
2. Attributnamen (z.B. fld-text) und Wert (z.B. Heading) hinzufügen
3. Seite exportieren (Code Export oder .webflow.io)
4. Validierung ausführen und Theme generieren

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.

Sektionen & Tabs

fld-tab muss auf einem separaten leeren <div> stehen, NICHT auf demselben Element wie fld-group. Platziere es als Geschwisterelement VOR der Gruppe.

<!-- 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 — immer ein Paar

Jeder Link MUSS sowohl ein Link-Attribut als auch ein Text-Attribut haben, unter ZWEI Namen — fld-link="X" auf <a>, fld-text="X text" auf einem Kind-<div>. Ein Name für beide lässt ein Feld URL und Beschriftung zugleich speisen. Telefon/E-Mail: nur opt-phone-link / opt-email-link — ein Attribut füllt href und sichtbaren Text. Ausnahme: Icon-Links ohne sichtbaren 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>

Bilder

fld-image gehört NUR auf <img>-Tags. fld-bg-image auf jedes Element mit Hintergrundbild.

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

Seitenweite Optionen

Elemente auf jeder Seite (Telefon, E-Mail, Logo, Adresse) sollten opt-* statt fld-* verwenden.

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

Sprachumschalter — das Rezept

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

Globale opt-*-Felder (Telefon, Adresse, Navigationsbeschriftungen) sind ebenfalls pro Sprache, sodass Kopf-/Fußzeile jeder Locale unterschiedlich sein können. Markiere sie wie üblich mit opt-* — kein Mehraufwand.

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: Wenn deine Website bereits über eine localhost-Adresse ausgeliefert wird, kannst du im Projekt diese Adresse angeben, statt das Archiv auf der Website hochzuladen (siehe „Quelle auf deiner Website“). Leg diese Datei im Stammverzeichnis der Website an und starte den Server mit: php -S localhost:8080 tf-cors.php. Nur themeforge.pro ist zugelassen — keine andere Website erhält Zugriff auf deine Dateien.

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

Sende den ganzen Satz in einer Anfrage: Einige Prüfungen betreffen den Satz, nicht eine Datei — ob es theme-options.html gibt, ob die Startseite dabei ist.

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