文章摘要
- 谁做了什么：摄影师杉山伸嗣、2011iPhone应用程序“COSPLAY SHOWCASE”在2018年App Store排名第二。、使用人工智能作为网络应用程序复活。
- 综上所述：人工智能并不是通过“扔掉一切”来工作的。但是，如果您拥有“构建并通过需求”的技术、过去的资产肯定与现在相关。
- 你从这篇文章中得到什么：通过实际的AI联合开发揭示“AI失败的模式”和“正确操作AI的5条规则”。
介绍：你也有“沉睡资产”吗？
旧应用程序、已停止工作的 Web 服务、未转换为数字数据的作品——。
“我当时所做的。、我相信很多人都想过，“我想用今天的技术再做一次”。。但现实中、在“技术壁垒”和“时间成本”面前、大多数项目被放弃。
我是2026年黄金周、我用人工智能迎头撞上了那堵墙。。
15一款名为“COSPLAY SHOWCASE”的iPhone应用程序，一年前在App Store上排名第二。、这是一个将其恢复为网络应用程序的项目。。不是一个完整的工程师、从一个会编码的摄影师的角度来看。
“有了人工智能，几个小时就可以完成。”曾经有一段时间我也这么想。。
现实有所不同。
挑战的背景：分析 IPA/APK 的日期
起初，我所拥有的只是“二元”。
我能为这个项目做的准备是、当时只有以下几种。
- iOS版本IPA文件（iPad/iPhone应用程序的“内容”已打包。、安装包）
- 安卓版APK文件（这就是Android应用程序的“真实身份”。、一组用于安装的文件）
- 当时的 JPEG 图像和 UI 屏幕截图
- 应用介绍页面文字
- 我自己的“造物主记忆”
最大的问题是、没有留下完整的源代码。。
换句话说，该项目的出发点是、逆向工程从一开始就是前提。。
当你让克劳德分析时会发生什么？
第一次尝试很简单。
“如果我让 Claude 阅读 IPA/APK，、是否可以在某种程度上自动将其转换为React？ ”
当前一代AI是React一代、TypeScript生成、Tailwind CSS构筑、UI组件生成、纠错纠错——这方面很强。这就是为什么“使用人工智能将旧应用程序变成网络版本”的想法、看起来很现实。
反应:（组合“部分”、（创建屏幕的机制）顺风 CSS:（只需排列预定的“单词”、设计工具）
但当你真正动动双手的时候、情况完全不同了。
内含IPA、资源结构、图像文件、一些配置信息、我能够确认捆绑配置。。但、Objective-C 时代重要的编译代码是、我无法按原样阅读它。克劳德分析 IPA 并认识到“类似结构的东西”。但UI迁移、gesture设计（对手指动作的“反应”设计）、状态管理、动画意图这是、几乎不可能恢复。
Android APK端是XML布局和drawable（图像、形状等、（屏幕上显示的“材料数据”的总称）相对保持、读起来有点容易。然而，这里也出现了一个根本问题：人工智能可以读取“存在的东西”。但我不明白他们为什么要这样设计。。
为什么图像按这个顺序排列？。为什么这个时候切换呢？。为什么滑动速度这么快？。这些设计意图是、不以二进制形式记录。换句话说UI/UX 的哲学是、没有被AI恢复。
这是、这是第一堵大墙。。
面临绝望：3两个“地狱”
随着项目的进展、具体问题接二连三地出现。。
地狱1：UI构造崩壊
第一个提示是这样的。
“从这个 IPA/APK 结构、反应 + 请使用 Tailwind CSS 重建等效的 UI。”
结果是、已经很破了。
AI通过猜测开始组装屏幕。但等级制度（阶层）、国家结构（数据管理规则）、component分割（分成几部分）与真实应用程序不同。生成“看起来像这样，但又不同”。。即使在 Tailwind CSS 中、过度实用、响应崩溃、z-index事故、手机溢出频发。最常见的回答是“在 PC 上没问题。”、这是一种“因智能手机而崩溃”的模式。
过度实用：（设计说明太多。、代码变成“咒语”）响应崩溃：（如果改变屏幕尺寸、（看起来很“乱”）z-index事故：（零件的重叠顺序是乱序的。、（按钮变成“埋藏”状态，无法按下）移动溢出：（超出屏幕宽度）、左右摇晃）
地狱2：损坏的滑动行为
这件事特别严重。。
COSPLAY SHOWCASE的核心是“轻弹旋转照片”。然而，AI使用惯性滚动、管理拖动状态、触摸取消处理、我在实现移动手势时犯了很多错误。。
触摸取消；（触摸的手指、（离屏或禁用状态）
因此、
- 被抓到
- 跳
- 向相反方向移动
- 只有手机坏了
经常发生。尤其是在移动端 Safari 中、触摸动作、溢出、被动事件、在图像渲染方面相当困难。
触摸动作：（触摸屏幕时“允许滚动”设置）溢出：（是否“隐藏或显示”从框架突出的部分的规则）被动事件：（滚动“平滑移动”的初步信号）图像渲染：（指定图像应该看起来清晰还是平滑）
触觉是人工智能最薄弱的领域。。 外观可再现。然而，“手指分离”、“惯性重量”、“滑动速度”和“动画时机”——这些不能仅由逻辑来确定。。最终，人类别无选择，只能察觉到这种不适。。
地狱3：state循环地狱
这种情况在移植 React 时尤其频繁发生。。
人工智能即将到来useEffect（“自动链接”的自动处理）想写。因此、无限重新渲染、state循环、图像预加载失控。
我试图修复一个称为收藏夹显示的包装布局的错误。、我进入了“无限调试循环”，其中每次修改都会破坏不同的部分。。
- 垂直对齐 → 正确 → 标题顺序显示被打乱
- 修复→图像大小变化→修复→水平滚动消失
- 尝试将其重新组装起来 → 另一部分损坏
人工智能一次又一次无视同样的禁令。忘记之前对话的上下文并倒退。
经过这个过程、我终于开始明白AI合拍的“本质结构”。。
“AI协同生产五法则”由此衍生
人工智能不起作用，因为它是“折腾”。但是，如果你了解“如何操作AI”、过去的资产肯定与现在相关。以下是、以下是从这次经验中提取的五条规则。。
规则1：将其作为“设计文档”而不是“请求”
对人工智能来说最重要的指令是什么？、模糊的要求结构化条件是将其转换为。
❌ 失败指令示例
“我希望它根据浏览器宽度自然换行。”
通过这条指令，AI为Tailwind生成了灵活的布局。。但它破坏了COSPLAY SHOWCASE的横向滚动UI。“自然折叠”对于人工智能来说意味着“垂直堆叠”。
✅ 工作说明示例
- 垂直排列绝对不行。
- 始终保持水平滚动
- 保持图像大小与标题顺序相同
- 不要失去行数的平衡
区别不在于“你想让我做什么”、明确说明不该做什么是。人工智能受到的限制越多，、容易向正确的方向收敛。即使是修改滑动行为。、有一系列具体的禁止和条件，例如“不添加惯性”、“滑动速度恒定”、“移动 Safari 优先”、“加载图像时禁止布局移动”、这是最有效的指导。
规则2：设计时考虑到人工智能的“遗忘”
人工智能维护上下文的能力有限。在一次长时间的谈话中、上半场决定的规格往往在下半场被忽略。。
其实在我的项目中、规则应该是“禁止水平滚动”、有很多情况下，AI会在几十回合后崩溃，就像什么都没发生一样。。修复状态循环问题时也是如此、再次使用useEffect，这是之前对话中禁止的。、这又被重复了。
措施是“在每次会议开始时列出违禁物品清单。”就是这样。。
【このセッションの絶対条件】
・横スクロールUIは変更しない
・画像サイズは既存の仕様を維持
・縦並びレイアウトは使用禁止
・useEffectの新規追加は禁止每次只需将其插入提示的开头即可、人工智能“落后”事故将大幅减少。不依赖过去的对话历史、在每个提示处定义状态这是人工智能联合开发的基本礼仪。。
规则3：只要“理解代码的含义”就会给你带来压倒性的优势。
您不必成为一名完整的工程师。但你也不能成为一个“完全的业余爱好者”。。
当Claude说“这是由第687行的perRow计算引起的”、就看你能否理解其中的意思、下一条指令的准确性会发生巨大变化。。就我而言、因为我至少能够理解 React 状态是如何循环的。、我能够给出准确的更正指示，例如“请简化状态”和“请分离缩略图状态”。
重要的不是写代码的能力。、``试图理解错误含义的态度。“是。即使你只是简单地将错误消息复制并粘贴到人工智能中并询问“为什么会发生这种情况？”、打开解决方案的道路。
编程的基本概念（变量、功能、环形、了解条件分支的人）、人工智能时代“中产阶级”最强阵地我在。来自编写代码的人、能调整的人的价值、未来将会上升。
每行计算：（根据屏幕宽度自动调整“每行项目数”的计算）反应状态：（应用程序此时记住的“记忆”）缩略图状态：（正在选择“缩小图像”的存储器）
规则 4：要知道“制造者的记忆”是最宝贵的财富。
这个项目最重要的是、不是技术或人工智能性能。、事实上我自己就是这个应用程序的设计师原来是。
如果没有规范，人工智能就无法发挥作用。。但、即使没有规格，如果您有“制造商的记忆”、它可以被翻译成语言并传递给人工智能。。
- 点击时的“速度”旋转动画
- 水平滚动的“惯性重量”
- 展示空间中的“产生深度”
即使这些没有被数字记录，、我用创造者的身体记住它。将这些记忆转化为文字的能力、成为向AI传递蓝图的力量。
相反，这次、当我向 Claude 抛出第一个简单提示时：“从这个 IPA/APK 结构重建等效的 UI”、AI输出的是“那样的不同的东西”。152015 年以来应用程序的独特行为和感觉、没有源代码的AI无法恢复。。
恢复过去的资产时、在考虑人工智能性能之前，你应该问的问题是“你能用语言表达这项工作吗？”。
规则5：留下“失败记录”、成为主要信息
不要掩盖人工智能失败的事实。。
无限调试循环、我一遍又一遍地犯同样的错误、还有一些功能无法解决（这个Together功能还没有完成）。、把一切都记录下来。
由于某种原因。
“我把一切都投入到人工智能上，几个小时内就完成了。”的故事。、读书的感觉真好。但不可重现。尝试做同样的事情、因为结果不会一样。
另一方面、记录诸如“当我指示它这样做时它坏了”、“当我按照这个顺序修复它时，另一个部件坏了”或“这个功能不起作用”等记录。、为了下一个人撞到同一堵墙、成为具体的地图。
成功故事读起来很有趣。。但失败的故事、可用作信息。
人类与人工智能的合作越多、“我在哪里绊倒”和“如何重建？”等主要信息的价值增加了。。谁有它、只有真正做到这一点的人。
实用清单：使用人工智能恢复过去资产之前需要检查的事项
- 关于你想要复兴的作品、我是作为设计师/制作人参与的吗？
- 您有“记忆”来描述当时的规格吗？
- 对人工智能的指令可以写成“条件列表”而不是“请求”吗？
- 您愿意至少阅读错误消息的含义吗？
- 你准备好记录你的失败和尝试和错误了吗？
- 你能放下几个小时内就能完成的期望吗？
6如果全部检查完、您的项目很可能由人工智能提供支持。
概括：人工智能是“搭建桥梁的工具”、是人类完成了这座桥梁。
2011“COSPLAY SHOWCASE”诞生于、20262018年黄金周后、再次开始作为网络应用程序工作。
确实是因为AI才完成的。。但、确实，单靠人工智能永远无法完成这项任务。。
分析 IPA 和 APK、第一次尝试让克劳德“自动恢复”失败。state循环地狱、损坏的滑动行为、无限调试循环——AI生成很快，但是、设计很粗糙。但通过那次失败、我学会了“如何使用人工智能”。
AI时代需要的不是“生产力”。隔离问题、UI観察力、检测不适、组织规范、修正说明——这些能力。。
通过人工智能将过去的资产与现在连接起来的工作、这不是为了“玩得开心”。“以前不可能发生的事情、使其成为可能”就是这样。。
只有懂得差异的人、AIを本当の意味で使いこなせる。
🎭COSPLAY SHOWCASE WEB版を体験する https://nsp-jp.com/cosplayshowcase/app/
📖プロジェクト全記録（元記事） https://nsp-jp.com/blog/cosplay-showcase-web-ai-revival/
