温暖手绘风公众号文章

概述

本技能用于创作手绘风格的微信公众号文章，主打治愈生活感。视觉语言以「浅蓝背景 + 蓝/黄主色 + 手绘风插图」为核心（默认风格），区别于 wechat-article 的科技专业风。

默认风格（蓝黄浅蓝版）：
- 画布底色：浅蓝 #EFF6FC
- 主色：蓝 #0052D9 + 黄 #F4C430
- 插图：手绘风（ImageGen 生成 → PIL 像素级校准到浅蓝底 + 蓝/黄调色板）

可选暖色变体：
- 画布底色：暖米黄 #FBF3E5
- 主色：橙 #F57C1C
（用户说「暖色版 / 米黄版 / 橙色版」时启用，配色见 references/style-guide.md 底部「暖色变体」一节）

适用场景：
- 品牌种草（产品功能/活动推荐）
- 城市探索（本地特色/隐藏地点）
- 生活技巧（早安/晚间/周末/通勤）
- 情绪分享（心情/日常感悟）
- App 功能安利（地图/工具/小应用）

不适配场景：
- 严肃科技深度文（→ 用 wechat-article）
- 教程类长文（→ 用 wechat-article）
- 财经/数据类（→ 视觉语言冲突）

设计规范

色彩体系（默认蓝黄浅蓝版）

> 核心原则：浅蓝底铺满，文字深灰黑，蓝/黄只在最关键的词上做高亮。蓝为主强调、黄为轻点缀，两者搭配，整体清爽明亮。

字体规范

• 中文：'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
• 数字/英文：'SF Pro Display', -apple-system, 'Helvetica Neue', sans-serif
• 整体观感：圆润无衬线，避免尖锐感。避免使用 serif 字体（破坏手绘感）

字号体系

> 核心原则：字号不大、行高偏大、字重不重。营造"不费力的阅读感"。

排版特点

1. 居中布局为主，左对齐少用（除非有具体时间线/步骤）
2. 大量留白：段落间 40-60px，章节间 60-80px
3. 短句：每段 1-3 句话
4. 章节少：一篇文章 3-5 个章节，节奏要轻
5. 行高：2.0-2.4（比科技风更大）
6. 段首不缩进，用空行分隔

高亮手法（核心）

蓝色 marker 笔触（最常用，主强调）：

<span style="background: linear-gradient(180deg, transparent 60%, #0052D9 60%); padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;">关键词</span>

黄色 marker（次强调，轻点缀）：

<span style="background: linear-gradient(180deg, transparent 60%, #F4C430 60%); padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;">关键词</span>

蓝色描边边框（用于短句强调 / 品牌名）：

<span style="border-bottom: 2px solid #0052D9; padding-bottom: 1px;">关键词</span>

实心蓝块（CTA，每篇最多 1-2 次）：

<span style="background: #0052D9; color: #FFFFFF; padding: 2px 6px; border-radius: 3px; font-weight: 500;">立即打开</span>

实心黄块：

<span style="background: #F4C430; color: #2A2A2A; padding: 2px 6px; border-radius: 3px; font-weight: 500;">关键词</span>

决策树：

强调程度？
├── 强 → 实心蓝块（每篇最多 1-2 次）
├── 中 → 蓝色 marker（每篇 3-5 次）
└── 弱 → 蓝色下划线 / 黄色 marker（每篇 3-5 次）

装饰元素

常用装饰符号（Unicode，直接嵌入文字），颜色用 #0052D9 或 #1A1A1A：
- ◆ ◇ 菱形（结尾点睛）
- ✦ ✧ 星星
- → 箭头
- ✓ ✗ 勾叉
- ♥ 爱心
- ◦ ○ 圆点

手绘分隔线（用 SVG，黑色细线）：

<svg width="40" height="10" viewBox="0 0 40 10">
  <path d="M 0 5 Q 10 0 20 5 T 40 5" stroke="#1A1A1A" stroke-width="1.5" fill="none" stroke-linecap="round"/>
</svg>

插画容器（包住手绘插画）：

<section style="text-align: center; margin: 32px 0;">
  <img src="手绘插画.png" style="width: 70%; max-width: 260px; border-radius: 8px;" alt="手绘简笔插画"/>
</section>

工作流程

收到公众号文章创作请求后，按以下步骤执行。用户已提供选题/原文则跳过对应 Step。

Step 1：选题与风格确认

确认以下信息：
1. 主题方向：生活技巧 / 城市探索 / 情绪分享 / 品牌种草 / App 安利
2. 风格变体：默认蓝黄浅蓝版；用户说「暖色版」则启用米黄橙变体
3. 插图方式：默认每篇生成 2-3 张手绘真插图（ImageGen，5-10 积分/张）；用户说「不插图 / 用线稿」则改用内联 SVG
4. 输入类型：用户提供现成文字稿 → 走「仅排版」流程；用户只给主题 → 走完整撰写流程

