De Figma à un site web en direct · Le guide complet pour connecter Figma à Claude Code.

Imaginez l'ancienne méthode de travail : un designer crée des maquettes dans Figma, les envoie à un développeur, le développeur écrit le code, on fait des retours, le développeur corrige, encore des retours, un pixel par-ci, une couleur par-là. Des semaines de ping-pong et des dizaines de milliers de sjekels pour un seul site web. Le monde avance. En 2026, Claude sait lire directement à partir d'un fichier Figma. Le design passe d'une image statique à une instruction exécutée par l'IA. Vous restez designers. Vous n'avez pas besoin de comprendre le code. Vous ne dépendez pas d'un développeur. Claude est votre tiers parti · il travaille 24/7 sans que vous ayez à vous sentir mal à l'aise. Ce guide est le résumé de la session 19 du club AI Master avec Avivith Blumstein. Nous verrons comment connecter Figma à Claude Code via MCP, quels agents personnalisés professionnalisent le processus, quelles règles d'or du design Figma poussent Claude à produire un code précis, et comment déployer le résultat sur Vercel avec votre propre domaine.

Ce que vous aurez à la fin du guide

• Connexion MCP en direct entre Claude Code et votre compte Figma · Claude lit les fichiers directement, il ne devine pas
• Jeton API configuré de manière sécurisée · Non exposé dans le chat, enregistré dans .env
• Agents personnalisés · Copywriter, Critic, Developer, Launcher · Un bureau de design complet sans salaires
• Règles d'or pour le design Figma qui permettent à Claude de traduire 1:1 · Auto Layout, Variables, cadres corrects
• Processus de synchronisation bidirectionnelle · Une modification dans Figma est mise à jour dans le code, et vice-versa, via l'agent Design Sync
• Site web en direct · Localhost → GitHub → Vercel → Votre propre domaine

Pourquoi c'est important · Le fossé entre designer et développeur se referme

Étape 1 · 3 installations de base avant de commencer

Compte Figma payant

Professional et supérieur · Le compte gratuit ne permet pas l'utilisation de MCP

Le compte Figma gratuit ne permet pas la connexion MCP. Il faut au moins un abonnement Professional. Si vous voulez simplement tester · vous pouvez commencer par une période d'essai. Si vous travaillez déjà avec Figma · vérifiez dans les paramètres que vous avez le bon type de compte.

Conseil pour les agents : si le compte de votre entreprise est Professional · demandez à l'administrateur de vous ajouter. Il n'est pas nécessaire d'acheter un abonnement personnel séparé.

Node.js

Le moteur qui fait tourner le tout sous le capot

Node.js est l'environnement d'exécution JavaScript. Pensez-y comme à un traducteur · il prend le code écrit par Claude, l'exécute directement sur votre ordinateur (pas dans le navigateur), et permet de lancer un site web sur localhost avant de le mettre en ligne. L'installation prend deux minutes, c'est gratuit, et il faut le faire une seule fois.

Conseil pour les agents : choisissez la version LTS (à gauche) · plus stable. Après l'installation · ouvrez un terminal et tapez node -v. Si vous voyez un numéro de version · c'est bon.

Claude Code Desktop

L'approche pratique et puissante · pas le navigateur

Ne travaillez pas avec Claude dans le navigateur. Vous avez besoin de l'application de bureau Claude Code. Seule cette version peut accéder aux dossiers de votre ordinateur, se connecter à MCP et exécuter du code localement. La version web est bien pour les automatisations avec Gmail ou Drive · mais pas pour le développement.

Conseil pour les agents : après l'installation · connectez-vous à un compte Claude Pro (20 dollars/mois) ou Max (100 dollars/mois). L'atelier et les guides existants fonctionnent avec Pro.

💡 Claude Code vs Claude Cowork vs Claude Design · Tous sont basés sur le même moteur (Opus / Sonnet). Cowork est une version épurée et sympathique. Claude Design est une belle interface en ligne mais coûteuse (jetons séparés, pouvant atteindre 300 dollars). Claude Code réalise toutes les capacités des trois · et dispose d'un accès complet au bureau et à Figma via MCP. Une fois qu'on s'habitue à travailler avec, on ne revient pas en arrière.

Étape 2 · Attendez, c'est quoi Figma ?

