Aide › Claude Design

Sortir ses pages de Claude Design

Objectif : un fichier HTML par page, importable tel quel à l'étape 1. Cette fiche décrit l'export, le découpage, le nommage, et les quelques attributs qui décident de la qualité de ce que le moteur pourra proposer.

Exporter depuis Claude Design

Ouvrez Claude Design : claude.ai/design, ou la barre latérale de l'application Claude pour ordinateur.
Ouvrez le projet qui contient vos pages.
Cliquez Export, en haut à droite (« Exporter » si votre interface est en français).
Choisissez une sortie HTML. Deux entrées du menu en produisent : Export as standalone HTML, qui rend un fichier autonome — polices, images et éléments de marque inclus dans le fichier — et Download as .zip, qui rend une archive.
Déposez le fichier tel quel. L'archive n'a pas besoin d'être décompressée, et vous n'avez rien à découper ni à renommer.

Les autres sorties du menu — PDF, PPTX, Canva, envoi vers un outil tiers, passage de relais à Claude Code — ne servent pas ici : le moteur compare du HTML.

Vous n'avez rien à préparer L'archive est ouverte pour vous, et ce qui n'est pas du HTML — feuilles de style, images, fichiers système — est ignoré sans que ce soit une erreur. Si l'export a mis plusieurs pages à la suite dans un même fichier, elles sont séparées automatiquement. Et chaque page est rapprochée toute seule de la page Odoo qu'elle remplace : vous n'avez qu'à confirmer, ou choisir dans une liste pour celles dont nous ne sommes pas sûrs.

Nommer les fichiers

Rien de ce qui suit n'est obligatoire. Le produit reconnaît déjà « accueil », « home », « contact », « panier », « cart », « produits », « mon compte » et leurs variantes, y compris avec un numéro d'ordre devant ou une version derrière : 03-panier-v2.html est reconnu comme le panier. Cette section sert seulement à comprendre ce qui aide, et à savoir quoi renommer si une page n'a pas été reconnue.

Le nom du fichier fait deux choses : il donne son nom à la page dans l'interface, et il aide à deviner de quelle page de votre site il s'agit.

Pour obtenir	Nommez le fichier
En-tête	header.dc.html, en-tete.dc.html, entete.dc.html, nav.dc.html, navbar.dc.html
Pied	footer.dc.html, pied.dc.html
Page ordinaire	Tout le reste

La reconnaissance se fait sur le mot, sans tenir compte de la casse : header-principal.dc.html est reconnu comme un en-tête. Elle ne connaît pas les accents : en-tête.dc.html passera pour une page ordinaire. Écrivez en-tete.

L'en-tête et le pied sont des pages à part entière : on les choisit, on les compare et on les discute comme les autres. Odoo, lui, en fait des templates partagés par tout le site — raison de plus pour les traiter séparément.

Ce que le moteur lit

La structure : les balises et leur imbrication.
Le texte des nœuds.
Les classes.
Quatre attributs : href, src, alt, title. Comparer tous les attributs produirait du bruit sur des attributs de rendu.
Les identifiants : id, name, data-oe-field, data-name, data-dc — dans cet ordre de solidité.
Le marqueur de cible data-odoo, s'il est présent.

Un fichier complet — <html>, <head>, <body> — est accepté : seul le <body> est retenu. Un fragment est accepté aussi.

Ce que le moteur ignore

Le <head>, donc le CSS du fichier et les polices qu'il déclare.
Le CSS en général. claude2odoo écrit des vues d'héritage, c'est-à-dire du XML de structure. Il ne transporte pas votre feuille de style vers le thème : la mise en forme reste à porter par le thème, comme avant.
Les commentaires HTML.
Les classes d'état — active, show, collapsed, focus, hover : elles sont posées par le navigateur, et les écrire en dur produirait du bruit en production.

Les classes de mise en page — col-6, pt-4, text-center, d-flex, bg-light… — sont lues et peuvent être proposées à l'ajout. Mais elles ne servent jamais d'ancre : elles disent où un bloc s'affiche, jamais lequel il est, et le prochain ajustement de la maquette les changera.

Les identifiants sur les blocs

C'est le point qui décide de tout le reste. Sans identifiant, le moteur apparie les blocs par leur signature — balise et classes nommantes — puis, à l'intérieur d'un groupe de frères qui se ressemblent, par leur rang. Un rang se déplace dès qu'on insère un bloc, et Odoo applique alors la modification au premier nœud trouvé, sans erreur.

