Développer une app avec l’IA : j’ai sorti un business en dix jours avec Claude Code

Le 22 septembre au soir, j’ouvre Claude Code et je lui explique mon problème : je perds un temps fou à mettre en page mes storyboards.
Le 1^er octobre à midi, Pictrd est en ligne. Tout le monde peut télécharger l’app certifiée Apple via un site dédié :)

Le plus fou : entre les deux, je n’ai pas écrit une seule ligne de code. Par contre, mon expérience de dev et Directeur Artistique m’ont été très utiles.

Le point de départ : dix ans de storyboards à la main

Sur mes tournages pub ou fiction chez épicentre production, le storyboard, c’est le document qui fait foi. Et pendant dix ans, je les ai montés à la main dans Illustrator et Photoshop. C’était long et fastidieux, du coup je me suis demandé s’il n’était pas possible d’optimiser ce process ; et de créer une app dédiée à la mise en page de mes story board.

Ni une ni deux, j’ai décidé de faire ça avec Claude Code.

Claude Code, c’est quoi ?

Claude Code, c’est l’agent de code d’Anthropic, l’entreprise qui fait l’IA Claude. Je l’utilise dans l’app Claude sur mes Mac.

La différence avec un chatbot classique, c’est qu’il ne se contente pas de répondre. Il lit les fichiers du projet, écrit le code, le lance, regarde le résultat, et recommence jusqu’à ce que ça marche. Il peut ouvrir l’app dans un navigateur, cliquer, faire une capture d’écran et vérifier que le bouton est bien à sa place.

Bref, il est bien plus autonome qu’un simple chatbot.

Ma façon de bosser avec lui est très simple : je lui écris en français ce que je veux, comme je l’écrirais à un développeur. Il le fait, je teste, je réponds. Et ainsi de suite.

On appelle parfois ça du « vibe coding ». Je n’aime pas trop le terme : il laisse penser qu’on code au feeling. Dans les faits, c’est plutôt de la direction de projet. Mon expérience en dev me permet de le cadrer et d’éviter les erreurs. Voyez plutôt Claude comme une armée de dev indépendants que vous auriez intégré à votre projet.

Avant de coder : fixer un cadre à l’IA

Ce que 90% des vibe coders font, c’est de demander à Claude de créer une app ; sans en fixer le cadre.
Et pourtant, il est super important de poser les bases du projet dès le premier prompt :

• périmètre du projet,
• système de versioning,
• règles de prise de décision,
• Nomenclature, …

Tout ça doit être cadré avant même de commencer à coder.

Donner une mémoire à Claude Code

Une IA oublie tout d’une session à l’autre. Et moi, je bosse sur deux Mac : un MacBook Pro et un Mac Studio, avec le projet dans Dropbox.
Sans précaution, chaque nouvelle session repartait de zéro.

Donc le premier soir, avant la moindre ligne de code, on a posé des règles :

• un fichier CLAUDE.md à la racine du projet, que Claude relit automatiquement au début de chaque session, sur chaque Mac. C’est la mémoire du projet : ce qu’on a décidé, pourquoi, ce que je préfère, ce qu’il ne faut plus jamais faire ;
• un journal par jour, où Claude note chaque action au fil de l’eau, avec l’heure et la machine ;
• une liste de tâches ;
• des sauvegardes horodatées avant chaque modification risquée.

Aujourd’hui, le CLAUDE.md fait près de 25 000 mots, et le journal dépasse les 200 entrées. Quand je reprends le projet sur l’autre Mac, Claude sait ce qui s’est fait la veille.

Fixer un environnement de travail

La seconde étape a été de mettre en place un environnement de travail. J’ai donc créé des dossiers et sous-dossiers par thème / fonction pour que tout soit compréhensible par un humain :

De cette manière, je peux à tout moment vérifier ce que fait l’IA, et au besoin la corriger.

Se préparer au pire : mettre en place des sauvegardes

Dernier point : on est jamais à l’abri d’une erreur ou d’un problème d’alignement entre l’IA et l’humain.
N’oubliez donc pas de mettre en place un Git ou un système de sauvegardes ;)

À retenir : avec une IA, l’organisation compte plus que le prompt.

Première étape : partir de l’existant

Plutôt que de décrire un storyboard idéal, j’ai donné à Claude un vrai livrable : le PDF de 12 pages d’une pub que j’avais montée à la main.

Il l’a disséqué, analysé les tailles de typo et les blanc tournants. Puis il a écrit un programme qui reproduit ces pages à partir d’un simple fichier de données.

Une heure plus tard, j’avais une réplique de 12 pages sur 12, très proche de l’original, en HTML et CSS.

Ensuite, je l’ai corrigé comme je corrigerais un graphiste :

