为什么需要它
AI 让内容生产变快了，但也让站点风格变得难以统一。
😵 现在的做法
每个页面由 AI 独立生成，导航栏、侧边栏、页脚各写各的，风格、间距、配色全都不一样。想统一改一次，要动几十个文件。
✨ 换一种做法
AI 只负责写内容。发布前把同一份模板注入每个页面的 </body> 前，布局与风格由模板统一接管，内容样式互不干扰。
核心机制：Shadow DOM + Slot
页面只有内容，模板负责布局，浏览器原生隔离。
<!-- 每个页面：只有内容，没有 header / 侧边栏 / footer --> <body> <main class="content"> <h1>页面标题</h1> <article>页面正文…</article> </main> <!-- 注入的站点模板 --> <template shadowrootmode="open"> <h3>网站标题</h3> <nav>通用侧边栏导航</nav> <slot></slot> <!-- 内容投影到这里 --> <footer>© 网站版权</footer> </template> </body>
样式双向隔离
模板里的样式进不了页面内容，页面里的样式也进不了模板。你不用担心 AI 写的 CSS 把导航栏搞乱，也不用担心模板样式覆盖正文。
零工具链
不引入构建器、不引入运行时。只是在发布前把一段字符串塞进 HTML 文件，剩下的交给浏览器。
模板可复用、可换肤
一个板块准备一套模板就够。换一套模板文件，整站风格立即切换——这就是"一键换肤"。
它解决什么问题
对内容创作者、模板作者、集成者都友好。
创作自由
AI 不用再关心站点风格，专心把内容写好就行。页面里想怎么排版、怎么加样式都可以。
样式隔离
基于浏览器原生 Shadow DOM，模板与内容互不污染。不需要 BEM、CSS Module、命名空间这些约定。
零依赖
没有构建步骤，没有运行时 JS。静态托管在任何地方都能跑，加载即渲染。
模板生态
模板是纯文本文件，可以被分享、收集、交易。一个精良的模板，能直接服务成千上万个页面。
AI 友好
提示词里只需告诉 AI "写内容，不要写 header / 侧边栏 / footer"，剩下的事交给构建流程。
可逆可换
模板就是一段可替换的字符串。想换风格？替换掉那段即可。想回滚？删掉那段即可。
三步上手
不需要学新工具，用你现有的发布流程即可。
写内容
让 AI 生成页面，只保留 <main> 里的内容，去掉 header / 侧边栏 / footer。
准备模板
把站点的 header、导航、footer 写成一个 <template shadowrootmode="open"> 文件。
发布前注入
在你的发布流程里，把模板字符串插到每个 HTML 的 </body> 之前，完成。