Hello, Moriwise — 我們的文章系統如何運作

為什麼做 Blog as Components

過去寫部落格的方式有兩種痛點。第一種是純 markdown（Jekyll、Hugo、 Astro content），文章變成 string，視覺與內容混在一個 file，要改 design 得改全部 articles。第二種是 CMS（Notion / Contentful）， 內容跟 code 分離得太徹底，typography 細節跟自家 design system 對不上。

我們的選擇：一篇文章 = 一個資料夾。資料夾裡有 markdown 原稿（source of truth）、有編譯後的 React component （rendered output）、有獨立的 metadata schema（zod 驗證）。

一篇文章長什麼樣

content/articles/hello-moriwise/
├── metadata.ts           ← zod-validated metadata
├── originalcontent.md    ← author 的 markdown 原稿
├── content.tsx           ← LLM 編譯後的 React component
└── assets/
    └── cover-placeholder.svg

編譯流程

從 markdown 變 tsx 不是 build-time 自動的。流程是：

1. 作者寫 originalcontent.md
2. 開新對話，把 prompts/md-to-tsx.md 當 system prompt
3. 把 markdown 內容當 user message 貼給 Claude
4. Claude 回傳 tsx，存成 content.tsx
5. Build pipeline 讀資料夾、render 出網頁

這設計刻意保留 LLM-in-the-loop：每次 markdown 改了重新編譯，可以 在 prompt 層調整 design 風格而不用改每篇文章。

元件清單

@moriwise/article-kit 目前 export 12 個 components：

• 排版層：ArticleLayout、ArticleHero、Prose
• 內容元件：H2、H3、CodeBlock、ImageFigure、Callout、Quote、Aside、 KeyTakeaways、Comparison
• 索引層：ArticleCard
• 標記：IndustryBadge

加上 @moriwise/ui 的 5 個 primitives（Card、Badge、 Button、SectionLabel、Stats）作為基礎。

接下來

Phase 3 開始時，這篇文章的位置可能會改變（依 amibon.app 重構決定）， 但資料夾結構不變。