Résumé de l'article
- qui a fait quoi：Photographe Nobutsugu Sugiyama、2011L’application iPhone « COSPLAY SHOWCASE » s’est classée deuxième sur l’App Store en 2018.、Relance en tant qu'application Web utilisant l'IA。
- En conclusion：L’IA ne fonctionne pas en « jetant tout »。Cependant, si vous disposez de la technologie nécessaire pour « structurer et satisfaire aux exigences »、Les actifs du passé sont définitivement liés au présent。
- Ce que vous obtenez de cet article：« Modèles d'échec de l'IA » et « 5 règles pour un fonctionnement correct de l'IA » révélés grâce au développement conjoint de l'IA。
- Introduction：Avez-vous également des « atouts dormants » ?
- Contexte du défi：Date à laquelle IPA/APK a été analysé
- désespoir face：3Deux « enfers »
- ``Cinq règles pour la collaboration en IA'' dérivées de ceci
- Règle 1：Donnez-le sous forme de « document de conception » au lieu d'une « demande »
- Règle 2：Concevoir en gardant à l’esprit « l’oubli » de l’IA
- Règle 3：Le simple fait de « comprendre la signification du code » vous donnera un avantage considérable.
- Règle 4：Sachez que la « mémoire du créateur » est le plus grand atout.
- Règle 5：Laisser un « record d’échec »、devient une information primaire
- liste de contrôle pratique：Éléments à vérifier avant de faire revivre des actifs antérieurs avec l'IA
- résumé：L’IA est un « outil pour construire des ponts »、Ce sont les humains qui achèvent le pont.
Introduction：Avez-vous également des « atouts dormants » ?
ancienne application、Service Web qui a cessé de fonctionner、Œuvres qui n'ont pas été converties en données numériques——。
« Ce que j’ai fait à l’époque.、Je suis sûr que beaucoup de gens ont pensé : « Je veux recommencer avec la technologie d'aujourd'hui ».。Mais en réalité、Face aux « barrières techniques » et aux « délais et coûts »、la plupart des projets sont abandonnés。
Je suis la semaine d'or 2026、J'ai heurté ce mur de plein fouet avec l'IA.。
15Une application iPhone appelée « COSPLAY SHOWCASE », qui s'est classée deuxième en termes de ventes sur l'App Store il y a un an.、Il s'agit d'un projet visant à le relancer en tant qu'application Web.。Pas un ingénieur complet、Du point de vue d’un « photographe capable de coder »。
"Avec l'IA, cela peut être réalisé en quelques heures." Il fut un temps où je pensais ça aussi.。
la réalité était différente。
Contexte du défi：Date à laquelle IPA/APK a été analysé
Au début, tout ce que j'avais était « binaire ».
Ce que j'ai pu préparer pour ce projet, c'est、Il n'y avait que les éléments suivants。
- Fichier IPA de la version iOS(Le « contenu » de l’application iPad/iPhone est emballé.、paquet pour l'installation)
- Fichier APK de la version Android(C’est la « véritable identité » des applications Android.、Un ensemble de fichiers pour l'installation)
- Images JPEG et captures d'écran de l'interface utilisateur de cette époque
- Texte de la page d'introduction de l'application
- Ma propre « Mémoire du Créateur »
Le plus gros problème est、Il ne restait plus de code source complet.。
En d'autres termes, le point de départ du projet est、L’ingénierie inverse était la prémisse depuis le début.。
Que se passe-t-il lorsque vous laissez Claude l'analyser ?
La première tentative était simple。
« Si je laisse Claude lire l'IPA/APK,、Est-il possible de le convertir automatiquement en React dans une certaine mesure ? »
La génération actuelle d'IA est la génération React、Génération TypeScript、Architecture CSS Tailwind、Génération de composants d'interface utilisateur、Correction d'erreurs——très forte dans ce domaine。C'est pourquoi l'idée de ``transformer d'anciennes applications en une version Web en utilisant l'IA''、avait l'air réaliste。
Réagir:(combinant des "parties"、(Mécanisme de création d'écrans)CSS vent arrière:(Juste en arrangeant les "mots" prédéterminés、Outils de conception)
Mais quand tu bouges réellement tes mains、la situation était complètement différente。
À l'intérieur de l'IPA、structure des ressources、fichier image、Quelques informations de configuration、J'ai pu confirmer la configuration du bundle.。mais、Le code compilé important de l’ère Objective-C est、je ne peux pas le lire tel quel。Claude analyse l'IPA et reconnaît des "choses semblables à une structure"。maisMigration de l'interface utilisateur、conception de gestes(Conception de « réaction » aux mouvements des doigts)、gestion de l'état、Intention d'animationil est、Il était presque impossible de restaurer。
Le côté APK Android est une mise en page XML et peut être dessiné(images, formes, etc.、(Terme général désignant les « données matérielles » affichées à l'écran)reste relativement、C'était un peu facile à lire。Cependant, un problème fondamental se pose ici aussi : l’IA peut lire « ce qui existe »。maisJe ne comprends pas pourquoi ils l'ont conçu de cette façon.。
Pourquoi les images sont-elles dans cet ordre ?。Pourquoi changer à ce moment ?。Pourquoi cette vitesse de balayage ?。Ces intentions de conception sont、non enregistré en binaire。Autrement ditLa philosophie de l'UI/UX est、Non restauré par l'IA。
C'est、C'était le premier grand mur.。
désespoir face：3Deux « enfers »
Au fur et à mesure que le projet avance、Des problèmes spécifiques sont apparus les uns après les autres.。
Enfer 1：La structure de l'interface utilisateur est cassée
La première invite ressemblait à ceci。
"De cette structure IPA/APK、Réagir + Veuillez reconstruire l'interface utilisateur équivalente avec Tailwind CSS."
Le résultat est、C'était assez cassé。
L'IA commence à assembler l'écran en devinant。Mais la hiérarchie(classe)、structure de l'État(Règles de gestion des données)、segmentation des composants(Divisant en parties)est différent de la vraie application。"Ça ressemble à ça, mais c'est différent" est généré.。Même dans Tailwind CSS、Utilité excessive、effondrement réactif、accident de l'indice z、Le débordement mobile s'est produit fréquemment。La réponse la plus courante était « Aucun problème sur PC ».、Il s’agissait d’un schéma « d’effondrement dû au smartphone »。
Utilité excessive：(Il y a trop d’instructions de conception.、le code devient un « sort »)effondrement réactif：(Si vous modifiez la taille de l'écran、(Ça a l'air "désordonné")accident de l'indice z：(L'ordre des parties qui se chevauchent est dans le désordre.、(Le bouton devient « enterré » et ne peut pas être enfoncé)débordement mobile：(dépasse la largeur de l'écran)、Secouant d'un côté à l'autre)
Enfer 2：Comportement de balayage interrompu
C'était particulièrement grave.。
Le cœur de COSPLAY SHOWCASE était de « feuilleter et faire pivoter les photos ».。Cependant, l'IA utilise le défilement inertiel、Gestion des états de glissement、toucher annuler le traitement、J'ai commis beaucoup d'erreurs dans la mise en œuvre des gestes mobiles.。
touchez annuler；(Les doigts qui se touchaient、(état hors écran ou désactivé)
par conséquent、
- se faire prendre
- saut
- avancer dans la direction opposée
- Seul le mobile est en panne
s'est produit fréquemment。Surtout dans Safari mobile、action tactile、débordement、événement passif、Assez coincé autour du rendu d'image。
action tactile：(Réglage « Autoriser le défilement » en touchant l'écran)débordement：(Règles pour "masquer ou afficher" les parties qui dépassent du cadre)événement passif：(Signal préliminaire pour un « mouvement fluide » du défilement)rendu d'image：(Spécification indiquant si l'image doit être nette ou lisse)
La tactilité était le domaine le plus faible de l’IA.。 L'apparence peut être reproduite。Cependant, la « séparation des doigts », le « poids d'inertie », la « vitesse de balayage » et le « timing de l'animation » ne peuvent pas être déterminés par la seule logique.。En fin de compte, les humains n’ont eu d’autre choix que de détecter l’inconfort.。
enfer 3：l'enfer de la boucle d'état
Cela s'est produit particulièrement fréquemment lors du portage de React.。
L'IA arrivera bientôtuseEffect(Traitement automatique qui « lie automatiquement »)veux écrire。par conséquent、re-rendu infini、boucle d'état、le préchargement de l'image devient incontrôlable。
J'essayais de corriger un bug appelé la disposition d'emballage de l'affichage des favoris.、Je suis entré dans une "boucle de débogage infinie" où chaque modification cassait une partie différente.。
- Alignement vertical → Correct → L'affichage de l'ordre des titres est perturbé
- Réparer → Modifications de la taille de l'image → Réparer → Le défilement horizontal disparaît
- J'essaie de le remonter → une autre partie se casse
L’IA ignore encore et encore les mêmes interdictions。Oublier le contexte de la conversation précédente et revenir en arrière。
Après ce processus、J’ai enfin commencé à comprendre la « structure essentielle » de la coproduction d’IA.。
``Cinq règles pour la collaboration en IA'' dérivées de ceci
L'IA ne fonctionne pas parce que c'est un « tirage au sort »。Cependant, si vous comprenez "comment faire fonctionner l'IA"、Les actifs du passé sont définitivement liés au présent。Ce qui suit est、Voici cinq règles extraites de cette expérience.。
Règle 1：Donnez-le sous forme de « document de conception » au lieu d'une « demande »
Quelle est l’instruction la plus importante pour l’IA ?、demandes vaguesconditions structuréesest de le convertir en。
❌ Exemples d'instructions qui échouent
"Je veux qu'il s'enroule naturellement en fonction de la largeur du navigateur."
Avec cette instruction, l'IA a généré une mise en page flexible pour Tailwind.。Mais cela a cassé l'interface utilisateur à défilement latéral de COSPLAY SHOWCASE。« Pliage naturel » signifiait « empilement vertical » pour l'IA。
✅ Exemples d'instructions de travail
- La disposition verticale ne sert absolument à rien.
- Maintenez toujours le défilement horizontal
- Conserver la taille de l'image dans l'ordre du titre
- Ne perdez pas l'équilibre du nombre de lignes
La différence n'est pas "ce que tu veux que je fasse"、Indiquer clairement ce qu'il ne faut pas faireest。Plus l’IA a de contraintes, plus、Converger facilement dans la bonne direction。Même en modifiant le comportement de balayage.、Il existe une liste d'interdictions et de conditions spécifiques telles que "ne pas ajouter d'inertie", "la vitesse de balayage est constante", "Safari mobile est prioritaire", "le changement de mise en page est interdit lors du chargement des images".、C'était l'instruction la plus efficace。
Règle 2：Concevoir en gardant à l’esprit « l’oubli » de l’IA
L'IA a une capacité limitée à maintenir le contexte。dans une longue conversation、Les spécifications décidées au premier semestre sont souvent ignorées au second semestre.。
En fait dans mon projet、La règle qui était censée être "pas de défilement horizontal"、Il y avait de nombreux cas où l'IA se brisait après plusieurs dizaines de tours comme si de rien n'était.。Également lors de la résolution du problème de circulation de l'État、Utilise à nouveau useEffect, ce qui était interdit dans le dialogue précédent.、Cela a été répété。
Les mesures sont"Mettez une liste des objets interdits au début de chaque séance."C'est ça.。
【このセッションの絶対条件】
・横スクロールUIは変更しない
・画像サイズは既存の仕様を維持
・縦並びレイアウトは使用禁止
・useEffectの新規追加は禁止Insérez simplement ceci au début de votre invite à chaque fois、Les accidents « à l’envers » de l’IA seront considérablement réduits。Sans s'appuyer sur l'histoire du dialogue passé、Définir l'état à chaque inviteC’est l’étiquette de base pour le développement conjoint de l’IA.。
Règle 3：Le simple fait de « comprendre la signification du code » vous donnera un avantage considérable.
Vous n'avez pas besoin d'être un ingénieur complet。Mais on ne peut pas non plus être un « amateur complet ».。
Quand Claude a dit "C'est causé par le calcul parRow à la ligne 687"、selon que tu comprennes le sens、La précision de l’instruction suivante change radicalement.。dans mon cas、Parce que j'ai pu au moins comprendre comment circule l'état React.、J'ai pu donner des instructions de correction précises telles que "Veuillez simplifier l'état" et "Veuillez séparer l'état de la vignette".。
Ce qui est important, ce n’est pas la capacité à écrire du code.、" L'attitude consistant à essayer de saisir le sens de l'erreur."est。Même si vous copiez et collez simplement le message d'erreur dans l'IA et demandez « Pourquoi cela se produit-il ?、Ouvre la voie à une solution。
Concepts de base de la programmation (variables、fonction、boucle、Les gens qui connaissent le branchement conditionnel)、À l’ère de l’IALa position la plus forte de la « classe moyenne »je suis dans。De la personne qui écrit le code、La valeur des personnes capables de s’adapter、va augmenter à l'avenir。
calcul par ligne：(Calcul qui ajuste automatiquement le "nombre d'éléments par ligne" en fonction de la largeur de l'écran)État de réaction：(La « mémoire » dont l'application se souvient à ce moment)état de la vignette：(Mémoire dont "l'image réduite" est sélectionnée)
Règle 4：Sachez que la « mémoire du créateur » est le plus grand atout.
La chose la plus importante dans ce projet était、Pas la technologie ou les performances de l’IA.、Le fait que j'ai moi-même été le concepteur de cette applicationC'était。
L’IA ne peut pas fonctionner sans spécifications.。mais、Même sans spécifications, si vous avez la "mémoire du constructeur"、Il peut être traduit en langage et transmis à l’IA.。
- Animation de rotation « Vitesse » lorsque vous appuyez dessus
- "Poids d'inertie" du défilement horizontal
- « Produire de la profondeur » dans l’espace vitrine
Même si ceux-ci ne sont pas enregistrés numériquement,、Je m'en souviens avec le corps du créateur。La capacité de mettre des mots sur ces souvenirs、Devenez le pouvoir de transmettre des plans à l’IA。
A l'inverse, cette fois、Lorsque j'ai lancé à Claude la première invite simple : "Veuillez reconstruire une interface utilisateur équivalente à partir de cette structure IPA/APK"、Ce que l’IA a produit était « quelque chose de différent comme ça »。15Le comportement et la sensation uniques aux applications de 2015、Il ne pouvait pas être restauré sur une IA qui ne possédait pas le code source.。
Lors de la renaissance d'actifs passés、La question que vous devriez vous poser avant d’envisager les performances de l’IA est « Dans quelle mesure pouvez-vous verbaliser le travail ? »。
Règle 5：Laisser un « record d’échec »、devient une information primaire
Ne cachez pas le fait que l’IA a échoué.。
Boucle de débogage infinie、J'ai fait la même erreur encore et encore、Il y a aussi certaines fonctions qui n'ont pas pu être résolues (cette fonction Together est encore inachevée).、garder tout comme trace。
Pour une raison quelconque。
L'histoire de « J'ai tout lancé sur AI et tout a été terminé en quelques heures. »、Ça fait du bien de lire。mais non reproductible。Essayez de faire la même chose、Parce que le résultat ne sera pas le même。
d'autre part、Des enregistrements tels que « Il s'est cassé lorsque je lui ai demandé de faire cela », « Lorsque je l'ai réparé dans cet ordre, une autre partie s'est cassée » ou « Cette fonction n'a tout simplement pas fonctionné » sont enregistrés.、Pour que la prochaine personne heurte le même mur、Devenez une carte concrète。
Les histoires de réussite sont intéressantes à lire.。maisL'histoire de l'échec、Peut être utilisé comme information。
Plus les humains collaborent avec l’IA、La valeur des informations primaires telles que « où est-ce que je trébuche » et « comment reconstruire ? » augmente.。qui l'a、Seulement les gens qui l'ont réellement fait。
liste de contrôle pratique：Éléments à vérifier avant de faire revivre des actifs antérieurs avec l'IA
- À propos de l’œuvre que vous souhaitez relancer、Ai-je été impliqué en tant que concepteur/producteur ?
- Avez-vous la « mémoire » pour verbaliser le cahier des charges à ce moment-là ?
- Les instructions adressées à l’IA peuvent-elles être rédigées sous la forme d’une « liste de conditions » plutôt que de « demandes » ?
- Êtes-vous prêt à au moins lire la signification des messages d’erreur ?
- Êtes-vous prêt à enregistrer vos échecs et vos essais et erreurs ?
- Pouvez-vous abandonner l’espoir que cela soit terminé en quelques heures ?
6Si tout est coché、Votre projet est susceptible d'être alimenté par l'IA。
résumé：L’IA est un « outil pour construire des ponts »、Ce sont les humains qui achèvent le pont.
2011« COSPLAY SHOWCASE » est né en、2026Après la Golden Week 2018、J'ai recommencé à fonctionner en tant qu'application Web。
Il est vrai que cela a été réalisé grâce à l’IA.。mais、Il est également vrai que l’IA seule n’aurait jamais pu accomplir cette tâche.。
Analyser IPA et APK、La première tentative pour que Claude effectue une "restauration automatique" a échoué。l'enfer de la boucle d'état、Comportement de balayage interrompu、Boucle de débogage infinie——L'IA génère rapidement, mais、La conception était approximative。Mais à travers cet échec、J'ai appris "comment utiliser l'IA"。
Ce qu’il faut à l’ère de l’IA, ce n’est pas de « puissance génératrice »。Isoler le problème、Observation de l'interface utilisateur、Détection de l'inconfort、Organisation du cahier des charges、Instructions de correction --- ces capacités.。
Le travail de connexion des actifs passés au présent avec l’IA、Il ne s'agit pas de "s'amuser"。« Ce qui était auparavant impossible、rendre cela possible »C'est ça.。
Seules les personnes qui comprennent la différence、AIを本当の意味で使いこなせる。
🎭COSPLAY SHOWCASE WEB版を体験する https://nsp-jp.com/cosplayshowcase/app/
📖プロジェクト全記録（元記事） https://nsp-jp.com/blog/cosplay-showcase-web-ai-revival/
