splatstudio

部落格貼文技能

產出一份單一的長篇文章頁面 — 編輯版面，無多餘裝飾。

工作流程

1. 讀取作用中的 DESIGN.md（已於上方注入）。善用字體排印代碼 — 長篇文章 70% 靠字體、20% 靠圖片、10% 靠裝飾。
2. 從需求中選定主題，並撰寫一篇真實文章 — 至少 600 字，橫跨 4–6 個 H2 章節。禁止使用 Lorem ipsum。
3. 各區塊順序：
   • 刊頭 — 小型字標 + 4–6 個導航連結，樸素無華。
   • 文章標題區 — 類別眉毛文字、標題（使用 display 字體代碼，大型）、副標題（1–2 句）、作者姓名 + 角色 + 日期。
   • 主圖 — 16:9 的佔位區塊，使用設計系統調和的漸層或純色填滿（不允許外部圖片）。下方加上一行說明文字。
   • 本文 — 交替出現的散文段落，至少包含：
     • 1 段引文（大型顯示字體，行首邊緣有強調色規則，以在 dir="rtl" 下正確翻轉版面）。
     • 1 個圖表（圖片佔位區塊 + 說明文字）。
     • 1 個清單（有序或無序）。
     • 1 段行內引用。
   • 作者頁尾 — 作者頭像（圓形內顯示縮寫）、作者簡介段落。
   • 相關文章 — 3 張卡片連結到其他文章。每張卡片包含：小型圖片區塊、標題、一行摘要、日期。
4. 撰寫一份單一的 HTML 文件：
   • <!doctype html> 到 </html>，CSS 內嵌。
   • 文章本文使用設計系統的主體字型，置中，最大寬度符合設計系統版面規則（通常為 680–720px）。
   • 僅在設計系統氛圍為編輯型 / 襯線體時使用首字放大，技術導向的設計系統則跳過。
   • 在標題、主圖、本文、引文、相關文章網格上使用 data-od-id。
5. 自我檢查：
   • 層級結構無歧義 — H1 明確代表標題；H2 為章節分隔；引文不與 H1 競爭。
   • 本文段落的行長在 60–75 個字元之間。
   • 強調色最多出現兩次（眉毛文字 + 引文規則，或一個連結）。
   • 頁面讀起來像雜誌，而非行銷到達頁。

輸出規範

在 <artifact> 標籤之間輸出：

<artifact identifier="文章-slug" type="text/html" title="文章標題">
<!doctype html>
<html>...</html>
</artifact>

在 artifact 之前放一句話，之後不留任何內容。