用 AI 重写了一个 App,用了一个月,我学到了这些

这里是 UI 设计师林晨的记录，原文转发。

iOS 版本下载链接：https://apps.apple.com/us/app/slax-note-transcribe-voice-pen/id6480166286

我是一名 UI 设计师，代码对我来说一直是另一个星球的东西。

直到有一天，老板说让我和产品经理用 AI 重写 Slax Note，我当时有点忐忑，我真的可以吗？

1. 一开始我以为它是神

初体验真的很震撼。

研发教我们配置 Claude Code（以下简称“它”），并给我们简单培训，我们就开始自己尝试了。

我最开始让它做的是 Slax Note 网页端的会员弹窗静态页，把设计图丢给它，它能生成七七八八，我再让微调一下就基本和设计图的效果一致了，那种成就感，让我觉得代码也没什么难的嘛！          

接着我们真的上手项目了，把研发文档发给它，他把框架搭起来了，跑起来感觉也不错，主要的功能都有了，这下更有信心了。 

2. 很快，我被它“气”到了

2.1 它真的很爱瞎猜

前期我主要集中在UI还原，我总结了设计规范并配置了 lanhu-mcp，让它根据蓝湖里的参数还原UI，它不按设计稿实现，全靠猜。

有次一个链接的颜色，它凭「感觉」写了一个灰色，但设计稿里明明是橙棕色。

还有间距，在没有明确规范的情况下，它会猜一个数字，我看着不对，让它改，改完又不对，这样来回改几次，最后回头查设计稿，发现一开始就有标注，只是它没去看。

教训：让它写代码之前先查设计规范，不要猜。猜了就是多改几轮的代价。

但是如果你把设计详细描述给它（如下面描述），像写说明书一样写得死死的，它就会实现很好，但这对非设计人群不友好。

后面尝试用以下这段 prompt 生成笔记海报，除了海报位置显示不居中，其他都还原了设计稿，效果不错，可以把它写进规范文档，这样更省事，不用每次都写一遍：

2.2 它很爱「顺手」帮你做事

让它修一个小 Bug，它会顺手优化周边的代码，导致原本正常的功能直接瘫痪。

然后我去找它，它又去改，又顺手动了别的地方……

就像你让装修工师傅补一块墙，他说「我顺手把你这个柜子也挪一下吧，更好看」，然后柜子后面的管道裂了。

后来我给它立了一条规矩：每次动代码之前，先告诉我你打算改哪里、不改哪里，我确认了再动。 从那以后好多了。

2.3 它不记得上次的教训

这个是我最没想到的。

每次开新对话，它就像失忆了一样，上次踩的坑，这次还会踩。

举个例子：弹窗的做法。

iOS 里有两种弹窗方式，一种是系统自带的，一种是我们自己做的全屏弹窗。就是那种苹果原生样式的弹出框，自带圆角和边距，怎么改都不像设计稿。

我第一次发现问题，改掉了。第二次做新页面，它又用了系统的，改。第三次，又改。

改了三次之后我才反应过来：要把这条写成规定，让它每次开始工作前都能看到。

这个「规定文件」叫 CLAUDE.md。一开始是空的，每踩一个坑就加一条，到最后写了几百行。

可以理解为：这是一本「和 AI 相处手册」，你不写，它记不住。

3. 真正让我崩溃的几件事

3.1 左滑删除，改了能有十几轮

这是我印象里改得最久的一个功能。

设计稿上，左滑笔记卡片会出来两个按钮：归档和删除，有自定义的颜色和圆角。看起来很普通的交互，我以为它分分钟就能做好。

结果第一版出来，按钮的颜色完全不对。我让它改，改了还是不对。后来才搞清楚：iOS 自带的左滑删除组件，颜色是被系统「锁死」的，你写什么颜色它都会自动覆盖成自己的样式——只能是矩形色块配白色文字，没得商量。也就是说，设计稿那个样式，用系统组件根本做不出来。

那只能自己做。它用手势识别重新写了一套左滑逻辑，好不容易跑起来了——但新问题来了：左滑的手势和页面上下滚动的手势打架，有时候你想上下滑，它以为你在左滑；有时候你左滑，卡片滑出去又自动缩回来。

这个「缩回来」的问题，前前后后修了四轮，最后翻出来一看，是四个完全不同的原因同时在作怪——手势识别的触发顺序、iOS 系统更新后的一个行为变化、卡片之间的状态互相干扰……一层一层修，才最终消停。

最终 UI 效果的呈现其实也不是设计稿的样子，是我顺着他的步骤一步步修成现在的样子，效果也可以就没死磕样式，万一又触发新的问题就...

教训：看起来「就是个左滑」的功能，背后可能藏着好几层问题，修完一层别急着庆祝。

3.2 点击笔记卡片，App 直接卡死

现象：笔记内容特别长的时候，点击那条笔记，App 直接卡住不动了。

Claude 开始排查，觉得是列表滑动手势或手势参数的问题，全在「手势」这个方向上转，就这样改了很久，每次解决不了问题。

