hdPaiban/skills/hundun-wechat-layout/SKILL.md

name, description

name	description
hundun-wechat-layout	混沌学园风格微信公众号文章 HTML 排版技能。适用于将微信公众号原文章内容（文字+图片）提取后， 以混沌品牌视觉体系（混沌黄 #F5B700 + 石墨黑 #181818 + 原生白底）重新排版生成可直接粘贴到 微信公众号编辑器的纯内联 HTML 代码。支持 Hero 大图 + 瀑布流图墙、时间线卡片、模块卡片等组件。

混沌学园微信公众号 HTML 排版技能

一、适用场景

当用户要求以下操作时，应激活此技能：

• 将微信公众号文章重新排版为混沌学园品牌风格
• 抓取微信公众号文章并生成新的 HTML 排版
• 制作混沌风格的微信推文 HTML 片段
• 生成适用于微信公众号编辑器的纯内联样式 HTML

二、核心设计规范

2.1 色彩体系

角色	色值	用途
混沌黄 (Primary)	#F5B700	标题强调、侧边 Accent 条、标签徽章、CTA 按钮、边框点缀
深金 (Secondary)	#D99B00	正文中的关键词强调（<strong> 标签）
石墨黑 (Dark)	#181818	Hero 顶部看板背景、年份徽章、核心理念卡片、底部 CTA 按钮
辅助深色	#242424	深色卡片内部的子容器背景
原生白底	#FFFFFF	最外层容器，顺应微信公众号默认白底阅读环境
极浅灰	#F8F9FA	常规内容卡片背景（历史年份、报名须知等）
微黄底	#FFFDF5	模块卡片背景（亮剑/试锋/决衡等课程模块）
正文色	#2B2B2B	主正文颜色
辅助正文	#333333	非卡片区域的段落文字
二级正文	#4E5969	卡片内部说明文字
边框灰	#E5E6EB	浅色卡片边框
分割线	#D9D9D9	虚线分割（报名区域二维码上方）

2.2 排版约束（微信公众号铁律）

Caution

以下规则不可违反，否则将在微信公众号中渲染异常或被过滤。

1. 最大宽度：max-width: 667px（微信公众号最大内容宽度）
2. 移动端内边距：两侧至少 4px ~ 8px，防止内容贴边
3. 100% 内联样式：所有 CSS 必须写在 style="..." 属性内，严禁 <style> 标签、<link> 外链、class 选择器
4. 禁止标签：<script>、<link>、<style>、<iframe>、<form>、<input>
5. 允许标签：<section>、<p>、<span>、<strong>、<em>、<h1>~<h6>、<img>、<div>、<ul>/<ol>/<li>、<br>、<hr>
6. 图片防盗链：所有 <img> 标签必须加 referrerpolicy="no-referrer"
7. 字体栈：font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
8. 不使用 CSS Grid（兼容性不足），使用 display: flex 替代

2.3 图片排版方案：Hero 大图 + 瀑布流（推荐方案 B）

每组图片采用以下结构：

1. 首图 Hero Shot（100% 全宽大图）：

   • 从该组中选取最具视觉冲击力的第一张
   • 圆角 10px，轻灰边框 1px solid #E5E6EB，微阴影 box-shadow: 0 4px 12px rgba(0,0,0,0.08)

2. 瀑布流副图（Column-Based Masonry）：

   • 将剩余图片交替分配到左右两列独立容器（奇数索引 → 左列，偶数索引 → 右列）
   • 左右列各自 width: 48.5%，顶部对齐 align-items: flex-start
   • 列内图片垂直堆叠，仅用 margin-bottom: 8px 分隔
   • 关键：不使用 flex-wrap 行内双列（会导致空白），而使用两个独立列容器

<!-- Hero Shot -->
<section style="margin: 12px 0 10px 0;">
  <img src="..." referrerpolicy="no-referrer"
       style="width: 100%; height: auto; display: block; border-radius: 10px;
              border: 1px solid #E5E6EB; box-shadow: 0 4px 12px rgba(0,0,0,0.08);" />
</section>

<!-- Masonry Sub-grid -->
<section style="display: flex; justify-content: space-between; align-items: flex-start;
                width: 100%; box-sizing: border-box; margin-bottom: 10px;">
  <!-- 左列 -->
  <section style="width: 48.5%; box-sizing: border-box;">
    <img src="..." referrerpolicy="no-referrer"
         style="width: 100%; height: auto; display: block; border-radius: 6px;
                border: 1px solid #E5E6EB; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
                margin-bottom: 8px;" />
    <!-- 更多左列图片... -->
  </section>
  <!-- 右列 -->
  <section style="width: 48.5%; box-sizing: border-box;">
    <img src="..." referrerpolicy="no-referrer"
         style="width: 100%; height: auto; display: block; border-radius: 6px;
                border: 1px solid #E5E6EB; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
                margin-bottom: 8px;" />
    <!-- 更多右列图片... -->
  </section>
