11 points par GN⁺ 4 시간 전 | Aucun commentaire pour le moment. | Partager sur WhatsApp
  • Démonstration d’un workflow réel montrant comment Claude Code est utilisé en développement produit concret, avec l’ajout en direct d’une fonctionnalité d’autocomplétion à Excalidraw
  • Même s’il s’agit d’une présentation par une designer, le contenu relève presque d’un workflow de développeur, en couvrant surtout un flux centré sur le CLI : exécution parallèle de plusieurs sessions Claude avec worktree, création de prototypes de fonctionnalités, validation dans le navigateur et ouverture d’une PR
  • L’idée centrale n’est pas d’utiliser l’IA simplement comme un outil qui écrit du code à la place de l’humain, mais de l’intégrer à une pipeline de développement produit allant de l’exploration d’idées → la comparaison d’implémentations → l’auto‑vérification → la rédaction de PR → l’intégration des retours de review → l’assistance au merge
  • Pour les designers, l’aspect utile est qu’elle reconnaît la limite actuelle de Claude, qui reste faible sur le jugement de design, tout en montrant comment générer rapidement plusieurs implémentations et les faire examiner via des PR avec captures d’écran et GIF afin d’améliorer à la fois la vitesse de décision design et le contrôle qualité
  • Pour les développeurs, l’intérêt est de voir des patterns concrets pour connecter Claude Code à un vrai dépôt et à un flux collaboratif, avec des éléments comme /prototype, loop, le mode d’autorisations automatiques, l’auto‑test basé sur Chrome, et l’automatisation du nettoyage de code, de la review et du merge de PR
  • Le point de vue selon lequel « ce n’est pas parce que tout le monde peut construire quelque chose que tout doit être déployé » est particulièrement important ; à l’ère de l’IA, davantage de personnes peuvent produire du code, ce qui impose d’étendre la validation, la review, l’implication du design et les critères de déploiement via des systèmes automatisés
  • Au final, cette vidéo montre moins comment une designer code avec l’IA que comment designers et développeurs peuvent expérimenter plus vite tout en préservant la qualité produit avec l’IA comme intermédiaire

Contexte de la présentation et intervenante

  • Meaghan Choi, lead designer de Claude Code
  • Elle conçoit des produits CLI depuis avant l’adoption de l’IA, a participé à la conception de Claude CLI et se décrit elle‑même comme une « CLI die-hard »
  • Elle explique que les membres d’Anthropic ont un accès permanent à ces outils et les utilisent toute la journée, ce qui crée une culture de recherche constante de méthodes de travail plus optimales
  • Elle précise que l’application desktop est plus accessible et que tout ce qui est montré dans la démo est également possible dans l’app desktop
    • Le CLI relève de sa préférence personnelle, ce n’est pas une méthode que les spectateurs doivent obligatoirement suivre

Mise en place d’un environnement de travail parallèle et rapide

  • worktree

    • Si plusieurs instances de Claude tournent en même temps sur un dépôt local, elles peuvent se marcher dessus et provoquer des conflits
    • worktree permet de créer des copies isolées du dépôt afin d’exécuter plusieurs tâches en parallèle
      • Quand des ingénieurs gardent 4 ou 5 Claude ouverts, c’est soit parce qu’ils ont dupliqué le dépôt en repo1, repo2, etc., soit parce qu’ils utilisent worktree
      • Avec claude --worktree, une nouvelle branche est automatiquement checkoutée, ce qui simplifie la gestion et est recommandé
  • Opus 1M · fast mode

    • L’intervenante utilise toujours Opus avec 1 million de contexte et le fast mode, même si l’accès peut être limité selon l’organisation
    • Elle précise qu’il s’agit d’un réglage destiné à accélérer une démo de 15 minutes, avec une légère différence de vitesse
  • auto mode

    • Les membres d’Anthropic utilisent systématiquement auto mode, comme alternative aux modes à faibles autorisations
    • Un classifier détecte les actions risquées, ce qui accélère fortement le travail en évitant de devoir confirmer sans cesse « Yes, accept »
  • Loop

    • Loop est un prompt standard qui signifie « continue jusqu’à ce que tout soit terminé » et pousse le travail à se répéter jusqu’à achèvement

