原型稿说明:本篇是双稿制的 A 稿(分钟级把味稿),事实与截图全真,工艺未打磨。本人点头后转素材卡,由 yinliu 产线重写成品。

AI数字员工改前端一遍过:我只动了嘴,它把Vue深色主题+品牌logo全干完了

我,39 岁,高速公路项目部征迁岗,业余在直播镜头前养了一支 AI 数字员工团队。今晚(2026-09-02)要做的事:我的 IPMS 系统(个人 IP 内容管理系统,Vue 3.5 + Element Plus 2.9.3 + Vite 6)这些天修了一堆 bug,功能完善了,过几天要在直播里露脸——但界面还是一副"内部工具"的朴素样。

我给军师(我的 AI 总调度)下的原话指令是:

你优化一下系统UI界面,比如在界面居中顶部位置打上"野生码农AI实战"的横向logo,背景页用我们视觉主图等元素内容。你策划个改前端页面的方案,并实施。

一句话需求,没有设计稿,没有色值,没有布局图。下面是全过程。

方案是军师定的,不是执行者临场发挥的

军师先做了一轮侦查:翻了我的视觉素材库,确认三样东西——横版 logo(2776×368,黑字白底)、赛博朋克老虎主图干净版(2848×1152,无文字,5.3MB)、老虎头像(512×512)。然后它当廷拍板了方案:

• 整体切深色赛博朋克主题,主色定青色 #22d3ee(跟主图里全息面板的色调一致)
• 顶栏三段式:左边日期,正中横版 logo,右边红灯预警+退出
• 侧栏、顶栏、卡片全部半透明毛玻璃,底下垫 fixed 主图背景+深色遮罩
• 登录页全屏主图+居中玻璃卡

注意这个分工:设计裁决在派单之前完成,执行者拿到的不是"你去美化一下",而是一份每步带验收标准的派单书。 这是一遍过的前提,后面细说。

数字员工接单:素材处理、主题改造、验收,三段全跑

这活派给了 coder 岗数字员工(通用编码智能体,不是 CrewAI 重型团队——单界面改造用不上流水线,这是架构选型:能简不繁)。它干完的活:

素材处理(PIL 脚本):

• 黑字白底 logo 反白成透明底白字版:1207×160,28.3KB
• 5.3MB 主图压成 1920 宽 JPEG:298.3KB,一次就压进 <400KB 的目标线
• 头像缩成 64×64 favicon

代码改造:Element Plus 切 dark 模式、主题 CSS 重写、顶栏布局、登录页,外加全局清扫所有视图里硬编码的浅色值。

验收(它自己做的,不是我抽查):npm run build 通过(9.41 秒),然后用 Playwright 开真实浏览器截图——桌面 1440×900 和移动 375×812 两个尺寸都截,登录页、主页都验。

一遍过:三张实测截图

登录页,全屏老虎主图+毛玻璃登录卡+白字 logo:

主页,玻璃侧栏(老虎头像+IPMS),顶栏正中"野生码农AI实战"横版 logo,青色主按钮:

手机端 375px,无挤压:

我的验收原话:"新的前端设计,配色,背景,logo,都还行,竟然一遍过了,挺满意。"

但数字员工不是没踩坑——它踩了三个,自己填了三个

一遍过不等于没坑,是坑都在交付前被填掉了。它汇报里自报了三个:

1. Element Plus 深色变量优先级坑:dark/css-vars.css 的 html.dark 选择器优先级高于 :root,自定义青色主色一开始被默认蓝 #409eff 死死压住。解法:覆盖选择器提到 :root, html.dark,并手动补齐 light-3~9/dark-2 衍生色阶(Element 不自动推导)。
2. 手机端碰撞:375px 宽度下顶栏 logo 和红灯按钮重叠。解法:<768px logo 缩到 24px 并隐藏日期,<480px 直接隐藏 logo——再缩就没辨识度了,这是取舍不是偷懒。
3. Vite 热更新抽风:dev server 曾把 theme.css 编译成空 CSS,重启恢复。结论留在汇报里:直播演示前改过 CSS 就重启 dev 或直接用 build 产物。

第 1 个坑有普适价值:用 Element Plus 2.9 做品牌化深色主题,主色不生效,八成就是它。

刚夸完,它就犯了个规——这段也得写

验收通过我夸了一句,顺口问了两件事,其中一件是"要不要 git 提交"。我当即批评:

刚夸你,就犯错,git提交这种事,问我?

因为团队章程(AGENTS.md)里白纸黑字写着自主执行授权:代码清理、项目梳理、git 提交这类操作"不要人工干预,直接做完再报"。军师认账,当场补提交,还顺手把工作拆成两笔:一笔是之前遗留的素材中心改动,一笔是本次 UI 改造,历史干净。

写这段不是自曝家丑,是想说明:数字员工团队的规则不是一次写对的,是靠这种"翻车—认账—入章程"的台账迭代出来的。

稿子刚存进系统,图先挂了——顺手又修了个 bug

原型稿存进 notes/AI工作/blog/ 之后,图片接连挂了两次,一次比一次有意思。