🧰 Vous ne savez pas utiliser Figma ? Pas de stress. À la fin du guide, il y a un code QR pour la communauté de designers d'Avivith · 'Portfolio Lev'. Mais même sans savoir designer · vous pouvez aller sur Figma Community, télécharger un modèle prêt à l'emploi (Portfolio, Dashboard, Landing Page), et le connecter directement à Claude.

Étape 3 · Création d'un jeton API dans Figma (5 minutes)

Comment générer le jeton · Étape par étape

• Connectez-vous à Figma (navigateur ou bureau), cliquez sur votre avatar · Settings
• Onglet Security · faites défiler vers le bas jusqu'à Personal Access Tokens
• Generate new token · donnez-lui un nom significatif (par exemple 'Claude MCP')
• Expiration · choisissez 90 jours (le maximum disponible). Claude vous avertira lorsqu'il faudra le renouveler
• Portées (autorisations) · cochez celles-ci : File content (Read), File metadata, Library content (Read), Library assets (Read), Variables (Read), Design system (Read)
• Ne cochez pas celles-ci : File comments (Write), Webhooks · il vaut mieux ne pas donner à Claude des autorisations d'écriture sur des documents partagés avec d'autres
• Cliquez sur Generate token · vous obtenez une longue chaîne de lettres et de chiffres. Copiez-la dans un endroit sûr · elle ne sera plus visible

Vous voulez maîtriser Claude Code de zéro ?

Ce guide vous a donné les bases. Dans l'atelier complet Claude Code, nous construisons ensemble étape par étape : installation, CLAUDE.md, compétences, agents et site web en direct. 4 sessions enregistrées, accès à vie.

⚠️ Avertissement de sécurité des données · Ce jeton est un chèque en blanc. Ne le jetez pas dans le chat de Claude ! Ne l'enregistrez pas dans un fichier ordinaire ! Ne l'envoyez pas par e-mail ! La bonne méthode : mettez-le uniquement dans le Terminal (une seule fois) ou dans un fichier .env que Claude crée pour vous. Si le jeton a fuité · allez immédiatement dans Settings → Security → Revoke.

Étape 4 · Connexion MCP · Le pont entre Claude et Figma

La commande MCP à entrer dans le terminal (exemple · vous recevrez votre propre version depuis Figma)

claude mcp add figma-developer-mcp -- npx -y figma-developer-mcp --figma-api-key=YOUR_TOKEN_HERE --stdio

Comment exécuter la commande sans exposer le jeton

• Dans Claude Desktop · ouvrez le terminal interne (Cmd+J sur Mac, Ctrl+J sur Windows)
• Copiez la commande depuis Figma. À la place de YOUR_TOKEN_HERE · remplacez par le jeton que vous avez créé à l'étape 3
• Collez dans le terminal. Appuyez sur Entrée
• Attendez que la ligne apparaisse : 'Installed', 'Registered', 'Connected'
• Si quelque chose échoue · faites une capture d'écran du message et envoyez-la dans le chat à Claude. Il saura corriger
• Vérifiez que cela fonctionne · demandez à Claude : 'Explique-moi le statut du MCP'. S'il sait lister tous les outils de figma-developer-mcp · c'est bon

🔒 La différence entre Connector et MCP · Dans Claude, il y a des connecteurs prêts pour Figma (via Customize). Ils donnent un accès basique. Le MCP officiel de Figma offre un accès beaucoup plus large : lecture complète de la structure du fichier, des variables, des composants. Si vous êtes sérieux · utilisez MCP. Si vous jetez juste un œil · un Connector suffit.

Étape 5 · Première conversion · D'un fichier Figma à un site web en direct

Le processus de bout en bout