Sur un bloc que vous voulez modifier

Reprenez l'identifiant qu'Odoo porte déjà. C'est le seul cas où un identifiant améliore l'appariement : deux nœuds qui partagent un identifiant sont le même nœud, quelle que soit leur place.

Regardez la source du template Odoo visé et recopiez son id tel quel sur le bloc correspondant de la maquette : <footer id="footer">, <div id="wrapwrap">.
Odoo nomme parfois par name ce que la maquette nomme par id. Les deux sont reconnus — l'un ou l'autre suffit, s'il est identique des deux côtés.
À défaut d'identifiant, gardez des classes qui nomment le bloc : o_hero_client, bloc-avantages. Une classe nommante peut porter une ancre, une classe de grille non.

Sur un bloc que vous ajoutez

Donnez-lui un identifiant à vous, qui n'existe pas dans Odoo — préfixez, par exemple dc_bandeau_offre. Un bloc inséré qui emporte un identifiant déjà présent dans l'arbre rend l'ancre ambiguë après combinaison : l'expression désignerait deux nœuds, et le moteur refuse l'écriture plutôt que de laisser Odoo choisir le premier.

Ne renommez pas d'un export à l'autre

Un identifiant qui change entre deux versions de la maquette fait voir au moteur un bloc disparu et un bloc nouveau, là où vous aviez modifié un bloc existant. Vous récolterez une insertion au lieu d'une modification.

Comment savoir si vos identifiants servent Après une comparaison, la colonne « Tient sur » de chaque écriture le dit : identité est le cas sûr ; classe distinctive tient tant que la classe reste ; chemin depuis une ancre et rang entre frères sont fragiles et vous vaudront un constat VÉRIFIER.

Désigner le template Odoo visé

Chaque page doit dire de quel template Odoo elle hérite. Deux façons, au choix :

Dans la maquette : posez data-odoo="module.template" sur l'élément racine, par exemple data-odoo="website.layout".
Dans l'interface : laissez le champ data-odoo de côté et renseignez « Template Odoo visé » sur l'écran de la page.

Un seul data-odoo par fichier Si la maquette en déclare plusieurs différents, le moteur refuse de choisir à votre place et s'arrête là. Se tromper de template ne lève aucune erreur : la vue est créée, elle se combine proprement, et elle n'atteint jamais de page.

Ce qui aide le moteur à produire quelque chose

Exportez la page entière, ou une section complète. Le moteur ne descend que dans un couple déjà apparié, et il exige que les effectifs concordent : une maquette qui montre un seul bloc là où Odoo en a cinq ne produit rien. Il refuse de deviner lequel des cinq est visé — un appariement qui glisse d'un cran écrit au mauvais endroit sans lever d'erreur.
Portez le texte par la feuille qui l'affiche, pas par son conteneur. Changer le texte d'un élément qui a des enfants imposerait de réécrire l'élément entier, et emporterait ce que d'autres vues y ont mis. Le moteur s'y refuse et le dit.
Ne réordonnez pas les blocs sans les renommer. Deux blocs que rien ne distingue hors leur texte s'apparient au rang. Le moteur détecte la plupart des échanges et refuse le groupe ; il ne les voit pas tous, et le dit à chaque écriture concernée.
Gardez des noms stables entre deux exports : c'est ce qui permet de suivre une page dans le temps.

Importer

Étape 1 du projet, encadré Importer des maquettes.
Sélectionnez tous les fichiers d'un coup : une page est créée par fichier.
Cochez les pages à traiter. Une page importée mais non cochée n'apparaît pas à l'étape 3 — l'étape 3 le signale, mais autant le savoir d'avance.

Ré-importer un fichier du même nom ne crée pas de doublon : c'est une nouvelle version de la maquette. L'empreinte, calculée sur le contenu, dira s'il a réellement changé. Rouvrir et réenregistrer un fichier sans le modifier ne déclenche donc rien.

Quand une maquette change après son intégration, la page repasse en « Maquette modifiée » : vous voyez ce qui diffère et vous décidez.

Avant d'importer, cette liste

Un fichier par page, extension .html.
L'en-tête et le pied nommés pour être reconnus, sans accent.
Un data-odoo par fichier au plus.
Les identifiants d'Odoo recopiés sur les blocs à modifier.
Un identifiant à vous sur chaque bloc ajouté.
Le texte porté par la feuille, pas par le conteneur.

Suite

Accéder à votre Odoo Sommaire de l'aide