• supprime « Matériel »,
• ajoute « Dialogue » et « SFX » sous chaque plan,
• la caméra et l’optique toujours en bas de colonne.

Trois allers-retours, et la structure du storyboard était calée.

À retenir : partez d’un exemple réel. L’IA est bien meilleure pour reproduire et améliorer que pour deviner.

Les choix techniques, sans jargon compliqué

Ensuite, il a fallu fabriquer une vraie app Mac. C’est là que j’ai compris comment travailler avec Claude sur les sujets que je ne maîtrise pas forcement.

Fort de mon expérience en développement de sites internet, j’avais quand même des notions et je savais où aller.
Mais en ce qui concerne la création d’une app native, j’étais loin d’être au point.

Donc plutôt que de prompter bêtement à Claude : code moi une app ; je lui demandais de me décrire les options, avec leurs conséquences pour moi et pour les futurs utilisateurs.
Il me les exposait, et c’est moi qui tranchais.

Pour les curieux : Pictrd est écrit en Python, embarqué dans l’app. L’interface est une page web affichée dans une fenêtre Mac native (pywebview), et le PDF est produit par WebKit, le moteur de Safari. Environ 10 000 lignes de code, que je n’ai pas écrites.

Le design reste le mien

Il y a une chose que je n’ai jamais déléguée : le design.

Parce que la V1 de l’application pensée par Claude, elle n’était ni ergonomique, ni belle.

J’ai donc décidé de prendre en main le design. L’interface, l’icône et le logo, je les ai dessinés moi-même. Claude, lui, a su intégré tout ça en étant fidèle à 95%.

Et quand ce n’était pas fidèle, je lui renvoyais la maquette. « Dans mon design, la liste est collée à droite, il faut que ce soit identique. » « La barre de défilement est moche, fais-en une plus jolie. » Et il corrigeait dans la foulée.

Même chose pour le vocabulaire : séquence, scène, Action, Dialogues, SFX, caméra, optique. Ce sont mes mots de tournage, et ce sont devenus ceux de l’app.

À retenir : l’IA exécute un goût, elle n’en a pas. Si vous ne savez pas ce que vous voulez, elle ne le saura pas à votre place.

Une demande, un essai, une version

Une fois la base en place, le rythme a été toujours le même :

1. je formule une demande (amélioration d’un feature ou ajout d’un module),
2. Claude implémente ma demande,
3. Je tests, on itère ; et une fois l’évolution validée, on compile l’app.

Quelques exemples :

• « Je veux importer plusieurs scènes d’un coup », à partir d’images nommées Sq01Sc06.jpg. Claude a écrit l’import en lot, la règle des noms et une notice illustrée dans les réglages de l’app. Aujourd’hui, c’est la fonction qui me fait gagner le plus de temps.
• « Plus aucune fenêtre de confirmation quand je supprime une scène ». À la place, ⌘Z annule tout, même une suppression de séquence entière.
• « Le glisser-déposer de la liste des scènes n’est pas très intuitif. Inspire-toi de l’animation du site, qui est meilleure. » Il a refait le geste entièrement : la scène se soulève, les autres s’écartent pour lui faire de la place, les numéros basculent quand on la pose.
• « Je veux pouvoir changer les raccourcis clavier ». C’était annoncé sur le site comme une fonction à venir. Une session plus tard, c’était dans l’app.

Chaque changement fait avancer le numéro de version, avec une ligne dans le journal des versions. Entre la 0.1.0 du 23 septembre et la 1.2.0 du 1^er octobre, il y en a eu 22.

Et quand l’IA se trompe ?

Parce que oui, l’IA se trompe. Et ça n’est pas rare.
Quelques exemples :

• ⌘W fermait l’app au lieu de fermer le projet. Claude a cherché la cause dans le code de la bibliothèque qui gère la fenêtre, l’a trouvée, a corrigé, puis a vérifié en simulant les frappes au clavier dans l’app.
• Un nom de projet comme « v1.2 » devenait « v1.stbd », et un board existant pouvait être écrasé sans confirmation. C’est Claude qui l’a repéré en travaillant sur « Enregistrer sous ». Désormais, un board remplacé part à la Corbeille, jamais supprimé d’office.

Ce qui m’a frappé, c’est que la plupart de ces erreurs, je ne les aurais jamais vues. Claude teste beaucoup de lui-même : il lance l’app dans un dossier personnel factice pour ne pas toucher à mes réglages, il simule les clics, il compare les PDF page par page.

Mais c’est moi qui utilise l’app, et c’est moi qui trouve ce qui « ne fait pas naturel ».

Tout ce qui n’est pas du code

Ce projet était parti d’un besoin, et j’ai rapidement eu envie de le partager.
Pour ça, il fallait que je brande cette application. Et pour ça aussi, Claude Code m’a aidé.