• Figma · Ouvrez le fichier que vous souhaitez convertir. Passez en Dev Mode. Faites Share → Copy Link
• Claude · Créez un nouveau dossier de projet (par exemple 'portfolio'), ouvrez une nouvelle session
• Collez le lien Figma et expliquez en hébreu : 'Je veux transformer cette belle chose en site web en direct. Travaille avec l'agent Figma Implement Design'
• Claude lit le fichier, analyse les calques, construit l'arborescence du code · React/HTML/CSS
• Ouvre Localhost · vous donne une URL (généralement http://localhost:3000) et ouvre un aperçu sur le côté
• Vous voyez le site web en direct. Responsive sur mobile, avec des états de survol (hover states), avec toutes les finesses. En 20 à 30 minutes

🎯 Sans agent · Claude construira un site web, mais il sera générique. Les agents professionnels (prochaine étape du guide) font la différence entre un 'site web qui a l'air d'avoir été construit par l'IA' et un 'site web qui a l'air d'avoir été conçu par un designer professionnel'.

Étape 6 · Les 4 agents qui professionnalisent le processus

Copywriter

Écrit avec votre voix · pas avec celle de l'IA

Un agent qui connaît votre ton · comment vous écrivez des titres, quels mots vous évitez, à quoi ressemble un appel à l'action (CTA) typique sur votre site web. Dynamique · s'améliore à chaque session. Il est possible de créer une version différente pour chaque projet · une version pour la marque personnelle et une version pour l'entreprise.

Conseil pour les agents : cet agent se met a jour apres chaque session. Vous avez termine un projet dont vous aimez le microcopy ? Dites a Claude : 'Conserve ce ton dans le Copywriter Agent'.

L'atelier complet Claude Code rassemble tout en un seul endroit : installation, skills, agents et creation de sites web. 4 sessions enregistrees a vie.

Critic

Revision automatique du design avant la mise en ligne

Une fois le site pret, cet agent l'examine et verifie : hierarchie visuelle, responsivite, accessibilite, conformite au design system et contraste WCAG. Au lieu de verifier manuellement, Claude vous dit exactement quoi corriger et ou.

Developer (Figma Implement Design)

Convertit le design en code, le cerveau du processus

L'agent principal. Il recoit un lien Figma, scanne le fichier, construit le code composant par composant, avec un CSS precis qui correspond 1:1 au design. Il prend en charge l'automatisation de la responsivite si le fichier a ete construit avec un Auto Layout approprie.

Conseil pour les agents : Avivit offre cet agent en cadeau a la communaute. Il sera envoye via le resume de la session au club.

Launcher

Pousse le code de Localhost vers la production

Vous avez termine le travail en local ? Cet agent pousse le code sur GitHub, le connecte automatiquement a Vercel, le deploie en ligne et renvoie une URL publique. Tout cela sans toucher au DevOps. Au lieu de 5 actions manuelles, une seule phrase.

🤖 Bonus · Design Sync. Un cinquieme agent mentionne par Avivit. Une fois le site en ligne, si vous modifiez quelque chose dans Figma (un client demande a changer une couleur), cet agent synchronise la modification dans le code de maniere bidirectionnelle. Figma ne meurt pas apres la premiere conversion, il continue de vivre aux cotes du code.

Etape 7 · 5 regles d'or pour le design Figma

Les regles sans compromis

• **Auto Layout partout** · Au lieu de placer les elements manuellement, utilisez l'Auto Layout. C'est ainsi que Claude sait creer une responsivite automatique. Sur mobile, les elements se placeront les uns sous les autres sans casser le design
• **Noms de calques logiques** · Pas de 'Frame 1', pas de 'Group 2'. Un bouton s'appelle 'Button-Primary', une zone hero s'appelle 'Section-Hero'. Claude s'emmele les pinceaux avec des noms generiques et produit un code confus
• **Variables pour les couleurs, polices et espacements** · Au lieu d'ecrire #FF6B00 partout, creez une variable 'color/primary' et utilisez-la. Claude la traduit en variables CSS et le site devient modifiable globalement en une seule ligne
• **Frame, pas Group** · Utilisez toujours des frames (touche F). Un groupe est une structure ancienne mal lue par Claude. Une frame offre toute la puissance, la flexibilite, l'Auto Layout et la responsivite
• **Icones en SVG ou Component** · S'il s'agit d'une icone, importez-la en SVG (format vectoriel qui ne se pixelise pas) ou creez-en un composant. Une icone en PNG poussera Claude a creer une image plutot qu'un code propre, rendant le site plus lourd et moins flexible

📚 Ce n'est pas construit en Auto Layout ? Ce n'est pas grave. Il existe un skill nomme 'Strap Grid Builder' qui sait traduire des designs sans Auto Layout en une bonne responsivite. C'est un bon point de depart, mais la source reste preferable.

Etape 8 · Vous n'avez pas de design pret ? Figma Community

Figma Community

Des milliers de modeles de design gratuits et disponibles immediatement

Une immense bibliotheque de templates : UI Kits, Dashboards, Mobile Apps, Landing Pages, Icons, Illustrations. La plupart sont gratuits. Cliquez sur un modele, 'Open in Figma', le template est copie dans votre compte, vous l'editez et vous l'envoyez a Claude.

Conseil pour les agents : lors de la recherche, filtrez par 'Free'. Il vaut la peine de consulter les avis de la communaute, un modele avec 50 000 telechargements est probablement bien structure.

Vous voulez maitriser Claude Code de zero ?

Ce guide vous a donne les bases. L'atelier complet Claude Code vous permet de construire ensemble etape par etape : installation, CLAUDE.md, skills, agents et un site web en ligne. 4 sessions enregistrees, acces a vie.

Etape 9 · De Localhost a la production · GitHub + Vercel

Commandes pour Claude · Copier-coller

• 'Cree-moi un repo prive sur GitHub et pousse le code'
• 'Connecte ce repo a Vercel et deploie en Production'
• 'J'ai un domaine avivit-portfolio.com achete chez Cloudflare. Connecte-le au projet et mets a jour les enregistrements DNS'
• 'Ajoute Google Analytics 4 au site et connecte mon Property ID'

💰 Associez 3 outils ensemble : GitHub gratuit, Vercel gratuit (jusqu'a 100 Go de trafic par mois), Figma Professional est le seul frais. Si vous avez l'atelier et le club, le ROI du premier site rembourse la depense par 50.

Foire aux questions de la session

Pas bientot. Claude Design est une interface de design sur le site de Claude (pas sur le bureau). Elle est jolie, rapide et sait produire des designs basiques, mais elle est tres limitee. Ses jetons sont separes de Claude Code, couteux et s'epuisent rapidement. Avivit a atteint 300 dollars sur un seul compte. Ceux qui travaillent avec Claude Code sur le bureau peuvent obtenir les memes resultats sans cout supplementaire. Figma reste la norme professionnelle pour le design complexe.

Oui, mais avec une difference : au lieu de creer le design vous-meme dans Figma, vous allez sur Figma Community, telechargez un modele pret a l'emploi (portfolio, tableau de bord, landing page), modifiez les textes et les images, et le connectez a Claude. Avivit suggere egalement de demander a Claude 'construisons un design system ensemble'. Vous lui donnez des images, un moodboard, des idees, et Claude genere la base.

Un skill est une capacite definie : 'montage video', 'redaction en hebreux', 'test d'accessibilite'. Claude l'active lorsqu'il est pertinent. Un agent (Sub-Agent) est une entite dotee d'un 'cerveau' complet, capable d'executer une serie d'actions, de prendre des decisions et de declencher d'autres skills. Dans Figma + Code, l'agent 'Developer' peut activer des skills de 'CSS Optimization', 'Accessibility' et 'OKLCH Colors' simultanement. Les debutants utilisent des skills. Les utilisateurs avances construisent des agents.

Avivit a teste sans agents, les resultats etaient moins bons. Les agents conferent des super-pouvoirs : chacun est entraine pour une tache specifique, sait comment vous voulez qu'il pense et travaille en coordination avec les autres. L'investissement initial de 2 a 3 heures pour creer un agent en vaut la peine, car il travaille ensuite pour vous pour l'eternite.

Etape par etape : 1) Assurez-vous que votre compte Figma est payant. 2) Verifiez que Node.js est installe, tapez `node -v` dans le terminal pour obtenir un numero de version. 3) Verifiez que le jeton est toujours valide, si 90 jours se sont ecoules, generez-en un nouveau. 4) Faites une capture d'ecran de l'erreur du terminal et envoyez-la au chat de Claude. Il sait identifier 95 % des pannes.

