作为一名一线做业务、画原型、写 PRD，同时日常高强度调度多个 Coding Agent（Cursor、Claude Code、Codex 等）独立开发工具的 AI 产品经理，我经手的大多数中后台业务，几乎从来都不是孤立的单一 PC 页面。

最典型的业务闭环往往横跨两个端：

• PC 端管理后台：管理员在宽屏表格里批量勾选待办任务、配置流转规则、设置风险拦截阈值；
• 移动端（小程序 / H5 / 企业移动端）：一线业务人员在手机端实时接收任务卡片推送、点开查看详情、现场拍照上传、点击快捷审批或驳回。

两个端在业务上紧密相连，但在过去画原型和产研交付时，我经常陷入一种极其撕裂的状态：

为了把流程讲清楚，我通常得在 Axure 或通用绘图工具里新建两个独立的项目文件，或者在同一个项目里画两套相隔十万八千里的巨大画板。
周会评审的时候，我左手开着 PC 端的浏览器窗口，右手开着手机模拟器窗口，跟研发讲业务：

“大家看，管理员在 PC 端这里点击确认分配之后……等一下，我切到手机窗口给大家看……对，就是这个小程序页面，员工会收到这条待办卡片……”

一场 40 分钟的评审会，光是在两个窗口之间切来切去、缩放画板、找对应页面，就耗掉了十几分钟。
更要命的是，到了研发分工联调时，前端同学经常一脸困惑：“产品哥，你 PC 端的规则里写着‘支持退回重填’，但手机端的详情页里根本没画退回按钮的入口啊！这两个端到底是按哪张图来联动的？”

我坐在工位上长叹了一口气：为什么在真实的业务场景中，跨端明明是同一套业务流转，但在原型工具里，PC 和移动端却非得被割裂成两座互不相通的孤岛？

一、跨端原型协同，为什么传统工具与泛 AI 全在踩坑？

复盘了我自己在过去几年的跨端原型设计中踩过的坑，我发现市面上的传统工具和很多新兴的 AI 生成工具，在处理“PC + 移动端联动”时，普遍存在三个严重的结构性缺陷：

1. 画布卡片类型单一，无法在同一视野下兼容横纵比例：
   在很多原型设计软件里，画布的卡片尺寸要么是死板的全局固定比例，要么需要用户手动给每个画板拉宽高。如果你把一个 1280×800 的 PC 页面和一个 375×812 的手机页面放在同一张画布上，手机长图往往被强制压缩拉伸，或者横竖混乱堆叠，连线穿插交错，整张画布瞬间乱成一团麻。
2. 缺乏原生“多平台体验（Experiences）”抽象，演示流程极其割裂：
   在原型体验层面，工具通常把所有页面塞在同一个无序的线性列表里。演示时，用户无法一键选择“今天我是作为 PC 管理员体验端到端流程”，还是“作为移动端员工体验单端流转”。一旦把两个端的页面串联在一起，操作者在体验时一会儿跳到宽屏、一会儿跳到窄屏，极易迷失操作上下文。
3. 泛 AI 工具全量盲目生成，完全丢失跨端交互上下文：
   如果让通用的生成式 AI 帮你做跨端设计，它的常规套路是：给它一段话，它随机给你生成一个黑乎乎的手机预览页；你想让它把 PC 后台的某个规则同步过来，它又会把整个手机页面推倒重来，原先对好的表单字段、组件命名全部飘走，根本谈不上跨端上下文的承接。

说到底，跨端原型最需要的不是“把界面画在两个独立文件里”，而是在同一个项目底座中，既能在宏观画布上清晰展现跨端连线流转，又能在完整体验时自由切换端侧视界。

想清楚这件事后，我在开源项目 元形（yuanxing）v0.4.5 中，完整跑通了一套面向跨端原型的编排与交付方案。

二、过去怎么做 vs 现在怎么做：割裂多文件 vs 同画布跨端联动

我把传统交付与元形的跨端协同机制做了一张对比表：

三、我是怎么在元形里实现跨端同画布编排的？

在元形的设计规范中，我们通过极为克制的底层数据解耦，在纯前端与轻量 CLI 层面实现了这套能力：

1. 节点类型与画布自适应：canvasType 机制：
   在元形的项目编排中，每个页面节点不仅保存原始宽高，还通过 canvasType 区分形态：canvasType: "pc" 呈现为 400×290px 横向卡片，适合展示中后台列表与抽屉；canvasType: "mobile" 自动适配为 240×560px 竖向卡片（按 375×812 真实手机比例等比自适应缩略），内容完整居中不裁切。两者在同一画布上自由混排、对齐吸附，连线清晰标明跨端流转因果链。
2. 原生 experiences 抽象：让跨端演示不再割裂：
   编排中声明平台级入口（如 PC 管理后台与移动员工端），顶栏自动呈现平台切换器。点击一秒切端，演示上下文在底层跨端传递，告别两个浏览器窗口手忙脚乱的翻找。
3. 极速增量开发与三方合并：
   调用内置合并命令 apply --base ... --model ...，Coding Agent 生成移动端新节点时，自动智能避让落位，原有 PC 节点的手工排版坐标 100% 保持不变。
4. 离线单文件导出：
   单命令行输出 dist/prototype.html，内嵌极简解压引擎与资源去重，几十个跨端交互页面封装在轻量 HTML 内。断网双击浏览器秒开，接收者可离线二次导出三视图。

四、动手试试：一行命令接入你的日常工具

元形（yuanxing）不仅是一个开箱即用的轻量原型工作台，也可以作为 Skill 直接安装进你现有的 AI 助手（Cursor、Claude Code、Codex、Antigravity 等）：

# 一键安装元形 Skill (v0.4.5)
npx skills add JasperLin2333/yuanxing --skill yuanxing

# 开源仓库：在 GitHub 搜索 JasperLin2333/yuanxing 即可获取源码与案例