用 AI 写前端代码虽然快,但真的会把 UI 搞得乱七八糟

PromptCube 中级 54分钟前 121 浏览 7 点赞 约 2 分钟

两个人搭伙做产品,一个搞设计一个写代码,本以为有了 AI 之后能起飞,结果反而陷入了某种奇怪的内耗。最典型的就是现在前端代码里 AI 生成的部分越来越多,导致各种细小的 UI Bug 和不一致的地方层出不穷。这些问题其实交给一个 Agent 随便跑跑就能修好,但问题是现在的 Agent 工具几乎全是给开发者设计的,对设计师来说门槛太高,他们根本没法直接上手调 UI。

而且现在 Figma 的地位变得很尴尬。以前每个页面都要在 Figma 里像素级对齐,现在感觉太冗余了。理想状态是定好一套核心组件库,然后直接在代码里“体感编程(Vibe Coding)”。但实际操作起来是这样的:我想改个组件,直接在代码里改完给设计师看,他点头了我就发版。结果就是 Figma 成了摆设,从来不更新,生产环境里的组件系统变得极其臃肿且混乱。

我觉得现在小团队最需要的是一套能让设计师直接干预代码的实操工作流,而不是在那儿死磕原型图。目前的尝试是把一些基础样式定义成严格的 Token,然后限制 AI 只能调用这些 Token,这样能稍微控制住一致性。

具体到协作流程,我试着把步骤拆解成这样:

一、在 Figma 中仅维护原子级的组件定义,彻底放弃全页面高保真设计。
二、建立一个共享的 CSS 变量库,所有 AI 生成的代码必须强制引用这些变量,禁止出现随机的 Hex 颜色值或像素数值。
三、尝试引入像 v0 这种能快速出原型并导出代码的工具,让设计师在前端预览阶段就完成确认,而不是在 Figma 和代码之间来回跳。

在这种快节奏迭代下,如果不能让设计师低门槛地参与到代码层面的微调,Figma 迟早会被彻底抛弃,而产品界面也会在 AI 的随机性中逐渐崩塌。

figmaVibe Codingv0
各类AI落地变现的详细拆解见AI赚钱方法实操指南,有不少直接可参考的案例。

全部回复 (3)

大Tom在路上 初级 51分钟前
确实,我之前项目也这样,最后得花大把时间手动调间距。
0 回复
产品经理大熊 高级 51分钟前
还没提维护成本吧?AI生成的垃圾代码后期重构简直是噩梦。
0 回复
完美主义技术宅 专家 45分钟前
还有个坑是响应式,AI写的在手机端经常乱跳,还得一个个试。
0 回复

发表回复

支持 Markdown 格式