主题母题画廊 · html-to-png-image-cards

FIGURE LIBRARY · 母题

主题母题画廊

每条母题都是内容赛道的「隐形暗线」——复制下面整块到卡片即可用。

国货祥云纹

适用：guochao / 国货 / 新中式 / 节气。做四角轻装饰，呼应「传统但当代」。

<div class="mz-motif" style="position:absolute;top:40px;right:40px;width:220px;opacity:.9">
  <svg viewBox="0 0 960 200" ...>…祥云 path…</svg>
</div>

科技点阵网格

适用：dark-editor / AI 科技 / 数据分析。做背景水印（opacity 低）或角落，暗示「结构化/系统」。

<div class="mz-motif" style="position:absolute;inset:0;opacity:.08">
  <svg viewBox="0 0 960 200"><rect width="960" height="200" fill="url(#dots)"/>…</svg>
</div>

金融账本格

适用：数据 / 理财 / 榜单。做分隔线或卡片底纹，呼应「记账 / 表格 / 对账」。

<div class="mz-motif" style="width:100%;opacity:.6">
  <svg viewBox="0 0 960 200">…账本格 line…</svg>
</div>

节气叶脉 / 风纹

适用：生活方式 / 节气 / 治愈系。做柔边角饰，呼应「自然节律」。

<div class="mz-motif" style="position:absolute;bottom:48px;left:48px;width:300px;opacity:.85">
  <svg viewBox="0 0 960 200">…叶脉 path…</svg>
</div>

文艺双线分隔

适用：editorial / literary / 金句。替代普通 .rule，做更有「编辑感」的分隔。

<div class="mz-motif" style="width:100%">
  <svg viewBox="0 0 960 80">…双线 line…</svg>
</div>

系列贯穿线（怎么用母题）

一套系列（封面/内容×N/结语）必须共用同一条母题 + 同一个强调色——读者不看文字也认得出「这是一家」。封面用「背景水印」浓度最高，内容版降到「角落装饰」，结语回到水印收束。详见 SKILL.md「系列视觉贯穿线」。