Content Creation Expert Prod

Skill: content-creation-expert-prod（生产版内容创作工具）

描述

汽车图文创作团队的配套工具 Skill，提供文章质量验证、通用 Markdown → HTML 渲染和小红书风格 HTML 渲染三个核心能力。

⚠️ 生产版说明：本 Skill 是精简版，只保留 validate-article、render-html 和 render-html-xhs 三个 action。 配图由 visual-director Agent 通过 WorkBuddy 内置 ImageGen 完成，不需要 Python 脚本调用。

触发条件

调用方式

python3 scripts/main.py '<JSON参数>'

Action 参数说明

1. validate-article — 文章质量验证

输出：

{
  "status": "pass|fail",
  "score": 85,
  "fail_count": 0,
  "warn_count": 2,
  "issues": [{"severity": "FAIL|WARN", "category": "...", "detail": "..."}],
  "stats": {"word_count": 1500, "valid_links": 4, "actual_images": 6}
}

2. render-html — Markdown → HTML 渲染

输出：

{
  "status": "success",
  "html_content": "<html>...</html>",
  "html_local_path": "/abs/path/preview.html",
  "md_local_path": "/abs/path/article.md"
}

图片处理双模式（自动选择）：

• 有 COS 配置：图片上传到 COS 获取公网 URL，替换 MD/HTML 中的图片路径
• 无 COS 配置：图片（远程 URL + 本地路径）base64 内嵌到 HTML，MD 保留原路径

3. render-html-xhs — 小红书风格 HTML 渲染

将图文混排 Markdown 渲染为小红书 PC 端双栏 UI：

• 左侧：图片轮播（黑底 + contain + 浮动圆点指示 + N/M 计数 + 翻页箭头 + 键盘左右翻页）
• 右侧：作者栏（关注按钮）→ 标题 + 一句话定位 → 正文 → tag 蓝字 → 时间地点 → 评论区（含作者回复气泡）→ THE END
• 底部：固定互动栏（♡ ⭐ 💬 ↗）

输出：

{
  "status": "success",
  "platform": "xiaohongshu",
  "html_content": "<html>...</html>",
  "html_local_path": "/abs/path/preview.html",
  "md_local_path": "/abs/path/article.md",
  "image_count": 8
}

关键 UI 特征（小红书原生对齐）：

• 卡片宽度固定 1040px（左 520 + 右 520），高度 calc(100vh - 48px) 最大 920px
• 左侧图片 object-fit:contain 黑底显示主体完整，不裁切
• 圆点指示器漂浮在图片底部，激活态变红色胶囊
• 右上角带 N/M 计数胶囊
• 正文无水平分隔线（小红书原文无 --- 样式），段落间靠 h2 margin 提供视觉分隔
• 正文无引用样式（> quote 渲染为正常段落，不加黄底框）
• 底部互动栏紧贴右侧内容底部（不会与正文重叠）
• 响应式：< 960px 自动变上下堆叠

图片处理：仅做 base64 内嵌（不走 COS），适合截图发布 / 离线预览。

COS 可选配置

COS 是可选功能，用于上传图片获取公网 URL。

判断逻辑：检查环境变量 COS_SECRET_ID（或 TENCENT_SECRET_ID）是否存在。

有 COS 配置时

• render-html 自动将文章中的图片（远程 URL 下载 + 本地文件读取）上传到 COS，获取公网 URL 替换到 MD/HTML 中
• 图片以公网 URL 方式引用，适合在线分享

无 COS 配置时

• render-html 将图片 base64 内嵌到 HTML（使 HTML 文件完全自包含，离线可看），MD 保留原路径
• 适合本地预览和通过 WorkBuddy 原生分享

凭据配置

在 skill 目录创建 .env 文件（参考 .env.example）：

# COS 凭据（可选，不填则只保存本地产物）
COS_SECRET_ID=
COS_SECRET_KEY=
COS_BUCKET=int-ai-1325126984
COS_REGION=ap-guangzhou
COS_PATH_PREFIX=expert-playground

使用示例

示例 1：配图前预检（只检查文字）

python3 scripts/main.py '{"action":"validate-article","article_text":"# 标题\n\n正文...","phase":"pre-illustrate","min_links":3}'

示例 2：交付前预检

python3 scripts/main.py '{"action":"validate-article","article_text":"# 标题\n\n正文...","brief_file":"/abs/brief.md","phase":"pre-delivery"}'

示例 3：渲染通用 HTML + 图片处理（COS 自动检测）

python3 scripts/main.py '{"action":"render-html","article_text":"# 标题\n\n![图1](https://img.url)\n\n正文...","title":"比亚迪汉EV评测","output_dir":"/abs/team-artifacts"}'

示例 4：渲染小红书风格 HTML

python3 scripts/main.py '{"action":"render-html-xhs","article_text":"# 标题\n\n> 一句话定位\n\n正文...\n\n![](/abs/img.png)\n\n#tag1 #tag2","title":"20万纯电SUV推荐","output_dir":"/abs/team-artifacts","author_name":"汽车博主","post_time_loc":"06-18 北京","likes":"2.3w","collects":"1.8w"}'

HTML 产物特性

• 移动端优先响应式布局
• 支持暗色模式
• 图片 base64 内嵌（离线可看）
• 单文件无外部依赖
• AI 标注自动识别渲染

Skill 包文件结构

content-creation-expert-prod/
├── SKILL.md                    # 本文件
├── .env.example                # COS 凭据模板（可选）
├── .gitignore
├── requirements.txt            # Python 依赖
├── references/
│   └── image-generation-guide.md  # AI 图片生成完整指南（7种场景策略）
├── templates/
│   └── article.html            # Jinja2 HTML 模板
└── scripts/
    ├── main.py                 # 路由入口
    ├── config.py               # 配置加载器
    ├── cos_client.py           # COS 客户端（图片上传）
    ├── html_renderer.py        # HTML 渲染器（含 base64 图片内嵌）
    ├── html_renderer_xhs.py    # 小红书 HTML 渲染器
    ├── utils.py                # 公共工具
    └── handlers/
        ├── validate_article.py # 质量验证
        ├── render_html.py      # HTML 渲染 + 图片双模式处理
        └── render_html_xhs.py  # 小红书风格 HTML 渲染