用AI构建工具13天，一次性重做落地页和应用的故事

打造Laplace V4时学到的事：把我知道的交出去，用图来确认，并且怀疑到最后

Eugene · 2026年10月30日

大家好，我是在Laplace负责打造产品的Eugene。

10月29日下午6点27分，应用代码仓库合并了一个PR。它的名字叫Laplace V4，改动的文件有4,116个。通过这个PR，Laplace Analytics的所有页面和落地页都换上了新装。产品开始支持5种语言，以前在手机上几乎没法用的页面，现在也能正常显示了。到这一步花了13天，做这件事的只有我一个人。

刚开始的时候，说实话我没什么信心。我对开发并不精通，只靠氛围编程（vibe coding）就重建整个产品，真的可能吗？但一路做到最后才发现，决定结果的并不是开发知识。我在设计、PM、客服、销售之间来回积累的经验，成了驾驭AI最可靠的本钱。

每次写提示词时，我都能感受到这一点。我知道分析类产品为什么要把UI和UX分开设计，也早已通过客户咨询和会议，在脑子里积累了需要哪些功能和图表。AI需要的，正是这些背景。

很长一段时间里，我都梦想成为在一个领域深耕的专家。而现实中的我，更像一个什么都涉猎的通才。但在和AI一起工作的过程中，这种广度第一次成了实实在在的优势。在这篇文章里，我想聊聊这13天里我做了什么、又是怎么做的。

首先，变了什么

图比文字更快。下面的图都是在装入同一套假数据的本地应用里、用同样的宽度截取的。左边是之前的界面（ui-classic分支），右边是现在已上线的V4。

变化最大的是手机端。以前的应用根本没有移动端页面。桌面页面直接缩小，菜单挡住了大半个屏幕，设置页的标题被挤成一个字一行。

然后是语言。在以前的应用里，把显示语言切换成日语后，英语和韩语会混在一起，菜单上还直接露出group.strategy这样的翻译键。

落地页也按同样的思路改了。落地页比V4稍早，10月初就开始诊断Framer网站并迁移到代码。诊断发现，首屏的示意图还是"2024黑色星期五业绩报告"，图表图例里直接显示着series-1。在手机上则完全看不到产品界面。

在V4期间，我们为落地页增加了日语版、简体中文版和繁体中文版。根据访客的浏览器语言跳转到对应的语言版本，海外版的价格以美元显示。自动语言跳转用一套回归测试兜底：把构建好的HTML按18种情形分别打开验证。

如果落地页上说"支持5种语言"，应用却只有韩语，海外客户一注册就会失望。所以我把两者当作一个整体来做。

1. 从把我知道的全部交出去开始

AI不懂电商。准确地说，它不知道我们的客户最先看什么、对什么感到不便。所以最初几天，我几乎一直在讲解。

• 电商老板们每天早上最先看的数字（昨天的销售额、目标达成情况、广告费带来的销售额）

• 和客户见面时听到的话："数字的位置不能和以前的仪表板不一样""表格横向滚动时一卡一卡的""地图上的地区名称会溢出格子"

• 以前的界面里想做却因为实现不了而放弃的功能和UI，以及原因

• 看数据的方式：日期和时间一律用韩国时间；即使是今年的日期也不省略年份；表格默认不固定任何列

• 易用性上必须守住的规则：文字不小于11px；手机上的点击区域不小于44px；不使用系统默认下拉框

• 在以前没有的移动端页面上，哪些保留、哪些折叠

只说一次就完事，下一次对话它就忘了。所以我把规则留在文档和技能（skill）里。像"图表卡片不放标题语""卡片高度以160px为单位保存，以便与旧界面兼容"这样的规则，会自动附在下一次的任务指令里。打造一个不用我每次重新解释的状态，这是第一项工作。

2. 不一次做完，而是用图来确认

一开始我很想说"全部帮我做出来"。但那样得到的结果又宽又浅。所以我换了顺序。

