blog-post

博客文章技能

生成一个单页长文文章页面——编辑式布局，不带浏览器界面元素。

工作流

1. 阅读当前生效的 DESIGN.md（已在上方注入）。充分运用排版设计令牌——长文页面中，70% 是文字，20% 是图像，10% 是界面元素。
2. 从简报中选择主题并撰写一篇真正的文章——至少 600 字，包含 4–6 个 H2 章节。不要使用 Lorem ipsum。
3. 按以下顺序安排章节：
   • 刊头——小型字标 + 4–6 个简单的导航链接。
   • 文章标题区——类别眉题、标题（使用大号展示字体令牌）、导语（1–2 句副标题）、作者姓名 + 职务 + 日期。
   • 主视觉图——使用 DS 色调渐变或纯色填充的 16:9 占位区块（不要使用外部图像）。下方添加 1 行说明文字。
   • 正文——段落交替排布，且至少包含：
     • 1 段引言（使用大号展示字体，在行内起始边缘添加强调色线条，以确保布局在 dir="rtl" 下正确翻转）。
     • 1 个插图（图像占位区块 + 说明文字）。
     • 1 个列表（编号或项目符号）。
     • 1 段行内引用。
   • 作者页脚——作者头像（圆形内显示姓名首字母）、个人简介段落。
   • 相关文章——3 张链接至其他文章的卡片。每张卡片包含：小型图像区块、标题、1 行摘要、日期。
4. 编写单个 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 内联。
   • 文章正文使用 DS 正文字体，居中显示，最大宽度遵循 DS 布局规则（通常为 680–720px）。
   • 仅当 DS 风格偏编辑式或衬线时才使用首字下沉（first-letter）；科技感较强的 DS 则跳过。
   • 在标题、主视觉图、正文、引言和相关文章网格上添加 data-od-id。
5. 自查：
   • 字体层级清晰明确——H1 是醒目的标题；H2 用作章节分隔；引言字号不得与 H1 争抢视觉焦点。
   • 正文行长为 60–75 个字符。
   • 强调色最多出现两次（眉题 + 引言线条，或用于一个链接）。
   • 页面应具有杂志风格，而非营销落地页风格。

输出约定

在 <artifact> 标签之间输出：

<artifact identifier="post-slug" type="text/html" title="Article Title">
<!doctype html>
<html>...</html>
</artifact>

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