Non. Il y a deux facons : 1) Modifier le design directement dans Figma et activer l'agent Design Sync, Claude synchronise la modification dans le code. 2) Dire simplement a Claude 'change le bouton principal en bleu' sans toucher a Figma, il modifiera le code directement. La premiere methode est plus professionnelle, Figma et le code restent synchronises.

Cursor et VS Code sont des IDE, des environnements de developpement classiques destines aux developpeurs. Ils necessitent des connaissances techniques de base. Claude Code Desktop a ete concu pour les utilisateurs non developpeurs : interface intuitive, moins de dependance au terminal, experience plus propre. Toutes les capacites de Cursor existent egalement dans Claude, mais avec une interface plus accessible.

Il est possible de developper directement dans Claude pour obtenir un site. Mais Figma vous offre un controle visuel complet avant d'ecrire une seule ligne de code : vous voyez les sections, la hierarchie, les couleurs et pouvez les mettre a jour instantanement. Lorsque vous transmettez cela a Claude, le resultat est plusieurs fois plus precis. De plus, Figma permet de partager le design avec un client pour approbation avant d'investir dans le developpement. Pour les petits projets, allez directement sur Claude. Pour les projets professionnels, passez par Figma.

Le connecteur (Customize -> Connectors -> Figma) donne un acces de base : Claude peut lire certaines parties du fichier et effectuer des manipulations mineures. Il ne va pas en profondeur dans le fichier, ne voit pas toutes les variables, ne lit pas toute la hierarchie des composants et ne peut pas ecrire ni mettre a jour. Le MCP officiel de Figma offre un acces complet : lecture approfondie, acces au design system et capacite d'executer des actions. Si vous prenez le processus au serieux, utilisez le MCP. S'il ne s'agit que d'un essai ponctuel, le connecteur suffit.

