Dessiner des écrans avec Design

Dans la barre d’activités, l’icône palette ouvre Design : un tableau blanc où un agent dessine des écrans et des composants en HTML/CSS. Vous ne voyez que le rendu, dans des cadres.

Créer un tableau

Nouveau tableau demande un Nom, un Projet et un Agent : Claude Code, Codex ou OMP. Avec Sans projet, l’agent travaille dans ~/.soreno/design. Il démarre à l’ouverture du tableau ; s’il s’arrête, Démarrer l’agent le relance. Logs ouvre son terminal par-dessus le tableau.

Le nom du tableau, en haut à gauche, ouvre la liste des tableaux : passer de l’un à l’autre, en créer, en renommer ou en supprimer un. Supprimer un tableau supprime ses cadres et sa session d’agent, arrêtée si elle tourne.

Le bouton Relancer du cadre A ciblé, la retouche prête à partir.

Demander un écran ou une retouche

Écrivez dans la barre de prompt, en bas, puis Entrée ; Maj+Entrée passe à la ligne. La demande part vers l’agent avec la cible affichée au-dessus du texte : Tout le tableau, le cadre sélectionné, ou un élément.

Pour viser un élément, activez Cibler un élément d’un cadre, ou T, puis cliquez dans un cadre. La croix de la cible, Cibler tout le tableau, revient à tout le tableau. L’agent reçoit la liste des cadres et, pour une cible, le HTML du cadre et de l’élément visé.

Comme vos remarques, la demande attend que l’agent puisse la recevoir : « Envoyé · lu à la fin du tour de l’agent » s’affiche en attendant. Un cadre apparaît ou change dès que l’agent l’a écrit.

Ranger les cadres

• glisser un cadre le déplace ; les flèches le décalent d’un pixel, Maj+flèche de dix ;
• les poignées du cadre sélectionné le redimensionnent ;
• un clic droit sur un cadre propose Dupliquer et Supprimer ;
• les cadres s’aimantent aux bords et au centre des autres, avec des repères ; Alt (Option sur macOS) suspend l’aimantation ;
• Annuler et Rétablir reprennent les déplacements, redimensionnements, duplications et suppressions.

Pour parcourir le tableau : la molette ou Espace + glisser déplace la vue, Ctrl+molette (Cmd+molette sur macOS) ou le pincement zoome. Les boutons en haut à droite zoomment, dézooment et affichent tout. Les raccourcis du tableau sont dans Raccourcis clavier.

Implémenter le design

Implémenter lance un agent de code sur Tout le tableau ou sur le cadre sélectionné. Choisissez le projet si le tableau n’en a pas, l’agent, des Instructions (facultatif), et Travailler dans un worktree dédié, coché par défaut. Chaque cadre lui est joint en fichier HTML, avec la consigne de reproduire le design avec le code du projet, sans copier ces fichiers. La session reste liée au tableau.

Lier un design à une session

Dans l’espace Projets, l’icône palette des onglets de session, Lier un design, ouvre le panneau Design à la place des outils du projet : Créer un design, ou choisissez un tableau dans la liste, que Rechercher un tableau filtre. Le tableau lié est transmis à l’agent si la session tourne. Une session suit un seul tableau.

Le tableau lié, à la place des outils du projet.

• Modifier dans Design : ouvrir le tableau ;
• Transmettre la dernière version : envoyer à l’agent l’état actuel du tableau, après vos retouches ;
• Délier : détacher la session du tableau.

Lier ou transmettre ne demande pas d’implémenter : l’agent accuse réception et attend votre demande.

Ce que les cadres peuvent faire

Les cadres s’affichent isolés : leur HTML n’exécute aucun script, et rien d’externe ne s’y charge, ni image, ni police, ni feuille de style distante. Seul le script de Soreno qui sert à cibler un élément s’y exécute. Cette isolation ne vaut que pour l’affichage : l’agent qui dessine garde les droits de sa configuration. Les tableaux et leurs cadres sont enregistrés dans Soreno, jamais dans vos dépôts.