这是《产品经理的 Claude Code 技能包实战》系列的第 13 篇番外补充。 第三篇讲了 mobile-prototype 怎么做移动端演示原型。但 PM 做的原型不只有手机端——管理后台、数据列表、运营配置页这些桌面端 Web 后台同样是高频需求。这一篇讲它的「姊妹篇」web-admin-prototype以及一个关键认知桌面后台原型不能直接照搬移动端那一套。一、痛点后台原型和移动端原型是两种生物第三篇的 mobile-prototype 用着很顺于是我直接拿它去做后台原型立刻不对劲手机框装不下后台——后台是一整块宽屏1440px硬塞进手机框里表格、筛选栏全挤变形后台的主角是「数据」不是「流程」——移动端重流程串联后台重数据列表、筛选、详情弹窗叙事逻辑完全不同不是所有后台都要方案总览——一个简单的两页配置页也配一个 plan.html纯属过度设计所以后台原型需要单独一套规范而不是 mobile 的「放大版」。这就是web-admin-prototype存在的理由。二、它和 mobile-prototype 的关系同骨架不同血肉两个技能包是「姊妹篇」——底层骨架共享上层规范各自适配。完全复用的部分这是设计的聪明之处 - 左预览 右介绍区的pi-layout结构 - 右侧介绍区的5-section使用角色/本页定位/怎么用/示例/场景呼应——一字不改直接共享prototype-intro.css- 目录结构、scaffold.js 脚手架、共享 store.js、CSS 变量 token为桌面端专门改的部分- 左栏从「手机框」换成「桌面预览容器」1440px 基准无边框支持缩放适配屏幕 - 设计 token 换成--wa-*前缀--wa-primary、--wa-text-title等和移动端的--pi-*区分开「骨架共享、血肉分开」这个设计很值得说——介绍区怎么讲方案是通用的所以复用但界面形态是按端的所以分开。改一处介绍区样式两端同时生效改桌面布局不影响移动端。三、最核心的取舍plan.html 按需生成这是web-admin-prototype和移动端最大的不同也是我最喜欢的一个设计判断。mobile-prototype 里 plan.html 是必须的——因为移动端重流程方案总览是叙事的核心。但后台原型里它变成了按需页面数 ≥ 3 且有跳转关系 → 生成 plan.html 页面数 3简单配置页 → 不生成入口页右下角放个「 方案名」角标即可而且就算生成后台版 plan.html 也是精简版——砍掉了移动端那些重叙事的模块客户类型 Tab、方案核心 4 张卡、P0/P2 优先级换成后台更关心的① 架构概览路由方式/状态共享/拆分说明 ② 页面流程Mermaid节点可点弹详情 ③ 页面清单grid 卡片 ④ 功能矩阵功能 × 页面标 ✓ / — / 待实现 ⑤ 架构约束 ⑥ 已知限制 ⑦ 待确认问题注意 ④ 的「功能矩阵」——这是后台原型的灵魂。后台的本质是「一堆功能分布在一堆页面上」一张「功能 × 页面」的对照表比任何流程图都更能让开发一眼看清全貌。这是移动端没有、后台特有的。这个取舍的道理很朴素规范的目的是帮人不是为难人。简单原型配完整 plan.html是把「演示的严谨」强加给「不需要演示的场景」反而成了负担。四、后台原型的另一个主角详情弹窗后台页面里大量交互是「点列表行 → 弹详情弹窗」。所以这个技能包专门内置了一套详情弹窗结构detail-modal头部图标标题副标、一句话概括、用途卡片、如何使用步骤、示例列表。这套结构统一了所有「点进去看详情」的弹窗样式避免每个弹窗各长各的样。对后台这种弹窗密集的场景这个统一性很救命。五、实战一句话生成一套后台原型node ~/.claude/skills/web-admin-prototype/scaffold.js \ --name tenant-storage-management-v1 \ --title 租户空间存储管理 \ --pages index:入口页, list:数据列表, detail:详情弹窗 \ --roles 运营管理员·张伟3 个页面正好触发「≥3 页生成 plan.html」的规则于是一套带方案总览 功能矩阵 详情弹窗的后台原型骨架就出来了。再往.desktop-preview里填真实内容、按 5-section 写介绍区就能直接演示。六、什么时候用哪个一张决策表两个原型技能包配上之前的现在有了一套完整的「按端选工具」逻辑你要做的用哪个移动端多页演示原型mobile-prototype第三篇桌面后台/数据列表/运营配置web-admin-prototype本篇单文件、一次性的小原型直接写不用技能包只讨论设计规范不动手design-system第七篇技能包之间的「不触发」边界mobile 不做桌面、桌面不做单页、单页不用框架划得很清楚——好的技能包知道自己不该做什么。七、写在最后web-admin-prototype给我最大的启发不是「怎么画后台」而是「规范要按场景裁剪不能一套打天下」。移动端那套「必须 plan.html 重流程叙事」的规范在移动端是对的搬到后台就成了过度设计。真正成熟的标志是知道什么时候该坚持规范、什么时候该砍掉规范。plan.html 的「按需生成」就是这种克制的体现。至此「原型三件套」齐了移动端三、标注四、桌面后台本篇。配合部署五一个 PM 做原型的所有场景基本覆盖。这个系列到这里工作上最常用的技能包就聊得差不多了。系列目录一用技能包写 PRD为什么小而精胜过大而全 —— prd-writer二把 PRD 一键变成禅道任务 —— pm-zentao-task三移动端原型左预览右介绍的演示套装 —— mobile-prototype四给原型自动加标注开发不再问交互 —— annotation-generator五原型一键部署上线 —— deploy-prototypes六UI 设计67 风格 161 配色实测 —— ui-ux-pro-max七搭设计系统三层 Token 实战 —— design-system八幻灯片与 Banner —— slides / banner-design九给 AI 装上眼睛和手 —— agent-reach / kimi-webbridge十把真人思维做成 AI 顾问 —— zhangxuefeng-skill十一让 AI 自己写测试、自己调试 —— superpowers十二·终篇我沉淀技能包的方法论skill 是资产不是代码十三·番外桌面后台原型mobile 那一套不能照搬 —— web-admin-prototype本篇如果这篇对你有用欢迎关注看「技能包实战」系列更新你做桌面后台原型时踩过什么坑评论聊聊觉得有用就收藏备用。