Back to Details

blog-post

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Blog Post Skill

博客文章Skill

Produce a single long-form article page — editorial layout, no chrome.
生成单个长文章页面——采用编辑类排版，不含浏览器默认导航栏元素。

Workflow

工作流程

  1. Read the active DESIGN.md (injected above). Lean into the typography tokens — long-form is 70% type, 20% image, 10% chrome.
  2. Pick the topic from the brief and write a real article — at least 600 words across 4–6 H2 sections. No lorem ipsum.
  3. Sections, in order:
    • Masthead — small wordmark + 4–6 nav links, plain.
    • Article header — category eyebrow, headline (display token, large), deck (1–2 sentence subhead), author name + role + date.
    • Hero image — a 16:9 placeholder block using a DS-tinted gradient or solid fill (no external images). Add a 1-line caption underneath.
    • Body — alternating prose paragraphs with at least:
      • 1 pull quote (large display type, accent rule on the left).
      • 1 figure (image placeholder + caption).
      • 1 list (numbered or bulleted).
      • 1 inline blockquote.
    • Author footer — author avatar (initials in a circle), bio paragraph.
    • Related — 3 cards linking to other posts. Each card: tiny image block, title, 1-line excerpt, date.
  4. Write a single HTML document: 
    • <!doctype html>
      through 
      </html>
      , CSS inline.
    • Article body uses the DS body font, centered, max-width per DS layout rule (typically 680–720px).
    • Drop caps (
      first-letter
      ) only if the DS mood is editorial / serif — skip on tech-y DSes.
    • data-od-id
      on the headline, hero, body, pull quote, related grid.
  5. Self-check:
    • Type hierarchy is unambiguous — H1 is clearly the headline; H2s are section dividers; pull quotes do not compete with H1.
    • Line length 60–75 chars for body prose.
    • Accent appears at most twice (eyebrow + pull-quote rule, or one link).
    • The page reads like a magazine, not a marketing landing.
  1. 阅读当前的DESIGN.md（已在上方注入）。充分利用排版样式标记——长文章的排版占比为70%文字、20%图片、10%导航元素。
  2. 从需求中选取主题并撰写一篇真实的文章——分为4–6个H2章节，至少600词。禁止使用Lorem Ipsum占位文本。
  3. 章节顺序：
    • 页眉（Masthead）——小型标识 + 4–6个导航链接，风格简洁。
    • 文章标题区——分类小标题、大标题（使用显示类样式标记，大字号）、副标题（1–2句话）、作者姓名+职位+日期。
    • 英雄图——16:9比例的占位块，使用设计系统（DS）色调的渐变或纯色填充（禁止使用外部图片）。下方添加一行说明文字。
    • 正文——交替排列的段落，至少包含：
      • 1个引言（大字号显示类字体，左侧带强调线）。
      • 1个图表（图片占位符+说明文字）。
      • 1个列表（有序或无序列表）。
      • 1个嵌入式引用。
    • 作者页脚——作者头像（圆形内的首字母）、作者简介段落。
    • 相关推荐——3个链接至其他文章的卡片。每张卡片包含：小型图片块、标题、一行摘要、日期。
  4. 撰写单个HTML文档：
    • 包含
      <!doctype html>
      至
      </html>
      的完整结构，CSS内联。
    • 文章正文使用设计系统（DS）的正文字体，居中对齐，最大宽度遵循DS布局规则（通常为680–720px）。
    • 仅当设计系统（DS）风格偏向编辑类/衬线字体时，才添加首字下沉（
      first-letter
      ）——技术类设计系统则跳过此设置。
    • 在标题、英雄图、正文、引言、相关推荐网格上添加
      data-od-id
      属性。
  5. 自我检查：
    • 层级结构清晰明确——H1明显是大标题；H2是章节分隔符；引言不会与H1混淆。
    • 正文每行长度为60–75字符。
    • 强调色最多使用两次（小标题+引言强调线，或单个链接）。
    • 页面读起来像杂志，而非营销着陆页。

Output contract

输出约定

Emit between 
<artifact>
tags:
<artifact identifier="post-slug" type="text/html" title="Article Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
在
<artifact>
标签内输出：
<artifact identifier="post-slug" type="text/html" title="Article Title">
<!doctype html>
<html>...</html>
</artifact>
在artifact前添加一句话，之后无内容。