AI 自动排版

任务目标

• 本 Skill 用于:根据主题快速生成结构化文章，或对已有内容进行智能排版整理，输出视觉精美的HTML文档并保存为文件
• 能力包含:主题内容生成+排版、原文智能排版、雨夜风格设计、响应式布局、视觉层次优化、HTML文件保存下载
• 触发条件:用户表达"排版"、"美化"、"帮我写一篇xxx"、"整理成文档"、"好看一点"、"保存文件"等

排版模式

模式一：AI生成内容排版

适用场景:用户有主题方向，需要AI生成完整内容并排版

操作流程:
1. 明确主题和需求（自动推断）
- 根据用户输入自动识别文章主题、目标读者、内容长度、风格偏好
- 示例：用户说"帮我写一篇AI发展趋势的文章" → 自动推断为科技类、1500字左右

2. 内容结构处理
   - 如果用户提供了完整文章内容 → 直接使用原文，不拆分、不改写
   - 如果需要生成新内容 → 根据主题设计大纲，包含：

   • 标题（简洁有力，含关键词）
   • 导语/摘要（1-2段）
   • 正文章节（3-5个核心观点）
   • 总结/结尾

3. 内容创作
   - 如果用户提供了完整内容 → 直接使用原文结构
   - 如果需要生成新内容 → 每个章节填充详细内容
   - 使用自然段落、列表、引用块等丰富内容
   - 适当添加数据、案例、名言支撑

4. 违规审核（自动执行）
   - 调用check_content.py脚本检测文案合规性
   - 脚本会自动检测：政治敏感、暴恐、色情低俗、违法广告、医疗违规等
   - 如果检测到问题，自动修改文案去除违规内容
   - 脚本调用示例:
   bash python scripts/check_content.py --data '{"title":"标题","subtitle":"副标题","intro":"导语","quotes":["引用"],"sections":[{"title":"章节","content":["段落"]}],"ending":"结尾"}'
   - 返回结果：passed=true表示通过，violations数组列出问题

5. 保存HTML文件（自动执行，无需询问）
   - 调用脚本保存文章为HTML文件
   - 生成JSON数据调用save_html.py脚本
   - 脚本调用示例:
   bash python scripts/save_html.py --data '{"title":"标题","subtitle":"副标题","intro":"导语内容","quotes":["引用1"],"sections":[{"title":"章节标题","content":["段落1","段落2"]}],"ending":"结尾内容"}' --output "./articles/雨夜旧信箱.html"
   - 自动执行，直接保存文件并发送给用户

6. 发送文件给用户
   - 直接发送文件给用户，无需额外说明

模式二：不改原文排版（保留原文）

适用场景:用户提供了已有文章，需要格式化整理

操作流程:
1. 原文分析
- 识别文章主题和核心观点
- 划分内容段落和逻辑层次
- 提取关键词和标题

2. 智能重组
   - 保留原文核心内容不变
   - 优化段落结构
   - 添加小标题划分章节
   - 整理列表和引用

3. 格式化输出
   - 输出HTML格式，保持原文语义
   - 添加适当的视觉层次

4. 违规审核（自动执行）
   - 调用check_content.py脚本检测文案合规性（与模式一相同）

5. 保存HTML文件（自动执行）
   - 调用脚本保存为HTML文件（与模式一相同）

6. 发送文件给用户（自动执行）
   - 直接发送文件给用户

重复内容处理

如果用户提交相同主题/内容的文章：
- 不要拒绝，不提示"内容重复"
- 换风格重新排版，生成不同版本
- 可选方案：
- 调整叙述方式和章节结构
- 改变引用卡片的位置和数量
- 调整排版元素的使用密度
- 更换强调重点或引用内容

排版风格：雨夜氛围风格（默认风格）

设计特点

