公众号长文(2000-3000 字,含 FAQ+关注引导段+署名行)

没有设计稿,一句话需求,数字员工改前端 UI 一遍过:我只动了嘴

验收现场:连我自己都有点意外

一句话需求能一遍过,靠的不是运气也不是提示词,是设计和执行分离:方案在派单前定死,执行岗只负责实现和自验收。

过两天,我的 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。再缩就没有辨识度了,这是取舍,不是偷懒。

坑三,Vite 热更新抽风。dev server 一度把 theme.css 编译成了空 CSS,重启恢复。

教训留在汇报里:直播演示前只要改过 CSS,就重启 dev,或者直接用 build 产物。

验收不用我抽查:build 加真实浏览器双尺寸截图

验收标准是派单书里写死的,所以验收是它自己做的,不是我抽查。文中数字全部来自 2026 年 9 月 2 日当天的实测记录。

素材处理先跑 PIL 脚本:

主图从 5.3MB 压到 298.3KB,体积只剩原来的 1/18 左右,一次就压进了 400KB 的目标线。

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

然后它自己跑验收:npm run build 通过,9.41 秒;再用 Playwright 开真实浏览器截图,桌面 1440×900 和移动 375×812 两个尺寸都截,登录页、主页都验。

夸完不到两分钟,翻车了。我顺口问了两件事,其中一件,它反问我:要不要 git 提交?

"刚夸你,就犯错,git提交这种事,问我?"(我的原话)

依据不是脾气,是章程。团队章程 AGENTS.md 白纸黑字写着自主执行授权:代码清理、项目梳理、git 提交这类操作,不要人工干预,直接做完再报。

军师认账很快,当场补提交。它还顺手把工作拆成两笔:一笔之前遗留的素材中心改动,一笔本次 UI 改造,提交历史干净。

这套规则不是一次写对的,是靠"翻车、认账、入章程"的台账一条条迭代出来的。

带走这张派单书:五段结构,直接抄

一遍过的方法论就两层。

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

往下是派单书的五段结构,你也能用:

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

一遍过不是 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实战 · 全网同名

知乎问答体(1500-2500 字,含 FAQ+文末关注行)

用 AI 改前端 UI 总是反复返工,怎么做到一遍过?

能。关键不在提示词,在分工:设计和执行分离,方案在派单前定死,执行者只负责实现和自验收。

我 2026 年 9 月 2 日用一句话需求,让数字员工改完了自研系统的前端,验收一遍过,零返工。下面把全过程拆开,文末的派单书结构可以直接抄。

1. 背景:一句话需求,零设计稿

我的系统叫 IPMS,是自研的内容管理系统,选题、素材、排产、发布、数据回收一体,技术栈 Vue 3.5 + Element Plus 2.9.3 + Vite 6。

功能完善了,界面还是内部工具的朴素样,而它过两天要在直播里露脸。

我下的指令原话:

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

没有设计稿,没有色值,没有布局图。

但注意句尾:先策划方案,再实施。动手的许可排在方案后面,这是一切的前提。

2. 方案在派单前定死

接需求的是军师,我数字员工团队的核心和总架构师,也是我的伙伴,掌握我最完整的个人档案和全部项目数据,负责出主意、定规矩、盯执行。

它先侦查,翻视觉素材库,确认三样素材在位:横版 logo(2776×368,黑字白底)、赛博朋克老虎主图干净版(2848×1152,无文字,5.3MB)、老虎头像(512×512)。

然后拍板:整体切深色赛博朋克主题,主色定青色 #22d3ee,跟主图里全息面板的色调一致。

顶栏三段式:左日期、正中横版 logo、右红灯预警加退出。

侧栏顶栏卡片全部半透明毛玻璃,垫 fixed 主图背景加深色遮罩;登录页全屏主图加居中玻璃卡。

架构选型同在这一步:派给 coder 岗数字员工,一个通用编码智能体,不动用 CrewAI 重型团队。单界面改造用不上流水线,能简不繁。

执行者拿到的不是"你去美化一下",是每步带验收标准的派单书。

3. 执行三段:素材处理、代码改造、自验收

以下数字全部来自当天实测记录。

素材处理跑 PIL 脚本:logo 反白成透明底白字版,1207×160,28.3KB;主图压成 1920 宽 JPEG,从 5.3MB 到 298.3KB,体积只剩原来的 1/18 左右,一次压进 400KB 目标线;头像缩成 64×64 favicon。

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

验收是数字员工自己做的,不是我抽查:npm run build 通过,9.41 秒。

再用 Playwright 开真实浏览器截图,桌面 1440×900 和移动 375×812 两个尺寸都截,登录页、主页都验。

我以为怎么也得返工两轮,结果一遍过。原因在下一节。

4. 三个坑,都在交付前自填

一遍过不是没坑,是坑全部自报自填。

其一,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。再缩就没辨识度,取舍不是偷懒。

其三,Vite 热更新抽风,dev server 把 theme.css 编译成空 CSS,重启恢复。结论留在汇报里:演示前改过 CSS 就重启 dev,或用 build 产物。

5. 派单书五段结构,可直接抄

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

五段结构:

1. 背景与素材:源文件绝对路径、尺寸、性质,只读还是可写;
2. 分步指令:每步一句话,关键参数给死,色值、目标体积、断点像素;
3. 文件写入范围:声明可写路径,并行执行体范围不重叠;
4. 验收标准先行:build 必须通过,真实浏览器截图桌面和移动双尺寸,不接受"感觉良好";
5. 汇报要求:改动清单、产物尺寸体积、实测结果、遗留问题,四项缺一不可。

6. 自曝一次翻车

验收通过我夸了一句,顺口问了两件事,其中一件,数字员工反问我:要不要 git 提交?

我的原话:"刚夸你,就犯错,git提交这种事,问我?"

依据是章程。AGENTS.md 白纸黑字写着自主执行授权:代码清理、项目梳理、git 提交这类操作,不要人工干预,直接做完再报。

军师认账,当场补提交。顺手拆成两笔:一笔遗留的素材中心改动,一笔本次 UI 改造,提交历史干净。

规则不是一次写对的,是靠"翻车、认账、入章程"的台账迭代出来的。

FAQ

Q:这套流程小项目值得用吗?

值得。派单书可长可短,小改动五段各写一行也够。省掉的是返工沟通,不是 upfront 那十分钟。

Q:单人没有数字员工团队怎么办?

自己分饰两岗。先把方案、色值、断点、验收标准写成派单书,再让 AI 开工。难点是忍住不边写边改。

Q:验收为什么要真实浏览器截图?

因为"代码能跑"和"页面好看"是两回事。build 只管前者,截图管后者,双尺寸是为了覆盖移动端碰撞这类问题。

我是野生码农,AI 实战复盘持续更新,关注蹲数据。