Article summary
- who did what：Photographer Nobutsugu Sugiyama、2011The iPhone app “COSPLAY SHOWCASE” ranked second on the App Store in 2018.、Revived as a web app using AI。
- In conclusion,：AI does not work by “throwing everything”。However, if you have the technology to "structure and pass requirements"、Assets from the past are definitely connected to the present。
- What you get from this article：``Patterns of AI failure'' and ``5 rules for correctly operating AI'' revealed through actual AI joint development。
- Introduction：Do you also have “sleeping assets”?
- Background to the challenge：Date when IPA/APK was analyzed
- despair faced：3Two “hells”
- ``Five Rules for AI Collaboration'' derived from this
- Rule 1：Give it as a “design document” instead of a “request”
- Rule 2：Design with AI “forgetting” in mind
- Rule 3：Just “understanding the meaning of the code” will give you an overwhelming advantage.
- Rule 4：Know that the ``maker's memory'' is the greatest asset.
- Rule 5：Leaving a “record of failure”、becomes primary information
- practical checklist：Things to check before reviving past assets with AI
- summary：AI is a “tool for building bridges”、It is humans who complete the bridge.
Introduction：Do you also have “sleeping assets”?
old app、Web service that has stopped working、Works that have not been converted into digital data——。
“What I made back then.、I'm sure many people have thought, "I want to do it again with today's technology."。But in reality、In front of "technical barriers" and "time and cost"、most projects are abandoned。
I'm Golden Week 2026、I hit that wall head on with the AI.。
15An iPhone app called "COSPLAY SHOWCASE," which ranked second in sales on the App Store a year ago.、This is a project to revive it as a web application.。Not a complete engineer、From the standpoint of being a “photographer who can do some coding”。
“With AI, it can be completed in a few hours.” There was a time when I thought that too.。
reality was different。
Background to the challenge：Date when IPA/APK was analyzed
At first, all I had was "binary".
What I was able to prepare for this project was、There were only the following。
- iOS version IPA file(The “contents” of the iPad/iPhone app are packed.、package for installation)
- Android version APK file(This is the “true identity” of Android apps.、A set of files for installation)
- JPEG images and UI screenshots from that time
- App introduction page text
- My own “Memory of the Creator”
The biggest problem is、There was no complete source code left.。
In other words, the starting point of the project is、Reverse engineering was the premise from the beginning.。
What happens when you let Claude analyze it?
The first attempt was simple。
“If I let Claude read the IPA/APK,、Is it possible to automatically convert it to React to some extent? ”
The current generation AI is React generation、TypeScript generation、Tailwind CSS architecture、UI component generation、Error correction correction——very strong in this area。That's why the idea of ``turning old apps into a web version using AI''、looked realistic。
React:(combining "parts"、(Mechanism for creating screens)Tailwind CSS:(Just by arranging the predetermined "words"、Tools for designing)
But when you actually move your hands、the situation was completely different。
Inside IPA、resource structure、image file、Some configuration information、I was able to confirm the bundle configuration.。but、The important compiled code from the Objective-C era is、I can't read it as it is。Claude analyzes IPA and recognizes "structure-like things"。butUI migration、gesture design(Design of “reaction” to finger movements)、state management、Animation intentIt is、It was almost impossible to restore。
Android APK side is XML layout and drawable(images, shapes, etc.、(General term for "material data" displayed on the screen)remains relatively、It was somewhat easy to read。However, a fundamental problem arises here as well: AI can read “what exists”。butI don't understand why they designed it that way.。
Why are the images in this order?。Why switch at this time?。Why this swipe speed?。These design intentions are、not recorded in binary。In other wordsThe philosophy of UI/UX is、Not restored by AI。
This is、It was the first big wall.。
despair faced：3Two “hells”
As the project progresses、Specific problems appeared one after another.。
Hell 1：UI structure is broken
The first prompt was something like this。
"From this IPA/APK structure、React + Please rebuild the equivalent UI with Tailwind CSS."
The result is、It was quite broken。
AI starts assembling the screen by guessing。But the hierarchy(class)、state structure(Data management rules)、component segmentation(Dividing into parts)is different from the real app。"It looks like that, but it's different" is generated.。Even in Tailwind CSS、Excessive utility、responsive collapse、z-index accident、Mobile overflow occurred frequently。The most common response was ``No problem on PC.''、It was a pattern of “collapse due to smartphone”。
Excessive utility：(There are too many design instructions.、code becomes a “spell”)responsive collapse：(If you change the screen size、(It looks “messy”)z-index accident：(The overlapping order of parts is out of order.、(The button becomes “buried” and cannot be pressed)mobile overflow：(exceeds the width of the screen)、Shaking from side to side)
Hell 2：Broken swipe behavior
This was particularly serious.。
The core of COSPLAY SHOWCASE was "flick and rotate photos"。However, AI uses inertial scroll、Managing drag states、touch cancel processing、I made a lot of mistakes in implementing mobile gestures.。
touch cancel；(The fingers that were touching、(off-screen or disabled state)
as a result、
- get caught
- jump
- move in the opposite direction
- Only mobile is broken
occurred frequently。Especially in mobile Safari、touch-action、overflow、passive event、Quite stuck around image rendering。
touch-action：(“Allow scrolling” setting when touching the screen)overflow：(Rules for whether to "hide or show" parts that protrude from the frame)passive event：(Preliminary signal for “smooth movement” of scrolling)image rendering：(Specification of whether the image should look sharp or smooth)
Tactility was the weakest area for AI.。 Appearance can be reproduced。However, ``finger separation,'' ``weight of inertia,'' ``swipe speed,'' and ``animation timing''—these cannot be determined by logic alone.。In the end, humans had no choice but to detect the discomfort.。
hell 3：state loop hell
This happened particularly frequently when porting React.。
AI will come soonuseEffect(Automatic processing that “links automatically”)want to write。as a result、infinite re-rendering、state loop、image preload goes out of control。
I was trying to fix a bug called the wrapping layout of favorites display.、I entered an "infinite debugging loop" where each modification broke a different part.。
- Vertical alignment → Correct → Title order display is disrupted
- Fix → Image size changes → Fix → Horizontal scroll disappears
- Trying to put it back together → another part breaks
AI ignores the same prohibitions over and over again。Forgetting the context of the previous conversation and going backwards。
After this process、I finally began to understand the “essential structure” of AI co-production.。
``Five Rules for AI Collaboration'' derived from this
AI doesn't work because it's a ``toss up''。However, if you understand "how to operate AI"、Assets from the past are definitely connected to the present。The following is、Here are five rules extracted from this experience.。
Rule 1：Give it as a “design document” instead of a “request”
What is the most important instruction to the AI?、vague requestsstructured conditionsis to convert it to。
❌ Examples of instructions that fail
"I want it to wrap naturally depending on the browser width."
With this instruction, the AI generated a flexible layout for Tailwind.。But it broke the side scrolling UI of COSPLAY SHOWCASE。“Natural folding” meant “vertical stacking” for AI。
✅ Examples of working instructions
- Vertical arrangement is absolutely no good.
- Always maintain horizontal scrolling
- Keep image size same as title order
- Do not lose the balance of the number of lines
The difference is not "what you want me to do"、Clearly stating what not to dois。The more constraints AI has, the more、Easy to converge in the right direction。Even in modifying swipe behavior.、There is a list of specific prohibitions and conditions such as "do not add inertia", "swipe speed is constant", "mobile Safari is prioritized", "layout shift is prohibited while loading images"、This was the most effective instruction。
Rule 2：Design with AI “forgetting” in mind
AI has limited ability to maintain context。in a long conversation、Specifications decided in the first half are often ignored in the second half.。
Actually in my project、The rule that was supposed to be "no horizontal scrolling"、There were many instances where the AI would break after several dozen turns as if nothing had happened.。Also when fixing the state circulation problem、Uses useEffect again, which was prohibited in the previous dialogue.、That was repeated。
The measures are“Put a list of prohibited items at the beginning of every session.”That's it.。
【このセッションの絶対条件】
・横スクロールUIは変更しない
・画像サイズは既存の仕様を維持
・縦並びレイアウトは使用禁止
・useEffectの新規追加は禁止Just insert this at the beginning of your prompt every time、AI “backward” accidents will be significantly reduced。Without relying on past dialogue history、Define state at every promptThis is the basic etiquette for joint AI development.。
Rule 3：Just “understanding the meaning of the code” will give you an overwhelming advantage.
You don't have to be a complete engineer。But you can't be a "complete amateur" either.。
When Claude said "It's caused by the perRow calculation on line 687"、depending on whether you can understand the meaning、The accuracy of the next instruction changes dramatically.。in my case、Because I was able to at least understand how React state circulates.、I was able to give accurate correction instructions such as "Please simplify the state" and "Please separate the thumbnail state"。
What is important is not the ability to write code.、``The attitude of trying to grasp the meaning of the error."is。Even if you simply copy and paste the error message into the AI and ask "Why is this happening?"、Opens the way to a solution。
Basic concepts of programming (variables、function、loop、People who know conditional branching)、In the age of AIThe strongest position of “middle class”I'm in。From the person writing the code、The value of people who can adjust、will rise in the future。
perRow calculation：(Calculation that automatically adjusts the "number of items per line" according to the screen width)React state：(The “memory” that the app remembers at this moment)thumbnail state：(Memory of which "reduced image" is being selected)
Rule 4：Know that the ``maker's memory'' is the greatest asset.
The most important thing about this project was、Not technology or AI performance.、The fact that I myself was the designer of this appIt was。
AI cannot function without specifications.。but、Even without specifications, if you have the ``memory of the maker''、It can be translated into language and passed to AI.。
- "Speed" rotation animation when tapped
- "Weight of inertia" of horizontal scrolling
- “Producing depth” in the showcase space
Even if these are not recorded numerically,、I remember it with the body of the creator。The ability to put those memories into words、Become the power to pass blueprints to AI。
Conversely, this time、When I threw Claude the first simple prompt: "Please rebuild an equivalent UI from this IPA/APK structure"、What the AI outputted was “something different like that”。15The behavior and feel unique to apps from 2015、It could not be restored to an AI that did not have the source code.。
When reviving past assets、The question you should ask before considering AI performance is "How well can you verbalize the work?"。
Rule 5：Leaving a “record of failure”、becomes primary information
Don't hide the fact that AI has failed.。
Infinite debug loop、I've made the same mistake over and over again、There are also some functions that could not be solved (this Together function is still unfinished).、keep everything as a record。
For some reason。
The story of ``I threw everything at AI and it was completed in a few hours.''、It feels good to read。but not reproducible。Try doing the same thing、Because the result will not be the same。
on the other hand、Records such as ``It broke when I instructed it to do this,'' ``When I fixed it in this order, another part broke,'' or ``This function just didn't work'' are recorded.、For the next person to hit the same wall、Become a concrete map。
Success stories are interesting to read.。butThe failure story、Can be used as information。
The more humans collaborate with AI、The value of primary information such as ``where do I stumble'' and ``how to rebuild?'' increases.。who has it、Only the people who actually did it。
practical checklist：Things to check before reviving past assets with AI
- About the work you want to revive、Was I involved as a designer/producer?
- Do you have the “memory” to verbalize the specifications at that time?
- Can instructions to AI be written as a “list of conditions” instead of “requests”?
- Are you willing to at least read the meaning of error messages?
- Are you prepared to record your failures and trial and error?
- Can you let go of the expectation that it will be completed in a few hours?
6If all are checked、Your project is likely to be powered by AI。
summary：AI is a “tool for building bridges”、It is humans who complete the bridge.
2011“COSPLAY SHOWCASE” was born in、2026After Golden Week in 2018、Started working again as a web app。
It is true that it was completed because of AI.。but、It is also true that AI alone could never have completed the task.。
Analyze IPA and APK、First attempt to get Claude to "auto-restore" failed。state loop hell、Broken swipe behavior、Infinite debug loop——AI generates quickly, but、The design was rough。But through that failure、I learned "how to use AI"。
What is needed in the AI era is not “generative power”。Isolating the problem、UI observation、Detection of discomfort、Organizing specifications、Correction instructions---these abilities.。
The work of connecting past assets to the present with AI、It's not about "having fun"。“What was previously impossible、make it possible”That's it.。
Only people who understand the difference、AIを本当の意味で使いこなせる。
🎭COSPLAY SHOWCASE WEB版を体験する https://nsp-jp.com/cosplayshowcase/app/
📖プロジェクト全記録（元記事） https://nsp-jp.com/blog/cosplay-showcase-web-ai-revival/
