用AI做出好看的公众号排版模版，还免费！

6 月 16, 2025 发表于: AI绘画教程. 评论

Sponsor

写公众号排版设计总是感觉很难看。个人对审美还是有一点要求的，搜了一些攻略，大部分模板要Money；或者要排版一遍，再复制粘贴到公众号。我又懒又嫌麻烦。了解了一下，公众号其实还是写 html，我不是程序员，但我是产品经理呀，最会指导开发工作了(不是）。所以我这里让 AI 写了 8 个简约模板（附代码和应用教程），无偿分享给想写公众号的同学。

01、怎么使用？（有两种方法，这里只分享简单的一种）

1. 去搜索「壹伴」插件，安装

2. 安装后，你在写文章的时候，这里有一个「html」的标志

3. 把下面模板的代码插入进去，就会出现模板的样式

02、模板分享

以下分别是【一段代码】 + 【一个模板的图片示例】

<p style="position: relative;margin: 20px 0;padding: 40px 20px;background-color: #fff;border: 1px solid #eee;border-radius: 8px;">  <p style="position: absolute;top: 12px;left: 12px;display: flex;align-items: center;">    <span style="font-size: 1.8em;color: #ccc;line-height: 1;"><span leaf="">“</span></span>    <span style="display: inline-block;width: 40px;height: 1px;background-color: #ccc;margin-left: 8px;"></span>  </p>  <p style="margin: 0;color: #555;font-size: 16px;line-height: 1.6;text-align: center;" mpa-font-style="mbaa9jjc17q3" data-mpa-action-id="mbaa9jkb1qc6" data-pm-slice="0 0 []">    <span leaf=""><span textstyle="" style="letter-spacing: 2px;">文章开头</span></span>  </p>  <p style="position: absolute;bottom: 12px;right: 12px;display: flex;align-items: center;">    <span style="display: inline-block;width: 40px;height: 1px;background-color: #ccc;margin-right: 8px;"></span>    <span style="font-size: 1.8em;color: #ccc;line-height: 1;"><span leaf="">”</span></span>  </p></p><p style="display: none;">  <mp-style-type data-value="3">  </mp-style-type></p>

<p style="margin: 20px 0;text-align: center;">  <h1 style="margin: 0;font-size: 16px;font-weight: bold;color: #222;" mpa-font-style="mba9s4ai4wz" data-mpa-action-id="mba9s4b88nq" data-pm-slice="0 0 []">    <span leaf=""><br></span>  </h1>  <h1 style="margin: 0;font-size: 16px;font-weight: bold;color: #222;" mpa-font-style="mba9s4ai4wz" data-mpa-action-id="mba9s4b88nq" data-pm-slice="0 0 []">    <span leaf=""><br></span>  </h1>  <h1 style="margin: 0;font-size: 16px;font-weight: bold;color: #222;" mpa-font-style="mba9s4ai4wz" data-mpa-action-id="mba9s4b88nq" data-pm-slice="0 0 []">    <span leaf="">这是标题</span>  </h1>  <p style="height: 2px;width: 60px;background-color: #222;margin: 8px auto 0;">    <span leaf=""><br></span>  </p></p>

<p style="text-align: center;margin: 20px 0;" data-mpa-action-id="mbacs9351ifq" data-pm-slice="0 0 []">  <span style="display: inline-block;position: relative;font-size: 16px;font-weight: bold;color: #333;padding: 0 0.3em;/* 横向内边距，控制高亮超出宽度 */               background-image: linear-gradient(#ffeb3b, #ffeb3b);background-repeat: no-repeat;background-position: bottom center;background-size: calc(100% + 1em) 50%;" data-mpa-action-id="mbacs924206e"><span leaf=""><span textstyle="" style="letter-spacing: 2px;font-weight: bold;">01</span></span></span>  <p style="margin: 8px 0 0;font-size: 1.25em;color: #333;font-weight: normal;">    <span leaf="" data-mpa-action-id="mbacs9244mx" style="font-size: 16px;"><span textstyle="" style="letter-spacing: 2px;font-weight: normal;">这还是标题</span></span>  </p></p>

<p style="margin:10px;">  <p style="display: inline-block;text-align: left;visibility: visible;font-size: 14px;" mpa-font-style="mba9yqb5yjn" data-mpa-action-id="mba9yqc21tp2" data-pm-slice="0 0 []">    <p style="padding:0.3em 0.5em;display:inline-block;background-color:#000000;border-radius: 4px;margin-left:1em;">      <span leaf=""><span textstyle="" style="color: rgb(255, 255, 255);font-weight: bold;">01</span></span>    </p>  </p>  <p style="margin-top: -1em;padding: 20px 10px;border: 1px solid #050624;border-radius: 8px;font-size: 16px;" mpa-font-style="mba9ykthq2i" data-mpa-action-id="mba9ykui1uqd" data-pm-slice="0 0 []">    <p style="visibility: visible;color: #050624;">      <span leaf=""><span textstyle="" style="letter-spacing: 2px;">这是引用</span></span>    </p>  </p></p>

<p style="margin: 20px 40px;padding: 10px 20px;border-left: 4px solid #222;background-color: #fafafa;font-size: 14px;" mpa-font-style="mba9rqy5rta" data-mpa-action-id="mba9rqyv1uty" data-pm-slice="0 0 []">  <p style="margin: 0;font-style: italic;color: #555;">    <span leaf=""><span textstyle="" style="letter-spacing: 2px;">“这是一个简约风格的引用示例，用于突出一段重要文字。”</span></span>  </p></p>

<p style="position: relative;margin: 20px;padding: 20px;border: 1px solid #ccc;border-radius: 8px;background: #fff;">  <span style="position: absolute;top: 0;left: 16px;transform: translateY(-50%);background: #fff;padding: 0 4px;font-size: 1.2em;color: #666;line-height: 1;"><span leaf="">✎</span></span>  <p style="margin: 0;color: #333;line-height: 1.6;font-size: 14px;" mpa-font-style="mbafjcj9egc" data-mpa-action-id="mbafjck3182x" data-pm-slice="0 0 []">    <span leaf=""><span textstyle="" style="letter-spacing: 2px;">这是一个故事举例</span></span>  </p></p>

<p style="position: relative;margin: 20px;padding: 20px;border: 1px solid #ccc;border-radius: 8px;background: #fff;">  <span style="position: absolute;top: 0;left: 16px;transform: translateY(-50%);background: #fff;padding: 0 4px;font-size: 12px;color: #666;line-height: 1;" mpa-font-style="mbag1m0vbtx" data-mpa-action-id="mbag1m1upxc" data-pm-slice="0 0 []"><span leaf="">✎举个例子</span></span>  <p style="margin: 0;color: #333;line-height: 1.6;font-size: 14px;" mpa-font-style="mbag0ia010h9" data-mpa-action-id="mbag0iay1dxw" data-pm-slice="0 0 []">    <span leaf=""><span textstyle="" style="letter-spacing: 2px;">内容</span></span>  </p></p>

<p style="width: 50%;margin: 40px auto;">  <p style="display: flex;align-items: center;justify-content: center;">    <span style="flex: 1;border-top: 1px dashed #ccc;height: 0;"></span>    <span style="margin: 0 0.5em;font-size: 10px;line-height: 1;color: #666;" mpa-font-style="mbae0dxg1tlj" data-mpa-action-id="mbae0dyk1bti" data-pm-slice="0 0 []"><span leaf="">ฅ՞••՞ฅ︎</span></span>    <span style="flex: 1;border-top: 1px dashed #ccc;height: 0;"></span>  </p></p>