Quand le commentaire du PDG circule sur Slack, la création d'une application web de relecture par IA a révélé un nouveau défi | Actualités

〜Un designer crée une application web authentifiée sur Cloudflare avec l'IA〜

Bonjour, je suis Hasshi, designer UI.

Ces derniers temps, il est de plus en plus fréquent que, au lieu de dessiner des wireframes et de les faire valider par le client, nous créions des maquettes de landing pages ou de sites web avec l'IA pour les soumettre à leur approbation.

Auparavant, pour faire valider un design, nous passions par Slack,

« Peut-on élargir les marges ici ! » « Remplacez cette image ! » « Modifiez ce texte ici ! »

et nous recevions ce type de commentaires.

À première vue, c'est une approche tout à fait classique.

En effet, jusqu'à présent, cela ne posait pas de problème majeur.

Cependant, depuis que nous créons des prototypes en grand nombre grâce à l'IA, un problème particulier est devenu flagrant.

Les commentaires défilent.

Slack est pratique.

Il est pratique, mais il n'est évidemment pas conçu comme un outil de revue de design.

Les échanges professionnels courants, les discussions informelles et les demandes liées à d'autres projets arrivent tous au même endroit.

Il en résulte que

les commentaires de correction se perdent dans d'autres conversations
les fils de discussion se multiplient
on se demande « Où se trouvait cette correction déjà ? »
on s'aperçoit que la discussion a changé de sujet

sans qu'on s'en rende compte.

Slack propose également une fonctionnalité de listes.

Capture d'écran de la fonction liste de Slack

Par le passé, j'ai également écrit un article sur l'amélioration de la productivité au travail grâce aux modèles Slack.

Une transformation numérique simple à mettre en place avec les modèles Slack | Topics | Liberogic Inc.

Cependant, les notifications des fils de discussion sont difficiles à repérer, et si on les relie, la zone des messages finit par devenir désordonnée...

Au final,

seule la zone de discussion ne cesse de s'animer.

La création de landing pages avec l'IA est devenue nettement plus rapide, mais la méthode de relecture, elle, est restée la même.

Accélérer uniquement la phase de génération ne suffit pas : si la relecture qui suit ralentit tout, c'est vraiment dommage.

C'est alors que j'ai réfléchi.

Et si on écrivait directement les commentaires dans le HTML ?

En créant une landing page, une idée m'est soudainement venue.

Ne serait-il pas pratique de pouvoir écrire des commentaires directement dans le HTML d'un prototype créé avec l'IA ? De plus, ne serait-il pas utile de regrouper les commentaires et les images jointes dans un fichier ZIP, pour les transmettre tels quels à une IA comme Claude Code ou Codex ?

Annoter une capture d'écran en rouge est aussi clair, mais si l'on pouvait relire le HTML lui-même,

l'emplacement cliqué
le sélecteur CSS de l'élément ciblé
le texte à proximité
le nom de la page
l'image de référence jointe

peuvent aussi être conservés ensemble.

En résumé,

Vous ne dites pas « corrigez ça », mais « corrigez cet élément HTML comme ceci ».

Cela semble aussi bien convenir pour demander à une IA d'effectuer des corrections.

« Ça pourrait être vraiment pratique, non ? »

C'est ainsi qu'a commencé le développement de

Design Marker (vérificateur de corrections pour landing pages)

J'ai commencé par un essai

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

Son utilisation est très simple.

Compresser l'ensemble des fichiers HTML dans un ZIP
Glisser-déposer dans Design Marker
Afficher le HTML du ZIP dans le navigateur
Cliquez sur l'élément qui vous intéresse
Rédiger un commentaire
Exporter une archive ZIP de revue incluant les commentaires
Transmettez-la à une IA comme Claude Code ou Codex pour qu'elle effectue les corrections

Comme si vous traciez un trait rouge sur une capture d'écran, vous pouvez commenter directement le HTML.

Si l'on avait dû créer un tel outil il y a quelques années, cela aurait pris des jours entiers.

Au fil du développement,

liste des commentaires, nom des personnes assignées, saut à la position d'un commentaire, ajout d'images, fusion de plusieurs revues...

« Il nous faudrait aussi ceci », « et cela aussi » : les fonctionnalités se sont ajoutées petit à petit.

C'est à partir de là que

Hum… ça ne serait pas plutôt pratique comme outil interne ?

Et petit à petit, on commence à s'emballer.

La compatibilité avec l'IA a été bien meilleure que prévu

En développant Design Marker, c'est l'intégration avec l'IA qui m'a le plus convaincu.

