Comment du PDG sur Slack : l'histoire de la création d'une application web de révision avec l'IA et du mur qui attendait après

Comment un designer a créé une application Web avec authentification sur Cloudflare en collaboration avec l'IA

Bonjour. Je suis Hasshi, designer UI.

Récemment, au lieu de suivre le processus classique de création de wireframes et de demander la validation du client, nous créons de plus en plus de maquettes de pages d'accueil et de sites Web avec l'IA, que nous leur présentons pour approbation.

Auparavant, quand nous partagions les designs pour validation, c'était sur Slack,

« Veuillez élargir l'espace blanc ici ! » « Remplacez cette image ! » « Changez le texte ici ! »

C'est ainsi que nous recevions les commentaires.

En apparence, c'est une approche classique.

En fait, jusque-là, cette méthode ne posait aucun problème majeur.

Cependant, depuis que nous avons commencé à créer rapidement des prototypes avec l'IA, un problème particulier est devenu plus apparent.

Les commentaires s'accumulent.

Slack est pratique.

C'est pratique, mais bien sûr, ce n'est pas un outil dédié aux revues de design.

Les communications de travail quotidiennes, les discussions informelles, les questions sur d'autres projets — tout arrive au même endroit.

Par conséquent,

• les commentaires de correction se perdent dans d'autres conversations
• les fils de discussion se multiplient
• « Où était cette correction déjà ? »
• avant que vous ne vous en rendiez compte, c'est devenu un autre sujet

voilà ce qui se produit.

Slack dispose également d'une fonctionnalité de liste.

Nous avons déjà écrit un article sur l'amélioration des processus métier en utilisant les modèles Slack.

Débuter avec les modèles Slack pour une DX facile | Actualités | Liberogic

Cependant, les notifications de fil de discussion sont peu claires, et si l'on intègre les notifications, le flux de messages devient chaotique...

Au final,

le fil de discussion devient de plus en plus animé.

La vitesse de création de landing pages avec l'IA a augmenté plusieurs fois, mais la méthode d'examen est restée la même qu'avant.

Même si la génération est plus rapide, si l'examen bloque après, c'est un peu dommage.

Nous avons donc réfléchi.

Et si nous pouvions écrire directement des commentaires dans le HTML ?

En travaillant sur une landing page, je me suis posé une question.

Et si je pouvais ajouter des commentaires directement sur le HTML généré par l'IA ? Mieux encore, et si je pouvais regrouper les commentaires et les images jointes dans un ZIP, puis les transmettre directement à Claude Code, Codex ou d'autres IA ?

Annoter des captures d'écran avec des traits rouges, c'est clair, mais pouvoir examiner directement le HTML serait encore mieux.

• L'endroit où vous avez cliqué
• Sélecteur CSS de l'élément cible
• Texte à proximité
• Nom de la page
• Image de référence jointe

et d'autres informations peuvent être conservées ensemble.

En d'autres termes,

Au lieu de simplement dire « corrige ici », vous pouvez dire « modifie cet élément HTML de cette façon ».

Cela semble aussi bien fonctionner lorsqu'on demande à une IA d'apporter des corrections.

« C'est vraiment pratique, non ? »

C'est alors que j'ai commencé à créer

Design Marker (Vérificateur de corrections pour LP)

.

J'ai d'abord créé une version de test

La première version était une application locale qui fonctionnait sur mon ordinateur.

Son utilisation est simple.

1. Compresser l'ensemble des fichiers HTML en ZIP
2. Glisser-déposer dans Design Marker
3. Afficher le HTML du fichier ZIP dans le navigateur
4. Cliquez sur la zone qui vous intéresse
5. Rédiger un commentaire
6. Exporter un examen au format ZIP avec informations de commentaires incluses
7. Transmettre à une IA comme Claude Code ou Codex pour obtenir des corrections

Vous pouvez commenter directement le HTML comme si vous traciez des lignes rouges sur une capture d'écran.