脑子里有想要的页面时，我先用文字描述，再让AI做2~3个方案。方案直接画在本地运行的真实应用里。这样看起来就像真正的产品，也能马上确认在手机宽度和桌面宽度下的样子。

需要做决定时，我要的不是文字，而是前后对比图。要改的地方实在太多，只看文字报告根本判断不了哪里不一样。"看不出哪里不同，给我图"这句话我说了太多遍，后来干脆成了工作规则。

一个页面完成之后，后面就快了。设置页面都有相同的规格和流程，所以在"我的信息"页面定好页头、左侧菜单、右侧帮助和保存栏的规格后，其余页面按这套规格依次对齐就行了。

3. AI的提议比我的想法更好的情况相当多

老实说，这部分最出乎我的意料。在考虑如何向还没连接任何数据的客户展示自定义仪表板时，我想到的是"一个示例页面"。AI则提出用真实的图表组件画出8个分行业的案例看板，并在上方加上"想用自己的数据看看？去连接数据"。浏览库存管理、税务·损益、复购商品分析、交叉销售、CRM这些看板时，会自然地冒出"这个我们也想做"的念头。这正是我想要的。

不过，始终需要人来检查。在页面正中弹出一个大提示框、卡片太少让看板显得空荡、表格右侧一片空白，这些问题AI自己很难发现。像案例里不放真实客户公司名称这类需要判断的地方，也得由人来定。

做高级筛选时也是如此。AI最初的方案是给每个值标签都配一个条件下拉框，而标签之间的一个"或"会一次性改变所有条件的连接方式。单看界面挺像回事，但条件既不能混用也不能分组。我放弃了这个方案，改成像Notion的高级筛选那样，一行一行地叠加规则。即使AI说"做好了"，在我亲手点过页面之前，都不算做好。

4. 设计系统只作参考

这次工作中，我特意定了一条规则：现有的设计系统只作参考，一开始并不照搬。

如果一开始就严守设计系统，就只会在系统里思考。只会想到用现有组件能做出的页面，而客户真正需要的页面，往往不在系统里。所以在方案阶段我放开去想，同时复用颜色和间距令牌（token）以及公共组件，保证一致性。

然后在设计完成、开始发布之前，我把现有的设计系统整体替换成了当前版本。这就是集成PR里设计系统包的151个文件一起改动的原因。不是系统束缚设计，而是完成的设计重写了系统。

替换之后，我把所有页面过了一遍，寻找"功能相同却各做一套的组件"。比如，一个在桌面上是居中弹窗、在手机上变成底部弹层的对话框，在34个文件里被使用，另外还有4套类似的对话框。这样的清单成了下一轮设计系统工作的起点。

5. 易用性拿不准时，直接借鉴别人的做法

"这个按钮放这里对吗？""这个状态徽标该叫什么？""用Internet Explorer进来的人要不要给提示？"这类问题，一个人琢磨起来没完没了。这时我会让AI去查其他服务是怎么做的、社区里是怎么讨论的，然后马上把那种做法套到本地页面上，以图的形式返回给我。

这比我自己调研、比较快得多。做判断的仍然是我，但判断所需的材料几分钟内就会以页面的形式出现。读十个搜索结果链接，和把那种做法放到我们自己的页面上、并排看两张图，决策速度完全不同。

6. 需要专家的事，就请专家来做

图表可视化、性能测量、翻译审校这类需要专业知识的工作，我下载并接入了相应领域的技能和代理。而且同时推进多项工作：日期写法、徽标文案、卡片高度、地图替换分别交给不同的子代理，我负责看返回的图并做选择。

表格滚动。 "表格横向滚动时会卡"这个反馈是个老问题。我没有凭感觉去修，而是在把CPU降速4倍的条件下，测量了应用里全部27个表格，找出了原因。修复后，超过50ms的长任务从119次减少到14次，脚本执行时间减少了一半。这个修复是上线第二天提交的PR，目前仍在评审中。

