一句话完成 SAP Fiori Launchpad 的高仿复刻

上半年笔者参加了 AI 破局俱乐部的智能体训练营，干货很多。因为手头事情比较多，一直没有时间好好消化。

AI 智能体和 MCP 用好了能够大大提高工作学习的效率。

笔者昨天的文章漫谈 SAP Fiori 和 Google Material 这两门设计语言提到了 SAP Fiori 这个 Design Language.

下面是一张 SAP Fiori Launchpad 的截图。

假设一个不懂 Web 开发的人，想从头做一个高仿版的应用出来，是不是先得学习 Web 开发？

AI 工具普及之后就不用这么麻烦了。直接打开扣子空间 space.coze.cn, 将 SAP Fiori Launchpad 截图发给它：

不使用 Vue，Angular 和 React 这三个前端开发框架，用原生的 html 把附件的网站开发出来。

接下来的活就交给扣子了。

等了一会儿冒出来一句：扣子只会用 React 框架来生成 Web 应用的代码。

好吧，笔者在 Web 开发领域最先用的是 SAP UI5，2020 年转成了 Angular，期间也曾经短暂接触过 React，对它的开发体验是真心爱不起来。不过既然扣子这么牛的工具也把 React 作为其生成 Web 代码的唯一选择，一定有它的道理。

很快扣子就完成了根据外观进行的 SAP Fiori Launchpad 的复刻：

笔者认为完成度还是很高的，毕竟一行代码都还没写。

扣子生成的是一个标准的 React 项目，下载到本地后就可以在此基础上进一步开发了。

不过我们仔细观察的话，还是会发现一些差异：原版的 SAP Fiori Launchpad 的一个个 tile，文字在上图标在下。而高仿复刻版颠倒成了图标在上文字在下。

如果懂一点 Web 开发，很容易在源代码里发现 FioriLaunchpadContentLayoutPage.tsx 文件里就是这样布局的。将 div 和 h3 两个元素调个位置就 OK 了。

如果不懂 Web 开发也不要紧，直接发指令让扣子自己去改：

谢谢！但是应用卡片网格里，你的设计是图标在上，文字在下。请将二者调个顺序。

很快就 OK 了，但是仔细一看，每个 Tile 的图标，在垂直继续方向没有对齐，难看死了。

继续发指令：

现在顺序对了，但是每个应用卡片的图标，在垂直方向没有对齐，难看死了。正确的做法：

每个应用卡片的文字结束之后，在垂直方向留一小部分空白，接着应用卡片的图标，在同一个垂直位置(Y坐标)开始显示，最后在垂直方向对齐，这样看起来美观。

笔者的感受是：AI 工具普及之后，开发应用的门槛越来越低，越来越多的人可以动手编写一些验证自己想法的小玩意。对于本来就懂编程的程序员来说，这些工具可以成倍地提高开发效率。