Riepilogo dell'articolo
- chi ha fatto cosa：Il fotografo Nobutsugu Sugiyama、2011L'app per iPhone “COSPLAY SHOWCASE” si è classificata seconda nell'App Store nel 2018.、Rianimato come app Web utilizzando l'intelligenza artificiale。
- Insomma,：L’intelligenza artificiale non funziona “buttando tutto”。Tuttavia, se si dispone della tecnologia per "strutturare e superare i requisiti"、Le risorse del passato sono sicuramente collegate al presente。
- Cosa ottieni da questo articolo："Modelli di fallimento dell'IA" e "5 regole per il corretto funzionamento dell'IA" rivelati attraverso l'effettivo sviluppo congiunto dell'IA。
- Introduzione：Disponete anche di “beni dormienti”?
- Contesto della sfida：Data in cui è stato analizzato IPA/APK
- disperazione affrontata：3Due “inferni”
- Da qui derivano le "Cinque regole per la collaborazione con l'intelligenza artificiale".
- Regola 1：Presentalo come un "documento di progettazione" invece che come una "richiesta"
- Regola 2：Progetta pensando al “dimentico” dell’intelligenza artificiale
- Regola 3：Solo “comprendere il significato del codice” ti darà un vantaggio enorme.
- Regola 4：Sappiate che la “memoria del creatore” è la risorsa più grande.
- Regola 5：Lasciare un “record di fallimenti”、diventa informazione primaria
- lista di controllo pratica：Cose da controllare prima di ripristinare risorse passate con l'intelligenza artificiale
- riepilogo：L’intelligenza artificiale è uno “strumento per costruire ponti”、Sono gli umani a completare il ponte.
Introduzione：Disponete anche di “beni dormienti”?
vecchia app、Servizio Web che ha smesso di funzionare、Opere che non sono state convertite in dati digitali——。
“Quello che ho fatto allora.、Sono sicuro che molte persone hanno pensato: "Voglio farlo di nuovo con la tecnologia di oggi".。Ma in realtà、Di fronte a “barriere tecniche” e “tempi e costi”、la maggior parte dei progetti vengono abbandonati。
Sono la Settimana d'Oro 2026、Ho colpito quel muro a testa alta con l'intelligenza artificiale.。
15Un'app per iPhone chiamata "COSPLAY SHOWCASE", che un anno fa si è classificata seconda nelle vendite sull'App Store.、Questo è un progetto per rilanciarlo come applicazione web.。Non un ingegnere completo、Dal punto di vista di essere un “fotografo che sa scrivere codice”。
“Con l’intelligenza artificiale, tutto può essere completato in poche ore”. C'è stato un tempo in cui anch'io lo pensavo.。
la realtà era diversa。
Contesto della sfida：Data in cui è stato analizzato IPA/APK
All'inizio tutto quello che avevo era "binario".
Ciò che ho potuto preparare per questo progetto è stato、C'erano solo i seguenti。
- File IPA della versione iOS(I “contenuti” dell'app iPad/iPhone sono imballati.、pacchetto per l'installazione)
- File APK della versione Android(Questa è la “vera identità” delle app Android.、Una serie di file per l'installazione)
- Immagini JPEG e screenshot dell'interfaccia utente di quel periodo
- Testo della pagina di presentazione dell'app
- La mia “Memoria del Creatore”
Il problema più grande è、Non era rimasto alcun codice sorgente completo.。
In altre parole, il punto di partenza del progetto è、Il reverse engineering è stata la premessa fin dall'inizio.。
Cosa succede quando lasci che Claude lo analizzi?
Il primo tentativo è stato semplice。
"Se lascio che Claude legga l'IPA/APK,、È possibile convertirlo automaticamente in React in una certa misura? "
L'intelligenza artificiale della generazione attuale è la generazione React、Generazione di TypeScript、Architettura CSS Tailwind、Generazione di componenti dell'interfaccia utente、Correzione della correzione degli errori: molto forte in quest'area。Ecco perché è nata l'idea di "trasformare le vecchie app in una versione web utilizzando l'intelligenza artificiale"、sembrava realistico。
Reagire:(combinando "parti"、(Meccanismo per la creazione di schermate)CSS vento in coda:(Semplicemente disponendo le "parole" predeterminate、Strumenti per la progettazione)
Ma quando muovi effettivamente le mani、la situazione era completamente diversa。
All'interno dell'IPA、struttura delle risorse、file di immagine、Alcune informazioni sulla configurazione、Sono riuscito a confermare la configurazione del bundle.。ma、L'importante codice compilato dell'era Objective-C è、Non riesco a leggerlo così com'è。Claude analizza l'IPA e riconosce "cose simili a strutture"。maMigrazione dell'interfaccia utente、disegno del gesto(Progettazione della “reazione” ai movimenti delle dita)、gestione statale、Intento di animazionesi tratta di、Era quasi impossibile ripristinarlo。
Il lato APK Android è layout XML e disegnabile(immagini, forme, ecc.、(Termine generale per "dati materiali" visualizzati sullo schermo)rimane relativamente、Era piuttosto facile da leggere。Anche qui però si pone un problema fondamentale: l’intelligenza artificiale può leggere “ciò che esiste”。maNon capisco perché l'hanno progettato in quel modo.。
Perché le immagini sono in questo ordine?。Perché cambiare in questo momento?。Perché questa velocità di scorrimento?。Queste intenzioni di progettazione sono、non registrato in binario。In altre paroleLa filosofia dell'interfaccia utente/UX è、Non ripristinato dall'IA。
Questo è、È stato il primo grande muro.。
disperazione affrontata：3Due “inferni”
Mentre il progetto avanza、Problemi specifici sono comparsi uno dopo l'altro.。
Inferno 1：La struttura dell'interfaccia utente è interrotta
Il primo suggerimento era qualcosa del genere。
"Da questa struttura IPA/APK、Reagire + Ricostruisci l'interfaccia utente equivalente con Tailwind CSS."
Il risultato è、Era piuttosto rotto。
L'intelligenza artificiale inizia ad assemblare lo schermo indovinando。Ma la gerarchia(classe)、struttura statale(Norme per la gestione dei dati)、segmentazione dei componenti(Divisione in parti)è diverso dall'app reale。Viene generato il messaggio "Sembra così, ma è diverso".。Anche nei CSS Tailwind、Utilità eccessiva、collasso reattivo、Incidente dell'indice z、L'overflow del cellulare si è verificato frequentemente。La risposta più comune è stata "Nessun problema sul PC".、Si è trattato di uno schema di “crollo dovuto allo smartphone”。
Utilità eccessiva：(Ci sono troppe istruzioni per la progettazione.、il codice diventa un “incantesimo”)collasso reattivo：(Se si modifica la dimensione dello schermo、(Sembra “disordinato”)Incidente dell'indice z：(L'ordine di sovrapposizione delle parti non è corretto.、(Il pulsante diventa “sepolto” e non può essere premuto)traboccamento mobile：(supera la larghezza dello schermo)、Tremando da un lato all'altro)
Inferno 2：Comportamento di scorrimento interrotto
Ciò era particolarmente grave.。
Il nucleo di COSPLAY SHOWCASE era "scorrere e ruotare le foto"。Tuttavia, l’intelligenza artificiale utilizza lo scorrimento inerziale、Gestire gli stati di trascinamento、toccare annullare l'elaborazione、Ho commesso molti errori nell'implementazione dei gesti mobili.。
toccare Annulla；(Le dita che si toccavano、(stato fuori schermo o disabilitato)
di conseguenza、
- essere preso
- salto
- muoversi nella direzione opposta
- Solo il cellulare è rotto
si è verificato frequentemente。Soprattutto nel Safari mobile、azione tattile、traboccare、evento passivo、Abbastanza bloccato sul rendering delle immagini。
azione tattile：(Impostazione “Consenti scorrimento” quando si tocca lo schermo)traboccare：(Regole per "nascondere o mostrare" le parti che sporgono dalla cornice)evento passivo：(Segnale preliminare per il “movimento fluido” dello scorrimento)resa delle immagini：(Specifica se l'immagine deve apparire nitida o uniforme)
La tattilità era l’area più debole per l’intelligenza artificiale.。 L'apparenza può essere riprodotta。Tuttavia, "separazione delle dita", "peso di inerzia", "velocità di scorrimento" e "tempi di animazione" non possono essere determinati solo dalla logica.。Alla fine, gli esseri umani non hanno avuto altra scelta che rilevare il disagio.。
inferno 3：inferno del loop di stato
Ciò è accaduto particolarmente frequentemente durante il porting di React.。
L'intelligenza artificiale arriverà prestouseEffect(Elaborazione automatica che “si collega automaticamente”)voglio scrivere。di conseguenza、re-rendering infinito、ciclo di stato、il precarico dell'immagine va fuori controllo。
Stavo cercando di correggere un bug chiamato layout di avvolgimento della visualizzazione dei preferiti.、Sono entrato in un "ciclo di debug infinito" in cui ogni modifica interrompeva una parte diversa.。
- Allineamento verticale → Correggi → La visualizzazione dell'ordine dei titoli è interrotta
- Correggi → Cambia la dimensione dell'immagine → Correggi → Lo scorrimento orizzontale scompare
- Cercando di rimetterlo insieme → un'altra parte si rompe
L’intelligenza artificiale ignora sempre gli stessi divieti。Dimenticare il contesto della conversazione precedente e tornare indietro。
Dopo questo processo、Finalmente ho iniziato a comprendere la “struttura essenziale” della coproduzione AI.。
Da qui derivano le "Cinque regole per la collaborazione con l'intelligenza artificiale".
L'intelligenza artificiale non funziona perché è un "sballo"。Tuttavia, se capisci "come utilizzare l'intelligenza artificiale"、Le risorse del passato sono sicuramente collegate al presente。Quello che segue è、Ecco cinque regole estratte da questa esperienza.。
Regola 1：Presentalo come un "documento di progettazione" invece che come una "richiesta"
Qual è l'istruzione più importante per l'IA?、richieste vaghecondizioni strutturateè convertirlo in。
❌ Esempi di istruzioni che falliscono
"Voglio che si avvolga in modo naturale a seconda della larghezza del browser."
Con queste istruzioni, l'IA ha generato un layout flessibile per Tailwind.。Ma ha rotto l'interfaccia utente a scorrimento laterale di COSPLAY SHOWCASE。“Pieghevole naturale” significava “impilamento verticale” per l’intelligenza artificiale。
✅ Esempi di istruzioni di lavoro
- La disposizione verticale non va assolutamente bene.
- Mantieni sempre lo scorrimento orizzontale
- Mantieni le dimensioni dell'immagine uguali a quelle dell'ordine dei titoli
- Non perdere l'equilibrio del numero di righe
La differenza non è "cosa vuoi che faccia"、Dire chiaramente cosa non fareÈ。Più vincoli ha l’intelligenza artificiale, più sono、Facile convergere nella giusta direzione。Anche nel modificare il comportamento dello scorrimento.、Esiste un elenco di divieti e condizioni specifici come "non aggiungere inerzia", "la velocità di scorrimento è costante", "Safari mobile ha la priorità", "è vietato spostare il layout durante il caricamento delle immagini"、Questa è stata l'istruzione più efficace。
Regola 2：Progetta pensando al “dimentico” dell’intelligenza artificiale
L’intelligenza artificiale ha una capacità limitata di mantenere il contesto。in una lunga conversazione、Le specifiche decise nella prima metà vengono spesso ignorate nella seconda metà.。
In realtà nel mio progetto、La regola che doveva essere "no scorrimento orizzontale"、Ci sono stati molti casi in cui l'IA si rompeva dopo diverse decine di giri, come se nulla fosse successo.。Anche quando si risolve il problema della circolazione statale、Utilizza nuovamente useEffect, cosa vietata nella finestra di dialogo precedente.、Ciò è stato ripetuto。
Le misure sono"Metti un elenco di articoli proibiti all'inizio di ogni sessione."Questo è tutto.。
【このセッションの絶対条件】
・横スクロールUIは変更しない
・画像サイズは既存の仕様を維持
・縦並びレイアウトは使用禁止
・useEffectの新規追加は禁止Basta inserirlo ogni volta all'inizio del prompt、Gli incidenti “all’indietro” dell’IA saranno significativamente ridotti。Senza fare affidamento sulla storia dei dialoghi passati、Definire lo stato ad ogni promptQuesta è l’etichetta di base per lo sviluppo congiunto dell’IA.。
Regola 3：Solo “comprendere il significato del codice” ti darà un vantaggio enorme.
Non è necessario essere un ingegnere completo。Ma non puoi nemmeno essere un "dilettante completo".。
Quando Claude ha detto "È causato dal calcolo perRow sulla riga 687"、a seconda se riesci a capirne il significato、La precisione dell'istruzione successiva cambia notevolmente.。nel mio caso、Perché sono riuscito almeno a capire come circola lo stato React.、Sono stato in grado di fornire istruzioni di correzione precise come "Semplifica lo stato" e "Separa lo stato della miniatura"。
Ciò che è importante non è la capacità di scrivere codice.、«L'atteggiamento di cercare di cogliere il significato dell'errore."È。Anche se copi e incolli semplicemente il messaggio di errore nell'IA e chiedi "Perché sta succedendo?"、Apre la strada a una soluzione。
Concetti base di programmazione (variabili、funzione、ciclo continuo、Persone che conoscono la ramificazione condizionale)、Nell’era dell’IALa posizione più forte della “classe media”Ci sto。Dalla persona che scrive il codice、Il valore delle persone che sanno adattarsi、aumenterà in futuro。
calcolo perRow：(Calcolo che adegua automaticamente il "numero di elementi per riga" in base alla larghezza dello schermo)Reagire allo stato：(La “memoria” che l’app conserva in questo momento)stato della miniatura：(Memoria di cui viene selezionata l'"immagine ridotta")
Regola 4：Sappiate che la “memoria del creatore” è la risorsa più grande.
La cosa più importante di questo progetto è stata、Non la tecnologia o le prestazioni dell’intelligenza artificiale.、Il fatto che io stesso sia stato il progettista di questa appEra。
L’intelligenza artificiale non può funzionare senza specifiche.。ma、Anche senza specifiche, se si ha la “memoria del costruttore”、Può essere tradotto in linguaggio e passato all'intelligenza artificiale.。
- Animazione di rotazione "velocità" quando viene toccata
- "Peso d'inerzia" dello scorrimento orizzontale
- “Produrre profondità” nello spazio espositivo
Anche se questi non sono registrati numericamente,、Lo ricordo con il corpo del creatore。La capacità di tradurre in parole quei ricordi、Ottieni il potere di trasmettere progetti all'intelligenza artificiale。
Al contrario, questa volta、Quando ho lanciato a Claude il primo semplice messaggio: "Ricostruisci un'interfaccia utente equivalente da questa struttura IPA/APK"、Ciò che l’IA ha prodotto era “qualcosa di diverso del genere”。15Il comportamento e la sensazione unici delle app del 2015、Non è stato possibile ripristinarlo su un'IA priva del codice sorgente.。
Quando si ripristinano risorse passate、La domanda che dovresti porti prima di considerare le prestazioni dell'intelligenza artificiale è "Quanto bene riesci a verbalizzare il lavoro?"。
Regola 5：Lasciare un “record di fallimenti”、diventa informazione primaria
Non nascondere il fatto che l'intelligenza artificiale ha fallito.。
Ciclo di debug infinito、Ho fatto lo stesso errore più e più volte、Ci sono anche alcune funzioni che non possono essere risolte (questa funzione Together è ancora incompiuta).、tenere tutto come registro。
Per qualche motivo。
La storia di "Ho lanciato tutto su AI ed è stato completato in poche ore."、È bello leggere。ma non riproducibile。Prova a fare la stessa cosa、Perché il risultato non sarà lo stesso。
d'altra parte、Vengono registrate registrazioni del tipo "Si è rotto quando gli ho detto di fare così", "Quando l'ho riparato in questo ordine, si è rotta un'altra parte" o "Questa funzione semplicemente non ha funzionato".、Perché la prossima persona colpisca lo stesso muro、Diventa una mappa concreta。
Le storie di successo sono interessanti da leggere.。maLa storia del fallimento、Può essere utilizzato come informazione。
Più gli esseri umani collaborano con l’intelligenza artificiale、Aumenta il valore delle informazioni primarie come “dove inciampo” e “come ricostruire?”.。chi ce l'ha、Solo le persone che lo hanno fatto davvero。
lista di controllo pratica：Cose da controllare prima di ripristinare risorse passate con l'intelligenza artificiale
- Dell'opera che vuoi far rivivere、Sono stato coinvolto come designer/produttore?
- Hai la “memoria” per verbalizzare le specifiche in quel momento?
- Le istruzioni all’IA possono essere scritte come un “elenco di condizioni” anziché come “richieste”?
- Sei disposto a leggere almeno il significato dei messaggi di errore?
- Sei pronto a registrare i tuoi fallimenti, tentativi ed errori?
- Puoi lasciar andare l'aspettativa che sarà completato in poche ore?
6Se tutti sono controllati、È probabile che il tuo progetto sia alimentato dall'intelligenza artificiale。
riepilogo：L’intelligenza artificiale è uno “strumento per costruire ponti”、Sono gli umani a completare il ponte.
2011“COSPLAY SHOWCASE” è nato nel、2026Dopo la Settimana d'Oro nel 2018、Ha ricominciato a funzionare come app web。
È vero che è stato completato grazie all’intelligenza artificiale.。ma、È anche vero che l’intelligenza artificiale da sola non avrebbe mai potuto portare a termine il compito.。
Analizza IPA e APK、Il primo tentativo di far eseguire a Claude il "ripristino automatico" è fallito。inferno del loop di stato、Comportamento di scorrimento interrotto、Ciclo di debug infinito: l'intelligenza artificiale genera rapidamente, ma、Il design era approssimativo。Ma attraverso quel fallimento、Ho imparato "come usare l'intelligenza artificiale"。
Ciò che serve nell’era dell’IA non è “potere generativo”。Isolare il problema、Osservazione dell'interfaccia utente、Rilevazione del disagio、Specifiche organizzative、Istruzioni per la correzione: queste abilità.。
Il lavoro di collegare le risorse passate al presente con l’intelligenza artificiale、Non si tratta di "divertirsi"。“Ciò che prima era impossibile、renderlo possibile”Questo è tutto.。
Solo persone che capiscono la differenza、AIを本当の意味で使いこなせる。
🎭COSPLAY SHOWCASE WEB版を体験する https://nsp-jp.com/cosplayshowcase/app/
📖プロジェクト全記録（元記事） https://nsp-jp.com/blog/cosplay-showcase-web-ai-revival/
