請先閱讀此技能內的 README.md 檔案——其中包含：
- Vebidor 是什麼（一個 V 語言的 W3C WebDriver + WebDriver-BiDi 用戶端）以及不是什麼（不是應用程式、不是網站、原始碼中沒有標誌——每個視覺元素都是推定的品牌識別，並已標記）。
- 內容基礎——語調（技術、成就導向、比較優先）、大小寫規則，以及具有關鍵資訊承載力的表情符號詞彙（✅ ⚠️ 🐛 ✨ 🎉 🏆 ⚡ 🚀 📦 📖 🎯 🌐 🎭 📱）。表情符號是品牌的一部分；請在文件與行銷介面中保留它們。
- 視覺基礎——色盤、字型、間距、動畫、表面、卡片結構。
- 圖示法——狀態用表情符號；UI 框架用 Lucide（已標記為可替代）；瀏覽器標誌用單色 SVG 字形。
- 索引——各項資源的位置。
然後探索其他檔案：
colors_and_type.css——所有設計代號（--vb-blue-500、--slate-950、--code-keyword、--font-mono、--space-*、--radius-*、--shadow-*、--motion-*）以及基礎字型樣式和.chip類別。將此<link rel="stylesheet">放入任何新檔案中——這是基礎。preview/——19 張獨立的設計系統卡片（色彩、字型、間距、元件、品牌），你可從中複製標記。assets/——預設標誌（已標記）和瀏覽器字形。ui_kits/docs/——高擬真度的 React 文件網站重製（TopNav、Sidebar、TocPanel、DocsPage、CodeBlock、Callout、ComparisonTable、ApiSignature）。元件範圍：每個檔案會將其匯出附加到window，以便其他<script type="text/babel">檔案使用。若要擴展，請複製元件，在index.html中加入<script type="text/babel" src="…">標籤，並遵循相同的window.X = X模式。ui_kits/marketing/——登陸頁面重製（MarketingNav、Hero、FeatureGrid、BrowserMatrix、PhasesTimeline、MarketingFooter）。採用相同的元件範圍模式。fonts/README.md——透過 Google Fonts CDN 載入的字型（Geist + JetBrains Mono）。字型替換已標記；如果使用者有不同品牌字型，請更換。
當你被呼叫時
如果使用者在沒有其他指引的情況下呼叫此技能，請詢問他們想要建立什麼（文件頁面？登陸區塊？CLI 輸出模擬？發行說明圖形？比較表格？終端機螢幕截圖？）。詢問他們想要哪個介面（文件、行銷、終端機）以及想要突顯 API 的哪個部分。然後像一位專家設計師一樣輸出 HTML 成品——或者如果他們正在處理真實儲存庫，則輸出實際的程式碼。
建立視覺成品時（投影片、模擬、臨時原型）
- 從
assets/複製你需要的資源，以及你想借鑒標記的任何預覽卡片。 - 在當前專案中建立一個靜態 HTML 檔案。連結
colors_and_type.css（使用相對路徑）。 - 使用這些基礎：
--vb-blue-500用於強調色，--code-bg/--code-fg與代號類別用於程式碼，.chip chip--success等用於狀態，--font-sans+--font-mono。 - 在品牌使用表情符號的地方保留它們。✅ ⚠️ ✨ 🏆 是具有關鍵資訊承載力的，而非裝飾。
- 不要發明漸層或左側圓角卡片。請使用平面表面、邊框和一個層級的高度。
處理實際程式碼時
將此技能視為品牌參考。從 colors_and_type.css 中提取數值（十六進位色碼、字型堆疊、圓角半徑、動畫時間），而不是從螢幕截圖中近似。ui_kits/ 中的元件模式僅是視覺重製，而非實際程式碼——請移植樣式，而非 JSX 的接線方式。
需要標記的注意事項
如果使用者要求你提供真實的標誌、真實的字型、真實的圖示——請暫停並確認。這裡的一切都是從源儲存庫的文字說明（該儲存庫沒有任何視覺識別）推斷出來的。請反對將其正式化。