Le terminal n'a pas besoin de rester ouvert, Claude Desktop le gere en arriere-plan apres la connexion initiale. Pour eviter que Claude ne parte dans des delires imaginatifs, utilisez le Plan Mode (bouton au bas de Claude). Il y presente un plan de travail avant de se lancer, que vous validez. Autre astuce : donnez-lui des instructions claires avec des valeurs precises ('colonne droite, largeur 320px, arriere-plan #FFFFFF') plutot que des formulations ouvertes ('joli titre'). Plus le prompt est precis, plus le resultat l'est.

Cela depend du type d'agent. Un agent Developer generique qui fonctionne avec n'importe quel projet Figma vaut la peine d'etre partage entre les projets. Un agent Copywriter gagne a etre separe pour chaque projet (car le ton change entre un projet personnel et un projet client). La methode d'Avivit : creer un agent de base et le copier dans chaque dossier de projet en y apportant de petits ajustements adaptes au projet specifique.

Claude ne charge que les agents pertinents pour la requête spécifique, et non pas tous. Les agents inactifs ne surchargent pas les jetons. Cependant, si vous avez 30 agents dans un dossier, Claude risque de ne pas savoir lequel choisir. Avivit recommande un maximum de 5 à 7 agents par dossier de projet. Le reste doit être placé dans des dossiers séparés.

Claude sait gérer les deux, mais il faut le lui demander. Pour le SEO, demandez : 'Ajoute des balises Meta selon les codes de Google, un sitemap.xml, un robots.txt et des données structurées'. Pour la sécurité, demandez : 'Ajoute le HTTPS via Vercel, assure-toi qu'il n'y a pas de secrets dans le code et configure des en-têtes CSP'. Les compétences à installer sont 'Israeli Privacy Shield' pour la confidentialité et 'Israeli Accessibility Compliance' pour l'accessibilité. Nous avons mentionné les deux dans le guide 'Vibe Coding'.

Cela dépend du paramètre. Lors de la création d'un nouveau dépôt sur GitHub, vous pouvez choisir Public (ouvert à tous) ou Private (uniquement pour vous et les personnes que vous invitez). Le paramètre par défaut d'un compte gratuit peut être Public. Lorsque vous parlez à Claude, demandez toujours de 'créer un dépôt privé' ou 'Create a Private repository'. Si c'est par erreur en mode Public, allez dans GitHub → Settings → General → Danger Zone → Change visibility.

Il y a trois options. 1) Dire à Claude : 'Mets à jour le texte du Hero par X'. Il met à jour le code et le redéploie sur Vercel. C'est rapide pour des modifications ciblées. 2) Enregistrer le contenu dans un fichier JSON ou MD séparé à l'intérieur du projet. Vous pouvez l'éditer simplement sans toucher au code lui-même. 3) Connecter un CMS externe (Notion, Airtable, Sanity) que vous mettez à jour. Claude construit une infrastructure qui y pèse automatiquement. La première est la plus simple, la troisième est la plus professionnelle.

