博客文章技能

博客文章技能 是做什么的？

生成一篇独立的长篇文章页面——编辑排版布局，无多余界面元素。

工作流程

1. 阅读当前的 DESIGN.md（已在上面注入）。充分利用排版令牌——长篇文章是 70% 文字、20% 图片、10% 装饰。
2. 从需求中选择主题，撰写一篇真实文章——至少 600 字，分为 4–6 个 H2 章节。不得使用 Lorem Ipsum。
3. 章节顺序如下：
   • 刊头——小号字体标识 + 4–6 个导航链接，简洁。
   • 文章头部——分类标签（使用设计系统的强调色）、标题（显示级令牌，大号）、副标题（1–2 句说明）、作者姓名 + 角色 + 日期。
   • 英雄图片——使用设计系统色调渐变或纯色填充的 16:9 占位符块（不引用外部图片）。下方添加一行说明文字。
   • 正文——交替的散文段落，至少包含：
     • 1 个引文（大号显示字体，内联起始边缘有强调色竖线，以便在 dir="rtl" 下正确翻转布局）。
     • 1 个插图（图片占位符 + 说明文字）。
     • 1 个列表（有序或无序）。
     • 1 个行内块引用。
   • 作者页脚——作者头像（首字母圆圈形式）、一段个人简介。
   • 相关文章——3 张链接到其他文章的卡片。每张卡片包含：小图片块、标题、一行摘要、日期。
4. 编写单个 HTML 文档：
   • <!doctype html> 到 </html>，CSS 内联。
   • 文章正文使用设计系统正文字体，居中，最大宽度遵循设计系统布局规则（通常为 680–720px）。
   • 首字下沉（first-letter）仅在设计系统氛围为编辑排版/衬线字体时使用——技术风格的设计系统则跳过。
   • 在标题、英雄图片、正文、引文、相关文章网格上添加 data-od-id 属性。
5. 自我检查：
   • 标题层级清晰——H1 明显是主标题；H2 是章节分隔符；引文不与 H1 竞争。
   • 正文行长为 60–75 个字符。
   • 强调色最多出现两次（分类标签 + 引文竖线，或一个链接）。
   • 页面读起来像杂志，而非营销落地页。

输出约定

在 <artifact> 标签内输出：

<artifact identifier="post-slug" type="text/html" title="文章标题">
<!doctype html>
<html>...</html>
</artifact>

在 artifact 前写一句话，其后不写任何内容。