Créer quelque chose comme cela autrefois aurait pris des jours.

Au fur et à mesure de la création,

Listes de commentaires, noms des responsables, accès rapide aux emplacements des commentaires, pièces jointes, fusion de plusieurs examens…

Les fonctionnalités se sont progressivement ajoutées, avec « on voudrait aussi ceci » et « on voudrait aussi cela ».

À partir de là,

C'est… en fait plutôt pratique comme outil interne, non ?

Et peu à peu, l'enthousiasme commence à monter.

La compatibilité avec l'IA s'est avérée bien meilleure que prévu

En créant Design Marker, ce qui m'a le plus marqué, c'est l'intégration avec l'IA.

Quand on demande une correction par chat ordinaire,

« Pourriez-vous agrandir l'image en haut à gauche un peu plus ? »

C'est le genre d'instruction qu'on tend à donner.

Entre humains, on comprend à peu près en regardant l'écran, mais pour l'IA, il est ambigu de savoir où se trouve « en haut à gauche » ou quel élément est « l'image ».

Avec Design Marker, en cliquant sur un élément HTML, on peut récupérer, par exemple, un sélecteur CSS comme ceci.

article.strength-item:nth-of-type(1)
 > div.strength-visual-wrap
 > div.illustration-slot

Ensuite, on peut transmettre à l'IA,

Veuillez agrandir l'illustration dans article.strength-item:nth-of-type(1) à environ 115 % de sa taille actuelle.

de cette manière.

Si la structure du DOM n'a pas changé de manière significative, nous pouvons identifier l'élément à modifier avec beaucoup de précision.

Nous pouvons également transmettre le nom de la page, le texte à proximité, les commentaires et les images de référence en même temps.

Jusqu'à présent,

Non, non, ce n'est pas là !

les corrections que nous devions communiquer à l'IA à plusieurs reprises arrivent maintenant à bon port du premier coup.

« Examiner en HTML » est vraiment bien compatible avec l'ère de l'IA, n'est-ce pas ?

C'est ici que nous avons vraiment senti qu'il y avait quelque chose de prometteur.

Pensant « c'est vraiment utile ! », nous l'avons partagé en interne

D'accord.

C'est vraiment utile.

Faisons-le connaître à tout le monde.

Je l'ai partagé avec enthousiasme dans l'équipe.

Et puis…

Ça ne marche pas ? C'est ma configuration qui pose problème ?

Ah…

Oui, c'est ça.

Ça fonctionne sur mon ordinateur.

Mais,

Cela ne fonctionne pas sur tous les ordinateurs sans modification.

Un classique des applications locales, que nous avons traité directement.

Je peux l'utiliser. Mais tout le monde ne peut pas.

Comme je suis celui qui développe le produit, il fonctionne naturellement.

Cependant, pour que d'autres personnes l'utilisent, il faut installer Node.js et préparer les dépendances requises.

Pour quelqu'un d'expérimenté en développement, ce n'est pas particulièrement difficile.

Cependant, pour les designers et directeurs,

Commencez par installer Node.js

une application de révision qui requiert d'expliquer depuis le début.

…Ce n'est plus du tout une application de révision sans contrainte.

Alors,

« Et si on pouvait le lancer en un seul clic ! »

J'ai pensé, et j'ai donc créé un fichier de lancement appelé start-mac.command.

Un double-clic et,

le Terminal se lance, les préparations nécessaires se font, l'application démarre, et le navigateur s'ouvre.

Parfait. Impeccable.

Enfin, c'est ce que je pensais.

Mais en y réfléchissant bien,

« Veuillez double-cliquer sur ce fichier .command inconnu »

c'est quand même un peu effrayant comme instruction.

Vais-je vraiment envoyer ça au PDG en disant « Bon, cliquez deux fois dessus pour commencer ! » ? Ça semble louche. Et dire que c'est moi qui ai créé ça.

