MpDesign

MpDesign

让你的 微信公众号推文
支持 左右滑动图册自动轮播点击翻页点击展开翻牌更多 SVG 组件

排好之后

一个 HTML,两条路出去

排完就是一篇文章页面。想自己发就复制,想省事交给 PubKit。

MpDesign 排好的文章

一个单文件 HTML,交互效果都在里面。打开就能看,也能直接发。

复制 自己贴进公众号编辑器
PubKit 一键发送 直接写进编辑器,图片自动传

效果

十五种,全是真渲染

每一个都是排版引擎当场渲染的 SVG 录成的 GIF——和最终注入公众号正文的 是同一份产物,动效是组件自己跑出来的,没有剪辑。

图册与滑动

图片怎么排、怎么翻:用手拖的、自己动的、点着切的都有。

左右滑动图册:手指拖着翻页,越界自动吸附停稳
左右滑动图册手指拖着翻页,越界自动吸附停稳
自动播放图册:自己翻页,指示点跟着当前这张走
自动播放图册自己翻页,指示点跟着当前这张走
无缝循环轮播:翻到最后一张接回第一张,中间不断档
无缝循环轮播翻到最后一张接回第一张,中间不断档
点指示点切帧:点下面的圆点,直接跳到指定那一张
点指示点切帧点下面的圆点,直接跳到指定那一张

展开与揭晓

折叠的内容点一下长出来,把下面的正文完整推下去。

点击展开:原本折叠着的内容长出来,把正文完整推下去
点击展开原本折叠着的内容长出来,把正文完整推下去
展开套展开:外层展开后,里面还能再点开一层
展开套展开外层展开后,里面还能再点开一层
逐层揭晓:几层叠放着,点一次揭一层
逐层揭晓几层叠放着,点一次揭一层
逐条擦除:盖上几条不透明带,点一条擦一条
逐条擦除盖上几条不透明带,点一条擦一条
渐隐揭晓:正面淡掉,答案透出来。问答卡、前后对比都能用
渐隐揭晓正面淡掉,答案透出来。问答卡、前后对比都能用

切换与弹出

一块地方换着内容看,或者点一下弹出整张海报。

点击切换内容:文字、图片、HTML 都能当切换项
点击切换内容文字、图片、HTML 都能当切换项
弹出海报:点封面弹出大海报,再点一下收回去
弹出海报点封面弹出大海报,再点一下收回去

自动动效

不用任何人操作,加载后自己就开始演,循环重播。

序列帧动画:GIF 的替代:微信压 GIF,但不压序列帧
序列帧动画GIF 的替代:微信压 GIF,但不压序列帧
自动视差:几层图不同速度平移,纵深自己出来
自动视差几层图不同速度平移,纵深自己出来
入场动效:旋转、滑出、淡入、放大,循环重播
入场动效旋转、滑出、淡入、放大,循环重播
图片弹幕:文字气泡从右往左飘过,盖在图上
图片弹幕文字气泡从右往左飘过,盖在图上

边界

公众号不让做的,不做

微信有自己的规矩。MpDesign 只排在规矩之内的效果, 放不行的东西一开始就不做。

  • 不引外部脚本,动画全靠 SVG 自身完成
  • 不用会被微信剥掉的标签
  • 图片走公众号自己的素材库
  • 排版层和发表前检查分开,问题分「必须改」和「建议改」两级

安装与调用

它是一个 Skill

一行命令装进你的 Agent,然后直接发一句话。 不用记命令,不用填参数,也不用打开任何软件。

你说「把这篇文章排成能拖动的图册」,Agent 自己会读这份能力包, 把该传的参数传对,产出能直接导入公众号编辑器的页面。

安装 用 npx 命令安装
你 把这篇文章排成公众号图文,图册要能左右拖
Agent 读入 mp-wechat-layout,生成 out/article.html
然后 打开链接,点「导入微信公众号」
装一次就能一直用。命令和参数不用你记,Agent 会照着 SKILL.md 做。

适合谁

写给想让文章动起来的人

如果你看过别人的公众号文章能拖能点,自己又不想去学 SVG 和微信的白名单, 这东西是为你做的。

公众号运营者
想让文章有点交互,但编辑器里没有这个能力,也不想为一篇推送去折腾半天。
内容团队
有设计想法,知道想要什么效果,但落地时要一遍遍跟技术确认微信收不收。
不会写代码的人
SVG 交互不用写一行代码。给一句描述,出来的就是能直接发的那份。
踩过坑的人
试过自己塞动画,被微信打回来过。这边只排在规矩之内的,不赌平台放不放行。

另一个项目

PubKit

排好的文章要发出去,交给 PubKit。它管的是「送到哪个平台」—— 小红书那边有它自己的排版 Skill,不在 MpDesign 的范围里。

看看 PubKit

常见问题

先问清楚,再加微信

要写代码吗?
不用。给一句描述,出来的就是能直接发的那份。 SVG 那层是引擎生成的,你看到的和发出去的是同一份产物。
读者需要装插件吗?
不用。动画由 SVG 自身完成,不引外部脚本, 读者在手机上看到的就是最终样子。
微信不会拦吗?
只排在微信规矩之内的:不引外部脚本、不用会被剥掉的标签、 图片走公众号自己的素材库。放不行的东西,一开始就不做。
小红书那篇也能这么排吗?
不能。公众号正文接受 SVG,小红书不接受。而且小红书的图文结构另有一套, 排版规则是另一个 Skill 的事,不在 MpDesign 范围里。 小红书那边由 PubKit 负责发出去。
效果能改参数吗?
能。时长、缓动、配色都能调。导出的文件里带着全部参数, 你的 Agent 可以直接读、可以直接改。
展开的时候会「跳」一下吗?
不会。展开时 SVG 的缩放比恒定,内容长高,不会突然放大。
说要 Skill,具体怎么用?
用 npx 命令装进 Agent(一行就好), 然后直接发一句话,比如「把这篇文章排成能左右拖的图册」。 Agent 会自己读这份能力包、把参数传对, 产出一个能直接导入公众号编辑器的页面。
现在就能用吗?
买一张早鸟票就能用。付款后马上收到一个专属码,加创始人微信把码发过去, 他确认后拉你进早鸟群。正式发布前都能提前开始测试。

早鸟票

现在买,最便宜

¥39.9 正式发布 ¥49.9 / 月

  • 和创始人面对面对话
  • 进早鸟用户群
  • 提早开始测试
  • 正式发布后 3 个月使用额度

手机号和邮箱只用来发专属码和联系你,不发别的,也可以随时让我删掉。