En principe, oui. Lovable, Bolt, Replit Agent sont tous des outils de 'Vibe Coding' qui génèrent des sites web à partir de descriptions. La différence est qu'ils s'agit d'outils fermés, vous êtes limité par ce qu'ils permettent et ils ont des abonnements séparés. Claude Code fonctionne pour les sites web, les automatisations, les agents et le montage vidéo avec un seul abonnement. De plus, Claude vous donne accès au code lui-même, vous en êtes propriétaire et vous pouvez passer à n'importe quelle plateforme. Avec Lovable, il y a un risque d'enfermement propriétaire.

Figma est la norme professionnelle pour la conception de produits numériques avec 16 ans sur le marché, un écosystème immense et un MCP officiel pour Claude. Stitch AI est un outil plus récent qui génère des designs à partir de texte. Il est agréable pour expérimenter, mais moins professionnel pour des projets complexes. Si vous construisez une fois par décennie, Stitch suffira. Si vous construisez des produits sérieusement, utilisez Figma.

Il y a trois façons de faire. 1) Claude le construit pour vous. Téléchargez un moodboard, des sites que vous avez aimés, des images représentant la marque et dites : 'Construis-moi un design system'. Il crée une palette, des polices, des espacements et une hiérarchie. 2) Achetez un modèle prêt à l'emploi sur Figma Community et modifiez les couleurs et les polices selon vos goûts. 3) Utilisez la compétence 'UI/UX Pro Max' ou 'Web Design Guidelines' avec 50 styles et 161 palettes de couleurs prêtes. Avivit a présenté par le passé une session entière sur la création d'un design system, disponible sur la plateforme du club.

Oui. Voici des exemples de la communauté : 1) Claude crée le site et envoie une mise à jour sur Slack. 2) Un changement est fait dans Figma, Claude se synchronise, pousse vers GitHub et Vercel déploie automatiquement. 3) Claude crée le site, télécharge des captures d'écran sur Drive et envoie un e-mail au client avec le lien. Tout cela se fait via Make.com ou via des MCP supplémentaires que l'on peut ajouter à Claude.

🚀 L'étape suivante · L'atelier complet Claude Code

Foire aux questions

Est-ce que Claude Design va remplacer Figma ?

Pas de sitôt. Claude Design est une interface de conception sur le site de Claude (pas sur le bureau). Elle est belle, rapide et sait générer des designs basiques, mais elle est très limitée. Ses jetons sont séparés de Claude Code, coûteux et s'épuisent rapidement. Avivit a atteint 300 dollars sur un seul compte. Quiconque travaille avec Claude Code sur le bureau peut obtenir les mêmes résultats sans coût supplémentaire. Figma continue d'être la norme professionnelle pour la conception complexe.

Je ne suis pas designer, ce guide est-il pertinent pour moi ?

Oui, mais avec une différence : au lieu de créer le design vous-même dans Figma, vous allez sur Figma Community, téléchargez un modèle prêt à l'emploi (portfolio, tableau de bord, landing page), modifiez les textes et les images, et le connectez à Claude. Avivit suggère également de demander à Claude : 'Construisons un design system ensemble'. Donnez-lui des images, un moodboard, des idées et Claude générera la base.

Quelle est la différence entre un sous-agent et une compétence ?

Une compétence est une capacité définie comme le montage vidéo, la rédaction en hébreu ou le test d'accessibilité. Claude l'active lorsqu'elle est pertinente. Un sous-agent est une entité dotée d'un esprit complet qui sait exécuter une série d'actions, prendre des décisions et activer d'autres compétences. Dans Figma et Code, un agent Developer peut activer simultanément des compétences d'optimisation CSS, d'accessibilité et de couleurs OKLCH. Les débutants utilisent des compétences. Les utilisateurs avancés construisent des agents.

Est-il obligatoire de construire des agents pour obtenir des résultats professionnels ?

Avivit a testé sans agents et les résultats étaient moins bons. Les agents confèrent des super-pouvoirs : chacun est formé pour une tâche spécifique, sait comment vous voulez qu'il réfléchisse et travaille en coordination avec les autres. L'investissement initial de 2 à 3 heures pour créer un agent en vaut la peine, car il travaille ensuite pour vous éternellement.

La connexion a échoué, que faire ?

