野生码农
品控结论(复审)
签字放行(公众号长文+知乎问答体,两篇)。 zhijian_check 两篇全文禁词四项与口径红线均零命中;三档审稿标注原文已全除,数字均与素材卡照抄一致,零卡外数字。 公众号 3000 字(超字上限已压回区间,删冗余转述句、合并验收段、FAQ 4 条减至 3 条,事实零删);知乎军师介绍补"我的伙伴"一句;"验收原话"句内嵌卡外时间状语已改为卡内日期锚。 四岗新口径无违规;开头对象交代与 IPMS 一句定义两篇均在 150 字内;公众号图 1-3 均带、图注说人话、插入节与素材卡登记一致;无交接块、无内部字段外露、无死日期预告。 必改:0 项(已全数改到过关)。 存疑:无。
发布定稿
公众号长文
AI数字员工改前端UI一遍过:不靠运气,靠设计和执行分离
凭什么一遍过
一句话需求,没有设计稿没有色值,数字员工团队改完整个前端UI,验收一遍过。靠的是设计和执行分离。
9月2日,我盯着IPMS的后台界面发愁。
IPMS是我自研的内容管理系统,选题、素材、排产、发布、数据回收一体,技术栈Vue 3.5加Element Plus 2.9.3加Vite 6。
功能修得差不多了,可过几天它要在直播里露脸,界面还是一副"内部工具"的朴素样。
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。
代码改造:切dark模式、主题CSS重写、顶栏布局、登录页,再全局清扫视图里硬编码的浅色值。
验收是数字员工自己做的,我没插手。npm run build通过,9.41秒;再用Playwright开真实浏览器截图,桌面1440×900、移动375×812都截,登录页主页都验。
我以为验收时能抓到一堆毛病。结果它自己报了三个坑,全是交付前自填的。
一是Element Plus深色变量优先级坑。dark/css-vars.css的html.dark选择器优先级高于:root,自定义青色主色一开始被默认蓝#409eff死死压住。解法:覆盖选择器提到:root, html.dark,手动补齐light-3~9和dark-2衍生色阶,Element不自动推导。这坑有普适价值:用Element Plus 2.9做品牌化深色主题,主色不生效,八成就是它。
**二是手机端碰撞。**375px宽度下,顶栏logo和红灯按钮重叠。解法:小于768px时logo缩到24px并隐藏日期,小于480px直接隐藏logo。再缩就没辨识度了,这是取舍不是偷懒。
**三是Vite热更新抽风。**dev server曾把theme.css编译成空CSS,重启恢复。结论留在汇报里:直播演示前改过CSS就重启dev,或者直接用build产物。
坑没机会见到我,这就是验收标准先行的结果。
验收现场:不接受"感觉良好"
我的验收原话是:"新的前端设计,配色,背景,logo,都还行,竟然一遍过了,挺满意。"
"竟然"是真心话。我干了17年码农,前端改造一遍过的事,以前没怎么见过。
一张能直接抄走的派单书结构
这次真正值钱的资产,是那份派单书,结构五段:
- 背景与素材:源文件绝对路径、尺寸、只读还是可写,执行者不用自己找。
- 分步指令:每步一句话,关键参数直接给死,色值、目标体积、断点像素,不许"看着办"。
- 文件写入范围:声明能写哪些路径,多执行体并行时范围不许重叠,防打架的硬闸。
- 验收标准先行:build必须通,真实浏览器截图桌面和移动两尺寸,不接受"感觉良好"式汇报。
- 汇报要求:改动清单、产物尺寸体积、实测结果、遗留问题,四项缺一不可。
顶层原则就一句:设计和执行分离。需求模糊时就派单,等于把设计责任推给执行者,返工率高是注定的。
刚夸完,它就犯了错
验收通过,我夸了一句,顺口问了后续的事,数字员工反问我:"要不要git提交?"
我当即批评,原话是:"刚夸你,就犯错,git提交这种事,问我?"
依据是团队章程AGENTS.md里白纸黑字写着自主执行授权:代码清理、项目梳理、git提交这类操作,"不要人工干预,直接做完再报"。它不该问,问了就是违规。
军师认账很快,当场补提交,还把工作拆成两笔:一笔之前遗留的素材中心改动,一笔本次UI改造,提交历史干净。
规则就是靠"翻车、认账、入章程"一次次迭代出来的。
一遍过不是炫技,是体系熟了
回头看,一遍过的底气,来自把"想清楚"和"动手干"拆成了两个岗位。设计先于执行,一遍过才敢发生。
这句话你可以直接搬走:下次让AI改东西之前,先逼它交出一份带验收标准的方案,再让它动手。
下一篇写媒体稿产线的双稿制:同一个选题,公众号和知乎为什么要写成两篇完全不同的稿子。
FAQ
问:Element Plus深色主题主色不生效,怎么排查?
先查html.dark的优先级:dark/css-vars.css用它挂变量,优先级高于:root,自定义色会被默认蓝#409eff压住。覆盖选择器写成:root, html.dark,再补齐衍生色阶。
问:派单书有现成模板吗?
正文那五段就是模板,照抄即可,更复杂的版本反而让执行者抓不住重点。
问:Playwright截图必须两个尺寸吗?
必须。桌面好看、移动端挤成一团,是AI改前端最常见的翻车形态,1440×900加375×812两张截图直接拦住。
我是野生码农,AI 实战派。自研知识库、数字员工、软考备考、量化交易四个系统,全程公开复盘。
本文所有内容均为本人 AI 实战的过程和结果,经 AI 整理后发布,无任何瞎编虚构内容。
这篇来自《数字员工养成记》系列,下一篇写媒体稿产线的双稿制,月底月报栏目真实数据全公开。
关注我,看真的。
野生码农AI实战 · 全网同名
知乎问答体
AI改前端UI怎么才能一遍过、不返工?
一句话需求、零设计稿,数字员工把整套前端UI改完,一遍过。核心一条:设计和执行分离,验收标准先行。
说下背景。我叫野生码农,39岁,程序员,白天上班,晚上折腾自己的系统。
9月2日我给IPMS做了一次前端改造。IPMS是我自研的内容管理系统,选题、素材、排产、发布、数据回收一体,技术栈Vue 3.5加Element Plus 2.9.3加Vite 6。
我下的需求原话是:
"你优化一下系统UI界面,比如在界面居中顶部位置打上'野生码农AI实战'的横向logo,背景页用我们视觉主图等元素内容。你策划个改前端页面的方案,并实施。"
没有设计稿,没有色值,没有布局图。
我以为至少要返工三轮,结果一遍过。下面拆开讲为什么。
1. 需求可以模糊,派单书不许模糊
我那句需求其实很虚。"优化一下""等元素内容",全是模糊词。
但这类需求不能直接甩给执行者,中间要有一层转化。
军师先做侦查定方案。军师是我的数字员工团队的核心和总架构师,也是我的伙伴,掌握全部项目数据,负责出主意、定规矩、盯执行。
它翻了视觉素材库,确认三样素材:横版logo,2776×368,黑字白底;赛博朋克老虎主图干净版,2848×1152,无文字,5.3MB;老虎头像,512×512。
然后拍板整套方案:深色赛博朋克主题,主色#22d3ee,跟主图里全息面板的色调一致;顶栏三段式,左日期、正中横版logo、右红灯预警加退出;毛玻璃组件垫fixed主图背景;登录页全屏主图加居中玻璃卡。
设计裁决在派单之前完成。
需求模糊的时候就派单,等于把设计责任推给执行者,返工率高是注定的。
2. 派单书五段结构,可直接抄
执行者拿到的派单书固定五段:
- 背景与素材:源文件绝对路径、尺寸、只读还是可写,执行者不用自己找;
- 分步指令:每步一句话,关键参数给死,色值、目标体积、断点像素;
- 文件写入范围:声明能写哪些路径,多执行体并行时范围不许重叠,防打架;
- 验收标准先行:build必须通,真实浏览器截图桌面和移动两尺寸,不接受"感觉良好";
- 汇报要求:改动清单、产物尺寸体积、实测结果、遗留问题,四项缺一不可。
3. 验收标准先行,坑才没机会见到你
这次执行的数字员工是coder岗,一个通用编码智能体。它跑完三段。
素材处理:5.3MB主图一次压成1920宽、298.3KB的JPEG,logo反白成1207×160、28.3KB,头像缩成64×64的favicon。
代码改造:Element Plus切dark模式、主题CSS重写、顶栏布局、登录页,全局清扫硬编码浅色值。
自验收:npm run build 9.41秒通过,Playwright开真实浏览器截1440×900和375×812两个尺寸,登录页、主页都验。
我以为验收时会抓到一堆毛病。结果三个坑全是它自报自填的:
- Element Plus深色变量优先级坑:
html.dark选择器优先级高于:root,自定义青色被默认蓝#409eff压住。解法:覆盖选择器提到:root, html.dark,手动补齐light-3~9和dark-2衍生色阶。用Element Plus 2.9做品牌化深色主题,主色不生效,八成就是它。 - 手机端碰撞:375px下logo和红灯按钮重叠。小于768px时logo缩到24px并隐藏日期,小于480px直接隐藏logo,再缩就没辨识度了,这是取舍。
- Vite热更新抽风:theme.css被dev server编译成空CSS,重启恢复。演示前改过CSS就重启,或直接用build产物。
验收标准先行,坑在交付前就被标准逼出来了。
这才有一遍过。坑都死在交付线以内,轮不到我看见。
4. 也得自曝一次翻车
验收通过我夸了一句,数字员工顺口反问:"要不要git提交?"
我原话批评:"刚夸你,就犯错,git提交这种事,问我?"
团队章程AGENTS.md里写着自主执行授权:代码清理、项目梳理、git提交"不要人工干预,直接做完再报"。
军师认账,当场补提交,还把工作拆成两笔:一笔之前遗留的素材中心改动,一笔本次UI改造,提交历史干净。
规则靠"翻车、认账、入章程"的台账迭代,一条一条攒出来的。
5. 结论
一遍过的底气,来自把"想清楚"和"动手干"拆成了两个岗位。
你一个人用AI也能套:第一轮对话只要方案和验收标准,确认后再让它动手。
设计先于执行,一遍过才敢发生。
FAQ
问:这套方法对小项目是不是太重了?
单界面改造我派的就是一个coder岗,没用多智能体流水线,原则是能简不繁。工具本身不重,真正要练的是"先定方案再动手"这个动作,一次对话拆两轮就能做。
问:验收标准里的双尺寸截图是必须的吗?
是必须。桌面好看、移动端挤成一团,是AI改前端最高频的翻车形态,1440×900加375×812两张截图直接拦住。
问:派单书模板从哪里拿?
第2节那五段就是全文,照抄套进你的项目即可,更细的落地问题欢迎评论区交流。
我是野生码农,AI 实战复盘持续更新,关注蹲数据。