数字员工团队重组首测:拿千问办公的页面开刀,10 分我只打 8.5

9 月 12 日凌晨,六岗砍成三岗、产品设计岗整套复刻千问办公的 28 个技能之后,我拿千问办公自己生成的页面给新团队出了第一份考卷,10 分制打 8.5。

我是野生码农,39 岁,白天在高速公路施工单位上班,晚上用 AI 给自己养一支数字员工团队。凌晨这次大手术,是把原来六个执行岗并成三个:需求、架构、UI、前端全部合进一个新设的产品设计岗。岗位技能包是从千问办公的产品设计套件(product-design 0.5.10)原盘复制的,28 个技能,一字未改。

重组不能停在纸面。我手上正好有一个千问办公生成的 HTML 项目,一套 7 屏的高保真网站设计稿。我拿它给新团队开刀:删板块、调导航、新做一屏、修移动端。

先给结论:8.5 分,扣的 1.5 分全是真翻车

• 加分项一:页面元素圈选功能一次跑通,效果对齐大厂同款,我认为可以点赞;
• 加分项二:套件级抄作业路线验证成立,产品设计岗当天上岗当天干活;
• 扣分项一:第一张改单走了全链派单,删两个板块跑了 394 秒【实测】,被我当场骂醒;
• 扣分项二:移动端适配一塌糊涂,而且根因藏得很深,不是改两行 CSS 能糊弄的。

圈选改网页:一个小脚本,对齐了千问豆包的同款体验

跟 AI 说"把页面上那个板块删了",AI 不知道"那个"是哪个。千问、豆包这类大厂产品的解法,是让你在页面上圈选元素,把选中的组件连同上下文一起发给模型。

我的做法,是把一个 219 行的单文件脚本注入目标页面:悬停出蓝框,双击拾取出绿框,选中的元素自动打包成 JSON,一键复制后粘进聊天框,模型拿到的就是精确坐标。

脚本头部注释就是全部用法:

/* 元素拾取器(element-picker)
 * 用法:整文件注入目标页面(playwright browser_evaluate 或 DevTools 控制台),
 * 悬停高亮、双击拾取(单击保持页面原生交互),面板复制 JSON;
 * 数据同时挂在 window.__elementPicks。无依赖单文件;重复注入=显示/隐藏面板。
 */

粘给模型的 JSON 长这样(节选):

{
  "tag": "div",
  "cssSelector": "#screen-home > div:nth-of-type(3)",
  "xpath": "/html[1]/body[1]/main[1]/section[1]/div[3]",
  "boundingRect": { "x": 323, "y": 312, "width": 1160, "height": 845 }
}

cssSelector、xpath、outerHTML、计算样式、包围盒一次给全,模型改哪里、改什么,零歧义。

中间有个小改进值得说。第一版是单击拾取,结果页面的链接点击全部失效,我想点导航看效果都点不了。改成双击拾取之后,单击保留页面原生交互,双击才进拾取。一行事件绑定的差别,可用性天差地别。

我对这个功能的评价原话:通过一次小小的改进,单击变双击,注入一个小脚本就实现了选取复制,再发回聊天框喂给大模型。一个低成本尝试,做到了和大厂软件一样的效果,这个要点赞。

394 秒删两个板块:首单翻车,被我当场骂醒

第一单我给了两个圈选好的板块,指令就一句:删了。

团队走了完整派单链:立项、写任务卡、派岗、执行、回收。结果是对的,板块也删了,但全程 394 秒【实测】。

我当场发飙,原话是:"什么狗屁效率,删两个我提供的精准元素,还写卡片?还跑了这么久?这活肯定不对!但凡这种简单的任务,超过 20 秒完成都是算失败的。"

骂完归因:活本身没错,错在流程错配。元素坐标我都给了,还要走全链,等于点一碗面先开后厨评审会。处置是当天把规则写进团队章程:

微改单快车道(优先级高于全链):同时满足三条,CIO 直接改,禁写卡、禁派岗,全程 ≤20 秒:1. 单文件改动;2. 改动点已由本人精确定位(拾取 JSON / 明确文案 + 位置);3. 纯删改文案/样式/区块,无新逻辑、无数据契约。

