Resumo do artigo
- quem fez o quê：Fotógrafo Nobutsugu Sugiyama、2011O aplicativo para iPhone “COSPLAY SHOWCASE” ficou em segundo lugar na App Store em 2018.、Revivido como um aplicativo da web usando IA。
- Para concluir,：IA não funciona “jogando tudo”。Porém, se você tiver a tecnologia para "estruturar e passar requisitos"、Os ativos do passado estão definitivamente ligados ao presente。
- O que você obtém deste artigo：``Padrões de falha da IA'' e ``5 regras para operar corretamente a IA'' revelados através do desenvolvimento conjunto real da IA。
- Introdução：Você também tem “ativos adormecidos”?
- Antecedentes do desafio：Data em que o IPA/APK foi analisado
- desespero enfrentado：3Dois “infernos”
- ``Cinco regras para colaboração em IA'' derivadas deste
- Regra 1：Forneça-o como um “documento de design” em vez de uma “solicitação”
- Regra 2：Projete com o “esquecimento” da IA em mente
- Regra 3：Apenas “entender o significado do código” lhe dará uma vantagem esmagadora.
- Regra 4：Saiba que a ``memória do fabricante'' é o maior patrimônio.
- Regra 5：Deixando um “registro de fracasso”、torna-se informação primária
- lista de verificação prática：Coisas a verificar antes de reviver ativos anteriores com IA
- resumo：IA é uma “ferramenta para construir pontes”、São os humanos que completam a ponte.
Introdução：Você também tem “ativos adormecidos”?
aplicativo antigo、Serviço web que parou de funcionar、Obras que não foram convertidas em dados digitais——。
“O que eu fiz naquela época.、Tenho certeza de que muitas pessoas pensaram: “Quero fazer isso de novo com a tecnologia de hoje”.。Mas na realidade、Diante de “barreiras técnicas” e “tempo e custo”、a maioria dos projetos são abandonados。
Estou na Semana Dourada de 2026、Eu bati de frente naquela parede com a IA.。
15Um aplicativo para iPhone chamado “COSPLAY SHOWCASE”, que ficou em segundo lugar em vendas na App Store há um ano.、Este é um projeto para reanimá-lo como uma aplicação web.。Não é um engenheiro completo、Do ponto de vista de ser um “fotógrafo que sabe fazer alguma codificação”。
“Com IA, isso pode ser concluído em poucas horas.” Houve um tempo em que eu também pensava isso.。
a realidade era diferente。
Antecedentes do desafio：Data em que o IPA/APK foi analisado
No início, tudo que eu tinha era “binário”.
O que consegui preparar para este projeto foi、Havia apenas os seguintes。
- Arquivo IPA da versão iOS(O “conteúdo” do aplicativo para iPad/iPhone está compactado.、pacote para instalação)
- Arquivo APK da versão do Android(Esta é a “verdadeira identidade” dos aplicativos Android.、Um conjunto de arquivos para instalação)
- Imagens JPEG e capturas de tela da IU daquela época
- Texto da página de introdução do aplicativo
- Minha própria “Memória do Criador”
O maior problema é、Não sobrou nenhum código-fonte completo.。
Em outras palavras, o ponto de partida do projeto é、A engenharia reversa foi a premissa desde o início.。
O que acontece quando você deixa Claude analisar isso?
A primeira tentativa foi simples。
“Se eu deixar Claude ler o IPA/APK,、É possível convertê-lo automaticamente para React até certo ponto? ”
A geração atual de IA é a geração React、Geração TypeScript、Arquitetura CSS Tailwind、Geração de componentes de UI、Correção de correção de erros —— muito forte nesta área。É por isso que surgiu a ideia de ``transformar aplicativos antigos em uma versão web usando IA''、parecia realista。
Reagir:(combinando "partes"、(Mecanismo de criação de telas)CSS do vento favorável:(Apenas organizando as "palavras" predeterminadas、Ferramentas para projetar)
Mas quando você realmente move suas mãos、a situação era completamente diferente。
Por dentro do IPA、estrutura de recursos、arquivo de imagem、Algumas informações de configuração、Consegui confirmar a configuração do pacote.。mas、O importante código compilado da era Objective-C é、não consigo ler como está。Claude analisa IPA e reconhece "coisas semelhantes a estruturas"。masMigração da IU、desenho de gestos(Desenho de “reação” aos movimentos dos dedos)、gestão estadual、Intenção de animaçãoé、Era quase impossível restaurar。
O lado do APK do Android tem layout XML e pode ser desenhado(imagens, formas, etc.、(Termo geral para "dados de material" exibidos na tela)permanece relativamente、Foi um pouco fácil de ler。No entanto, também aqui surge um problema fundamental: a IA pode ler “o que existe”。masNão entendo por que eles projetaram dessa maneira.。
Por que as imagens estão nesta ordem?。Por que mudar neste momento?。Por que essa velocidade de furto?。Essas intenções de design são、não gravado em binário。Em outras palavrasA filosofia da UI/UX é、Não restaurado pela IA。
isto é、Foi a primeira grande parede.。
desespero enfrentado：3Dois “infernos”
À medida que o projeto avança、Problemas específicos apareceram um após o outro.。
Inferno 1：A estrutura da IU está quebrada
O primeiro prompt foi algo assim。
"A partir desta estrutura IPA/APK、Reagir + Por favor, reconstrua a UI equivalente com Tailwind CSS."
O resultado é、Estava bastante quebrado。
AI começa a montar a tela adivinhando。Mas a hierarquia(aula)、estrutura estadual(Regras de gerenciamento de dados)、segmentação de componentes(Dividindo em partes)é diferente do aplicativo real。“Parece que sim, mas é diferente” é gerado.。Mesmo em Tailwind CSS、Utilidade excessiva、colapso responsivo、acidente de índice z、O estouro de dispositivos móveis ocorreu com frequência。A resposta mais comum foi “Não há problema no PC”.、Foi um padrão de “colapso devido ao smartphone”。
Utilidade excessiva：(Existem muitas instruções de design.、código se torna um “feitiço”)colapso responsivo：(Se você alterar o tamanho da tela、(Parece “bagunçado”)acidente de índice z：(A ordem sobreposta das peças está fora de ordem.、(O botão fica “enterrado” e não pode ser pressionado)estouro de celular：(excede a largura da tela)、Tremendo de um lado para o outro)
Inferno 2：Comportamento de deslizamento quebrado
Isto foi particularmente grave.。
O núcleo do COSPLAY SHOWCASE era "virar e girar fotos"。No entanto, a IA usa rolagem inercial、Gerenciando estados de arrastar、toque em cancelar processamento、Cometi muitos erros na implementação de gestos móveis.。
toque em cancelar；(Os dedos que estavam tocando、(estado fora da tela ou desativado)
como resultado、
- ser apanhado
- pular
- mover-se na direção oposta
- Apenas o celular está quebrado
ocorreu com frequência。Especialmente no Safari móvel、ação de toque、transbordar、evento passivo、Bastante preso na renderização de imagens。
ação de toque：(Configuração “Permitir rolagem” ao tocar na tela)transbordar：(Regras para "ocultar ou mostrar" peças que se projetam do quadro)evento passivo：(Sinal preliminar para “movimento suave” de rolagem)renderização de imagem：(Especificação se a imagem deve parecer nítida ou suave)
A tatilidade foi a área mais fraca da IA.。 A aparência pode ser reproduzida。No entanto, ``separação dos dedos'', ``peso da inércia'', ``velocidade de furto'' e ``tempo de animação'' – estes não podem ser determinados apenas pela lógica.。No final, os humanos não tiveram escolha senão detectar o desconforto.。
inferno 3：inferno de loop de estado
Isso aconteceu com especial frequência ao portar o React.。
IA virá em breveuseEffect(Processamento automático que “liga automaticamente”)quero escrever。como resultado、re-renderização infinita、loop de estado、o pré-carregamento da imagem fica fora de controle。
Eu estava tentando consertar um bug chamado layout de quebra automática de exibição de favoritos.、Entrei em um "loop de depuração infinito" onde cada modificação quebrava uma parte diferente.。
- Alinhamento vertical → Correto → A exibição da ordem dos títulos é interrompida
- Correção → Mudanças no tamanho da imagem → Correção → A rolagem horizontal desaparece
- Tentando recompor → outra parte quebra
A IA ignora as mesmas proibições repetidamente。Esquecer o contexto da conversa anterior e voltar atrás。
Depois deste processo、Finalmente comecei a compreender a “estrutura essencial” da coprodução de IA.。
``Cinco regras para colaboração em IA'' derivadas deste
A IA não funciona porque é um “lançamento”。No entanto, se você entender "como operar a IA"、Os ativos do passado estão definitivamente ligados ao presente。O seguinte é、Aqui estão cinco regras extraídas desta experiência.。
Regra 1：Forneça-o como um “documento de design” em vez de uma “solicitação”
Qual é a instrução mais importante para a IA?、pedidos vagoscondições estruturadasé convertê-lo para。
❌ Exemplos de instruções que falham
"Quero que ele seja ajustado naturalmente dependendo da largura do navegador."
Com esta instrução, a IA gerou um layout flexível para o Tailwind.。Mas quebrou a interface de rolagem lateral do COSPLAY SHOWCASE。“Dobradura natural” significava “empilhamento vertical” para IA。
✅ Exemplos de instruções de trabalho
- O arranjo vertical não é absolutamente bom.
- Sempre mantenha a rolagem horizontal
- Mantenha o tamanho da imagem igual à ordem do título
- Não perca o equilíbrio do número de linhas
A diferença não é "o que você quer que eu faça"、Indicando claramente o que não fazeré。Quanto mais restrições a IA tiver, mais、Fácil de convergir na direção certa。Mesmo na modificação do comportamento de deslizar.、Há uma lista de proibições e condições específicas, como "não adicionar inércia", "a velocidade de furto é constante", "o Safari móvel é priorizado", "a mudança de layout é proibida durante o carregamento de imagens"、Esta foi a instrução mais eficaz。
Regra 2：Projete com o “esquecimento” da IA em mente
A IA tem capacidade limitada de manter o contexto。em uma longa conversa、As especificações decididas no primeiro semestre são frequentemente ignoradas no segundo semestre.。
Na verdade no meu projeto、A regra que deveria ser "sem rolagem horizontal"、Houve muitos casos em que a IA quebrou após várias dezenas de turnos, como se nada tivesse acontecido.。Também ao resolver o problema de circulação estadual、Usa useEffect novamente, o que foi proibido no diálogo anterior.、Isso foi repetido。
As medidas são“Coloque uma lista de itens proibidos no início de cada sessão.”É isso.。
【このセッションの絶対条件】
・横スクロールUIは変更しない
・画像サイズは既存の仕様を維持
・縦並びレイアウトは使用禁止
・useEffectの新規追加は禁止Basta inserir isso no início do seu prompt sempre、Os acidentes “ao contrário” da IA serão significativamente reduzidos。Sem depender do histórico de diálogos anteriores、Defina o estado em cada promptEsta é a etiqueta básica para o desenvolvimento conjunto de IA.。
Regra 3：Apenas “entender o significado do código” lhe dará uma vantagem esmagadora.
Você não precisa ser um engenheiro completo。Mas você também não pode ser um “completo amador”.。
Quando Claude disse "É causado pelo cálculo perRow na linha 687"、dependendo se você consegue entender o significado、A precisão da próxima instrução muda drasticamente.。no meu caso、Porque consegui pelo menos entender como o estado React circula.、Consegui fornecer instruções de correção precisas, como "Simplifique o estado" e "Separe o estado da miniatura"。
O que é importante não é a capacidade de escrever código.、``A atitude de tentar compreender o significado do erro."é。Mesmo se você simplesmente copiar e colar a mensagem de erro na IA e perguntar “Por que isso está acontecendo?”、Abre o caminho para uma solução。
Conceitos básicos de programação (variáveis、função、laço、Pessoas que conhecem ramificação condicional)、Na era da IAA posição mais forte da “classe média”estou dentro。Da pessoa que escreveu o código、O valor das pessoas que podem se ajustar、subirá no futuro。
cálculo por linha：(Cálculo que ajusta automaticamente o “número de itens por linha” de acordo com a largura da tela)Estado de reação：(A “memória” que o app lembra neste momento)estado da miniatura：(Memória da qual "imagem reduzida" está sendo selecionada)
Regra 4：Saiba que a ``memória do fabricante'' é o maior patrimônio.
O mais importante deste projeto foi、Não é tecnologia ou desempenho de IA.、O fato de eu ter sido o designer deste aplicativoEra。
A IA não pode funcionar sem especificações.。mas、Mesmo sem especificações, se você tiver a ``memória do fabricante''、Ele pode ser traduzido para um idioma e passado para a IA.。
- Animação de rotação "Velocidade" quando tocada
- “Peso de inércia” da rolagem horizontal
- “Produzindo profundidade” no espaço da vitrine
Mesmo que não sejam registrados numericamente,、Lembro-me disso com o corpo do criador。A capacidade de colocar essas memórias em palavras、Torne-se o poder de passar projetos para IA。
Por outro lado, desta vez、Quando lancei para Claude o primeiro prompt simples: "Reconstrua uma UI equivalente a partir desta estrutura IPA/APK"、O que a IA produziu foi “algo diferente assim”。15O comportamento e a sensação exclusivos dos aplicativos de 2015、Não foi possível restaurá-lo para uma IA que não tivesse o código-fonte.。
Ao reviver ativos passados、A pergunta que você deve fazer antes de considerar o desempenho da IA é “Quão bem você consegue verbalizar o trabalho?”。
Regra 5：Deixando um “registro de fracasso”、torna-se informação primária
Não esconda o fato de que a IA falhou.。
Loop de depuração infinito、Eu cometi o mesmo erro repetidamente、Existem também algumas funções que não puderam ser resolvidas (esta função do Together ainda está inacabada).、manter tudo como um registro。
Por alguma razão。
A história de “Joguei tudo na IA e foi concluído em poucas horas”.、É bom ler。mas não reproduzível。Tente fazer a mesma coisa、Porque o resultado não será o mesmo。
por outro lado、Registros como ``Ele quebrou quando eu instruí para fazer isso'', ``Quando eu consertei nesta ordem, outra peça quebrou'' ou ``Esta função simplesmente não funcionou'' são registrados.、Para a próxima pessoa bater na mesma parede、Torne-se um mapa concreto。
Histórias de sucesso são interessantes de ler.。masA história do fracasso、Pode ser usado como informação。
Quanto mais humanos colaboram com IA、O valor de informações primárias como “onde tropeço” e “como reconstruir?” aumenta.。quem tem isso、Somente as pessoas que realmente fizeram isso。
lista de verificação prática：Coisas a verificar antes de reviver ativos anteriores com IA
- Sobre o trabalho que você deseja reviver、Estive envolvido como designer/produtor?
- Você tem “memória” para verbalizar as especificações naquele momento?
- As instruções para IA podem ser escritas como uma “lista de condições” em vez de “solicitações”?
- Você está disposto a pelo menos ler o significado das mensagens de erro?
- Você está preparado para registrar suas falhas e tentativas e erros?
- Você consegue abandonar a expectativa de que tudo será concluído em algumas horas?
6Se todos estiverem verificados、É provável que seu projeto seja desenvolvido com IA。
resumo：IA é uma “ferramenta para construir pontes”、São os humanos que completam a ponte.
2011“COSPLAY SHOWCASE” nasceu em、2026Depois da Golden Week em 2018、Comecei a trabalhar novamente como um aplicativo da web。
É verdade que foi concluído por causa da IA.。mas、Também é verdade que a IA sozinha nunca poderia ter concluído a tarefa.。
Analise IPA e APK、A primeira tentativa de fazer com que Claude fizesse a "restauração automática" falhou。inferno de loop de estado、Comportamento de deslizamento quebrado、Loop de depuração infinito —— AI gera rapidamente, mas、O design era áspero。Mas através desse fracasso、Aprendi "como usar IA"。
O que é necessário na era da IA não é “poder gerador”。Isolando o problema、Observação da IU、Detecção de desconforto、Especificações de organização、Instruções de correção --- essas habilidades.。
O trabalho de conectar ativos passados ao presente com IA、Não se trata de "se divertir"。“O que antes era impossível、tornar isso possível”É isso.。
Somente pessoas que entendem a diferença、AIを本当の意味で使いこなせる。
🎭COSPLAY SHOWCASE WEB版を体験する https://nsp-jp.com/cosplayshowcase/app/
📖プロジェクト全記録（元記事） https://nsp-jp.com/blog/cosplay-showcase-web-ai-revival/
