# 策展 · X (Twitter) 🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：v0 (@v0) · 平台：X (Twitter) · 日期：2026-07-11

> 原始來源：https://x.com/v0/status/2075589636227735902

## 中文摘要

# 深入了解 v0 Design Systems 2.0

1976 年，NASA 製作了一份手冊。它精確地告訴機構內的所有人該如何呈現 NASA 的名稱：標誌（logotype）、那個被大家稱為「Worm」的流線型紅色字標、它周圍的間距、顏色，以及它應該出現在信頭的哪個位置，或是火箭側面的哪個位置。

這意味著數千人，在數千份文件和載具上，都能保持一致。那份手冊是我們現在所謂「設計系統」最早期的雛形之一，儘管這個概念可以追溯到數十年前的印刷樣式指南。自那時起，每個建立的設計系統都為了同一個理由而存在：一群人與另一群人共事，試圖在成長與建構的過程中保持一致。

---

# v0 過去是如何運作設計系統的

v0 最受歡迎的功能之一，就是能夠匯入你自己的設計系統。這項需求在那些需要維護龐大系統的團隊中呼聲最高：他們擁有廣大的介面範圍、龐大的團隊成員與 Agent 在處理網站和應用程式，且品牌必須在任何地方都保持一致。

因此，我們製作了第一個版本。它透過一個 registry 運作：你從 shadcn registry starter 開始，並用你的顏色和字型重新設定其 token。接著，你將每個元件表達為一個 registry 項目，進行部署，然後一次一個地將這些部分開啟到 v0 中。

它確實有效，也有許多團隊用它交付了實際的產品。但它也有其上限。這通常意味著你必須將現有的堆疊遷移到 shadcn，即便如此，你的設計系統與 v0 中 shadcn 的複製品也會隨著時間推移而產生偏差。

---

# 有什麼改變

6 月 25 日，我們宣布了 Design Systems 2.0，這是對 v0 設計系統的全面重寫。

你不再需要為了適應 v0 而重塑你的系統，現在你可以直接把真實的設計系統交給 v0。餵給它你的文件、原始程式碼、使用該系統的應用程式、Figma、Storybook 等等。v0 會分析這些來源並學習如何使用你的設計系統。

有三個要素讓「使用我真實的元件」成為現實：

1. 設定一次，隨處重複使用：匯入設計系統會建立一個 skill：這是一種可重複使用的設定，教導 v0 如何使用你的系統進行建構。該 skill 會參考你的真實程式碼，攜帶使用規則，並包含每個應用程式啟動時的 starter。設定一次，它就會出現在你團隊開啟的每個對話中。

舉例來說，這是 Microsoft 的設計系統 Fluent 的 skill：

```
fluent-ui/
├─ SKILL.md           # v0 遵循的規則，用以建構該系統
├─ assets/
│  └─ starter/        # 每個新對話啟動時的預先配置應用程式
│     ├─ app/         # provider 已掛載，字型 + 全域樣式已配置
│     ├─ components/
│     └─ public/
├─ references/        # v0 讀取以驗證每次建構的內容
│  ├─ foundations/    # token、主題、響應式設計
│  ├─ components/     # 元件索引與各區域指南
│  ├─ examples/       # 實際展示頁面
│  └─ assets/icons.md # 它能使用的確切圖示名稱
└─ v0.json            # 要 clone 的儲存庫、共用環境變數、starter 目錄

```

2. 每次建構時皆與原始來源進行驗證：每次 v0 進行建構時，它都會讀取你實際的元件原始碼（以唯讀方式掛載），並針對每個部分進行檢查：確認 prop 是否存在、token 名稱是否解析正確、圖示是否確實匯出。因此，v0 不會去調用不存在的 prop 或圖示。

3. 每個應用程式都從真實的 starter 開始：v0 會設定一個可運作的 starter，其中安裝了你實際的套件、掛載了你的 provider、配置好了字型與全域樣式，從第一次渲染開始就符合品牌規範。之後你開啟的每個對話都會繼承該 starter，因此 v0 是從你真實的 primitives 進行組合，而不是手動拼湊出相似的成品。

你可以餵給 v0 多種來源。來源越豐富，輸出的結果就越好。

- 套件：公開或私有的 npm 套件、.tgz 壓縮檔，或是包含自身 package.json 的原始碼目錄。
- 存放元件與 token 的儲存庫（repo）。
- 使用該系統的真實應用程式（這是最豐富的來源），因為它展示了你的 provider、字型與主題設定是如何實際運作的。
- Storybook、文件或設計準則（以連結形式）。
- Figma frames（作為組合與密度的視覺參考）。
- 截圖、ZIP 檔、你拖曳進來的匯出套件。

如果你想在匯入任何自己的內容之前先試用看看，v0 也內建了一些你可以嘗試的設計系統：

- GitHub 的 Primer
- IBM 的 Carbon
- Microsoft 的 Fluent
- Google 的 Material 3
- AWS 的 Cloudscape