Suivez ces étapes : 1) Vérifiez que votre compte Figma est payant. 2) Vérifiez que Node.js est installé en tapant `node -v` dans le terminal pour obtenir un numéro de version. 3) Vérifiez que le jeton est toujours valide. S'il s'est écoulé 90 jours, générez-en un nouveau. 4) Faites une capture d'écran de l'erreur du terminal et envoyez-la au chat de Claude. Il sait identifier 95 % des pannes.

Que se passe-t-il lorsque j'ai un site en ligne et qu'un client demande des modifications, doit-on recommencer à zéro à chaque fois ?

Non. Il y a deux façons de faire. 1) Modifier le design directement dans Figma et activer l'agent Design Sync. Claude synchronise la modification avec le code. 2) Dire simplement à Claude de 'changer le bouton principal en bleu' sans toucher à Figma. Il modifiera le code directement. La première méthode est plus professionnelle, car Figma et le code restent synchronisés.

Quelle est la différence entre cette connexion et Cursor ou VS Code ?

Cursor et VS Code sont des environnements de développement classiques (IDE) destinés aux développeurs. Ils nécessitent des connaissances techniques de base. Claude Code Desktop a été conçu pour les utilisateurs qui ne sont pas développeurs avec une interface intuitive, moins de dépendance au terminal et une expérience plus épurée. Toutes les capacités de Cursor existent également dans Claude, mais avec une interface plus accessible.

Pourquoi construire dans Figma et pas directement dans Claude ?

Il est possible de construire directement dans Claude et d'obtenir un site web. Mais Figma vous offre un contrôle visuel complet avant d'écrire une seule ligne de code. Vous voyez les sections, la hiérarchie et les couleurs, et vous pouvez mettre à jour instantanément. Lorsque vous transférez cela à Claude, le résultat est bien plus précis. De plus, Figma permet de partager le design avec un client pour approbation avant d'investir dans le développement. Pour les petits projets, allez directement dans Claude. Pour les projets professionnels, passez par Figma.

Pourquoi le connecteur standard de Claude pour Figma ne suffit-il pas ?

Le connecteur (Customize, Connectors, Figma) offre un accès basique. Claude peut lire des parties du fichier et effectuer des manipulations mineures. Il ne va pas en profondeur dans le fichier, ne voit pas toutes les variables, ne lit pas toute la hiérarchie des composants et ne peut pas écrire ni mettre à jour. Le MCP officiel de Figma offre un accès complet : lecture approfondie, accès au design system et capacité d'exécuter des actions. Si vous prenez la démarche au sérieux, utilisez le MCP. Si c'est juste un essai ponctuel, le connecteur suffit.

Le terminal doit-il rester ouvert tout le temps ? Comment empêcher Claude d'être trop créatif ?

Le terminal n'a pas besoin de rester ouvert. Claude Desktop le gère en arrière-plan après la connexion initiale. Pour éviter que Claude ne parte dans une imagination débordante, utilisez le Plan Mode (un bouton au bas de Claude). Il y présente un plan de travail avant de se lancer dans la construction, et vous l'approuvez. Autre astuce : donnez-lui des instructions claires avec des valeurs précises ('colonne de droite, largeur 320 px, arrière-plan #FFFFFF') au lieu de formulations vagues ('joli titre'). Plus le prompt est précis, plus le résultat l'est.

Chaque projet nécessite-t-il son propre agent ? Ou peut-on partager un agent pour plusieurs projets ?

Cela dépend du type d'agent. Un agent Developer générique qui fonctionne avec n'importe quel projet Figma peut être partagé entre les projets. Pour un agent Copywriter, il vaut mieux un agent séparé par projet, car le ton varie entre un projet personnel et un projet client. La méthode d'Avivit consiste à créer un agent de base et à le copier dans chaque dossier de projet tout en effectuant de petites mises à jour adaptées au projet spécifique.

Si l'on donne tous les agents à Claude, cela ne coûte-t-il pas plus de jetons ?

Claude ne charge que les agents pertinents pour la requête spécifique, et non pas tous. Les agents inactifs ne surchargent pas les jetons. Cependant, si vous avez 30 agents dans un dossier, Claude risque de ne pas savoir lequel choisir. Avivit recommande un maximum de 5 à 7 agents par dossier de projet. Le reste doit être placé dans des dossiers séparés.