最后没办法，喊来研发大佬，换了另一个 AI 工具（Codex）来做独立排查。它花了两分钟扫了几个相关文件，直接找到了真正的原因：

根本不是手势的问题。

原来是笔记详情页里有一个负责「展开/收起长文本」的组件，它在渲染的时候，会先把整篇文章——5000 个字——在后台悄悄排一遍版，算好高度，才显示出来。这个操作是在主线程同步执行的，5000 字要算好几秒，整个 App 就冻住了。

Claude 之所以一直找错方向，是因为症状出现在「点击卡片」这个动作上，它就一直在「点击」相关的手势代码里找。但真正耗时的操作在另一个完全不同的地方——详情页的文字渲染组件，隔了好几层调用。

修复方案：传给文字组件之前先截断（卡片只显示前 300 字，测量只扫前 1200 字），超过 4000 字的笔记跳过自动全文展开，详情页的数据加载改成异步，不卡主线程。

教训：AI 也会在错误方向上「执着」，需要人（或者换个工具）来打破僵局。症状出现在 A，根因可能在 A→B→C 链路的任意一环。改了两三次没用，就该停下来重新把整条路径从头追一遍，不能只盯着症状那一层一直挖。

3.3 Apple 登录出错了

有一天，Apple ID 登录的功能突然不好使了，这个功能之前已经修好了，但是这次又报了一个一样的错误。

它开始排查，来来回回改了八轮，每次它都很确定「这次修好了」，每次跑起来还是报错。中间还把 App 改白屏了，又花时间修白屏问题，最后我翻了以前的修复记录给它，它才知道问题出哪了。

根本原因：根本不是代码的问题。是 Xcode（苹果的开发工具）里有一个「权限开关」，之前被一次自动生成操作给关掉了，而且这个开关藏得很深，不截图看根本不知道。

教训：有些问题不在代码里，要先去工具界面看。

Claude 后来学乖了——遇到 Apple 登录相关的问题，第一步是让我截图给它看，不是直接改代码。

3.4 网页端笔记突然变成了三条

用 iOS 记了一条笔记，去网页端一看，变成三条了。它开始分析，说是某个地方的去重逻辑有问题，改了几轮都没有解决。

最后它直接去看了数据库里的原始记录，才发现真相：发送请求这一步其实成功了，但收到回复的时候解析出错了，程序以为失败了，就重发，重发了三次，服务器老老实实创建了三条笔记。

教训：别急着让它一直改代码，先让它去找证据——看日志、看数据库——搞清楚到底哪里出问题了，再动手。

3.5 我的切图总是显示得奇奇怪怪

图标总是很大：设计稿里图标是 48 px，换算成 iOS 代码里的单位要除以 2，用 24pt。这个我知道，但是它好像不知道。它有时候会忘了写「让图片按照我说的尺寸显示」这行代码，结果图标就按原始大小显示，比正常大一倍，占了半个屏幕。

图标总是模糊：原因是切图倍数搞错了，@1x/@2x/@3x 三个槽位没有一起更新，如果放错了——比如把 @2x 的图塞进 @1x 槽——iPhone 以为这是低清版本，显示的时候会自动把它放大两倍来适配屏幕，图标就糊了

它明明说图标已经改成正确尺寸了，但是效果还是不对：蓝湖里同一个图标有两个版本，一个是紧贴边缘裁剪的，一个是留了透明边距的。我们要用留透明边距那个，但它有时候会拿错。拿错了，图标就贴边，看起来像是对不齐。

后来规定里写：下载图标，要选蓝湖最新版本的，优先选带透明边距的，放进去之前先验像素，放 @2x 槽位，不是 @1x，替换切图必须检查三个槽位，代码里用 pt，不用 px。

4. AI 到底帮我省了什么

说实话，如果你问我「用了 AI，快了多少」，我的回答是：快了，但没有想象的那么多。

它省的是那些重复的、机械的东西：

1每个新页面的基础结构，它几分钟就能搭好

1设计稿里的颜色值、字号、间距，让它去查、去转换

1中文英文葡萄牙语三种语言的翻译，它来做

但它省不了的：

遇到奇怪的 bug，还是要人来一步步拆解

在手机上测试，AI 帮不了你，必须自己跑

「这里应该用哪种方案」这类判断，还是要人来

我觉得最准确的比喻是：AI 是一个执行力极强、但需要非常明确指令的助手。你交代清楚，它做得又快又好；你交代模糊，它会按自己的理解来，然后你再花时间纠正。

5. 最大的收获不是代码

一个月下来，14 个页面做完了。          

不得不说，AI 真的没记性，自从学会每天让它总结教训并记录，把我和它的「相处手册」从几行写到了几百行，它才终于变得“顺手”了。我们不是要学会写代码，而是要学会怎么指挥 AI。

这本越来越厚的「相处手册」——里面记着每次踩的坑、立的规矩、不能碰的地方。

这本手册可以带到下一个项目。它让 AI 越来越「懂」我们的习惯，少走弯路。

都看到这了，请下载 slax note 支持一下吧，点击原文链接能下载 iOS 版。也可以到 https://slax.com/note/ 下载安卓版，或者使用网页版。

谢谢支持 :)