J'ai bien obtenu quelque chose qui fonctionne, mais ça n'a pas vraiment convaincue mon équipe.

Quand on développe une application avec l'IA,

on se retrouve vite avec « ça marche sur ma machine, mais pas chez les autres »

, un classique du développement que je ne connaissais que trop bien.

Le conseil d'un développeur senior

C'est là qu'un développeur senior m'a dit quelque chose.

Crée un README, « Charge le dossier dans CloudCode et fais le setup selon les instructions » Voilà, c'est tout ce qu'il faut faire, non ?

……

J'avais sur-compliqué les choses en essayant de tout optimiser, mais pour des utilisateurs habituées à l'IA, cette approche est tellement plus simple.

Plutôt que de tout vouloir résoudre du côté de l'application,

Réfléchir à la méthode la plus simple, en incluant les utilisateurs et l'IA.

C'était aussi une bonne leçon pour moi.

Mais le PDG n'a pas écrit de commentaire.

J'ai aussi créé un README.

J'ai simplifié le processus de démarrage.

Ça devrait marcher.

C'est ce que je me suis dit.

Mais voilà.

Aucun retour.

Le PDG est trop occupé pour s'en préoccuper…

C'est là que j'ai réalisé quelque chose d'encore plus important.

Créer une application d'examen était moins difficile que

de faire en sorte que les gens l'utilisent

— c'était incomparablement plus difficile.

Peu importe à quel point l'application était pratique en local,

« Lancer l'application »

— ce premier pas était nécessaire.

Pour les gens occupés, même ce premier pas devenait un obstacle.

Alors…

« Et si on la mettait sur le Web ? »

Si c'est juste un clic sur un URL, les gens l'utiliseraient, non ?

C'est pour cette raison que j'ai décidé de créer une version web de Design Marker.

Pour commencer, je vais créer une page avant connexion pour booster la motivation.

J'aimerais bien affiner plein de choses, mais il y a trop à réfléchir, donc pour l'instant c'est une landing page générée par IA.

Je me suis posé la question sur l'infrastructure. C'est là que j'ai choisi Cloudflare.

Cela dit, je suis designer.

Cloudflare Pages、Pages Functions、Cloudflare Access、D1、R2……。

Même si j'avais entendu parler du nom, c'était la première fois que je concevais moi-même l'architecture et que je l'assemblais en tant qu'application web.

C'est maintenant le moment pour mon maître IA.

Je veux créer un tableau de bord interne et un écran de révision à partager avec les clients.

Pour le tableau de bord, il existe une approche utilisant Cloudflare Access.

Qu'en est-il des commentaires et des informations de projet ?

Vous pouvez les enregistrer dans D1.

Et pour les fichiers ZIP ?

Il existe une méthode utilisant R2.

D'accord. Je pense avoir tout compris !

... juste l'impression, cependant.

L'IA est vraiment compétente.

Si vous posez des questions, elle vous donne une architecture très concrète.

Cependant, ce que j'ai fortement ressenti au cours de ce développement, c'est que

le fait que l'IA vous ensigne une méthode et la capacité à créer un système sûr sont deux choses différentes

C'était le cas.

De « Pouvez-vous m'expliquer ? » à « Est-ce que ma compréhension est correcte ? »

En particulier, j'ai peur de prendre des décisions concernant la sécurité basées uniquement sur les réponses de l'IA.

C'est pourquoi j'ai décidé de faire réviser les parties que je ne comprenais pas ou les parties importantes par des ingénieurs seniors.

À l'époque, moi,

Je veux faire ceci avec Cloudflare, comment dois-je procéder?

C'est là que je posais mes questions.

Mais cela signifie que le senior doit tout expliquer à partir de zéro.

Quand on est occupé,

« Senior ! Pouvez-vous m'expliquer à partir du début ! »

c'est comme si on se précipitait dedans.

