Importer un projet dans Figma
Utilisez ce workflow uniquement pour une sortie Figma explicitement demandée (Code/Make autonome, Code Layer exécutable, ou calques Design éditables), ou une clé/un lien de fichier Figma donné comme destination. Les demandes génériques « créer un projet de code » ou « créer un composant de code », ainsi que les noms seuls de Figma Code/Make, ne spécifient pas cette sortie. Si l'intention de sortie n'est pas claire, demandez à l'utilisateur s'il souhaite un code local ou une sortie Figma, puis attendez avant de démarrer ce workflow.
Préservez le projet de l'utilisateur. Utilisez la description et le schéma actuels de chaque outil pour les prérequis et les paramètres.
Tenez l'utilisateur informé aux étapes principales : préparation et validation du projet, téléchargement de l'archive, et completion de l'import dans Figma. Signalez les imports en attente, les travaux de récupération et les blocages au fur et à mesure ; ne décrivez pas une étape non confirmée comme complétée.
1. Choisir la sortie et la destination
Identifiez la sortie prévue par l'utilisateur, puis chargez la skill appropriée selon le tableau ci-dessous. Si la sortie n'est pas claire, demandez à l'utilisateur avant de procéder.
| Entrée | Sortie demandée par l'utilisateur | Action suivante |
|---|---|---|
| App en cours d'exécution ou HTML statique | Non spécifiée — la placer/l'importer simplement dans Figma | Demandez « Calques Design éditables ou Code Layer ? » et terminez votre tour. Attendez la réponse. |
| App en cours d'exécution | Calques Design éditables | Chargez figma-generate-design, puis appelez generate_figma_design dans un fichier Design. |
| HTML statique | Calques Design éditables | Appelez html_to_figma dans un fichier Design. |
| App en cours d'exécution | Code Layer exécutable ou Code/Make autonome | Continuez avec cette skill et appelez send_code_to_figma. |
| HTML statique | Code Layer exécutable ou Code/Make autonome | Continuez avec cette skill et appelez send_code_to_figma. |
Un projet HTML avec des boutons fonctionnels reste ambigu si l'utilisateur n'a pas choisi la sortie. Un lien Design choisit uniquement la destination, non la sortie.
Avant de choisir une destination exécutable, appelez whoami. Ne choisissez ou n'importez un Code Layer Design que si whoami.code_layers_enabled est true ; sinon utilisez Code/Make autonome, ou expliquez la limitation et demandez avant de modifier une destination Design explicitement fournie.
Respectez une demande explicite de code-layer ou autonome avant d'appliquer l'heuristique du nombre d'écrans. Pour du code exécutable avec un lien Design, utilisez un Code Layer. Pour un lien autonome, utilisez autonome. Sans destination ou sans choix code-layer/autonome explicite, estimez les écrans : moins de 10 ou inconnu → Code Layer ; 10 ou plus → autonome. Ne demandez jamais Code Layer ou autonome et ne demandez pas à l'utilisateur de compter les écrans. Les destinations et liens explicites prennent priorité après le choix de sortie.
Utilisez l'URL de fichier fournie. Si un nouveau fichier est nécessaire, utilisez create_new_file avec le type de destination sélectionné et le plan choisi par l'utilisateur.
Créez un fichier Design pour un Code Layer demandé quand aucune destination n'est fournie.
Maintenez le choix de sortie confirmé fixe ; ne redemandez pas à l'utilisateur de choisir à nouveau après la création du fichier.
Pour les calques Design éditables, suivez les instructions de la skill sélectionnée : generate_figma_design capture la page rendue de l'app en cours d'exécution ; html_to_figma convertit un document HTML statique autonome. Inspectez les calques résultants et partagez le lien Design. Continuez ci-dessous uniquement pour une sortie de code exécutable.
2. Suivre la réponse d'import
Appelez send_code_to_figma avec la source locale sélectionnée et la destination en utilisant son schéma actuel. Suivez exactement les instructions de préparation et d'archive retournées ; préservez l'app et validez localement avant le téléchargement quand cela est demandé.
Suivez précisément les instructions de chaque réponse et l'argument retourné nextStep pour la préparation, la validation, le téléchargement, les imports en attente et la récupération de configuration. Complétez les prérequis retournés avant de progresser et passez les arguments de continuation complets inchangés. N'inventez pas une étape de récupération manquante. Quand aucun nextStep n'est présent, suivez les instructions de la réponse et la description actuelle de l'outil.
Terminez avec le lien de fichier/calque retourné et signalez uniquement les résultats d'import et d'aperçu établis par la réponse.