游乐游手机版
首页/AI教程/文章详情

两周三场终面带设计师跑通Vibe Coding实验

时间:2026-06-29 17:37
将设计规范与交互规则转化为AI可执行的Skill,实现从PRD到可交互前端页面的自动化生成。设计师借此拓展能力边界,无需从零编码即可产出可交付代码。该项目使求职者在两周内获得三场终面,显著提升被关注概率,验证了设计师掌握AI编程的可行性与时效性。

大约两三个月前的夜晚,我在浏览招聘平台时,一份份体验设计师的职位描述向下滚动。划到第三十多份时,手指突然停顿。不是因为薪资待遇,而是因为同一行字反复映入眼帘——“具备AI编程能力,并有Vibe Coding实践经验”。

半年前,这一行字还出现在加分项中,附带括号注明“优先考虑”。如今它已被提升至最上方,与Figma、组件库等核心技能并列,成为了基础要求。

放下手机,我静坐沉思。脑海中浮现一个颇为棘手的问题:如果现在这个时间节点外出面试,凭借手中那套作品集,还能顺利过关吗?

我不敢继续往下细想答案。

反应稍慢的从业者

从事设计工作多年,我对作品集再熟悉不过了——业务背景、用户调研、信息架构、多个方案对比、最终设计稿、上线数据。一整套流程整理下来,厚厚一本,重点在于展现对业务的理解深度,以及设计细节的精细程度。

过去,这套方法确实行之有效。

但那天晚上我意识到,市场正在悄然更换评判标准。企业不再仅仅询问“你能不能把设计图画好”,而是开始追问“你完成设计图之后,能否再向前迈进一步”。

那关键的一步,就是代码能力。

这里并非指去抢占前端开发的岗位。而是指作为一名设计师,你能把自己产出的设计成果,亲自推进到可运行、可交互、并能作为前端开发起点的程度。

过去,设计师没有这项能力,也不需要。但现在,时机已到,需求也已明朗。

我决定进行一次实验。

一周多时间,构建一个 Skill

我找了一位同行伙伴,对他说:我们花一周多时间,专注做一件事——把从PRD(产品需求文档)到可交互前端页面的完整路径跑通,并使之固化。

方法就是打造一个专属的Skill。

所谓Skill,简单来说,就是将一套规则、一组约束、以及你希望AI遵循的指令,预先编写好并喂给它。此后每次执行任务,AI都会按照这套规则运作,无需每次重新叮嘱。

我们没有从零开始。而是将公司的设计系统、设计规范、交互规则,逐项注入其中。

这项工作比想象中更为琐碎。

例如:一个按钮在悬停状态时应变化几个色阶;弹窗出现的间距是多少;表单报错文案固定显示在屏幕哪个位置;同一类组件在不同页面是否需要保持完全一致。这些过去分散在文档中、沉淀在设计师脑海里的细则,如今都需要一条条清晰阐述,并编写成AI能够理解、照做的指令。

中途有几天颇为磨人。修改一处,运行一遍,发现不对,再回头调整。一个组件的间距,可能反复调试好几轮。

但到了第五天或第六天,它终于跑通了。

通顺的那一刻

我将一份PRD内容输入进去,Skill运行了一段时间,最终输出了一个前端页面。

点击打开。页面能够跳转,能够交互,组件严格遵循公司规范,间距、字号、颜色全部正确匹配。

那一刻,我有些发愣。

它距离完美还很远,细节仍需打磨,接口需要对接。让我愣住的,是另一件事:这个页面,过去需要一位前端开发从零编写;而现在,一位设计师只需对照PRD,就能自行生成。

设计师拿到的,不再仅仅是一张设计图。而是一段可运行的代码。

这段代码可以直接交付给前端开发。前端开发无需从绘图开始还原,只需在此基础上进行调整、对接接口、处理边界情况即可。

设计师的能力边界,就这样被向前推进了一大步。

两周内发生的变化

这位伙伴带着这个项目去投递简历。

他投递的都是明确标注“AI编程”“Vibe Coding”要求的岗位。由于该项目本身便符合这一方向,匹配度非常高。

反馈比预想来得更快。

不到两周时间,他收到了三家公司的面试邀请,其中一家已走完全部面试流程。预计最近两天,就会收到录用通知。后面还有几场面试正在排队,尚未结束。

我不敢断言这个项目起决定性作用。面试能否成功,取决于多种因素——岗位匹配度、面试当天的沟通状态、用人部门是否有名额,运气也占一部分比例。但可以肯定的是,在这个时间点,这个项目让他在众多以传统方式制作作品集的候选人中,获得了更高的被关注概率。

