这是《产品经理的 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（本篇）
如果这篇对你有用，欢迎关注看「技能包实战」系列更新；你做桌面后台原型时踩过什么坑，评论聊聊；觉得有用就收藏备用。
