Comment j'ai transformé Claude en outil de design avec Pencil.dev

L'auteur présente Pencil comme un outil de conception basé sur l'ambiance capable de transformer des prompts d'IA en designs visuels modifiables. Il souligne que l'outil gère nativement les composants, les kits UI et les variables CSS tout en étant entièrement gratuit pour le moment. L'enjeu est de savoir si Pencil peut s'imposer face à des géants comme Figma ou Sketch qui intègrent aussi des fonctions IA. Cette section établit que Pencil comble le fossé entre l'IA générative et le besoin de précision des designers. L'outil est particulièrement optimisé pour ceux qui utilisent Claude Code dans leur flux de travail quotidien.

Cette séquence explore l'interface de Pencil qui s'inspire fortement de l'ergonomie de Figma pour ne pas dépayser les utilisateurs. L'auteur effectue une démonstration technique en utilisant Claude Code dans un terminal pour piloter Pencil via un serveur MCP. On y voit la création en temps réel d'un tableau de bord pour une plateforme de gestion de rovers spatiaux. Claude utilise des outils de design par lot pour structurer la navigation et les éléments visuels de manière dynamique. Le processus montre une synchronisation fluide entre les instructions textuelles du terminal et le rendu visuel sur le canevas.

L'auteur examine la qualité du design généré, notant la pertinence des icônes, des couleurs et des bordures arrondies. Il démontre la facilité d'édition manuelle, comme la modification des marges intérieures (padding), prouvant que l'IA ne bloque pas la créativité humaine. La vidéo présente divers kits UI disponibles tels que Lunaris, Shadcn, Halo et Nitro pour varier les styles graphiques. L'utilisateur peut basculer en mode sombre ou changer les thèmes de boutons en quelques clics grâce aux paramètres de thématique intégrés. Cette flexibilité permet d'obtenir un résultat professionnel adapté aux attentes spécifiques des clients avant même la phase de codage.

Le présentateur lance un défi plus complexe : la création d'un site web pour une boulangerie française de style bohème. En utilisant des images provenant d'Unsplash et un guide de style spécifique, Claude génère trois pages complètes avec une mise en page soignée. Le résultat est jugé bluffant, l'auteur affirmant qu'il est difficile de deviner que le design provient d'une intelligence artificielle. Quelques ajustements mineurs sont nécessaires sur les textes, mais la structure globale reste solide et esthétique. Cette étape prouve que l'outil peut gérer des concepts créatifs abstraits et les transformer en interfaces cohérentes.

Dans cette partie, le design statique est converti en un site web fonctionnel pour vérifier la fidélité de la reproduction. L'auteur constate que les éléments comme le menu, les images et les sections de texte sont parfaitement respectés lors du passage au code. Un avantage majeur mentionné est la possibilité de connecter ces designs à des bases de données réelles via d'autres outils MCP. L'outil permet également l'importation de fichiers depuis Figma, assurant une interopérabilité avec les flux de travail existants. Le format JSON utilisé par Pencil est mis en avant comme un atout pour la compréhension mutuelle entre l'humain et l'agent IA.

L'auteur termine par une analyse honnête des défauts de jeunesse de Pencil, comme des lenteurs occasionnelles et des bugs d'affichage du chat. Il précise que ces problèmes sont mineurs et probablement en cours de résolution par l'équipe de développement. Bien qu'il ne soit pas designer de métier, il trouve Pencil plus simple à configurer que les solutions concurrentes de Sketch ou Figma. Un rappel est fait sur la gratuité temporaire du service, liée à son financement par capital-risque, incitant les utilisateurs à tester l'outil rapidement. La vidéo se clôt sur une recommandation de regarder d'autres tutoriels pour optimiser l'usage de Claude Canvas.