“抄”，前端界面 Vibe Coding 最重要的技巧

如果你经常写代码，一定用过各种 Coding Agent；如果用 Agent写代码，那想必也接触过让AI写前端的情况；而如果你恰好审美比大部分人更加“挑剔”一些，那么你肯定也经历过，对AI写出来的前端代码绝望的时刻。

至少我经常经历，从我开始用上Agent写前端以来，每次看到那些幼稚的圆角设计，紫色和粉色交叉淡化的背景，莫名奇妙的红/黄/蓝/绿点，动不动就外部套一个带边框的容器，我真的很绝望。更不要说，看到那诡异的交互动画，不知漂移到哪的Modal框，文字溢出容器的暴力排版，好几次那股生理性厌恶，让我几乎快瘫痪在椅子上。

当然我知道这事有一部分过错在我，我很“挑剔”，眼睛毒辣，即使功能性完好，我也会检查文字的排版，颜色的明暗配置，过渡动画的交互美感。

那么既为了让AI写的前端页面好看些，也为了让自己的身体舒服些，我终于找到了一个目前看来比较好的方法。

那就是 ── 「抄」！

抄，在我现在大量Vibe Coding时间后，发现是最省时省力审脾气的快捷路径。

我们可以细想一下，其实在AI出现以前，互联网上的app界面已经层出不穷了，无论是格调高雅的，还是活泼有趣的，几乎都能找到一些对应的产品，也能在网上找到一些优秀的案例库。

如果我要自己做一个产品，我没有十分专业的设计领域知识，我也没有前端开发的大量工程经验，那么我指挥AI做出来的，只能用不堪入目来形容。

也许你曾经见过一些令人印象深刻的设计，或者心中对交互的动画和逻辑有个理解，但是你给AI的prompt,却并不能够让它很好的实现。

为什么？就像我在《为什么有了AI,我们依然很难打磨出“完美”》中所认为的，这中间缺少一座桥梁，名为“专业知识”的桥梁，导致你的想象和实现之间存在巨大的鸿沟。也是很多人用AI最后却只能做出一些看看标标准准的 AI Slop 的原因。

然而“抄”就不一样了，它把自己的表述成本变成了一个可以具象化的案例，甚至是可以直接看到源码的案例，这些案例很大概率已经进入到了AI的训练资料中，让他们去复刻一套已经证明成熟的方案，或者再次基础上做一些个性化的定制，也远远好过从0开始去造一个轮子，而且这个轮子处处是漏洞。

所以我现在设计prompt都是这样：

1. 先想清楚自己期望的前端布局和功能
2. 回忆一下，或者问GPT有没有这些案例的最佳实践，找到对应的源码或者官方文档
3. 然后带着这些相关的链接，给AI告诉它“深刻学习一下这些优秀案例的实现，并结合app的业务有所取舍并深度定制XXX页面”

这样AI给出的结果，往往比直接自己描述要好的多。因为很多时候，你对前端页面的设计想法，都会渐渐收敛到已有的成功案例，并不说设计就变得庸俗了，只是在业务越来越多时，大家都会不约而同地趋近于同一套最佳方案。

如果简单总结的话，或许就是“学会站在巨人的肩膀上解决问题”吧。而从设计领域来说，那就是乔布斯的那句名言：

“Good artists copy, great artists steal. And we have always been shameless about stealing great ideas.”