Cette fois, j'ai d'abord organisé mes idées en dialoguant à plusieurs reprises avec une IA.

Et puis,

Le tableau de bord administratif sera limité aux membres internes via Cloudflare Access. L'écran partagé sera accessible via une URL, un identifiant et un mot de passe pour chaque projet. Les informations de projet et les commentaires seront stockés dans D1, et les fichiers ZIP complets des LP seront stockés dans R2. Cette compréhension est-elle correcte ?

jusqu'à ce point avant de consulter.

En d'autres termes,

« Pouvez-vous m'expliquer ? »

au lieu de,

« Cette compréhension est-elle correcte ? »

a changé.

C'était un changement assez significatif pour moi.

Les échanges avec les seniors se sont réduits, ce qui nous permet de consacrer du temps à ce qui demande vraiment de la vérification.

Je n'ai plus tendance à copier-coller les réponses de l'IA et à m'arrêter là,

« pourquoi faire ça »

et j'ai pu avancer en le comprenant peu à peu.

Passer au Web, c'était affronter un autre défi

C'est ainsi que la version Web a commencé à fonctionner petit à petit.

Il suffit d'envoyer une URL pour que ça s'ouvre.

Cela fonctionne bien mieux que l'application locale.

« Ça résout le problème, non ? »

Enfin, c'est ce que je pensais.

Au moment de passer au Web, des problèmes qui étaient peu visibles dans la version locale ont surgi immédiatement.

Par exemple,

• Peut-on confier à un service cloud une page de destination client avant sa publication ?
• Qui peut consulter quel projet ?
• Comment les mots de passe sont-ils protégés ?
• Comment prévenir les tentatives de connexion non autorisées ?
• Peut-on afficher en toute sécurité les fichiers HTML téléchargés ?
• Quand les données sont-elles supprimées après la fin d'un projet ?

et ainsi de suite.

Ajouter un écran d'authentification ne suffit pas à dire que « la sécurité est assurée ! ».

C'est une évidence, mais ce n'est qu'en développant moi-même que j'ai vraiment mesuré la complexité.

Actuellement, nous avons implémenté les mécanismes de base, dont Cloudflare Access, l'authentification par projet, et le stockage dans D1 et R2.

D'autre part,

Le renforcement de la protection par mot de passe, la limitation des tentatives de connexion, l'isolement de l'aperçu HTML, les règles de stockage et de suppression des données : il reste encore des améliorations à apporter avant une publication officielle.

Design Marker propose également un mode qui permet de réviser le contenu uniquement dans le navigateur, sans stocker le ZIP dans le cloud.

Les informations de projet et les fichiers ZIP ne sont stockés dans le cloud que lorsqu'un projet est partagé entre collaborateurs.

Design Marker n'est actuellement pas encore un service officiel.

Nous en sommes au stade de la validation, principalement en utilisation interne.

Autrement dit, ce que nous avons créé ici, c'est

« Un service complètement sécurisé est maintenant terminé ! »

Ce n'est pas le cas.

Au contraire,

Une application qui comprend ce qui doit être protégé et qui met en œuvre les mesures nécessaires une par une

.

Passer au web, ce n'est pas simplement devenir plus pratique.

Cela crée aussi la responsabilité de protéger les données des utilisateurs.

Ce projet a été très enrichissant pour moi sur le plan pédagogique.

Voici l'écran de gestion du créateur de design finalisé.

Depuis le tableau de bord, les employés peuvent vérifier tous les retours de révision.

En accédant à la page détaillée, les utilisateurs peuvent ouvrir les liens rapides du plan de structure de cette façon, visualiser directement la page de destination et ajouter des commentaires.

Ainsi, les commentaires sur la page de destination peuvent être consultés de cette manière. Il est également possible de se référer aux commentaires précédents, ce qui a rendu les révisions de structure beaucoup plus fluides.

L'apprentissage était nécessaire, même avec l'IA