规则入库后的第二张单,把导航里的"AI资讯"提到第一位并切换默认高亮,秒级完成。同一场翻车记进了故障台账,归因层级:治理层,流程错配。

可摘抄的一句话:微改单 = 单文件 + 精确定位 + 无新逻辑,三条全中就直改,超过 20 秒说明流程错了,不是手慢。

抄作业的正确姿势:28 个技能一字不改,原盘端走

这次重组的核心动作是抄作业。我的观点原话:人家大厂都是大数据分析出来、蒸馏下来的技能,都是精华技能,我们自己又何必从零造车。原模原样地抄,这个方向必须要有,以后也要这么抄。

具体抄法不是摘几个提示词,而是套件级复刻:

• 源:千问办公插件目录里的 product-design 套件,版本 0.5.10;
• 内容:28 个技能文件 + 共享协议 + 连接器说明,整目录复制,一字未改;
• 挂法:套件说明文档直接当产品设计岗的岗位章程,28 个技能全部挂在它名下,MCP 配置随岗走;
• 编制:需求、架构、UI、前端四岗撤编合并,前端落地能力(改 HTML、起预览、截图自证)一并划给产品设计岗。

为什么敢一字不改?因为改造即失真。套件里的每个技能是大厂产线跑出来的工艺参数,我改一个字,丢的可能就是它踩过的坑。验收方式也简单:不看配置看产出,这篇文章里的页面,就是它上岗第一天干的活。

实战记录:新做一屏不难,难的是移动端那批死代码

套件上岗后一共干了四件事。前两件是微改:删掉首页两个板块,页面从 1126 行降到 1093 行;导航七个入口把"AI资讯"提到第一位,默认高亮同步切换。

第三件是新做第 8 屏"AI项目展示"独立列表页:大图卡片,标题、摘要、日期、阅读量放在图下,一次出 6 张卡,路由、标签页、键盘数字键切换全部接线,页面涨到 1175 行。这类活套件干得又快又稳,不展开。

真正值钱的是第四件。我给移动端下的诊断原话是"一塌糊涂,没有自适应设计"。团队排查后挖出的根因,值得每个用 AI 生成页面的人警惕:

设计稿预览器有个"移动"开关,点一下把舞台容器压到 400px 宽。但页面里所有移动样式都写在 @media(max-width:639px) 里,媒体查询只认浏览器视口,预览时视口还是 1440px,媒体查询永远不触发,移动样式全是死代码。实测横向溢出:scrollWidth 980,clientWidth 398。

修复方案是新增一套 .stage.is-mobile 独立适配块,35 条规则,绕开媒体查询直接按容器态覆盖。文件里留了注释说明这个坑:

/* 媒体查询只认浏览器视口,预览态(400px 容器)下不会触发,
   移动端布局须按 .is-mobile 独立覆盖 */
.stage.is-mobile{overflow-x:hidden}

顺手还修了两个真机也会炸的隐患。文章详情页的双栏网格,内容列写 1fr,被一段 440px 宽不可换行的内容撑破容器,实测网格轨道 440.422px 对容器 398px。修法是把 1fr 换成 minmax(0,1fr),这是 CSS Grid 的经典坑:1fr 的最小值是内容最小宽度,minmax(0,1fr) 才允许轨道收缩到内容以下。另一处是给正文和封面图补 max-width:100%,防大图撑破。

修完验收:8 屏全部 scrollWidth = clientWidth = 398,控制台零报错【实测】。

成品展示:这套页面到底长什么样

说一千道一万,看东西。下面五张图都是验收时 playwright 实拍的,不是效果图。

桌面端首页,赛博虎 IP 形象 + 暗色科技风,导航"AI资讯"已提到第一位并默认高亮。

新做的第 8 屏"AI项目展示",大图卡片、图上文下,这是套件上岗后从零新做的一屏。

移动端修复前:移动样式全是死代码,页面横向溢出,右侧内容直接被裁掉。

移动端修复后:8 屏全部 scrollWidth = clientWidth,首页和详情页都收进了 400px 容器。

后续方向:后端和测试,照这个路子继续抄

产品设计岗这次抄作业抄通了,后面的路我已经定了。原话:现在产品设计岗这么抄了,后续后端开发、测试,也要这么抄。