Quand on demande une modification dans un chat classique,

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

on a souvent affaire à une consigne de ce type.

Entre humains, en regardant l'écran, on comprend à peu près de quoi il s'agit, mais pour une IA, où se trouve exactement « en haut à gauche », et quel élément correspond à « l'image », reste flou.

Avec Design Marker, à partir de l'élément HTML sur lequel vous cliquez, vous pouvez par exemple obtenir un sélecteur CSS de ce type.

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

Ensuite, à l'IA, on transmet :

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

vous pouvez donner vos instructions sous cette forme.

Si la structure du DOM n'a pas beaucoup changé, il est possible de cibler très précisément l'élément à modifier.

Vous pouvez en plus transmettre le nom de la page, le texte à proximité, les commentaires et même une image de référence.

Jusqu'à présent,

« Non, non, pas là ! »

Les corrections que je devais reformuler plusieurs fois auprès de l'IA tombent aussi de plus en plus souvent au bon endroit dès le premier essai.

« Relire en HTML », ça colle probablement très bien à l'ère de l'IA, non ?

Cela m'a vraiment convaincu.

« C'est pratique ! » ai-je pensé, et après l'avoir partagé en interne,

Bon.

C'est pratique.

Faisons-le utiliser à tout le monde.

Plein d'enthousiasme, je l'ai partagé avec toute l'entreprise.

Et alors…

Ça ne marche pas ? Mince, c'est mon paramétrage ?

Ah...

Eh oui.

Sur mon ordinateur, ça fonctionne.

Mais,

Sur les ordinateurs de tout le monde, ça ne fonctionne pas tel quel.

Comme toutes les applications locales, elle s'est parfaitement intégrée.

Moi, je peux l'utiliser. Mais pas les autres.

Comme c'est moi qui le développe, bien sûr que ça fonctionne.

Cependant, pour que d'autres personnes puissent l'utiliser, il fallait installer Node.js et préparer les paquets de dépendances.

Pour quelqu'un qui est habitué au développement, ce n'est pas si difficile.

Mais pour les designers et les directeurs artistiques,

il faut d'abord installer Node.js

une application de relecture qui commence par des explications.

... Ce n'est plus vraiment une simple application de relecture.

Alors,

« Il suffit de pouvoir le lancer en un seul clic ! »

C'est ce que je me suis dit, et j'ai donc aussi créé un fichier de démarrage, start-mac.command.

Un double-clic suffit pour

lancer le Terminal, effectuer les préparatifs nécessaires, démarrer l'application et même ouvrir le navigateur.

Parfait. C'est au point.

... C'est ce que je pensais, en tout cas.

En y réfléchissant bien,

« Double-cliquez sur ce fichier .command inconnu »

, ce message d'instructions n'est pas non plus très rassurant.

Envoyer à mon patron « Double-cliquez juste sur ceci ! »... Ça paraît suspect. Vraiment suspect. Alors que c'est moi qui l'ai fait.

L'application fonctionnait, mais elle n'a pas été retenue comme outil principal pour le partage interne.

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

« Ça marche sur mon environnement, mais les autres n'arrivent pas à l'utiliser »

c'est un mur bien connu des développeurs, et on finit forcément par s'y heurter.

Le conseil d'un ingénieur senior

C'est alors qu'un ingénieur senior m'a donné un conseil.

Rédige un README, et dis simplement : « Charge le dossier dans Claude Code et suis les étapes du README. » Ça suffirait, non ?

……

J'avais voulu tout perfectionner pour la rendre plus pratique, mais pour quelqu'un qui sait utiliser l'IA, la solution la plus simple était de loin la meilleure.

Plutôt que de tout résoudre dans l'application,

Il faut trouver la méthode la plus simple, en incluant les utilisateurs et l'IA.

Cela m'a aussi appris quelque chose.

Mais le président ne laisse aucun commentaire.

J'ai aussi rédigé le README.

J'ai aussi simplifié la procédure de démarrage.

Ça devrait suffire.

... c'est ce que je pensais.

Mais alors...

Aucune nouvelle.

Le président est trop occupé pour s'occuper de moi...

Ici, j'ai remarqué quelque chose de encore plus important.

Plutôt que de créer une application d'avis,

faire en sorte que les gens l'utilisent

est bien plus difficile.

Peu importe à quel point l'outil est pratique en local,

« lancer l'application »

reste la toute première étape nécessaire.

Pour les personnes occupées, cette seule étape peut déjà constituer un obstacle.

Dans ce cas...

Alors faisons-le sur le Web.

Ne suffirait-il pas que les gens puissent l'utiliser simplement en cliquant sur une URL ?