Au cours de ce développement, j'ai ressenti fortement une autre chose.

Grâce à l'IA, les designers trouvent maintenant beaucoup plus facile qu'avant de relever des défis en développement.

Personnellement,

« Je veux créer ceci »

jusqu'à un produit vraiment fonctionnel s'est clairement élargi.

Mais cela ne signifiait pas

« Je n'ai plus besoin d'étudier »

.

C'était plutôt l'inverse.

Cette configuration est recommandée

Compris !

seul n'est pas sûr.

Ce qui est vraiment nécessaire, c'est

« Pourquoi ? » « Est-ce que ça convient cette fois aussi ? » « On n'oublie rien ? » « Et si on faisait valider cette partie par un expert ? »

ce que nous pensions être nécessaire.

Il est nécessaire d'avoir les connaissances pour évaluer si la proposition de l'IA correspond aux conditions de ce projet et identifier ce qui manque.

L'IA est vraiment un partenaire fiable.

Cependant, c'est l'être humain qui prend la décision finale et en assume la responsabilité.

La numérisation de Design Marker cette fois-ci a été l'occasion de reconsidérer notre façon d'interagir avec l'IA.

À l'ère de l'IA, ce qui pourrait changer le plus, c'est peut-être la phase de révision.

L'IA peut créer une page de destination en quelques minutes.

Autrefois, cela aurait pris des heures pour produire une première version, mais maintenant elle arrive étonnamment rapidement.

Mais ensuite,

« Fais comme ça ici » « Élargis un peu cet espace blanc » « Change juste cette image »

Ces échanges n'ont étonnamment pas beaucoup changé au fil du temps.

Seule la vitesse de création a augmenté,

les humains vérifient, transmettent les corrections et recommencent la création.

Cette partie reste encore très humaine.

C'est pourquoi récemment,

pas seulement l'IA elle-même, mais aussi

comment l'IA et l'humain interagissent ensemble

je pense que le mécanisme de cela devient aussi important.

Design Marker est l'une de nos expériences en ce sens.

Désormais, je

Nous testons des fonctionnalités comme les commentaires sur HTML, l'ajout d'images, l'intégration de plusieurs révisions, et la gestion des versions par projet.

Et il y a encore beaucoup de choses que nous aimerions faire.

Les annotations directes sur les captures d'écran.

Les demandes de correction par IA à partir des commentaires.

L'amélioration de la comparaison entre versions.

L'amélioration de la convivialité des révisions multi-utilisateurs.

Et bien sûr, l'amélioration de la sécurité en matière d'authentification, d'aperçu HTML et de gestion des données.

Pour commencer, nous prévoyons de l'utiliser réellement en interne et d'améliorer progressivement chaque aspect.

Au départ,

« Les commentaires Slack qui s'accumulent, il faut vraiment faire quelque chose »

C'est un petit outil que nous avons commencé à développer avec cet état d'esprit.

Mais avant de nous en rendre compte,

nous avons créé une application locale,

nous l'avons proposée au PDG sans succès initial,

nous l'avons transformée en solution web,

nous avons étudié Cloudflare,

nous avons fait face à des défis de sécurité,

nous avons consulté des ingénieurs expérimentés,

et nous avons dû réfléchir à la manière d'intégrer l'IA.

......Je voulais juste créer une application de relecture, mais j'ai réalisé qu'il y avait beaucoup plus à considérer.

Mais je trouve fascinant d'avoir pu transformer, en collaboration avec l'IA, les petites frictions que j'identifie dans mon travail quotidien en quelque chose de concret.

Une fois que nous l'aurons développé jusqu'à un point où nous pourrons le rendre public en toute confiance, j'aimerais présenter officiellement Design Marker.

Mais avant cela.

D'abord, je dois m'efforcer de faire écrire correctement des commentaires au PDG (rire). Mais en attendant, il semble que je pourrais déguster un bon verre ce soir