如用户未明确，提供 2-3 个选题建议 + 风格定位。

Step 2：标题优化

加载 references/style-guide.md 中的标题模式，生成 5-8 个标题方案。

温暖风标题模式（蓝黄浅蓝版沿用）：
- 口语化短句：「晚上八点，去跑步」「想家的时候，就这样」8-15字
- 时间+动作：「凌晨两点，去便利店」「周日早上，泡杯茶」8-12字
- 场景+情绪：「有猫的冬天，不太冷」「下雨天，适合发呆」6-12字
- 反问/共鸣：「你也喜欢一个人散步吗？」「今天，你有没有好好吃饭？」

避免：夸张惊叹号、震惊体、悬疑钩子、标题党。

Step 3：内容结构

加载 references/scene-templates.md 选择最匹配的场景模板，输出大纲。

通用结构：

[开场情绪钩子] ← 一句话定调，温暖/治愈/共鸣
[第一章 · 场景引入] ← 手绘插画 + 1段短描述
[第二章 · 核心信息 1] ← 配图 + 短文 + 蓝/黄高亮关键词
[第三章 · 核心信息 2] ← 同上
[第四章 · 情感收束] ← 留白 + 短句 + 装饰符号
[结尾] ← 一句话 + nice~/就这样~ + 装饰

总字数控制在 600-1200 字（比科技风短 50%）。

Step 4：内容撰写

加载 references/style-guide.md 的语调规范，撰写正文（或基于用户原文重排）：

1. 语调：温暖、平等、不说教。像在跟一个朋友聊天。
2. 句式：多短句，多停顿。长句拆短。
3. 视角：第二人称「你」为主，偶尔用「我们」「我」。
4. 避免：高大上形容词、夸张副词、总结性大词（赋能/打造/重塑/深度）。
5. 细节：用具象的物件、动作、数字代替抽象描述。
6. 结尾：口语化收束（nice~ / 就这样~ / 晚安~ / 周末愉快~）

示例语调：

✅ "晚上八点，出门跑步"
✅ "有氧，还是晚上比较合适"
✅ "高德有杭州的特色夜跑路线"
❌ "深度赋能城市夜跑生态"
❌ "打造沉浸式夜间运动体验"

若用户已提供原文：通读后保留核心信息，按上述语调与结构重排，不强行改写事实。

Step 5：插画生成（手绘风 + 调色板校准）

加载 references/illustration-guide.md，根据内容需要生成 2-3 张手绘风插画：