C'est pourquoi j'ai décidé de créer une version web de Design Marker.

Pour commencer, je vais créer la page avant connexion afin de gagner en motivation.

J'aimerais peaufiner beaucoup de choses, mais il y a encore beaucoup à réfléchir, donc pour l'instant il s'agit d'une landing page générée par IA.

J'ai réfléchi à la partie back-end et j'ai opté pour Cloudflare.

Cela dit, je suis designer.

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

Même si j'avais déjà entendu ces noms, c'était la première fois que je concevais moi-même l'architecture et que je construisais une application web.

C'est là que l'IA entre en jeu.

Je souhaiterais créer un écran d'administration à usage interne, ainsi qu'un écran de relecture à partager avec mes clients.

Il existe une méthode pour utiliser Cloudflare Access pour l'écran d'administration.

Et les commentaires et les informations sur le projet ?

Vous pouvez l'enregistrer dans D1.

Et pour le ZIP ?

Il existe une façon d'utiliser R2.

Ah, je vois. J'ai l'impression d'avoir tout compris !

... Ce n'est qu'une impression.

L'IA est vraiment performante.

Si on lui pose la question, elle donne même une architecture assez détaillée.

Cela dit, ce que j'ai fortement ressenti pendant ce développement, c'est que

le fait que l'IA puisse indiquer la marche à suivre et le fait de pouvoir construire un système sûr sont deux choses différentes

Voilà, c'est ce qui s'était passé.

De « Pouvez-vous m'expliquer ? » à « Ai-je bien compris ? »

Surtout pour les parties liées à la sécurité, je n'ose pas me fier uniquement aux réponses de l'IA.

J'ai donc décidé de faire relire par un ingénieur plus expérimenté les points que je ne comprends pas et ceux qui sont essentiels.

Avant, moi,

Je voudrais faire ceci avec Cloudflare, comment dois-je m'y prendre ?

C'est à partir de ce point-là que je pense avoir posé mes questions.

Mais dans ce cas, mon aîné devrait tout m'expliquer depuis le début.

Alors que la personne est occupée,

« Mon aîné ! Expliquez-moi depuis le début ! »

c'est un peu comme foncer tête baissée.

Cette fois, j'ai d'abord échangé à plusieurs reprises avec l'IA pour organiser mes idées à ma façon.

Puis,

L'écran d'administration est limité aux seuls membres internes grâce à Cloudflare Access. L'écran partagé se connecte avec une URL, un identifiant et un mot de passe propres à chaque projet. Les informations de projet et les commentaires sont enregistrés dans D1, et l'ensemble des fichiers ZIP de la landing page est enregistré dans R2. Êtes-vous d'accord avec cette compréhension ?

jusqu'à ce point, avant de demander conseil.

En résumé,

« Pourriez-vous m'expliquer ? »

au lieu de

« Cette compréhension est-elle correcte ? »

que j'ai fini par utiliser.

Pour moi, c'était un changement assez important.

Les échanges avec mes aînés sont également moins nombreux, et ils peuvent consacrer leur temps aux points qui nécessitent vraiment une vérification.

Je ne me contente plus de copier les réponses de l'IA ;

« pourquoi fait-on cela ? »

j'ai pu avancer en comprenant petit à petit cette logique.

Une fois passé au Web, un autre mur m'attendait.

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

Il suffit d'envoyer une URL pour y accéder.

Bien plus pratique qu'une application locale.

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

... C'est ce que je pensais, en tout cas.

Dès le passage au Web, des problèmes auxquels je ne prêtais pas attention dans la version locale sont apparus d'un coup.

Par exemple,

Peut-on confier au cloud les landing pages des clients avant leur publication ?
Qui peut consulter quel projet ?
Comment protéger les mots de passe ?
Comment prévenir les tentatives de connexion non autorisées ?
Peut-on afficher en toute sécurité le HTML téléversé ?
Quand les données d'un projet sont-elles supprimées après sa clôture ?

etc.

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

C'est une évidence, mais ce n'est qu'en le construisant moi-même que j'en ai vraiment mesuré le poids.

Actuellement, j'ai mis en place les mécanismes de base : accès via Cloudflare Access, connexion propre à chaque projet, et stockage dans D1 et R2.

En revanche,

There are still areas we want to improve before a formal public release, such as strengthening password protection, limiting login attempts, separating the HTML preview, and defining rules for data storage and deletion.

Design Marker also includes a mode that reviews ZIP files only within the browser, without saving them to the cloud.

ZIP files and the necessary project information are saved only when sharing a project in the cloud.

