Matters（馬特市，繁中創作社群，官方網址 matters.town）的設計系統 monorepo。Repo 位置：thematters/design-system。
前端 / 營運設計師交接後，我們需要一個集中、可被 Claude Code / Codex 等 Agent 讀寫的設計真相源（source of truth），取代原本 Figma + Google Drive + Notion 散落的作業方式。
從 Phase 1 起，這個 repo 同時是 monorepo + UI Kit：tokens 與 React 元件都會以 npm package（以及 vendored copy）的形式被產品端消費。
- 宣傳圖模板（運營可自助）— 繼承 CC & Branding Figma 模板，轉為可程式化產生的 OG-image / 社群圖模板
- 前端改版 — 既有產品頁面的設計迭代（對應
docs/issue-drafts.md中的status/in-progress/status/todo） - 七日書 landing — 季節性活動專屬 landing page
- Archive 視覺改版 — 站台的封存 / 歷史內容頁面視覺升級
| 路徑 | 適合 | 入口 |
|---|---|---|
| Vendored copy | Static landing pages、無 build pipeline 的純 HTML | docs/consume.md |
| npm package | React 應用 | packages/react/README.md |
| Copy-and-own（Phase 2+） | Fork 自有版、不想跟 package 版本耦合 | scripts/scaffold-component.mjs |
- 📚 Storybook docs site — Phase 3 起公開部署，含元件 stories + tokens 視覺化（colors / typography / spacing / shadows / brand）
docs/architecture.md— Phase 1 起的 monorepo 結構與 phase plandocs/consume.md— 三種消費方式docs/templates.md— OG / 社群圖 / Newsletter header 模板與 render 流程（Phase 6）docs/freewrite-design-system/— 七日書 / 自由寫專屬設計資料庫（15 Figma page 拆解、7 元件 spec、6 原則 doc）docs/brand-intelligence.md— Matters 宣傳圖素材 / 規則 / prompt / 一鍵生成流程docs/cc-branding-style-catalog.md— CC & Branding 的活動分類、版型、底圖與文字規則docs/cc-branding-newcomer-guide.md— 新手按需求選模板與出圖的快速指南docs/cc-branding-studio-workflow.md— Matters Studio 製圖流程契約docs/cc-branding-image2-prompts.md— 各分類 OpenAI Image 2 prompt 起點docs/image-generation-workflow.md— OpenAI Image API 背景圖生成工作流docs/releasing.md— changesets 工作流 + npm publish 設定（Phase 5）docs/visual-regression.md— Playwright 視覺回歸（Phase 5）docs/code-connect.md— Figma Code Connect 設定（Phase 4）docs/dual-track-workflow.md— 模板軌 vs. 結構軌的雙軌工作流docs/handoff-spec-template.md— 設計 → 開發的 handoff spec 範本docs/figma-inventory.md— 現有 Figma 檔案清單
packages/
├── tokens/ # 設計 tokens（canonical）
└── react/ # React 元件 library（@matters/design-system-react）
apps/
├── storybook/ # 元件 docs site（Phase 1 本機；Phase 3 上架）
└── slide-theme/ # Slidev Matters theme + 範例簡報（Phase 8a）
components/ # 設計 spec：Figma 取出的 41 份 component reference
tokens/ # tokens/dist/* — vendored copy 用的 back-compat 鏡射
docs/ # 工作流、phase plan、handoff 規範
scripts/ # token 抽取、scaffold CLI
templates/ # 運營模板（Phase 6+）
brand/ # 宣傳設計素材、風格規則、prompt recipes、生成 job
.github/workflows/ # CI（lint / typecheck / test / build / storybook）
# 一次裝好整個 monorepo
pnpm install
# 重新產生 tokens
pnpm build:tokens
# 跑 React 元件測試
pnpm --filter @matters/design-system-react test
# 開 Storybook
pnpm dev:storybook
# 生成「背景圖 + Matters 排版」的完整宣傳圖
pnpm visual:create -- --job brand/jobs/background-card.example.json
# 依 Figma CC & Branding 重建分類 catalog
pnpm brand:catalog需要 Node ≥ 20、pnpm ≥ 9。
| Phase | Scope | 狀態 |
|---|---|---|
| Phase 0 | Tokens v2 + 41 specs + Button vanilla impl | ✅ 已合 PR #29 |
| Phase 1 | Monorepo + Button (React) + Storybook + CI | ✅ 已合 PR #30 |
| Phase 2 | TextField + Dialog + Toast + scaffold CLI | ✅ 已合 PR #31 |
| Phase 3 | Storybook deploy + tokens docs site + freewrite isolation | ✅ 已合 PR #32 |
| Phase 4 | Avatar + Banner + ArticleCard + Figma Code Connect | ✅ 已合 PR #34 |
| Phase 5 | changesets + npm publish + Playwright visual regression | ✅ 已合 PR #35 |
| Phase 6 | Operational templates (OG / social / newsletter) | ✅ 已合 PR #39 |
| Phase 7 | HTTP render service (wraps Phase 6 templates) | ✅ 已合 PR #43 |
| Phase 8a | Slidev Matters theme + 3 example decks | ✅ 已合 PR #49 |
| Phase 8b | Astro page-template starters (activity / coming-soon / about) | 🚧 本 PR |
| Phase 9 | Matters Studio — web UI for non-designers (spec only) | 📝 PR #50 |
完整 phase plan 在 docs/architecture.md。
- 產品域名：matters.town（Matters.Town 是站台正式品牌）
- 品牌色（PM 2026-04-24 拍板）：canonical =
--color-brand-new-purple(#7258FF) +--color-brand-new-green(#C3F432)。Legacy green/gold 只能作為遷移期使用。 - 前設計師交接檔：存於上層目錄
交接.md、已有設計項目待迭代.md、Matters.Town_-_Brand_Guidelines.pdf、Matters_Lab_-_Brand_Guidelines.pdf - Figma Team：Matters - Product Team（pro）、tech@matters.news Matters's team（starter）