Le nom de l’app

Le projet s’est d’abord appelé Framd. Claude a vérifié : un outil web portait déjà ce nom, et les domaines étaient pris.

On est passés à Pictrd (qui se lit pictred), après une recherche dans les bases de marques d’environ 75 pays. Recherche indicative, à faire valider par un pro avant tout dépôt, mais c’est déjà un bon filtre.

Pareil pour une première idée d’icône, un F fait de trois cases : Claude m’a signalé qu’elle était construite exactement comme le logo de Flipboard. J’ai donc abandonné cette idée ; et je suis parti sur le logo que vous connaissez.

La base de donnée matériel

Pictrd est livré avec 1 874 caméras et optiques en base, pour éviter de les ajouter à la main. Et là, j’ai appris une leçon.

J’ai laissé Claude lancer 11 recherches en parallèle, chacune confiée à un agent qui en lançait d’autres à son tour. Vers 23 h 45, la limite de dépense mensuelle de mon compte a tout coupé, avant même que les résultats soient écrits.

J’ai fini la recherche une autre IA, Codex (plus pragmatique, elle a moins tendance à réinventer la roue). Depuis, la règle est écrite dans la mémoire du projet : un lot à la fois, et on annonce le volume avant de lancer.

Le site internet

Même si je design et développe des sites internet, je n’avais pas le temps d’en créer un pour cette app qui restait un side project. J’ai donc demandé à Claude de créer un site, en respectant le design de l’app.

Chose qu’il a très bien réussi à faire, puisqu’il connaissait bien le projet ;)

À noter quand même que ce site fait très « site généré par une IA ». En aucun cas je ne pourrais livrer ça à mes clients.
Mais là encore, il s’agit d’un side project ; et je ne voulais pas y passer trop de temps.

La vidéo de présentation

Pour lancer l’app, il me fallait une vidéo des fonctions. Pour ça, Claude a repris les animations du site et les a rendues image par image, 60 images par seconde, en 1080p.

La signature et certification d’Apple

Pour qu’un Mac accepte d’ouvrir une app téléchargée, elle doit être signée et contrôlée par Apple (la « notarisation »).
Et dans ce domaine, je n’avais aucune compétence, ni aucune idée de comment faire -_-

J’ai donc demandé à Claude de m’expliquer pas à pas comment faire. Il a ensuite a écrit les scripts, m’a guidé pour créer les certificats sur mon compte développeur Apple, et a même dessiné la fenêtre d’installation du fichier DMG.

Petit bonus : à un moment, j’avais deux sessions de Claude ouvertes en même temps, l’une sur l’app, l’autre sur le site. Quand l’une a changé la police de l’app, elle a laissé un message dans le journal pour prévenir l’autre, qui a mis le site à jour. Je n’ai rien eu à coordonner.

Ce que Claude n’a pas fait

Alors oui, Claude Code et l’IA sont des outils formidables. Mais ils ne font pas tout, et l’humain sert encore à quelque chose pour le moment.

Décider. Je suis le chef de projet

Je décide de ce que fait l’app et de ce qu’elle ne fera pas. Claude propose, souvent très bien, et il dit clairement quand une décision m’appartient. Dans la mémoire du projet, ses propres choix sont marqués « à confirmer » tant que je ne les ai pas validés.

L’expérience terrain compte beaucoup

Claude ne sait pas ce que vit une assistante réal la veille d’un tournage. Toutes les fonctions de Pictrd viennent de problèmes que j’ai eus sur un plateau ; et répondent à des problématiques qu’une IA ne peut pas deviner.

Quid de l’aspect juridique

Claude a rédigé les pages légales du site, et il me l’a dit lui-même : ce sont des brouillons sérieux, pas un avis juridique. La relecture par un pro reste à faire.

Le bilan de cette expérience avec Claude Code

• Moins de dix jours entre la première conversation et la mise en ligne.
• Environ 27h passées sur le projet, pas plus.
• Deux Mac, synchronisés par Dropbox, avec une mémoire partagée.
• Plus de 200 entrées de journal, et 22 versions de l’app.
• Zéro ligne de code écrite par moi. Mais des centaines de décisions.

Ce que j’en retiens ? L’IA est un super outil. Mais avoir des bases en dev est indispensable pour éviter les bourdes :

• partager une URL localhost à sa communauté,
• ou supprimer une base de données…

Oui, on peut voir des pépites sur Twitter ;)

Être Directeur Artistique m’a aussi beaucoup aidé à revoir l’ergonomie de l’app, et son branding. Si vous êtes créatif et que vous avez un outil en tête depuis des années, le frein n’est plus de savoir coder. alors profitez-en ;)

Si vous voulez utiliser pictrd

Vous pouvez télécharger l’app sur le site pictrd.com :)