• 配色方案:深灰(#2a2a2a) + 暖棕(#8B7355)，安静内敛，呼应雨夜氛围
• 引用卡片:圆角卡片 + 左侧竖线 + 淡色背景，突出信/引用内容，视觉焦点
• 分割线:简约星点设计(✦ ✧ 小菱形符号)，保持呼吸感
• 重点标注:关键句使用渐变底色(#f5e6d3 → #e8d4c0)强调
• 结尾卡片:深色渐变背景(#2a2a2a → #1a1a1a)，收尾有力量
• 响应式布局:移动端自动适配，字号/间距/卡片宽度自适应
• 视觉稳定:非极简设计，强调好看和层次感，元素丰富但不杂乱

字体规范

• 标题:思源黑体 Bold, 深灰色
• 正文:思源黑体 Regular, 浅灰文字
• 引用:斜体，暖棕色竖线
• 行距:1.8-2.0，舒适阅读

HTML代码生成规范（必须遵守）

生成HTML代码时必须确保语法正确，用户可直接复制使用：

1. 标签闭合正确
   - 所有标签必须正确闭合
   - 错误示例：<strong>文字。</strong> ← 句点在标签外是正确的
   - 错误示例：文字<strong>重点。</strong>后文 ← 标签内不能有句点后跟中文句号
   - 正确示例：<strong>重点内容</strong>后文

2. 标点符号位置
   - 句号、逗号等标点必须在HTML标签外部
   - <strong>加粗文字</strong>。 ← 句号在标签外 -<span class="highlight">标注</span>， ← 逗号在标签外

3. 嵌套层级正确
   - 内联标签嵌套：文字<strong>加粗</strong>后文
   - 不要写成：文<strong>字加粗。</strong>

4. br换行使用
   - 使用<br>换行，不用<br/>
   - 连续换行：第一行<br>第二行<br>第三行

5. 生成后自检
   - 检查所有标签对是否匹配
   - 检查标点是否在标签外
   - 确保代码可直接复制到编辑器使用

输出格式

输出方式：保存HTML文件发送给用户

排版完成后直接保存为HTML文件，用户可直接下载使用：

1. 保存文件
   - 调用 scripts/save_html.py 脚本生成HTML文件
   - 脚本接收JSON格式的文章数据，输出完整HTML文件
   - 将文件路径返回给用户下载

2. 文件使用方式
   - 下载HTML文件到本地
   - 双击在浏览器打开即可预览完整排版效果
   - 点击底部「一键复制全文」按钮，复制全部内容和格式
   - 粘贴到公众号后台、Word等富文本编辑器

3. 一键复制按钮
   - 文章底部有「一键复制全文」按钮
   - 点击后自动复制全部内容和排版格式
   - 复制成功后显示"复制成功"提示

4. 无需第三方编辑器
   - HTML文件自带完整样式，不依赖任何第三方工具
   - 自包含设计，复制粘贴即可使用

HTML模板结构（雨夜氛围风格）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章标题</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: "PingFang SC", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
      background: linear-gradient(180deg, #faf8f5 0%, #f5f0ea 100%);
      min-height: 100vh;
      color: #2a2a2a;
      line-height: 1.9;
    }
    .container { max-width: 720px; margin: 0 auto; padding: 50px 24px 80px; }

    /* 标题区 */
    .header { text-align: center; margin-bottom: 50px; }
    .title { font-size: 2.2em; font-weight: 700; color: #2a2a2a; margin-bottom: 16px; letter-spacing: 2px; }
    .subtitle { font-size: 1.1em; color: #8B7355; font-weight: 300; }

    /* 分隔线 - 星点设计 */
    .divider { text-align: center; margin: 40px 0; color: #c4a882; font-size: 14px; letter-spacing: 8px; }
    .divider::before, .divider::after { content: '✦'; }
    .divider-center { content: '✧'; }

    /* 导语区 */
    .intro { background: #fff; border-radius: 16px; padding: 32px; margin-bottom: 40px; box-shadow: 0 2px 20px rgba(0,0,0,0.04); }
    .intro p { color: #555; font-size: 1.05em; }

    /* 引用卡片 - 视觉焦点 */
    .quote-card {
      background: linear-gradient(135deg, #fdfcfb 0%, #f8f5f0 100%);
      border-left: 4px solid #8B7355;
      border-radius: 0 16px 16px 0;
      padding: 28px 32px;
      margin: 32px 0;
      position: relative;
    }
    .quote-card::before {
      content: '"';
      position: absolute;
      top: -10px;
      left: 20px;
      font-size: 60px;
      color: #d4c4b0;
      font-family: Georgia, serif;
      line-height: 1;
    }
    .quote-card p { color: #3a3a3a; font-size: 1.1em; font-style: italic; padding-left: 20px; }

    /* 章节标题 */
    .section-title { font-size: 1.5em; color: #2a2a2a; margin: 50px 0 24px; padding-left: 16px; border-left: 4px solid #8B7355; }

    /* 正文段落 */
    .content p { color: #4a4a4a; margin-bottom: 20px; font-size: 1.02em; text-align: justify; }

    /* 重点标注 - 渐变底色 */
    .highlight {
      background: linear-gradient(180deg, rgba(245,230,211,0.6) 0%, rgba(232,212,192,0.4) 100%);
      padding: 3px 8px;
      border-radius: 4px;
      color: #5a4a3a;
    }

    /* 列表 */
    .content ul, .content ol { padding-left: 28px; margin: 20px 0; }
    .content li { color: #4a4a4a; margin-bottom: 12px; }

    /* 结尾卡片 - 深色渐变 */
    .ending-card {
      background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
      border-radius: 20px;
      padding: 40px 36px;
      margin-top: 60px;
      text-align: center;
      color: #f5f0ea;
    }
    .ending-card p { color: #c4b8a8; font-size: 1.05em; line-height: 1.8; }
    .ending-card .ending-icon { font-size: 32px; margin-bottom: 20px; }

    /* 响应式适配 */
    @media (max-width: 768px) {
      .container { padding: 30px 16px 60px; }
      .title { font-size: 1.7em; }
      .quote-card { padding: 20px 24px; }
      .ending-card { padding: 30px 24px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 标题区 -->
    <div class="header">
      <h1 class="title">文章标题</h1>
      <p class="subtitle">副标题/导语简述</p>
    </div>

    <div class="divider">✧</div>

    <!-- 导语 -->
    <div class="intro">
      <p>这里是开篇导语，引入主题，吸引读者继续阅读...</p>
    </div>

    <!-- 引用卡片（可选，用于突出重要内容） -->
    <div class="quote-card">
      <p>这里是引用/信函/重要内容的展示区域，视觉焦点...</p>
    </div>

    <!-- 正文章节 -->
    <h2 class="section-title">第一章：核心主题</h2>
    <div class="content">
      <p>正文内容段落，使用<span class="highlight">重点标注</span>强调关键信息。</p>
      <p>继续展开论述，保持阅读节奏...</p>
      <ul>
        <li>要点一：简洁有力</li>
        <li>要点二：层次分明</li>
        <li>要点三：视觉丰富</li>
      </ul>
    </div>

    <!-- 更多章节... -->

    <!-- 结尾卡片 -->
    <div class="ending-card">
      <div class="ending-icon">✦</div>
      <p>这里是结尾总结，收束全文，<br>留下回味与思考...</p>
    </div>
  </div>
</body>
</html>

使用示例

示例1: 主题生成排版

• 场景/输入: 用户说"帮我写一篇关于AI大模型发展趋势的文章"
• 预期产出: 完整HTML格式文章，雨夜氛围风格，自动保存文件发送给用户
• 关键要点:
• 自动推断长度（约1500字）
• 包含3-4个核心观点章节
• 适当位置添加引用卡片突出重要观点
• 自动生成并保存HTML文件

示例2: 原文排版整理

• 场景/输入: 用户粘贴了一段文字："亲爱的...只要你回头..."，要求"帮我排版好看一点"
• 预期产出: 保留原文内容，应用雨夜风格排版，自动保存文件发送用户
• 关键要点:
• 不修改原文内容，仅优化格式
• 识别信件/引用内容放入quote-card
• 使用divider保持呼吸感
• 自动保存HTML文件

示例3: 重点标注

• 场景/输入: 用户说"这段话'只要回头，就会失去现在拥有的一切安稳'很重要，要突出"
• 预期产出: 使用 <span class="highlight"> 包裹关键词，渐变底色强调
• 关键要点:
• 正确写法：<span class="highlight">只要回头，就会失去现在拥有的一切安稳</span>。
• 句号必须在标签外面，不能写成：<span class="highlight">只要回头，就会失去现在拥有的一切安稳。</span>
• 视觉上区分主次信息

排版元素速查

注意事项

• 排版前先确认内容主题和情感基调
• 引用卡片用于突出信件、名言、重要观点
• 星点分割线控制在每2-3段落使用一次
• 重点标注不要过度使用，每篇3-5处为宜
• 结尾卡片必须有，给文章有力收束
• 保存文件：排版完成后调用脚本直接保存HTML文件并发送给用户下载
• 一键复制：HTML底部有「一键复制全文」按钮，点击即可复制全部内容和格式
• 代码语法检查：生成HTML后必须验证标签闭合正确、标点在标签外

资源索引

• 脚本：见 scripts/save_html.py（用途：接收JSON数据生成HTML文件，参数：--data 文章JSON数据，--output 输出文件路径）
• 脚本：见 scripts/check_content.py（用途：检测文案违规内容，返回passed/violations结果，参数：--data 文章JSON数据）