At this stage, Design Marker is not yet a formal service.

We are currently testing it, mainly for internal use.

What we have built, in other words, is

"a completely secure service"

is not the case.

Rather,

an application in progress, where we are learning what needs to be protected and implementing the necessary measures one by one

Passer au Web ne signifie pas seulement gagner en praticité.

Cela implique aussi la responsabilité de gérer les données des utilisateurs.

Ce projet nous a beaucoup appris.

Voici l'interface d'administration finalisée pour le fabricant de designs.

Depuis le tableau de bord, les employés peuvent consulter l'ensemble des retours de révision.

Depuis la page de détail, il suffit d'ouvrir le lien rapide vers la proposition de structure pour consulter directement la landing page et ajouter des commentaires.

Les commentaires annotés sur la landing page s'affichent ainsi, et il est possible de consulter les commentaires précédents. Cela a rendu les ajustements de structure beaucoup plus fluides.

Même avec l'IA, il fallait apprendre

Au cours de ce développement, un autre point m'a particulièrement marqué.

Grâce à l'IA, même les designers peuvent désormais se lancer dans le développement bien plus facilement qu'auparavant.

Personnellement,

« Je veux créer ceci »

la gamme de ce que l'on peut mener de l'idée jusqu'à un produit réellement fonctionnel s'est nettement élargie.

Mais cela ne signifie pas que,

« On n'a plus besoin d'apprendre »

C'était plutôt l'inverse.

Cette structure est recommandée

Compris !

ne suffit pas, c'est risqué.

Ce dont on a vraiment besoin, c'est de

« Pourquoi ? » « Est-ce que ça suffit encore cette fois-ci ? » « Il ne manque rien ? » « Cette partie a été vérifiée par un expert, mais n'est-ce pas insuffisant ? »

se poser ces questions.

Il faut disposer des connaissances nécessaires pour juger si la proposition de l'IA correspond aux conditions de ce projet et identifier ce qui manque.

L'IA est vraiment un partenaire fiable.

Mais c'est toujours à l'humain de prendre la décision finale et d'en assumer la responsabilité.

La version Web de Design Marker nous a aussi donné l'occasion de repenser notre manière de travailler avec l'IA.

À l'ère de l'IA, c'est peut-être la relecture qui change le plus

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

Des ébauches qui demandaient autrefois plusieurs heures apparaissent maintenant étonnamment vite.

Mais ensuite, il faut

« Change ça comme ceci » « Augmente un peu cet espace » « Change seulement cette image »

Ce type d'échange n'a finalement pas beaucoup changé depuis longtemps.

Seule la vitesse de production a augmenté,

une personne vérifie, transmet les corrections à apporter, puis fait recommencer la création.

Cette partie reste encore très humaine.

C'est pourquoi, ces derniers temps,

non seulement l'IA elle-même,

la manière dont l'IA et les humains interagissent

devient également un élément important, selon moi.

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

Actuellement, les contenus saisis sont enregistrés dans

Nous testons notamment les commentaires sur HTML, les pièces jointes d'images, la fusion de plusieurs relectures et la gestion des versions par projet.

Nous avons encore beaucoup d'autres idées à explorer.

Annotations directes sur les captures d'écran elles-mêmes.

Demandes de correction adressées à l'IA à partir des commentaires.

Amélioration de la comparaison entre les versions.

Amélioration de la facilité d'utilisation pour les relectures à plusieurs personnes.

Et bien sûr, le renforcement de la sécurité, notamment l'authentification, l'aperçu HTML et la gestion des données.

Pour l'instant, nous l'utilisons en interne et prévoyons de l'améliorer étape par étape.

Pour commencer,

« Les commentaires Slack n'arrêtent pas de défiler, il faut que je fasse quelque chose »

C'était au départ un petit outil, créé dans cette intention.

Puis, sans que je m'en rende compte,

j'ai développé une application locale,

que le président n'a jamais utilisée,

je l'ai convertie en application web,

j'ai étudié Cloudflare,

me suis heurté à des questions de sécurité,

ai consulté un ingénieur senior,

et j'ai fini par réfléchir à la manière de considérer l'IA.

……Je voulais simplement créer une application de relecture, mais il y avait finalement pas mal de choses à prendre en compte.

Mais je trouve intéressant de pouvoir désormais concrétiser, avec l'IA, les petits désagréments de mon quotidien professionnel.

Une fois que j'aurai fait évoluer l'outil jusqu'à ce qu'il puisse être mis en ligne en toute confiance, je souhaite présenter Design Marker officiellement.

Avant cela.