执行口径不变:选大厂成熟套件,整盘复制,一字不改,拿真实任务验收。后端岗优先,测试岗跟上。这个方向的进展,我会按"数字员工养成记"系列继续公开复盘。

经验总结:这次能带走的三条

1. 微改单走快车道。单文件 + 精确定位 + 无新逻辑,三条全中就别派单,直改。流程的重量必须和活的重量匹配,394 秒删两个板块不是团队慢,是流程错了。
2. 抄作业要套件级复刻,不要散装摘抄。技能之间的协议、连接器、共享约定是成套的,拆开就失真;复制后一字不改,改造即失真。
3. AI 生成的页面,移动端必须实测 scrollWidth。预览器的"移动模式"只压容器,媒体查询未必触发;验收标准就一条:scrollWidth = clientWidth,一屏一屏过。

FAQ

Q:元素拾取器脚本怎么获取,怎么用? 单文件无依赖,整段粘进浏览器 DevTools 控制台,或用 playwright 注入页面即可,悬停高亮、双击拾取、面板复制 JSON。思路已经全在文里,照着重写一份也就一顿饭功夫;我这份后续会随团队工具链公开,关注蹲更新。

Q:千问办公的套件从哪复制? 它装好插件后就在本机插件目录里,找到 product-design 套件整目录拷走即可。版本号抄的时候记一笔,方便以后对照升级。

Q:媒体查询不触发这个问题,真机上也存在吗? 不存在。真机视口就是设备宽度,媒体查询正常触发,这个坑专属于"桌面浏览器里模拟移动端"的预览场景。但网格 1fr 撑破容器和图片缺 max-width 这两个,是真机也会炸的,建议直接照抄修法。

Q:重组后的团队章程公开吗? 章程主线会随系列文章逐步公开,之前已经公开过规则文件的写法纪律,这次的微改单快车道条款原文就在上文引用块里,可直接抄。

素材点

• "394 秒删两个板块":流程重量必须匹配活的重量,微改单快车道规则的诞生现场;
• 单击变双击:一个事件绑定的改动,让自研工具对齐大厂圈选体验;
• "媒体查询只认浏览器视口":AI 生成页面移动端死代码的根因,可做成独立短视频;
• minmax(0,1fr):CSS Grid 经典坑在 AI 生成稿里的真实复现与修复;
• "改造即失真":套件级抄作业方法论的一句话版本。

分发配套

标题 Top5(方法 / 评分):

1. 数字员工团队重组首测:拿千问办公的页面开刀,10 分我只打 8.5(实体锚定+数字反差,92,【综合首选】)
2. 一个 219 行注入脚本,让我的 AI 团队有了大厂同款"圈选改网页"(机制+任务结果,88,【搜索首选】)
3. 从 394 秒删两个板块到秒级完成:我把 AI 团队砍到 3 个岗后的首测(数字反差,86,【传播首选】)
4. 复刻千问办公 28 个技能装进产品设计岗:首单翻车,第二单秒过(亲测+反差转折,84,【稳健首选】)
5. "什么狗屁效率":我的 AI 团队重组后第一单,被我当场骂醒(对话剧本+冲突,82,【实验首选】)

摘要(90 字):数字员工团队从六岗砍到三岗,产品设计岗整套复刻千问办公 28 个技能。首测拿千问办公生成的 HTML 页面开刀:圈选改元素、394 秒翻车逼出快车道规则、新做一屏、修出移动端死代码。10 分打 8.5,全程实录。

分类与话题标签:人工智能 / 前端开发;#数字员工 #AI编程 #千问办公 #前端 #团队重组

封面文案:数字员工团队重组首测:拿千问办公的页面开刀,10 分我只打 8.5

我是野生码农,AI 实战派。自研知识库、数字员工、软考备考、量化交易四个系统,全程公开复盘。

本文所有内容均为本人 AI 实战的过程和结果,经 AI 整理后发布,无任何瞎编虚构内容。

这篇来自《数字员工养成记》系列。下一篇继续这个系列:后端岗和测试岗的套件复刻,选型、装配、验收全程记录。周日固定槽《我和AI"军师"的故事》照常更新。

关注我,看真的。

野生码农AI实战 · 全网同名