Open Design Blog Post 技能指南

技能概述

Blog Post 技能生成一篇完整的長篇文章頁面，採用編輯風格佈局：報頭（masthead）、文章標題區（含分類標籤、標題、副標題、作者資訊）、16:9 主圖占位符、文章正文（含 pull quote + figure + 列表 + blockquote）、作者頁腳、3 張相關文章卡片。

觸發關鍵字

• blog、blog post、article、essay、case study、newsletter、博客、文章

什麼時候用

• 部落格長篇文章
• 案例研究
• 新聞簡報
• 專題報導
• 產品深度介紹文章

使用方法

自然語言觸發

帮我写一篇博客
做一個 case study 文章
整一篇關於 AI 嘅文章

指定技能

用 blog-post 技能生成一篇關於氣候變化嘅文章

標準工作流程

1. 讀 DESIGN.md — typography tokens 是核心，長文 70% 字型 + 20% 圖片 + 10% 裝飾
2. 定主題 — 從 brief 提取話題，寫真實文章，最少 600 字、4-6 個 H2 段落
3. 頁面結構（由上到下）：
   • Masthead — 小 logo + 4-6 個導航連結
   • Article header — 分類標籤（eyebrow）、大標題、1-2 句副標題、作者名 + 職稱 + 日期
   • Hero image — 16:9 占位塊（DS 色系漸變），附 1 行 caption
   • Body — 交替排列段落 + pull quote（accent 在 inline-start 邊）+ figure（圖片 + caption）+ 列表 + blockquote
   • Author footer — 頭像（縮寫圓圈）+ 作者簡介
   • Related — 3 張卡片（小圖 + 標題 + 1 行摘錄 + 日期）
4. 寫入 — 單文件 HTML，CSS inline，max-width 680-720px

輸出格式

單文件 HTML，inline CSS。正文使用 DS body font 居中排版。drop caps 僅在 editorial / serif 風格時使用。accent 最多出現兩次（eyebrow + pull-quote rule）。

自檢清單

• 標題層次清晰 — H1 是標題，H2 是區段分隔，pull quote 不搶 H1 風頭
• 正文行長 60-75 字符
• accent 最多兩次
• 整體讀起來像雜誌，唔像 marketing landing page

實際例子

例子 1：科技部落格

用戶：「幫我写一篇關於大語言模型嘅博客文章」

生成：

• 標題："大語言模型如何改變我們嘅工作方式"
• 正文包含：LLM 基礎原理、應用場景、pull quote、行業數據圖表、作者簡介
• 底部 3 篇相關文章卡片

例子 2：案例研究

用戶：「用 blog-post 做一個 SaaS 公司嘅 case study」

生成：

• 標題："點樣用 12 個月實現 0 到 100 萬 ARR"
• 正文包含：背景、挑戰、策略、成果、經驗教訓（5 個 H2 段落）
• 配圖、數據列表、pull quote

相關技能

• Docs Page
• Meeting Notes
• Email Marketing