1. 使用 ImageGen 工具（消耗 5-10 积分/张，生成前必须告知用户并确认数量）
2. Prompt 模板（详见 illustration-guide.md）：
   hand-drawn simple line art illustration, minimalist, very pale light blue background (#EFF6FC), main subject colored in blue (#0052D9) and yellow (#F4C430), [具体主体描述: 人物/物件/场景], black thin outlines, kawaii style, flat design, no shading, no 3D, no gradient, no text, no letters
3. 生成后必须做像素级调色板校准（关键步骤，否则 ImageGen 输出颜色不精确）：
   - 浅色/白色部位（含背景）→ 精确 #EFF6FC
   - 蓝色部位 → 精确 #0052D9
   - 黄色部位、黑色描边 → 保留
   - 用 PIL 脚本处理（参考工作区 recolor_palette.py）：按 B-G>25 阈值区分「浅青色部位」与「真正的蓝色部位」，避免脸/鞋的浅青被误染深；背景用「到目标色的颜色距离 ≤28」做替换
4. 校验：确认角像素精确等于目标色值，再嵌入文章

Step 5.5：头图（主题 Hero 图）

文章顶部建议配一张手绘风头图（横版 1536×1024，约 10 积分）：

1. 用与正文插图完全一致的手绘线稿前缀（hand-drawn simple line art + 浅蓝底 #EFF6FC + 蓝 #0052D9 / 黄 #F4C430 + 黑细线），否则和正文插图"不是一个风格"。
2. 生成后同样走 PIL 调色板校准（四角校验 = #EFF6FC），保持整篇底色统一。
3. base64 内嵌进 <img class="cover-img">，居中。

Step 6：排版格式化

加载 references/components.md，产出两种形态：

• 预览页（本地预览用）：手机框 + <style> 类样式 + 悬浮「复制全文」按钮。类样式便于维护与预览。
• 复制到公众号的版本：由复制按钮的 JS 脚本把所有 class 样式内联为 style 属性，以纯 inline HTML 写入剪贴板。公众号后台粘贴后格式才不丢。

注意：粘贴进公众号的必须是纯内联样式 HTML，公众号会剥离 <style>/<class>/伪元素。 因此交付时只让用户用「复制全文」按钮（不要用浏览器另存/框选复制）。

排版要点：

1. 根容器：所有内容包裹在 <section>，统一浅蓝背景 background-color:#EFF6FC
2. 章节标记：用居中短句 + 装饰符号，不用大序号；左侧竖线用 <span class="st-bar">（border-left）实现，绝不用 ▎ 这类 Unicode 块字符
3. 组件选择：蓝/黄 marker 高亮 / 蓝色边框 / 装饰符号 / 手绘插画 / 手绘分隔线
4. 图片处理：<img> 标签，base64 内嵌（禁止本地相对路径 / 外部 http，否则粘到公众号后图片丢失），居中

Step 7：输出交付

最终输出：
1. 标题方案（5-8 个 + 推荐）
2. 文章摘要（80 字以内）
3. 预览 HTML 页面：手机预览框 + 悬浮底部一键复制按钮
4. 插画源文件：校准后的图片本地路径

微信公众号兼容硬规则（必读，血泪经验）

公众号后台编辑器有严格的 HTML 白名单与过滤器，会主动剥离 / 改写一部分写法。以下规则违背了就会出现"复制过去底色没了、版式变了、装饰不显示"。务必遵守：

架构铁律：源模板可用 <style>+class（方便手机框预览与一键复制），但写入剪贴板的必须是纯 inline 样式 HTML。用户只能用「复制全文」按钮投稿，禁止框选复制。

装饰符号例外：◆ ◇ ✦ → ✓ ♥ ◦ 这类常见 Unicode 符号是真实文本节点，微信会保留，可放心用；只有 ▎ 这种"占位的块字符当图形/竖线用"才危险（基线错位）。

参考文档

使用示例

示例 1：用户提供现成文字稿，重排成蓝黄浅蓝版

> 用户：「我发你一篇写'周末去爬山'的文章，按现在的浅蓝风排版，配上手绘插画」

执行流程：
1. 阅读用户原文，确认核心信息
2. 套用「城市探索 + 生活技巧」混合场景模板
3. 重排为 600-1000 字温暖风正文（保留事实）
4. 生成 2-3 张手绘插画（爬山小人、山顶风景等，蓝黄浅蓝调色板 + PIL 校准）
5. 排版为浅蓝背景 #EFF6FC + 蓝/黄高亮
6. 输出预览 HTML

示例 2：仅排版

> 用户：「我写好了文章，帮我套用这个风格排版」

执行流程：
1. 跳过 Step 1-4 撰写部分
2. 阅读用户原文
3. 执行 Step 5（插画）+ Step 6（排版）
4. 输出预览 HTML

示例 3：暖色变体

> 用户：「用暖色版（米黄橙）做这篇」

执行流程：
1. 启用暖色变体配色（米黄 #FBF3E5 + 橙 #F57C1C）
2. 其余流程不变

注意事项

• 图片用 base64 内嵌：所有插图/头图生成并校准后转 data:image/png;base64 直接写进 <img src>，"复制全文"粘贴到公众号后台即可显示。若个别环境仍要求手动传图，保留校准后的 PNG 作为兜底素材。
• 不推荐使用 emoji 作为装饰主元素（破坏手绘感），优先用 SVG 或常见 Unicode 符号（◆✦→ 等真实文本节点可保留）。
• 不要超过 1200 字：长文与温暖风冲突，节奏会变重
• 章节不超过 5 个：留白是核心，不堆砌
• 每篇文章默认配 2-3 张手绘插画 + 1 张手绘头图（空文无灵魂）；若用户要求不插图则用内联 SVG 线稿
• 浅蓝底可保留：根容器 <section style="background-color:#EFF6FC"> 用 background-color（非 background 简写），复制粘贴公众号后仍是浅蓝底，不会变白。
• ImageGen 消耗积分：生成前必须告知用户数量与约 5-10 积分/张，征得同意
• ImageGen 自带「AI生成」水印：无法去除，发布到公众号前需手动裁剪
• 插画调色板校准：ImageGen 不保证精确色值，生成后必须用 PIL 脚本校准到 #EFF6FC / #0052D9，否则颜色会偏（头图与正文插图同样处理，保证统一）
• 正文内禁用 <div>：文本块用 <p>、容器用 <section>；否则粘贴后 <div> 的 inline 样式被整段丢弃
• 源模板可用 class，但粘贴版必须纯 inline：预览页用 <style>+class，复制按钮的 JS 把 class 样式内联成 style 属性再写入剪贴板。严禁让用户用浏览器框选复制（class 会全丢）

风格速查

• 当用户说「这个风格」「现在风格」「蓝黄版」「浅蓝版」「手绘插图」时，触发默认蓝黄浅蓝版。
• 当用户说「暖色版」「米黄版」「橙色版」时，触发暖色变体（米黄 + 橙）。
• 当用户说「科技风」「专业排版」「教程类」时，触发 wechat-article skill。