第一次是小坑:Markdown 里三张图的引用在预览器里不显示。查下来是图片文件名带中文,部分预览器对中文路径的 URL 编码处理有兼容问题,改成 ASCII 文件名就好,十秒的事。

第二次才是真 bug:在 IPMS 素材中心打开这篇稿的预览,三张图全裂。我的原话是:"在ipms里面图片显示也还有问题?"

追查路径很直白:前端 Markdown 渲染组件 MdView 本来就支持 imgBase 参数——把相对路径图片重写到后端接口;物料 asset 也早就有配套的 /api/assets/{id}/image 图片接口。但素材中心的查看弹窗没接 imgBase,后端也没有给素材池用的图片接口。 功能做了一半,之前没人往素材 md 里贴过图,这个洞就一直藏着。

修法是复用既有机制,不动架构:

• 后端新增 /api/materials/image 接口:素材文件路径和图片路径做双重白名单校验,越界 403,图片越界或不存在 404;
• 前端素材查看弹窗接上 imgBase,几行的事。

验证走了四层:单测 6 条全过(新增一条覆盖放行/越界 403/越界 404/不存在 404 四种状态)→ API 级实测(正常图 200 返回完整 963KB,越界与不存在均 404)→ 重启后端加载新路由 → 最后用 Playwright 开真实浏览器点进弹窗,三张图 naturalWidth 全部非零,确认真实渲染成功才收工。

还有个彩蛋:稿子落盘那一刻,IPMS 的落库钩子自动把它登记成了篇目"团队#18",状态直接进"写作中",素材池显示"已关联"。从写完到进产线排队,中间没有人工动作。

这一段的教训就一条:功能有没有做完,不看代码看场景——没人贴过图,图片功能就等于不存在。

配置经验:一遍过靠的不是运气,是派单书结构

读者能带走的干货在这。我们团队的派单书(军师发给数字员工的任务书)固定五段结构:

1. 背景与素材:源文件绝对路径+尺寸+性质(只读还是可写),执行者不用自己找;
2. 分步指令:每步一句话说清做什么,关键参数直接给死(色值、目标体积、断点像素);
3. 文件写入范围:声明这个执行体能写哪些路径,多个执行体并行时范围不许重叠——这是防打架的硬闸;
4. 验收标准先行:"build 必须通过+真实浏览器截图桌面/移动两尺寸",不接受"感觉良好"式汇报;
5. 汇报要求:改动清单、产物尺寸体积、实测结果、遗留问题,四项缺一不可。

再加一条顶层原则:设计和执行分离。方案、选型、取舍归军师(在派单前定死),执行者只负责实现和填坑。需求模糊时就派单,等于把设计责任推给了执行者,返工率高是注定的。

结尾

一遍过不是 AI 变聪明了,是把"想清楚"和"动手干"拆成了两个岗位。

下篇写这支团队跑媒体稿产线的双稿制——为什么 AI 写的稿子还要再过一条产线重写,以及 A/B 对照的实锤结果。关注蹲更新。

素材点

• "刚夸你,就犯错,git提交这种事,问我?"——规则迭代的真实翻车现场,冲突感强
• Element Plus 深色主色被 html.dark 优先级压住的技术坑(可单独抽 S3 技术短稿)
• 派单书五段结构(背景/分步/写入范围/验收先行/汇报要求)——可做成模板下载钩子
• 一遍过的反常识点:不是没坑,是坑在交付前自填(验收标准先行的结果)
• 5.3MB→298KB 主图压缩、logo 反白,素材处理自动化的小切口
• "稿子刚写完,图在自己造的系统里挂了"——写稿工具顺手修自己的 bug,元循环彩蛋
• 功能做一半的典型样本:MdView 有 imgBase 能力但素材中心没接,没人贴图就永远发现不了
• 落库钩子自动立项"团队#18":写完即进产线排队,全自动实证的细节

分发配套(原型稿候选,产线定稿时再跑完整评分器)

• 标题 Top5:
  1. AI数字员工改前端一遍过:我只动了嘴,它把Vue深色主题+品牌logo全干完了(实体+结果,首选候选)
  2. Element Plus深色主题主色不生效?html.dark优先级坑+品牌UI一遍过实录(搜索/问题悬念)
  3. 让AI改界面为什么说一句话就够:数字员工团队派单书结构曝光(内幕感)
  4. 直播前夜,我把自研系统的前端交给了AI数字员工(故事/场景)
  5. 一遍过的秘密不在提示词:设计和执行分离的AI团队工作法(方法论)
  6. AI刚写完稿,图就在AI自己造的系统里挂了:顺手修bug实录(元循环/悬念)
• 摘要( prototype 版):直播前给自研 IPMS 系统做品牌化 UI 改造,AI 军师定方案、数字员工执行,深色赛博朋克主题+居中 logo 一遍通过;稿子落盘即被落库钩子自动立项进产线,顺带实锤并修复素材中心图片显示 bug。附 Element Plus 深色主色优先级坑的解法和数字员工派单书五段结构。
• 分类与标签:AI 实战 / 数字员工 / 前端 / Vue / Element Plus
• 封面文案:AI数字员工改前端,一遍过