Authoring AI Canvas

AI Canvas e il widget Smart Builder Site libero per esperienze generate da codice. Opera dentro un wrapper isolato e riceve il contratto di WordPress, AI-HTML e Smart Bootstrap Manager.

Sequenza obbligatoria

Leggere contesto SBS.
Leggere Manifest AI-HTML.
Leggere governance SBM.
Identificare pagina, intento, pubblico e modalita Canvas.
Produrre HTML semantico completo.
Applicare token --sbin-canvas-*.
Aggiungere CSS confinato alla classe radice.
Aggiungere JavaScript solo come progressive enhancement.
Dichiarare dipendenze e plugin GSAP.
Validare schema, accessibilita, responsive e reduced motion.

Risorse AI-HTML obbligatorie

AI Canvas puo creare UI e contenuti locali, ma non possiede identita, menu, social, contatti o form globali. Quando una sezione deve usare queste risorse, deve consumare i componenti runtime dichiarati dal manifest:

<smart-logo variant="transparent" class="canvas-logo"></smart-logo>
<smart-menu location="naviga" class="canvas-menu" depth="3"></smart-menu>
<smart-social class="canvas-social"></smart-social>
<smart-contact field="email" link="true" class="canvas-contact"></smart-contact>
<smart-addon provider="contact_form_7" id="123"></smart-addon>

Sul progetto Smart eCommerce la location menu operativa e naviga. La AI deve comunque verificare resources.menus nel manifest e usare una location assegnata. Se nessun menu e assegnato, non deve inventare link: deve chiedere o produrre una sezione senza navigazione globale.

Esempio corretto

<section class="sec-canvas-hero">
  <header class="sec-canvas-hero__bar">
    <smart-logo variant="transparent" class="sec-canvas-hero__logo"></smart-logo>
    <smart-menu location="naviga" class="sec-canvas-hero__menu" depth="3"></smart-menu>
  </header>
  <h1>Esperienza generata con AI Canvas</h1>
</section>

Esempio vietato

<section class="sec-canvas-hero">
  <img src="/logo.png" alt="Logo inventato">
  <nav><a href="/servizi">Servizi</a><a href="/contatti">Contatti</a></nav>
</section>

Payload base

{
  "name": "project-example",
  "widget": "ai_canvas",
  "active": "on",
  "code": {
    "design_mode": "adaptive",
    "inherit_colors": "inherit",
    "inherit_typography": "inherit",
    "inherit_spacing": "inherit",
    "inherit_radius": "inherit",
    "inherit_components": "inherit",
    "inherit_motion": "inherit",
    "html": "<section class=\"project-example\">...</section>",
    "css": ".project-example { color: var(--sbin-canvas-text, #111827); }",
    "js": "",
    "gsap_plugins": []
  }
}

Divieti

Non modificare globalmente html, body, header o footer.
Non nascondere contenuto iniziale in attesa di JavaScript.
Non duplicare Bootstrap, GSAP o librerie governate da SBM.
Non inventare menu, form, attachment o social.
Non hardcodare logo o menu quando smart-logo e smart-menu sono disponibili.
Non usare form statici se il manifest espone smart-addon.
Non usare immagini senza alt, larghezza, altezza o strategia responsive.
Non inserire credenziali, nonce o dati personali.

Design mode

Mode	Uso
`governed`	massimo allineamento a SBM
`adaptive`	landing e sezioni editoriali ad alto impatto
`autonomous`	design locale isolato, senza toccare globali
`inherit`	eredita modalita globale

Prompt operativo

Genera un widget AI Canvas Smart eCommerce.
Usa HTML semantico completo e contenuto leggibile senza JavaScript.
Conserva CSS sotto una classe radice univoca.
Usa token --sbin-canvas-* in modalita governed/adaptive.
Dichiara media, dipendenze e fallback.
Restituisci solo JSON valido conforme allo schema AI Canvas.