太棒了，马上落地。下面给你一份“立即可用”的执行清单、Deep‑Research（深度拆分）工作流说明，以及成套 Prompt 模板（含“主题样式提取”和“表单渐进增强”都写进提示词的写法）。照着跑，就能把你的博客按“整站→页面→区域/组件”三级拆出来，并保持可还原。

一、你接下来要做的事（从今天就能开干）

1. 内容盘点与基线确认

• 用我刚才解析的 XML 列表确定：页面（首页/联系/资源）、分类（教学日志/学生作品）与媒体是否齐全。
• 以“首页”为样板，截图记录：字体/字号层级、色板、按钮/卡片圆角与阴影、间距系统（这会用于 tokens.css）。

1. 仓库初始化与目录就绪

• 建一个/blog-project仓库，创建以下空目录： /content /assets /templates /components /styles /scripts /dist
• 在/styles预建两个文件：tokens.css（CSS变量）和theme-override.css（差异修正）。

1. 第一级拆分（页面级）

• 生成这5个页面项目的模板文件：home.html, posts-list.html, works.html, contact.html, resources.html。
• 每个页面占位四个区块：标题区/横幅区/内容区/页脚区（仅语义化结构，先不加样式）。

1. 第二级拆分（区域级）

• 为首页落地四个区域片段：components/header.html, hero.html, content-cards.html, footer.html。
• 把区域在页面模板里用<!-- include -->或占位符插入（后续用简单构建脚本或复制粘贴）。

1. 第三级拆分（组件级）

• 以横幅区为例再拆：HeroImage, HeroSlogan, HeroCTA三组件，各自独立 CSS 选择器。

1. 样式抽取与像素对齐

• 把截图里的字体、字号阶梯、色值、间距、圆角写进styles/tokens.css（CSS变量）。
• 用styles/theme-override.css只做“与原站不同的地方”的补丁（对齐间距、字号、行高、阴影）。