翻译。 公司里没有日语或中文的母语者，所以我们用AI来审校。方法是把每条字符串的原文和译文并排放，再把译文回译成韩语，比较意思。连接指南的711条字符串都这样过了一遍，修改了93条。被挑出来的主要是语法没错、意思却跑偏的翻译，比如"设置后即可登录"读起来和原意"不设置就无法登录"不一样。

上线前检查。 最后，把119个页面用5种语言、8种宽度打开，先由机器找出重叠、截断、残留的韩语和过小的点击区域，人只看被标出来的部分。Safari、Firefox、iPhone、iPad、安卓设备的设置，以及没有Pretendard字体的Windows环境，也都单独跑了一遍。合并后再跑一次，新出现的严重问题为0个。

不过，一次跑太多，笔记本就扛不住了。在几个会启动浏览器的代理同时跑测试、结果一起卡死之后，我在指令里加了一条规则：重任务一次只跑一个，浏览器只开一个。

7. 还是出了事故

并不是一切都顺利。有一次，我把自动化浏览器接到了使用生产数据的预览地址上，结果3分钟内向生产API发送了大约1万8千个认证失败（401）的请求。那个浏览器没有登录，而应用每次认证失败都会重试。

从那以后我定了规则：自动化只在认证和API都换成假的本地应用里运行，浏览器发往127.0.0.1以外的请求从一开始就全部拦截。这篇文章里的应用截图，也全部是在那个本地应用里截的。这条规则也写进了技能文档，会自动附在每个子代理的指令里。

AI只要你吩咐，就会做得很快。所以，事先定好哪些事不能交给它，是人的职责。

是怎么上线的

每个领域单独开PR接受评审，最后合并成一个集成PR。从设置、菜单、自定义仪表板开始，依次叠加多语言、数据连接、数据管理和常规仪表板，合并后的清单有25行，PR里累积的提交达到820次。改动的4,116个文件中，有1,333个是测试文件。

我们一次性发布，但留了退路。通过应用栏上的"新界面"开关，任何人都可以在新界面和旧界面之间切换。这是为了不让客户一夜之间失去熟悉的界面。也多亏了这个开关，我才能用同一套假数据把旧界面和V4并排截图，做出这篇文章里的对比图。

回顾这13天

变化最大的是纠结的程度。以前我会一个人长时间纠结"这样对吗"，这次则是拿到几个方案后从中挑选。相应地，挑选的眼光和对客户的了解程度，几乎决定了全部结果。

想尝试类似工作方式的朋友，我想分享三点。

第一，先整理好要交出去的知识。 AI做出的页面质量，几乎和我交给它的客户故事的多少成正比。把客户反馈、放弃过的功能、行业里看重的数字写成文档，AI每次都会先读这些再开始。

第二，用图而不是文字来做决定。 页面超过几十个以后，靠文字报告就没法判断了。同一个页面的一张前后对比图，顶替了一场会议。

第三，别相信"做好了"。 AI的提议常常比预想的好，但在手机宽度下点一点、切换成别的语言看看、检查有没有混进真实客户的名字，这些直到最后都是我的工作。决定哪些事不能交给它，也是。

接下来

我认为不久之后，打造产品的相当一部分工作将由AI承担。好的功能会以今天无法相比的速度问世。如果是这样，工作方式和组织结构也需要重新思考。设计师、策划、开发这样划分岗位的边界，或许不必再像现在这么牢固。

即便如此，我更把这种变化看作机会，而不是危机。因为只存在于脑海中的想法、只停留在文档里的规划，现在都可以马上做出来，摆到客户面前去验证。

Laplace正在超越数据分析，筹备automated planning，目标是在今年之内推出。全球版应用也即将发布。也请关注Laplace跨越数据基础设施的下一段旅程。

---

本文中的所有应用界面都截自装有假数据的本地应用，画面中的品牌名、数值和邮箱均为示例。数字来源：应用代码仓库git记录（PR #4984，2026-10-29合并）、落地页代码仓库git记录、上线前检查报告（plan/v4_qa/sweep.md）、表格性能测量（.local/hscroll/agg_all4.md）、翻译审校记录（plan/i18n_ai_review.md）。