Qu'en est-il des tests de sécurité et du SEO pour un site sortant de Claude ?

Claude sait gérer les deux, mais il faut le lui demander. Pour le SEO, demandez : 'Ajoute des balises Meta selon les codes de Google, un sitemap.xml, un robots.txt et des données structurées'. Pour la sécurité, demandez : 'Ajoute le HTTPS via Vercel, assure-toi qu'il n'y a pas de secrets dans le code et configure des en-têtes CSP'. Les compétences à installer sont 'Israeli Privacy Shield' pour la confidentialité et 'Israeli Accessibility Compliance' pour l'accessibilité. Nous avons mentionné les deux dans le guide 'Vibe Coding'.

Mes fichiers sur GitHub sont-ils ouverts à tout le monde ?

Cela dépend du paramètre. Lors de la création d'un nouveau dépôt sur GitHub, vous pouvez choisir Public (ouvert à tous) ou Private (uniquement pour vous et les personnes que vous invitez). Le paramètre par défaut d'un compte gratuit peut être Public. Lorsque vous parlez à Claude, demandez toujours de 'créer un dépôt privé' ou 'Create a Private repository'. Si c'est par erreur en mode Public, allez dans GitHub → Settings → General → Danger Zone → Change visibility.

Que se passe-t-il lorsque l'on souhaite mettre à jour du contenu sur le site en direct alors que nous n'avons pas de gestionnaire de contenu ?

Il y a trois options. 1) Dire à Claude : 'Mets à jour le texte du Hero par X'. Il met à jour le code et le redéploie sur Vercel. C'est rapide pour des modifications ciblées. 2) Enregistrer le contenu dans un fichier JSON ou MD séparé à l'intérieur du projet. Vous pouvez l'éditer simplement sans toucher au code lui-même. 3) Connecter un CMS externe (Notion, Airtable, Sanity) que vous mettez à jour. Claude construit une infrastructure qui y pèse automatiquement. La première est la plus simple, la troisième est la plus professionnelle.

Est ce que cela remplace Lovable / Bolt / Replit ?

En gros · oui. Lovable, Bolt, Replit Agent · ce sont tous des outils de Vibe Coding qui génèrent des sites web à partir d'une description. La différence · ce sont des outils fermés, vous êtes limités par ce qu'ils permettent, et ils ont des abonnements séparés. Claude Code · fonctionne aussi sur les sites web, les automatisations, les agents, l'édition vidéo · un seul abonnement. De plus · Claude vous donne accès au code lui-même, vous en êtes propriétaires, vous pouvez passer à n'importe quelle plateforme. Sur Lovable · il y a un vendor lock-in.

Figma par rapport à Stitch AI · que choisir ?

Figma est le standard professionnel pour la conception de produits numériques · 16 ans sur le marché, un écosystème immense, MCP officiel pour Claude. Stitch AI est un outil plus récent · génère des designs à partir de texte, sympa pour expérimenter, mais moins professionnel pour des projets complexes. Si vous construisez une fois par décennie · Stitch suffira. Si vous construisez des produits sérieusement · Figma.

Nous sommes des entrepreneurs sans background en design · comment construire un design system ?

Trois façons · 1) Claude le construit pour vous · vous lui uploadez un moodboard, des sites que vous avez aimés, des images représentant la marque, et vous dites 'construis-moi un design system'. Il crée une palette, des polices, des espacements, une hiérarchie. 2) Vous achetez un modèle prêt à l'emploi sur Figma Community · vous modifiez les couleurs et les polices à votre goût. 3) Vous utilisez la skill 'UI/UX Pro Max' ou 'Web Design Guidelines' · 50 styles, 161 palettes de couleurs prêtes. Avivit a présenté par le passé une session entière sur la construction d'un design system · disponible sur la plateforme du club.

Est il possible de connecter ce flux à d'autres automatisations ?

Oui. Exemples de la communauté · 1) Claude crée le site → envoie une mise à jour sur Slack. 2) Modification dans Figma → Claude synchronise → pousse vers GitHub → Vercel déploie automatiquement. 3) Claude crée le site → uploade des captures d'écran sur Drive → envoie un e-mail au client avec le lien. Tout cela via Make.com ou via des MCPs supplémentaires que l'on peut ajouter à Claude.