AI从CRUD到Figma：一个20年后端老炮的AI设计越狱记

当架构思维撞上Vibe Coding，我用「渐进约束」驯服了不确定性

01 先说说怎么把自己逼上梁山的

2021年，我揣着跨境App的创业梦入场，风光过一阵子，然后中美关系一紧张，订单归零，连续两家创业公司先后倒下。说来惭愧，折腾一圈回到原点，兜里比脸干净。

最近决定务实点，用AI做几个真正能卖钱的软件项目。但问题来了：我这20年都在跟后端打交道——Java、Python、C++、ROS，写的都是逻辑和管道，几乎不碰视觉和前端。现在一个人单挑全栈，UI这关怎么过？

02 黑暗时期：当CV工程师的日子

最开始那段时间是真痛苦。不懂设计规范，不会配色，连Padding和Margin都分不清。只能对着ChatGPT的对话框，把生成的代码一段段复制粘贴到编辑器里，像拼乐高一样拼凑界面。

那种感觉很微妙：你知道AI能生成东西，但每次生成的都不一样。今天是个圆角按钮，明天变成直角；上周是蓝色主题，这周突然变紫色。我像在玩老虎机，拉一下手柄，出来什么全凭运气。

直到后来装上Claude Code， workflow才算顺畅起来。前几周刷短视频被安利了Pencil.dev，抱着试试看的心态下载安装——

我操，绝了。

对着Claude Code描述需求，Pencil.dev接近实时的渲染反馈，那种即见即所得的震撼，让我这个老后端瞬间理解了为什么设计师愿意花几千块买MacBook Pro。我第一次觉得，前端不再是黑魔法。

03 Vibe Coding上头的代价

一开始确实Vibe得不得了。想要什么功能，直接跟AI描述："给我做个很酷的Dashboard，要有科技感，暗色模式"。AI噼里啪啦生成几百行代码，跑起来确实像那么回事。

但很快，后端的职业病犯了。

界面变来变去，今天改个按钮样式，明天整个布局重构。过于Vibe的结果是确定性缺失——你无法保证第二次生成的和第一次风格一致，更别提维护性了。这就像一个没有Schema的数据库，存进去的东西再也找不回来。

我盯着屏幕上那些漂亮但失控的代码，突然回忆起以前公司视觉部门的工作流程：他们先不做页面，先做组件库。

04 架构思维的降维打击

灵光一闪。

既然后端讲「约束」，讲「接口契约」，为什么前端不能这么玩？我把自己做分布式系统的经验搬了过来——渐进增强本质上就是渐进约束。

先从最底层的小组件开始。按钮、输入框、卡片，把颜色、圆角、阴影全部锁死成Design Token。告诉AI："以后不管生成什么页面，只能用这几个我认证过的按钮样式。"

组件稳住了，再做Layout模板。Grid系统、间距规范、响应式断点，又是一层限制。

最后把常用的UI描述写成Prompt模板，比如："使用主色#1E40AF，圆角8px，遵循已定义的Button组件规范..."

真的有用。

界面不再随机漫步，而是像搭积木一样可预测。AI成了我的实习生，而不是疯马。我既能享受Vibe Coding的速度，又保留了架构师需要的可控性。

05 给后端人的几句实话

如果你也是后端出身，想一个人用AI做产品，别重复我的弯路：

• 先建牢笼，再谈创意：别一上来就让AI"设计一个好看的页面"，先定义好你的Design System（哪怕只是三个按钮两种颜色）
• 分层防御：组件层 → 模板层 → 页面层，每一层都对下一层做约束
• Prompt即接口：把AI提示词当成API文档来维护，版本化管理

现在我的项目跑起来了，代码仓库里既有整洁的组件库，也有AI生成的业务页面。作为一个20年的老后端，我终于可以说：视觉设计不是黑魔法，只是另一种需要约束的架构问题。

创业失败那堆破事儿，就不提了。至少现在我能一个人把产品做出来了。

---

PS：Pencil.dev确实香，但如果你也怕界面失控，建议先花半天时间定义好自己的组件规范，再开Vibe。否则后期重构的成本，比手写CSS还痛苦。