为内容生产设计 AI Skills 系统

渐进式披露

SKILL.md 是入口，像一本书的目录。Claude 只在需要时才读取详细内容。

命名与触发

命名规范：使用动名词形式

description 编写要点

1. 包含"做什么"：具体功能描述
2. 包含"何时触发"：触发场景和关键词
3. 使用第三人称：因为会被注入系统提示

五阶段执行流程

Human-in-the-Loop (HITLi人机协作模式 - AI 处理自动化任务，人工把关关键决策点，确保质量和安全) 设计原则

AI 擅长执行规则，但无法替代人类在关键决策点的判断。HITL 设计确保：

Sub-Agenti子代理 - Claude Code 可调用专门的 Agent 处理特定任务，如质量检查、代码审查等 质检模式

通过调用专门的质检 Agent，实现自动化质量把关

Task tool call:
  - subagent_type: "blog-quality-checker"
  - prompt: "Run quality checks on drafts/blog/[slug].md"

闭环设计模式

问题：系统产生的输出没有反馈回系统，导致知识断裂。

我们的实践：内链索引自动更新

工作流变体设计

同一套 Skills 可以支持多种触发场景，复用核心规范但调整入口流程

精确定义的艺术

Good/Bad 示例模式

Slug 设计

Alt 文本设计

验证命令速查表

按文章类型的差异化验证

不同文章类型有不同的验证标准，质检 Agent 会根据文章类型自动调整检查项

结构化数据 (Schema.orgi由 Google、Microsoft、Yahoo 等共同维护的结构化数据词汇表，用于描述网页内容)

自动生成符合 Google 标准的 JSON-LDiJavaScript Object Notation for Linked Data - 一种结构化数据格式，通过 script 标签嵌入网页，帮助搜索引擎理解内容 结构化数据，提升搜索结果展示效果

BlogPosting Schema 自动生成

系统从文章元数据自动构建完整的结构化数据：

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": post.title,
  "description": stripHtml(post.description),
  "image": {
    "@type": "ImageObject",
    "url": absoluteUrl(post.cover),
    "width": 1200,
    "height": 630
  },
  "datePublished": publishDate.toISOString(),
  "dateModified": (post.updated_at || publishDate).toISOString(),
  "author": {
    "@type": "Person",
    "name": author.name,
    "image": absoluteUrl(author.avatar),
    "url": "https://x.com/" + author.twitter_handle,
    "sameAs": [twitter_url, linkedin_url, website_url]
  },
  "publisher": {
    "@type": "Organization",
    "name": "[产品名]",
    "url": process.env.NEXT_PUBLIC_WEB_URL,
    "logo": {
      "@type": "ImageObject",
      "url": "/logo.png",
      "width": 600,
      "height": 60
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": canonicalUrl
  },
  "url": canonicalUrl,
  "keywords": post.tags?.join(", "),
  "articleSection": post.category,
  "wordCount": content.replace(/<[^>]*>/g, "").split(/\s+/).length,
  "inLanguage": locale === "zh" ? "zh-CN" : "en-US",
  "isAccessibleForFree": true
}

字段映射关系

BreadcrumbList Schema

自动生成面包屑导航的结构化数据：

验证方法

演进历程

基础组件

每个组件都有明确的使用场景和样式规范

高级组件

用于产品对比、数据展示、CTA 转化等高价值场景

封面图与配图规范

统一的图片风格和自动化生成流程

POST /api/demo/gen-image
{
  "prompt": "[按风格指南]",
  "provider": "nanobanana",
  "model": "nano-banana-2-hd"
}

文章类型与组件匹配

不同文章类型需要不同的组件组合，ARTICLE-TYPES.md 定义了 4 种标准模板

组件文档结构

让 AI 准确使用组件的关键是提供完整的文档

使用 highlight-block
来强调重要内容

<div class="highlight-block">
  <strong>Key Takeaway</strong>
  <p>Your insight here.</p>
</div>

.claude/skills/writing-blog-articles/
├── COMPONENTS.md           # 组件概览 + 选择指南
├── COMPONENTS-BASIC.md     # 基础组件（highlight、prompt、blockquote、figure...）
├── COMPONENTS-ADVANCED.md  # 高级组件（stats、callout、step-list、faq...）
├── COMPONENTS-SEO.md       # 文章类型专用组件（stats-summary、product-review、expert-quote、methodology、data-matrix）
├── ARTICLE-TYPES.md        # 4 种文章类型模板（对比/数据/教程/列表）
└── INLINE-IMAGES.md        # 图片数量、位置、alt 规范