AI先UI后开发的执念，让我不得不「PUA」了 Claude Opus

作为一人公司的全栈选手，我最近干了件挺魔幻的事——死磕 UI 设计，最后还跟 AI 互相 PUA 上了。

不是我想折腾，是被逼的。

当 Pencil 遇到 ECharts

客户要数据看板，我打开 Pencil 画原型。画到图表就卡住了——静态工具哪能体现 ECharts 的交互动效？给客户看这种稿子，等代码写出来他肯定说"跟我想的不一样"。

懂的都懂，设计稿和代码实现之间差着十万八千里。

于是我做了一个违背祖宗的决定：直接写 ECharts 代码，让客户看真实效果。

折腾几轮，图表定型了。但 Pencil 里的设计稿还是初版，怎么调都调不出。两边差距大得像买家秀和卖家秀。

调教 AI 的血泪史

我是后端，审美全靠 AI 续命。那就让 AI 解决 AI 能解决的问题吧。

先换模型。GLM-5 换 Sonnet，再换 Opus。没用——我描述不出"这个蓝不是那个蓝"。

再试自动化对比。让 Opus 用 Playwright 截图 ECharts，跟 Pencil 稿比。AI 看半天来了句"差不多吧"。

我：？？？

上计算机视觉。OpenCV 做图像 diff，算像素差异。总算能量化"差多少"了。

然后微操。一条条提醒：边框是 1px #E5E7EB，不是 2px #D1D5DB；线条要细一点；颜色再调调……

最后对齐了。我把这套流程封成 Skill，以为能一劳永逸。

想多了。

组件到页面：跨不过去的坎

单个图表对齐没问题。但塞进真实页面就不行了——布局上下文、响应式、内容填充后的视觉平衡，AI 根本搞不定。

组件是死的，页面是活的。AI 能比两张图一不一样，但"这个图表放这儿该不该更突出"这种事，它理解不了。

我只能继续人工介入，拽着 Opus 的耳朵：看上下文、看场景、看信息层级……一遍遍迭代，Skill 库也跟着更新。

说白了，还是得自己盯着。

PUA AI 的觉悟

折腾下来我悟了：想高效见活，就得 PUA AI。

不是骂它，是极致、结构化、压迫式地给 prompt——像最苛刻的甲方，把需求拆到原子级，反馈具体到像素级，上下文给到窒息级。

说真的，有点悲哀。我们讨厌被 PUA，却在训练 AI 时无师自通。

也许协作的本质就是这样：清晰的边界、精确的标准、持续的反馈。温柔对话？那是不存在的。

---

给同样单干的兄弟：

后端硬啃前端、设计、产品，别追求工具链完美。先用代码出真实效果，再用 AI 把设计和实现之间的坑填上。

费劲是费劲，但客户指着屏幕说"就这个感觉"的时候——

算了，也没那么值。下次我肯定先把需求聊透。