</section>

Warning

不要使用横向滚动模式（overflow-x: auto; display: flex;）来展示多张图片。 在微信公众号中横向滑动体验很差，用户更习惯纵向浏览。

三、页面结构模板

一个完整的混沌风格微信推文 HTML 由以下模块按顺序组成：

3.1 外层容器

<section style="max-width: 667px; margin: 0 auto; box-sizing: border-box;
               background-color: #FFFFFF; color: #2B2B2B;
               font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
               padding: 12px 4px;">
  <!-- 所有内容模块放在这里 -->
</section>

3.2 Hero 顶部看板（深色反转区域）

• 背景 #181818，顶部 4px 混沌黄边框线
• 包含：品牌标签（黄底黑字小标签）、标题（白字+黄色关键字）、副标题、Banner 大图

3.3 引言区块

• 浅灰背景 #F8F9FA，左侧 4px 混沌黄 Accent 条
• 排版为左侧高亮线 + 正文段落

3.4 核心理念卡片（深色反转）

• 石墨黑背景 #181818，内部小卡片 #242424
• 左侧 3px 混沌黄 Accent 线
• 适用于"既要…又要…"式的对仗金句

3.5 时间线年份卡片

• 浅灰背景 #F8F9FA，1px solid #E5E6EB 边框
• 年份徽章：黑底黄字 #181818 背景 + #F5B700 文字
• 标题 + 正文描述 + Hero 大图 + 瀑布流副图

3.6 招募要求卡片

• 浅灰背景，左侧 4px 石墨黑 Accent 线
• 带 emoji 图标的子标题 + 无序列表

3.7 课程模块卡片

• 微黄背景 #FFFDF5，1px solid #F5B700 混沌黄边框
• 日期标签用黄底黑字 background: #F5B700; color: #181818
• 适用于"亮剑/试锋/决衡"等模块名称

3.8 报名须知卡片

• 浅灰背景，信息列表格式
• 底部虚线分割线 + 居中报名二维码
• 二维码只出现一次，border: 2px solid #F5B700

3.9 底部 CTA 横幅

• 黄色渐变背景 linear-gradient(135deg, #F5B700 0%, #FFA000 100%)
• 深色胶囊按钮（客服微信号），不重复放二维码

四、微信图片抓取与处理工作流

4.1 抓取流程

1. 使用 Python urllib.request 抓取原文 HTML（read_url_content 会被微信 anti-bot 拦截）
2. 设置 User-Agent 为桌面微信：Mozilla/5.0 ... MicroMessenger/8.0
3. 将原始 HTML 保存到本地文件
4. 使用正则或 BeautifulSoup 提取 <img> 标签的 data-src 或 src 属性
5. 整理图片索引列表 [序号] URL

import urllib.request

url = "https://mp.weixin.qq.com/s/..."
req = urllib.request.Request(url, headers={
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '
                  'AppleWebKit/537.36 (KHTML, like Gecko) '
                  'Chrome/120.0.0.0 Safari/537.36 '
                  'MicroMessenger/8.0.0'
})
with urllib.request.urlopen(req) as resp:
    html_content = resp.read().decode('utf-8')

4.2 图片引用

• 微信 CDN 图片域名：mmbiz.qpic.cn
• 所有 <img> 标签必须加 referrerpolicy="no-referrer" 绕过 Referer 校验
• 原文图片 URL 可直接在新 HTML 中引用，无需下载到本地

4.3 图片分组建议

按文章内容段落/年份/主题将图片分组，每组：

• 控制在 3~7 张为宜
• 第一张选取最具代表性的作为 Hero Shot
• 每组不超过 6 张副图（max_sub=6）

五、常见错误与排查

现象	原因	解决方案
图片显示为裂图 ❌	缺少 referrerpolicy="no-referrer"	给所有 <img> 添加该属性
双列图片上下空白大	使用了 flex-wrap 行内双列	改为两个独立列容器
样式被微信过滤	使用了 <style> 标签或 class	全部改为内联 style="..."
排版溢出/横向滚动	图片未设 max-width: 100%	图片加 width: 100%; height: auto;
微信抓取返回验证页	直接 HTTP 请求被拦截	添加 MicroMessenger User-Agent
二维码重复出现	在报名区和底部 CTA 都放了	二维码只在报名须知区放一次

六、文件组织

skills/hundun-wechat-layout/
├── SKILL.md                    # 本文件：技能说明与规范
├── scripts/
│   ├── extract_wechat.py       # 微信公众号原文抓取脚本
│   └── build_hundun_html.py    # 混沌风格 HTML 生成脚本
├── examples/
│   └── hundun-lead-article.html # 示例输出（领教营二期招募文）
└── resources/
    └── color-palette.md        # 混沌色彩体系参考