被看见,是迈出第一步的关键。

事后领悟的要点

这件事完成后,我回头重新审视对作品集的理解。

过去,我总觉得作品集就是清晰呈现过往工作成果,证明自己懂业务、会设计、有完整过程。

现在才发现,这个理解已经慢了半拍。

传统的那些东西依然是基础——业务理解、设计过程,这些不能丢弃。没有这些根基,AI生成的代码也会显得虚浮。问题在于,仅仅拥有这些,在今天看来会显得单薄。

企业想知道的,已经不止是“你过去做过什么”,还包括“你是否能用新工具,把事情向前多推进一步”。

如果你的作品集中,从头到尾看不出任何AI参与的痕迹,面试官可能会产生疑虑:这个人对于新事物,是完全没有接触过,还是缺乏尝试的意愿?

无论属于哪一种情况,在这个时间节点,都谈不上加分。

总结

这个实验完成下来,我最大的收获并非那个Skill本身,而是确认了一件事:设计师向AI编程方向迈进,并不像许多人想象的那么遥远、那么困难。

一个真正能够落地的Vibe Coding项目,一条从PRD到可交互页面的自动化工作流,完全可以在短短一周多时间内搭建完成。

因此,我希望将这件事复制给更多人。

如果你也想在自己的作品集里,增添一个这样的项目——不是摆设,而是真正可运行、可交付、能让你在面试中增加底气的作品——那就带着你的设计功底前来,带路的人就在这里。

来源:https://cloud.tencent.com.cn/developer/article/2700065
上一篇Andrej Karpathy 自用 CLAUDE.md 文件分享 下一篇字节AI编码达90%反而看清软件工程
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
Windows Docker Desktop RabbitMQ生产级部署完整指南
AI教程 · 2026-06-29

Windows Docker Desktop RabbitMQ生产级部署完整指南

前言 在 Windows 本地开发环境中,直接安装 RabbitMQ 确实颇为周折:需要单独配置 Erlang 运行环境、手动管理环境变量、服务启停全凭手工操作。更令人困扰的是,版本兼容冲突、端口占用、环境不一致等问题层出不穷。笔者见过不少开发者为搭建环境就得耗费整整半天时间。 相比之下,借助 Do

AI搜索重构制造业采购逻辑的阿里云企业级GEOCMS优化实践
AI教程 · 2026-06-29

AI搜索重构制造业采购逻辑的阿里云企业级GEOCMS优化实践

先分享一个切实感受。过去两年,我们与福建制造企业合作较为频繁,发现一个非常突出的现象:超过80%的企业官网,产品参数仍然存放在PDF或图片中。AI爬虫?根本无法抓取。这些企业技术实力不弱、资质证照齐全、应用案例也丰富,但在AI搜索这一全新战场上,它们几乎处于隐身状态。 一、一个正在发生的行业变化 A

阿里云Token Plan团队版功能价格与省钱购买指南
AI教程 · 2026-06-29

阿里云Token Plan团队版功能价格与省钱购买指南

阿里云百炼近期推出了名为“Token Plan 团队版”的全新服务,这一服务专为企业与开发者量身打造,定位为AI大模型订阅平台。通过引入Credits作为统一计量单位,将文本生成、图像生成等多模态AI能力纳入单一计费体系,同时无缝兼容主流AI编程工具及智能体(Agent)生态系统。其核心亮点包括:全

阿里云物联网.NET Core客户端位置信息上报
AI教程 · 2026-06-29

阿里云物联网.NET Core客户端位置信息上报

阿里云物联网平台的位置服务并非一个完全独立的功能模块。位置信息可包含二维坐标与三维坐标,而位置数据的来源本质上是借助设备属性进行上传。换言之,若要让设备上报位置,您需先将其视为一个普通属性进行处理。 1)添加二维位置数据 操作过程十分简洁。进入数据分析 → 空间数据可视化 → 二维数据,点击添加,将

年阿里云服务器选型配置与网站部署全攻略
AI教程 · 2026-06-29

年阿里云服务器选型配置与网站部署全攻略

2026年,阿里云服务器生态已高度成熟,形成了清晰的轻量应用服务器与ECS云服务器两大产品阵营。无论你是计划搭建个人博客、企业官网,还是运营电商平台、进行应用开发,基本都能找到理想的解决方案。本指南将从服务器选型、配置选择、部署流程到安全运维,系统梳理2026年最实用的操作要点,帮助你少走弯路,让网