Prompts et skill prototype

  • Elle demande à Excalidraw d’ajouter une fonctionnalité d’autocomplétion à partir d’un prompt simple, sans spec design détaillée
  • prototype skill

    • Elle a demandé à Claude de créer directement un slash prototype skill qui génère par défaut 5 implémentations (ou n variantes) d’une fonctionnalité, les prévisualise dans des fichiers HTML, puis itère
      • Elle souligne que les skills ne sont pas écrits à la main mais générés par prompt, en disant que « plus personne n’écrit les skills à la main aujourd’hui »
    • Claude doit d’abord choisir lui‑même une option et expliquer pourquoi ; elle dit trouver le résultat amusant à observer
    • Elle ajoute « recherche en ligne autorisée » et explique que, dans une codebase de production, elle lui aurait demandé de consulter Slack, Google Docs, l’historique des discussions, BigQuery et toutes les autres sources utiles
    • Elle demande ensuite d’implémenter la meilleure option, de la valider, d’aligner le style, puis de créer une PR avec captures d’écran
      • Le processus bascule alors de la lecture de transcript vers la review d’une PR contenant l’enregistrement de la fonctionnalité implémentée
    • Dans la démo, parmi les différentes propositions d’autocomplétion par onglets avancées par Claude, l’option n°2 est retenue après prise en compte de l’avis du public

Les 3 principes du travail

  • La plupart des LLM, Claude compris, restent faibles en design, donc l’humain doit continuer à intervenir pour le craft et la prise de décision
    • Ce n’est pas forcément une limite permanente, mais le workflow actuel repose sur l’idée que c’est l’humain qui décide de ce qui entre dans le produit
  • Il faut automatiser le code, mais aussi déléguer à Claude les tâches non liées au code ; sinon, on n’exploite pas le mode d’automatisation le plus poussé
  • Ce n’est pas parce que tout le monde peut shipper qu’il faut tout shipper ; maintenant que tout le monde peut pousser jusqu’en production, il faut des systèmes capables de passer à l’échelle

Automatisation des tâches non liées au code

  • Claude in the web (cloud)

    • Utilisé pour traiter en continu des centaines de petits ajustements de polish repérés dans l’application, sans ouvrir de session séparée
    • Quand les ingénieurs se plaignent du trop grand nombre de corrections, elle demande de les squasher dans une seule PR
      • De petits changements CSS peuvent parfois être approuvés automatiquement sans review, ce qui aide à préserver la qualité de finition du produit
  • Automatisation du merge de PR

    • Presque tous les membres de l’équipe laissent Claude tourner en permanence pour aider au merge des PR ; l’intervenante dit ne plus intervenir directement sur la CI ni sur l’étape juste avant le merge
    • simplify et code review servent en interne à nettoyer (prune) la codebase ; une équipe d’ingénierie qui utilise l’IA aura probablement des outils équivalents
    • commit push PR est une commande qui exécute en lot les vérifications internes
    • Une commande qui examine les PR ouvertes et les pousse jusqu’à l’étape de finalisation est intégrée aux skills
      • Elle est connectée à Slack et envoie automatiquement des DM aux reviewers de code ou aux personnes d’astreinte ; l’essentiel est l’intégration de cet ensemble d’outils
  • Claude in Chrome

    • Claude ouvre directement Chrome pour tester le comportement ; c’est selon elle la meilleure méthode pour l’auto‑vérification des changements frontend
    • Le flux consiste à capturer une série de captures sous forme de GIF, les publier, puis ouvrir une PR
  • Routine planifiée (Claude code work)

    • Une tâche planifiée scrape les changements frontend de tous les dépôts
    • Elle parcourt Slack, les transcriptions Google Meet, Google Docs et d’autres sources pour vérifier si un designer a participé ; sinon, le changement est signalé
    • En cas de non‑participation, elle examine le design et rédige en brouillon une PR de design contradictoire (adversarial design), puis envoie un DM à l’ingénieur concerné pour lui demander de collaborer avec un designer
      • Claude étant encore faible en design, la fonction de DM est désactivée, ce qui rejoint le premier principe (les LLM restent faibles en design)
    • L’idée est de pousser l’automatisation non pas jusqu’à l’étape suivante, mais jusqu’à l’étape après l’étape suivante, afin d’être prêt à l’appliquer immédiatement lors de la sortie du prochain modèle

Pourquoi c’est utile pour les designers et les développeurs

  • L’objectif même de la présentation est d’élever le niveau de travail des utilisateurs de Claude Code, en partageant directement des méthodes populaires en interne chez Anthropic
  • Du point de vue développeur, elle montre des commandes et comportements concrets qui accélèrent vraiment le quotidien : travail parallèle avec worktree, suppression des validations répétitives grâce à auto mode, automatisation du merge de PR et de la CI
    • Elle précise que des outils comme simplify et code review, utilisés dans la présentation, ont généralement des équivalents internes dans les équipes d’ingénierie qui utilisent l’IA, et recommande de voir cela avec son partenaire engineering
  • Du point de vue designer, elle pose clairement le principe que les LLM restent faibles en design, de sorte que l’humain reste responsable du craft et des décisions, l’automatisation ne jouant qu’un rôle d’assistance
    • Elle propose ainsi une approche où la qualité design est protégée par le système, par exemple avec une routine planifiée capable de détecter et signaler les changements frontend déployés sans participation d’un designer

Aucun commentaire pour le moment.

Aucun commentaire pour le moment.