問題是，它們在 v0 中的表現如何？

---

# 演示：如果 𝚡𝚢𝚣 打造了 GitHub

![這是 GitHub 平台上 primer/react 儲存庫的專案概覽頁面，展示了程式碼庫的統計數據與近期活動。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/2c086090fcf3c71d.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">該畫面為 GitHub 的專案頁面，顯示儲存庫名稱為「primer / react」，描述為「An implementation of GitHub's Primer Design System using React」。

頁面頂端統計數據：
- Watch: 184
- Fork: 612
- Star: 3.2k

概覽頁籤統計數據：
- Stars: 3,241 (+128 this week)
- Forks: 612 (+9 this week)
- Watchers: 184 (+3 this week)
- Open issues: 87 (12 opened today)
- Open PRs: 23 (5 need review)
- Releases: 142 (v36.4.0 latest)

近期提交紀錄 (Recent commits)：
- fix(Button): correct disabled focus ring token (octocat, 32 minutes ago)
- feat(DataTable): add sticky header support (monalisa, 2 hours ago)
- docs: update theming guide for primitives v9 (hubot, 5 hours ago)
- refactor(Overlay): migrate to useAnchoredPosition (tender, Yesterday)
- test(NavList): cover keyboard navigation edge cases (broccolini, Yesterday)

底部區塊：
- Pull requests: "Add SelectPanel multi-select variant" (#42 by monalisa, opened 3h ago)
- Open issues: "ActionMenu closes unexpectedly on nested overlay" (#1284 by tender, 1h ago, bug)

畫面重點為 GitHub 的標準儲存庫管理介面，包含導覽列（Overview, Code, Issues, Pull requests, Actions, Projects, Security, Insights, Settings）以及專案的即時狀態更新。</div></details>

幾週前，@rauchg 發了一張截圖：如果 Vercel 打造了 GitHub 會怎樣？X 上出現了一股潮流，湧現了數十張「如果 𝚡𝚢𝚣 打造了 GitHub」的截圖。

所以我決定用 v0 新的設計系統功能來測試一下。

我多次給 v0 同一個 prompt，但在每次執行間只改變一件事：設計系統。

> 建構一個高密度的單頁 GitHub 儲存庫概覽儀表板：頂部列、左側導覽、統計卡片，以及用於 commits、PRs、issues、貢獻者和 CI/CD 的面板。

五個真實的設計系統，每次執行一個：Microsoft 的 Fluent、IBM 的 Carbon、Shopify 的 Polaris、AWS 的 Cloudscape，以及 GitHub 自己的 Primer。最後再執行一次沒有掛載任何設計系統的版本。

結果如下。

仔細看。細節非常微妙，它們突顯了每個設計團隊系統的工藝與細節。

---

# Fluent × GitHub

在 v0 中開啟

![v0 以 Fluent 設計系統生成的 contoso/fluent-commerce 示範儀表板，畫面顯示提交次數、測試覆蓋率等 v0 生成的佔位指標。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/02b3a91baa4627b8.jpg)

<details class="chart-data"><summary>展開數據表（1）頂部指標</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>Commits (30d)</td><td class="rank-bar num bar-w-100"><span class="bar-val">1,284 (+12.4% vs prev. 30d)</span></td></tr><tr><td>Open pull requests</td><td class="rank-bar num bar-w-0"><span class="bar-val">23 (-3 vs prev. 30d)</span></td></tr><tr><td>Open issues</td><td class="rank-bar num bar-w-10"><span class="bar-val">87 (+9 vs prev. 30d)</span></td></tr><tr><td>Contributors</td><td class="rank-bar num bar-w-10"><span class="bar-val">146 (+6 vs prev. 30d)</span></td></tr><tr><td>Test coverage</td><td class="rank-bar num bar-w-10"><span class="bar-val">92.4% (+0.8% vs prev. 30d)</span></td></tr><tr><td>Deploy frequency</td><td class="rank-bar num bar-w-0"><span class="bar-val">5.2/day (+0.4% vs prev. 30d)</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（2）Recent commits</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>feat(cart): add optimistic quantity updates with rollback (Ada Lovelace)</td><td>+214 -38</td></tr><tr><td>fix(checkout): guard against undefined shipping zone (Grace Hopper)</td><td>+42 -17</td></tr><tr><td>refactor(tokens): migrate spacing scale to Fluent 2 (Alan Turing)</td><td>+331 -290</td></tr><tr><td>perf(search): debounce catalog query and cache facets (Katherine Johnson)</td><td>+88 -24</td></tr><tr><td>docs: document webhook retry semantics (Linus Pauling)</td><td>+120 -4</td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（3）Pull requests</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>Open</td><td class="rank-bar num bar-w-100"><span class="bar-val">23</span></td></tr><tr><td>Awaiting review</td><td class="rank-bar num bar-w-20"><span class="bar-val">5</span></td></tr><tr><td>#4821 Introduce edge caching for product detail pages</td><td class="rank-bar num bar-w-0"><span class="bar-val">In review (12 comments)</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（4）Issues</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>Open</td><td class="rank-bar num bar-w-0"><span class="bar-val">87</span></td></tr><tr><td>Closed this week</td><td class="rank-bar num bar-w-0"><span class="bar-val">12</span></td></tr></tbody></table></details>

讓我們從搜尋列開始。

點擊它，一條藍線會從中心掃開，進入的緩動（easing）與離開的緩動不同：它關閉的速度比開啟的速度快。這種不對稱性正是純粹的 Fluent 動態效果，出現在一個搜尋欄位上，還是在一個隨手生成的 clone 中。

將滑鼠懸停在工具列圖示上，圖示會變為精確的 Fluent 藍色，同時背後會填入微妙的灰色，且工具提示（tooltip）會淡入。

連捲動都很有特色。Fluent 會固定頂部列，並讓其下方的一切作為一個整體移動。

---

# Carbon × GitHub

在 v0 中開啟

![v0 以 Carbon 設計系統生成的 acme-corp/platform-api 示範儀表板，畫面顯示提交數、CI/CD 成功率等 v0 生成的佔位指標。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/4220a9093aaf53da.jpg)

<details class="chart-data"><summary>展開數據表（1）關鍵指標</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>- Commits (30d)</td><td class="rank-bar num bar-w-40"><span class="bar-val">486 (+12% vs last period)</span></td></tr><tr><td>- Open PRs</td><td class="rank-bar num bar-w-0"><span class="bar-val">27 (+4 vs last period)</span></td></tr><tr><td>- Open issues</td><td class="rank-bar num bar-w-10"><span class="bar-val">143 (-8 vs last period)</span></td></tr><tr><td>- Contributors</td><td class="rank-bar num bar-w-10"><span class="bar-val">92 (+3 vs last period)</span></td></tr><tr><td>- Stars (30d)</td><td class="rank-bar num bar-w-100"><span class="bar-val">1,204 (+18% vs last period)</span></td></tr><tr><td>- Avg CI time</td><td class="rank-bar num bar-w-0"><span class="bar-val">6m 42s (-31s vs last period)</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（2）近期提交</summary><table><thead><tr><th></th><th>hash</th><th>author</th><th>branch</th><th>time</th></tr></thead><tbody><tr><td>- fix(gateway): retry idempotent upstream calls on 503</td><td>a1f9c02</td><td>dnwong</td><td>main</td><td class="rank-bar num bar-w-100"><span class="bar-val">18m ago</span></td></tr><tr><td>- feat(auth): add rotating refresh tokens</td><td>7bd41e8</td><td>mariel</td><td>main</td><td class="rank-bar num bar-w-10"><span class="bar-val">1h ago</span></td></tr><tr><td>- chore(deps): bump edge-runtime to 4.2.1</td><td>3c02aa1</td><td>k-lee</td><td>main</td><td class="rank-bar num bar-w-20"><span class="bar-val">3h ago</span></td></tr><tr><td>- refactor(cache): unify TTL config across services</td><td>f88be40</td><td>sofia.r</td><td>main</td><td class="rank-bar num bar-w-30"><span class="bar-val">5h ago</span></td></tr><tr><td>- test(gateway): cover circuit-breaker edge cases</td><td>d21c7f5</td><td>dnwong</td><td>main</td><td class="rank-bar num bar-w-40"><span class="bar-val">8h ago</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（3）CI / CD 概覽</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>- Success rate</td><td class="rank-bar num bar-w-100"><span class="bar-val">98.2%</span></td></tr><tr><td>- Avg duration</td><td class="rank-bar num bar-w-10"><span class="bar-val">6m 42s</span></td></tr><tr><td>- Deploys (7d)</td><td class="rank-bar num bar-w-10"><span class="bar-val">14</span></td></tr><tr><td>- Production deploy progress</td><td class="rank-bar num bar-w-70"><span class="bar-val">68%</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（4）CI / CD 運行歷史</summary><table><thead><tr><th></th><th>branch</th><th>hash</th><th>duration</th><th>time</th><th>status</th></tr></thead><tbody><tr><td>- CI / build + test</td><td>main</td><td>a1f9c02</td><td class="rank-bar num bar-w-80"><span class="bar-val">6m 12s</span></td><td class="rank-bar num bar-w-100"><span class="bar-val">18m ago</span></td><td>Passed</td></tr><tr><td>- Deploy / production</td><td>main</td><td>a1f9c02</td><td class="rank-bar num bar-w-30"><span class="bar-val">2m 40s</span></td><td class="rank-bar num bar-w-0"><span class="bar-val">now</span></td><td>Running</td></tr><tr><td>- CI / e2e</td><td>feat/graphql-streaming</td><td>7bd41e8</td><td class="rank-bar num bar-w-100"><span class="bar-val">8m 03s</span></td><td class="rank-bar num bar-w-10"><span class="bar-val">1h ago</span></td><td>Failed</td></tr><tr><td>- CI / lint</td><td>chore/rate-limiter</td><td>3c02aa1</td><td class="rank-bar num bar-w-10"><span class="bar-val">1m 28s</span></td><td class="rank-bar num bar-w-20"><span class="bar-val">3h ago</span></td><td>Passed</td></tr><tr><td>- Deploy / preview</td><td></td><td></td><td class="rank-bar num bar-w-0"><span class="bar-val"></span></td><td class="rank-bar num bar-w-0"><span class="bar-val"></span></td><td>Passed</td></tr></tbody></table></details>

你甚至不需要說出原因就能認出這是 IBM：排版、扁平的背景、精確的藍色，以及字體粗細在層級中遞減的方式。

![這張圖片展示了四種不同設計風格的「Watch」按鈕樣式。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/e90806b6cde913af.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">圖片中由左至右排列了四個長方形按鈕，每個按鈕內均包含文字「Watch」以及一個眼睛圖示。
1. 第一個按鈕：白色背景，藍色邊框，藍色文字與圖示。
2. 第二個按鈕：藍色背景，無邊框，白色文字與圖示。
3. 第三個按鈕：深藍色背景，雙層藍色邊框，白色文字與圖示。
4. 第四個按鈕：藍色背景，白色邊框，白色文字與圖示。</div></details>

按鈕具有四種不同的狀態：靜止、懸停、滑鼠按住時更深的藍色，以及邊緣帶有細白線的焦點（focus）狀態。懸停時永遠不會顯示那條線；只有焦點狀態才會。

![v0 以 Carbon 設計系統生成的示範儀表板另一視圖，畫面顯示 Commits、CI 平均時間等 v0 生成的佔位指標。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/864e98896cbcea68.jpg)

<details class="chart-data"><summary>展開數據表（1）頂部專案資訊</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>專案名稱</td><td class="rank-bar num bar-w-0"><span class="bar-val">acme-corp / platform-api</span></td></tr><tr><td>Stars</td><td class="rank-bar num bar-w-100"><span class="bar-val">12.4k</span></td></tr><tr><td>Forks</td><td class="rank-bar num bar-w-10"><span class="bar-val">1.8k</span></td></tr><tr><td>Watching</td><td class="rank-bar num bar-w-0"><span class="bar-val">342</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（2）關鍵績效指標 (KPIs)</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>Commits (30d)</td><td class="rank-bar num bar-w-40"><span class="bar-val">486 (+12% vs last period)</span></td></tr><tr><td>Open PRs</td><td class="rank-bar num bar-w-0"><span class="bar-val">27 (+4 vs last period)</span></td></tr><tr><td>Open issues</td><td class="rank-bar num bar-w-10"><span class="bar-val">143 (-8 vs last period)</span></td></tr><tr><td>Contributors</td><td class="rank-bar num bar-w-10"><span class="bar-val">92 (+3 vs last period)</span></td></tr><tr><td>Stars (30d)</td><td class="rank-bar num bar-w-100"><span class="bar-val">1,204 (+18% vs last period)</span></td></tr><tr><td>Avg CI time</td><td class="rank-bar num bar-w-0"><span class="bar-val">6m 42s (-31s vs last period)</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（3）Commit activity</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>本月提交總數</td><td>486</td></tr><tr><td>提交 1</td><td>fix(gateway): retry idempotent upstream calls on 503 (a1f9c02, dnwong, 18m ago)</td></tr><tr><td>提交 2</td><td>feat(auth): add rotating refresh tokens (7bd41e8, mariel, 1h ago)</td></tr><tr><td>提交 3</td><td>chore(deps): bump edge-runtime to 4.2.1 (3c02aa1, k-lee, 3h ago)</td></tr><tr><td>提交 4</td><td>refactor(cache): unify TTL config across services (188be40, sofia.r, 5h ago)</td></tr><tr><td>提交 5</td><td>test(gateway): cover circuit-breaker edge cases (d21c7f5, dnwong, 8h ago)</td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（4）CI / CD</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>Success rate</td><td>98.2%</td></tr><tr><td>Avg duration</td><td>6m 42s</td></tr><tr><td>Deploys (7d)</td><td>14</td></tr><tr><td>Production deploy 進度</td><td>68%</td></tr><tr><td>工作流 1</td><td>CI / build + test (Passed, 6m 12s, 18m ago)</td></tr><tr><td>工作流 2</td><td>Deploy / production (Running, 2m 40s, now)</td></tr><tr><td>工作流 3</td><td>CI / e2e (Failed, 8m 03s, 1h ago)</td></tr><tr><td>工作流 4</td><td>CI / lint (Passed)</td></tr></tbody></table></details>

深色模式的表現超乎預期。不僅僅是背景變黑。每個標籤（badge）都會重新對應到其深色模式的 token：代表「失敗」的紅色會從淺色模式的紅色切換為 Carbon 更深的紅色，綠色和藍色也是如此，每個顏色都會移動到 Carbon 為深色表面定義的值。整個調色盤會一起轉換，就像在真實系統中一樣。

---

# Polaris × GitHub

在 v0 中開啟

![此儀表板展示了 inventory-api 專案的即時開發狀態，包含 24.8k 顆星、18 個開放的 PR 以及 47 個開放議題，其中 Bug 類型的議題佔最多數（21 個）。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/a825d864234a991f.jpg)

<details class="chart-data"><summary>展開數據表（1）頂部指標</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>Stars</td><td class="rank-bar num bar-w-100"><span class="bar-val">24.8k (+312 this week)</span></td></tr><tr><td>Forks</td><td class="rank-bar num bar-w-10"><span class="bar-val">3,412 (+48 this week)</span></td></tr><tr><td>Open PRs</td><td class="rank-bar num bar-w-0"><span class="bar-val">18 (-4 vs last week)</span></td></tr><tr><td>Open issues</td><td class="rank-bar num bar-w-0"><span class="bar-val">47 (+9 this week)</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（2）開放拉取請求 (Open pull requests)</summary><table><thead><tr><th></th><th>作者</th><th>狀態</th><th>檢查</th><th>更新時間</th></tr></thead><tbody><tr><td>#2145 Add webhook retries with exponential backoff</td><td>@priya</td><td>Review</td><td>Checks passed</td><td class="rank-bar num bar-w-100"><span class="bar-val">10m</span></td></tr><tr><td>#2143 Migrate auth tokens to httpOnly cookies</td><td>@alex</td><td>Open</td><td>Checks failed</td><td class="rank-bar num bar-w-10"><span class="bar-val">1h</span></td></tr><tr><td>#2140 Introduce feature flags for pricing rollout</td><td>@diego</td><td>Draft</td><td>Running</td><td class="rank-bar num bar-w-40"><span class="bar-val">4h</span></td></tr><tr><td>#2138 Cache warehouse lookups in Redis</td><td>@mei</td><td>Open</td><td>Checks passed</td><td class="rank-bar num bar-w-60"><span class="bar-val">6h</span></td></tr><tr><td>#2131 Fix flaky integration test for exports</td><td>@sam</td><td>Review</td><td>Checks passed</td><td class="rank-bar num bar-w-10"><span class="bar-val">1d</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（3）開放議題 (Open issues)</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>Bug</td><td class="rank-bar num bar-w-100"><span class="bar-val">21</span></td></tr><tr><td>Enhancement</td><td class="rank-bar num bar-w-70"><span class="bar-val">14</span></td></tr><tr><td>Docs</td><td class="rank-bar num bar-w-40"><span class="bar-val">8</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（4）近期提交 (Recent commits)</summary><table><thead><tr><th></th><th>提交者</th><th>分支</th><th>雜湊</th><th>時間</th><th>驗證</th></tr></thead><tbody><tr><td>fix: prevent race condition in inventory sync worker</td><td>Alex Rivera</td><td>main</td><td>a1b2c3d</td><td class="rank-bar num bar-w-100"><span class="bar-val">12m ago</span></td><td>Verified</td></tr><tr><td>feat: add bulk export endpoint for warehouse reports</td><td>Priya Menon</td><td>main</td><td>e4f5g6h</td><td class="rank-bar num bar-w-10"><span class="bar-val">1h ago</span></td><td>Verified</td></tr><tr><td>refactor: extract pricing rules into dedicated module</td><td>Diego Santos</td><td>feat/pricing</td><td>i7j8k9l</td><td class="rank-bar num bar-w-30"><span class="bar-val">3h ago</span></td><td>Unverified</td></tr><tr><td>chore: bump drizzle-orm to 0.36 and regenerate types</td><td>Mei Chen</td><td>main</td><td>m0n1o2p</td><td class="rank-bar num bar-w-40"><span class="bar-val">5h ago</span></td><td>Verified</td></tr><tr><td>docs: document rate limits for the public API</td><td>Sam Okafor</td><td>docs/api</td><td>q3r4s5t</td><td class="rank-bar num bar-w-70"><span class="bar-val">8h ago</span></td><td>Verified</td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（5）CI/CD 管線</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>通過率</td><td class="rank-bar num bar-w-100"><span class="bar-val">96%</span></td></tr><tr><td>平均時間</td><td class="rank-bar num bar-w-0"><span class="bar-val">4m</span></td></tr><tr><td>CI lint + test</td><td class="rank-bar num bar-w-0"><span class="bar-val">3m 12s</span></td></tr></tbody></table></details>

![這是一張 GitHub 專案頁面的側邊導覽選單截圖，顯示了程式碼庫的各項管理功能。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/f0b76b199ccf67fa.png)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面為一個軟體開發平台的專案導覽選單，頂部顯示專案名稱為「octocat / inventory-api」。選單項目如下：
- Overview（目前選取狀態）
- Code：342
- Pull requests：18
- Issues：47
- Actions
- Insights
下方為「Community」區塊：
- Contributors
- Stargazers
- Settings（顯示為灰色不可選狀態）

該畫面展示了典型的版本控制專案管理介面，使用者可透過此選單切換至程式碼檢視、問題追蹤、自動化流程（Actions）及專案數據分析等功能頁面。</div></details>

這絕對是 Polaris，戴著 GitHub 帽子的 Shopify 管理後台：緊湊的導覽清單，每行末尾都塞入一個計數標籤，以及頁面標題堆疊了標題、綠色狀態膠囊（pill）和單行標語，這正是每個 Polaris 頁面的開啟方式。看看那些行上的計數標籤：完全圓角，這是 Polaris 在整個 Shopify 管理後台中使用的精確膠囊半徑。

觀察核取方塊勾選時的樣子。那個小小的勾選動畫直接來自真實的元件。

表格值得仔細一看。在沒有選取任何項目時，它顯示欄位名稱：Pull request、Author、Status、Checks、Updated。勾選全選核取方塊，同一個標題列就會變成顯示「5 selected」的批次操作列。這種切換是特定的 Polaris 行為，之所以會出現，是因為真實的元件就是這樣運作的。

---

# Cloudscape × GitHub

在 v0 中開啟

![這是一張展示軟體開發專案管理平台的儲存庫概覽頁面截圖。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/62fb6ab70fbc47b5.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面為一個軟體開發專案管理平台的介面，顯示「octoverse / web-platform」儲存庫的概覽資訊。

頁面頂部導覽列顯示：
- 專案名稱：octoverse / web-platform
- 使用者：Jordan Rivera
- 狀態提示：main is up to date with production. Last deploy succeeded 12 minutes ago.

儲存庫概覽資訊（Repository overview）：
- 專案描述：A high-performance web application framework.
- 統計數據：
    - Stars: 24,318 (+312 this week)
    - Forks: 3,942 (+58 this week)
    - Watchers: 1,204 (+11 this week)
    - Open issues: 187 (+9 today)
    - Open PRs: 42 (12 awaiting review)
    - Contributors: 628 (+7 this month)

近期提交紀錄（Recent commits）：
- fix: guard against null session in middleware (dpatel committed 12m ago) | Branch: main | SHA: a1b2c3d | Checks: Passing
- feat: add streaming responses to chat route (mchen committed 48m ago) | Branch: main | SHA: e4f5g6h | Checks: Passing
- refactor: extract token utils into shared pkg (arivera committed 1h ago) | Branch: feat/tokens | SHA: i7j8k9l | Checks: Running
- chore: bump next to 16.0.1 (lkim committed 3h ago) | Branch: main | SHA: m1n2o3p | Checks: Passing
- test: cover edge cases in rate limiter (sokafor committed 5h ago) | Branch: fix/limiter | SHA: q4r5s6t | Checks: Failed
- docs: update deployment guide for v16 (dpatel committed 6h ago) | Branch: main | SHA: u7v8w9x | Checks: Passing

左側選單包含 Overview、Code、Commits、Branches、Collaboration（Pull requests 42、Issues 187、Discussions）、Automation（Actions、Environments、Insights）及 Settings。</div></details>

直接來自 AWS 主控台：經典的 Cloudscape 可摺疊側邊欄分組為各個區塊，帶有摺疊箭頭，且麵包屑（breadcrumb）就放在頂部列下方，這正是每個主控台頁面的佈局方式。從這裡開始，是一些細微之處讓它顯得更加真實。先從通知區域開始。

![這是一個顯示部署狀態的通知橫幅，告知使用者目前分支已與生產環境同步。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/821b43ecbe8de7c8.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面中為一個藍色的通知橫幅（Toast notification），內容文字為：「main is up to date with production. Last deploy succeeded 12 minutes ago.」（main 分支已與生產環境同步。上次部署成功於 12 分鐘前。）橫幅右側設有一個「x」符號，用於關閉該通知。</div></details>

這是 Cloudscape 的 flashbar：帶有資訊圖示和關閉 X 的藍色資訊列，顯示「main is up to date with production」。接著調整視窗大小。

![這是一張顯示 GitHub 儲存庫「octoverse/web-platform」概覽頁面的截圖，展示了專案的各項數據統計。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/adaedcb800621c0b.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面顯示一個名為「octoverse / web-platform」的 GitHub 儲存庫概覽頁面。
頁面頂部藍色通知條顯示：「main is up to date with production. Last deploy succeeded 12 minutes ago.」
儲存庫描述為：「A high-performance web application framework.」
頁面下方列出了各項統計數據：
- Stars: 24,318 (+312 this week)
- Forks: 3,942 (+58 this week)
- Watchers: 1,204 (+11 this week)
- Open issues: 187 (+9 today)
- Open PRs: 42 (12 awaiting review)
- Contributors: 628 (+7 this month)
下方還有「Recent commits (6)」區塊，包含 Commit 與 Branch 欄位。</div></details>

這是經典的 Cloudscape 行動裝置操作。在手機寬度下，大多數系統會將麵包屑摺疊成選單或直接捨棄。Cloudscape 則將其固定在頂部列下方，這與 AWS 主控台在小螢幕上的呈現方式完全一致。

---

# Primer × GitHub

在 v0 中開啟

![這是一張 GitHub 儲存庫頁面的截圖，展示了 primer/react 專案的概覽與近期活動。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/43933a0d58cc793d.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面顯示 GitHub 平台上 primer/react 儲存庫的概覽頁面。
頁面頂部導覽列包含搜尋框、通知圖示與使用者頭像。
專案名稱為「primer / react」，描述為「An implementation of GitHub's Primer Design System using React」。
上方統計數據：Watch 184、Fork 612、Star 3.2k。
下方標籤頁包含：Overview、Code、Issues (87)、Pull requests (23)、Actions、Settings。
數據概覽區塊：
- Stars: 3,241 (+128 this week)
- Forks: 612 (+9 this week)
- Watchers: 184 (+3 this week)
- Open issues: 87 (12 opened today)
- Open PRs: 23 (5 need review)
- Releases: 142 (v36.4.0 latest)

近期提交紀錄 (Recent commits)：
- fix(Button): correct disabled focus ring token (octocat, 32 minutes ago, a1b2c3d)
- feat(DataTable): add sticky header support (monalisa, 2 hours ago, e4f5g6h)
- docs: update theming guide for primitives v9 (hubot, 5 hours ago, 17j8k9l)
- refactor(Overlay): migrate to useAnchoredPosition (tender, Yesterday, m1n2o3p)
- test(NavList): cover keyboard navigation edge cases (broccolini, Yesterday, q4r5s6t)

下方區塊：
- Pull requests: Add SelectPanel multi-select variant (#42 by monalisa, opened 3h ago)
- Open issues: ActionMenu closes unexpectedly on nested overlay (#1284 by tender, 1h ago, bug)</div></details>

最後補上一塊拼圖：我掛載了 GitHub 自己的設計系統 Primer。如果 GitHub 打造了 GitHub 會怎樣？你會得到 GitHub。一切都來自真實的元件：精確的背景顏色、相同的啟用狀態、調色盤、捲動效果。這是這組測試中最不令人驚訝的結果，但也許是最清晰的，因為這是我們所有人都已經熟記的目標。

![這是一張展示 GitHub 專案導覽列介面的截圖。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/380a4da5870816e1.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面為一個深色模式的垂直導覽列，列出了 GitHub 專案頁面的各項功能選項，包含對應的圖示與文字：
- Overview
- Code
- Issues (87)
- Pull requests (23)
- Actions
- Deployments
- Security (4)
- Insights
- Wiki
- Settings

該介面為典型的軟體開發協作平台專案管理選單，用於切換程式碼庫、問題追蹤、合併請求及專案設定等功能。</div></details>

![顯示專案互動數據的介面，包含 Watch、Fork 與 Star 的數量統計。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/cb296383a40344b6.png)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面顯示三個並排的互動數據按鈕，由左至右分別為：
- Watch：184
- Fork：612
- Star：3.2k

這些按鈕呈現了該專案在平台上的追蹤、分支與星標數量，其中「Star」按鈕以綠色高亮顯示。</div></details>

---

# 沒有設計系統 × GitHub

在 v0 中開啟

![未套用任何設計系統時，v0 憑既有記憶生成的 acme/webapp 示範儀表板；畫面數據皆為 v0 生成的佔位內容，正文指出此版本與前五個系統相比，細節上明顯崩解。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/13f7331f08464fbe.jpg)

<details class="chart-data"><summary>展開數據表（1）專案基本資訊</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>專案名稱：acme/webapp</td><td></td></tr><tr><td>語言比例：TypeScript = 68.2%</td><td>CSS 14.5% · JavaScript 9.8% · MDX 4.9% · Other 2.6%</td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（2）關鍵指標</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>Commits (30d)</td><td class="rank-bar num bar-w-100"><span class="bar-val">1,284 (+12.4%)</span></td></tr><tr><td>Open PRs</td><td class="rank-bar num bar-w-0"><span class="bar-val">24 (+3)</span></td></tr><tr><td>Open Issues</td><td class="rank-bar num bar-w-10"><span class="bar-val">128 (-8)</span></td></tr><tr><td>Contributors</td><td class="rank-bar num bar-w-10"><span class="bar-val">92 (+5)</span></td></tr><tr><td>CI Pass Rate</td><td class="rank-bar num bar-w-10"><span class="bar-val">96.2% (+1.1%)</span></td></tr><tr><td>Avg. Merge Time</td><td class="rank-bar num bar-w-0"><span class="bar-val">6.4h (-42m)</span></td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（3）最近提交</summary><table><thead><tr><th></th><th>作者</th><th>時間</th><th>雜湊值</th><th>變更</th></tr></thead><tbody><tr><td>fix(auth): refresh session tokens before expiry window</td><td>Dana Whitfield</td><td class="rank-bar num bar-w-30"><span class="bar-val">14 minutes ago</span></td><td class="rank-bar num bar-w-0"><span class="bar-val">a1f9c3d</span></td><td>+42 -11</td></tr><tr><td>feat(ui): add dense table variant to data grid</td><td>Marco Ruiz</td><td class="rank-bar num bar-w-100"><span class="bar-val">48 minutes ago</span></td><td class="rank-bar num bar-w-80"><span class="bar-val">7b2e0aa</span></td><td>+210 -36</td></tr><tr><td>refactor(api): extract pagination into shared hook</td><td>Priya Nair</td><td class="rank-bar num bar-w-0"><span class="bar-val">2 hours ago</span></td><td class="rank-bar num bar-w-0"><span class="bar-val">c4d81f2</span></td><td>+88 -94</td></tr><tr><td>chore(deps): bump next to 16.2.6</td><td>Sam Okoye</td><td class="rank-bar num bar-w-10"><span class="bar-val">3 hours ago</span></td><td class="rank-bar num bar-w-100"><span class="bar-val">9e0a6b7</span></td><td>+4 -4</td></tr><tr><td>docs: document theming tokens and dark palette</td><td>Lena Fischer</td><td class="rank-bar num bar-w-10"><span class="bar-val">5 hours ago</span></td><td class="rank-bar num bar-w-20"><span class="bar-val">2fa77c1</span></td><td>+156 -2</td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（4）CI/CD 流水線</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>狀態：3/5 green</td><td></td></tr><tr><td>CI - lint + typecheck</td><td>Success (2m 41s)</td></tr><tr><td>CI - unit tests</td><td>Success (5m 08s)</td></tr><tr><td>E2E - playwright</td><td>Failed (8m 52s)</td></tr><tr><td>Deploy - preview</td><td>Running (1m 12s)</td></tr><tr><td>Deploy - production</td><td>Success (3m 30s)</td></tr></tbody></table></details><details class="chart-data"><summary>展開數據表（5）熱門貢獻者</summary><table><thead><tr><th>項目</th><th>數值</th></tr></thead><tbody><tr><td>Marco Ruiz</td><td>1,842 commits (@marcor)</td></tr></tbody></table></details>

這是同一個 prompt 但沒有掛載任何設計系統的結果。模型盡其所能地憑記憶模仿 GitHub，它抓到了重點。然而，把它與其他五個放在一起比較，細節就會分崩離析：無法統一的調色盤、三四種不屬於任何色階的綠色、用來替代 merge 等功能的虛構圖示、一個隨意旋轉的 spinner。

![一張展示 CI/CD 管線執行狀態的儀表板介面截圖。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/3796575b74373ae9.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">該畫面顯示了一個名為「CI / CD pipelines」的監控介面，目前狀態為「3/5 green」（5 個項目中有 3 個成功）。詳細列表如下：

1. **CI · lint + typecheck**：狀態為「Success」，分支為「main」，提交雜湊值為「a1f9c3d」，時間為「12m ago」，耗時「2m 41s」。
2. **CI · unit tests**：狀態為「Success」，分支為「main」，提交雜湊值為「a1f9c3d」，時間為「12m ago」，耗時「5m 08s」。
3. **E2E · playwright**：狀態為「Failed」，分支為「fix/safari-vrt」，提交雜湊值為「b8c3390」，時間為「1h ago」，耗時「8m 52s」。
4. **Deploy · preview**：狀態為「Running」，分支為「feat/checkout-actions」，提交雜湊值為「7b2e0aa」，時間為「just now」，耗時「1m 12s」。
5. **Deploy · production**：狀態為「Success」，分支為「main」，提交雜湊值為「9e0a6b7」，時間為「3h ago」，耗時「3m 30s」。

介面右上角提供「View all」連結。該 UI 清晰呈現了不同開發階段（CI、E2E、Deploy）的自動化流程執行結果、對應的分支與提交紀錄，以及當前的執行耗時。</div></details>

這些都沒有壞掉。這就是憑記憶建構與從系統建構之間的上限差異。

---

# 試用看看

如果你的團隊有設計系統，今天就把它帶進 v0 吧。

查看 Design Systems 2.0 文件了解運作方式，然後從 v0.app/design-systems 開始。

---

作者：@EstebanSuarez

## 標籤

功能更新, 新產品, Web, React, Vercel, v0