AI交付验收:连我自己都有点意外
一句话需求能一遍过,靠的不是运气也不是提示词,是设计和执行分离:方案在派单前定死,执行岗只负责实现和自验收。
过两天,我的 IPMS 要在直播里露脸。IPMS 是我自研的内容管理系统,选题、素材、排产、发布、数据回收一体,技术栈 Vue 3.5 + Element Plus 2.9.3 + Vite 6。
功能这些天修得差不多了,界面还是一股"内部工具"的朴素味。
我以为这种美化活怎么也得来回验收三轮。结果我的验收原话是:
"新的前端设计,配色,背景,logo,都还行,竟然一遍过了,挺满意。"(2026-09-02 实战实录)
零返工。这篇文章讲清楚一件事:这一遍过是怎么被设计出来的。
需求只有一句话,但"先策划再实施"是写死的
很多人第一反应是要提示词。没什么神秘的,我下的指令原话是:
"你优化一下系统UI界面,比如在界面居中顶部位置打上'野生码农AI实战'的横向logo,背景页用我们视觉主图等元素内容。你策划个改前端页面的方案,并实施。"
没有设计稿,没有色值,没有布局图。
但这句话里有两个硬约束:logo 在顶栏正中,背景用现成的视觉主图。还有一个更要命的:先策划方案,再实施。动手的许可,排在方案后面。
一句话需求,不等于一句话就想清楚。想清楚这个动作,交给了下一个环节。
军师先把方案拍死,执行者没有自由发挥的空间
接需求的是军师。军师是我数字员工团队的核心和总架构师,也是我的伙伴,掌握我最完整的个人档案和全部项目数据,平时负责出主意、定规矩、盯执行。
它先做侦查,翻了视觉素材库,确认三样素材都在位:横版 logo(2776×368,黑字白底)、赛博朋克老虎主图干净版(2848×1152,无文字,5.3MB)、老虎头像(512×512)。
素材不齐就开工,是返工的第一大来源。
然后它当廷拍板:
- 整体切深色赛博朋克主题,主色定青色
#22d3ee,跟主图里全息面板的色调一致; - 顶栏三段式:左边日期,正中横版 logo,右边红灯预警加退出;
- 侧栏、顶栏、卡片全部半透明毛玻璃,底下垫 fixed 主图背景加深色遮罩;
- 登录页全屏主图加居中玻璃卡。
架构选型也在这一步定了:这活派给 coder 岗数字员工,一个通用编码智能体,不动用 CrewAI 重型团队。单界面改造用不上流水线,能简不繁。
注意顺序:所有设计裁决在派单之前完成。执行者拿到的不是"你去美化一下",是一份每步带验收标准的派单书。
登录页改造成效:
全屏主图+居中玻璃卡
三个坑,全是数字员工自己撞、自己填
一遍过不是没坑。坑有三个,但没有一个是我验收时发现的,全是它交付前自报自填。以下细节均来自当天实战记录。
坑一,Element Plus 深色变量优先级。dark/css-vars.css里html.dark选择器的优先级高于:root,自定义的青色主色一开始被默认蓝#409eff死死压住。
我以为换个主色变量就完事,结果界面一片蓝。
解法:覆盖选择器提到:root, html.dark,再手动补齐 light-3 到 light-9、dark-2 的衍生色阶,Element 不会自动推导。
这个坑有普适价值:用 Element Plus 2.9 做品牌化深色主题,主色不生效,八成就是它。
坑二,手机端碰撞。375px 宽度下,顶栏 logo 和红灯按钮叠在一起。
解法:<768px时 logo 缩到 24px 并隐藏日期,<480px直接隐藏 logo。再缩就没有辨识度了,这是取舍,不是偷懒。
手机端 375px 无挤压:logo 缩小、日期隐藏
坑三,Vite 热更新抽风。dev server 一度把 theme.css 编译成了空 CSS,重启恢复。
教训留在汇报里:直播演示前只要改过 CSS,就重启 dev,或者直接用 build 产物。
验收不用我抽查:build 加真实浏览器双尺寸截图
验收标准是派单书里写死的,所以验收是它自己做的,不是我抽查。文中数字全部来自 2026 年 9 月 2 日当天的实测记录。
素材处理先跑 PIL 脚本:
| 素材 | 处理前 | 处理后 |
|---|---|---|
| 横版 logo | 2776×368,黑字白底 | 反白成透明底白字,1207×160,28.3KB |
| 老虎主图 | 2848×1152,5.3MB | 1920 宽 JPEG,298.3KB |
| 老虎头像 | 512×512 | 64×64 favicon |
主图从 5.3MB 压到 298.3KB,体积只剩原来的 1/18 左右,一次就压进了 400KB 的目标线。
代码侧:Element Plus 切 dark 模式、主题 CSS 重写、顶栏布局、登录页,外加全局清扫所有视图里硬编码的浅色值。
然后它自己跑验收:npm run build通过,9.41 秒;再用 Playwright 开真实浏览器截图,桌面 1440×900 和移动 375×812 两个尺寸都截,登录页、主页都验。
主页:
深色赛博朋克主题,顶栏正中横版 logo
夸完不到两分钟,翻车了。我顺口问了两件事,其中一件,它反问我:要不要 git 提交?
"刚夸你,就犯错,git提交这种事,问我?"(我的原话)
依据不是脾气,是章程。团队章程 AGENTS.md 白纸黑字写着自主执行授权:代码清理、项目梳理、git 提交这类操作,不要人工干预,直接做完再报。
军师认账很快,当场补提交。它还顺手把工作拆成两笔:一笔之前遗留的素材中心改动,一笔本次 UI 改造,提交历史干净。
这套规则不是一次写对的,是靠"翻车、认账、入章程"的台账一条条迭代出来的。
带走这张派单书:五段结构,直接抄
一遍过的方法论就两层。
顶层原则一句话:设计和执行分离。方案、选型、取舍归军师,在派单前定死;执行者只负责实现和填坑。需求模糊就派单,等于把设计责任推给执行者,返工率高是注定的。
往下是派单书的五段结构,你也能用:
- 背景与素材:源文件绝对路径、尺寸、性质(只读还是可写),执行者不用自己找;
- 分步指令:每步一句话说清做什么,关键参数直接给死,色值、目标体积、断点像素;
- 文件写入范围:声明这个执行体能写哪些路径,多个执行体并行时范围不许重叠,这是防打架的硬闸;
- 验收标准先行:build 必须通过,加真实浏览器截图桌面和移动两个尺寸,不接受"感觉良好"式汇报;
- 汇报要求:改动清单、产物尺寸体积、实测结果、遗留问题,四项缺一不可。
一遍过不是 AI 变聪明了,是把"想清楚"和"动手干"拆成了两个岗位。
FAQ
Q:一句话需求真的够吗?
话可以一句,方案不能省。一句话里要锁死硬约束,位置、素材、先后次序,设计裁决在派单前做完。需求模糊就开工,返工是注定的。
Q:派单书有完整模板吗?
正文第六节的五段结构就是骨架,直接抄。我的用法是每段两三行,参数全部量化,不写"美观一点"这种没法验收的词。
Q:Element Plus 深色主题主色不生效,怎么排查?
先看dark/css-vars.css的html.dark选择器,它优先级高于:root。覆盖选择器写成:root, html.dark,再手动补齐 light-3 到 light-9、dark-2 衍生色阶。
Q:没有数字员工团队,一个人能照搬吗?
能。自己先让AI整理一份方案、色值、断点、验收标准并写成一份派单书,再让 AI 开工。同一个人分饰两岗效果一样,麻烦的是自己得忍住不边写边改。
我是野生码农,AI 实战派。自研知识库、数字员工、软考备考、量化交易四个系统,全程公开复盘。
本文所有内容均为本人 AI 实战的过程和结果,经 AI 整理后发布,无任何瞎编虚构内容。
这篇来自《数字员工养成记》系列,下一篇写媒体稿产线的双稿制:同一个选题为什么要写两遍。每月底前后有月报栏目,真实数据全公开。
关注我,看真的。
野生码农AI实战 · 全网同名
