name: brand-color-extractor description: 🎨 品牌配色提取專家 - 當需要為 VS Code 主題提取品牌官方配色時使用此 skill。從官方網站提取品牌配色並生成 VS Code 主題色彩方案 (project)

品牌配色提取專家

從官方網站提取品牌配色並生成 VS Code 主題色彩方案。

使用時機

當需要為 VS Code 主題提取品牌官方配色時使用此 skill。

工作流程

1. 取得品牌配色

使用 WebFetch 訪問品牌官網或設計系統頁面，提取以下資訊：

優先來源順序：

官方 Brand Guidelines / Design System 頁面
官網首頁 CSS 變數
官方 Press Kit / Media Kit
產品介面截圖分析

需要提取的色彩：

Primary Color（主色）
Secondary Color（輔助色）
Accent Color（強調色）
Background Colors（背景色系）
Text Colors（文字色系）
Border/Divider Colors（邊框色）
Success/Warning/Error Colors（狀態色）

2. 色彩分析與轉換

淺色主題原則：

編輯器背景：不要純白 #FFFFFF，使用品牌淺色背景（如 #F9FAFB、#FAF9F7）
側邊欄背景：比編輯器稍深 2-3 階
對比度：文字與背景對比度 ≥ 4.5:1（WCAG AA）
強調色：使用品牌主色

深色主題原則：

編輯器背景：#1A-2A 範圍內的深色
側邊欄背景：比編輯器稍深或稍淺
文字：#D0-F0 範圍的淺色
強調色：品牌主色的亮色變體

VS Code 主題結構

1. UI 色彩 (`colors`)

編輯器介面元素的顏色，必須設定以下所有類別：

編輯器核心

屬性	說明
`editor.background`	編輯器背景
`editor.foreground`	編輯器前景（預設文字色）
`editor.lineHighlightBackground`	當前行高亮背景
`editor.selectionBackground`	選取文字背景
`editor.selectionHighlightBackground`	相同選取項高亮
`editor.wordHighlightBackground`	讀取存取時單字高亮
`editor.wordHighlightStrongBackground`	寫入存取時單字高亮
`editor.findMatchBackground`	搜尋匹配項背景
`editor.findMatchHighlightBackground`	其他搜尋匹配項
`editor.hoverHighlightBackground`	懸停高亮
`editor.rangeHighlightBackground`	範圍高亮（如快速開啟）
`editorCursor.foreground`	游標顏色
`editorWhitespace.foreground`	空白字元顏色
`editorIndentGuide.background`	縮排參考線
`editorIndentGuide.activeBackground`	作用中縮排線
`editorRuler.foreground`	尺規顏色

行號與裝訂線

屬性	說明
`editorLineNumber.foreground`	行號顏色
`editorLineNumber.activeForeground`	當前行號顏色
`editorGutter.background`	裝訂線背景
`editorGutter.modifiedBackground`	已修改行標記
`editorGutter.addedBackground`	新增行標記
`editorGutter.deletedBackground`	刪除行標記

括號與配對

屬性	說明
`editorBracketMatch.background`	配對括號背景
`editorBracketMatch.border`	配對括號邊框
`editorBracketHighlight.foreground1`	括號配對色 1
`editorBracketHighlight.foreground2`	括號配對色 2
`editorBracketHighlight.foreground3`	括號配對色 3
`editorBracketHighlight.foreground4`	括號配對色 4
`editorBracketHighlight.foreground5`	括號配對色 5
`editorBracketHighlight.foreground6`	括號配對色 6

錯誤與警告

屬性	說明
`editorError.foreground`	錯誤波浪線
`editorWarning.foreground`	警告波浪線
`editorInfo.foreground`	資訊波浪線
`editorHint.foreground`	提示波浪線

未使用程式碼

屬性	說明	建議值
`editorUnnecessaryCode.opacity`	未使用程式碼透明度	`#00000077`
`editorUnnecessaryCode.border`	未使用程式碼邊框	`#00000000`

活動欄 (Activity Bar)

屬性	說明
`activityBar.background`	活動欄背景
`activityBar.foreground`	活動欄前景（選中圖示）
`activityBar.inactiveForeground`	未選中圖示
`activityBar.border`	活動欄邊框
`activityBarBadge.background`	徽章背景
`activityBarBadge.foreground`	徽章文字

側邊欄 (Side Bar)

屬性	說明
`sideBar.background`	側邊欄背景
`sideBar.foreground`	側邊欄前景
`sideBar.border`	側邊欄邊框
`sideBarTitle.foreground`	側邊欄標題
`sideBarSectionHeader.background`	區段標題背景
`sideBarSectionHeader.foreground`	區段標題前景
`sideBarSectionHeader.border`	區段標題邊框

標題欄 (Title Bar)

屬性	說明
`titleBar.activeBackground`	作用中標題背景
`titleBar.activeForeground`	作用中標題前景
`titleBar.inactiveBackground`	非作用中背景
`titleBar.inactiveForeground`	非作用中前景
`titleBar.border`	標題欄邊框

狀態欄 (Status Bar)

屬性	說明
`statusBar.background`	狀態欄背景
`statusBar.foreground`	狀態欄前景
`statusBar.border`	狀態欄邊框
`statusBar.debuggingBackground`	除錯中背景
`statusBar.debuggingForeground`	除錯中前景
`statusBar.noFolderBackground`	無資料夾背景
`statusBar.noFolderForeground`	無資料夾前景
`statusBarItem.hoverBackground`	懸停背景
`statusBarItem.activeBackground`	點擊背景
`statusBarItem.prominentBackground`	醒目項目背景
`statusBarItem.prominentHoverBackground`	醒目項目懸停
`statusBarItem.remoteBackground`	遠端連線背景
`statusBarItem.remoteForeground`	遠端連線前景

標籤 (Tabs)

屬性	說明
`tab.activeBackground`	作用中標籤背景
`tab.activeForeground`	作用中標籤前景
`tab.inactiveBackground`	非作用中標籤背景
`tab.inactiveForeground`	非作用中標籤前景
`tab.border`	標籤邊框
`tab.activeBorder`	作用中標籤邊框
`tab.activeBorderTop`	作用中標籤上邊框
`tab.unfocusedActiveBackground`	非焦點作用中背景
`tab.unfocusedActiveForeground`	非焦點作用中前景
`tab.hoverBackground`	懸停背景
`tab.hoverForeground`	懸停前景

編輯器群組與標籤列

屬性	說明
`editorGroup.border`	編輯器群組邊框
`editorGroup.dropBackground`	拖放背景
`editorGroupHeader.tabsBackground`	標籤列背景
`editorGroupHeader.tabsBorder`	標籤列邊框
`editorGroupHeader.noTabsBackground`	無標籤時背景

面板 (Panel)

屬性	說明
`panel.background`	面板背景
`panel.border`	面板邊框
`panelTitle.activeBorder`	作用中標題邊框
`panelTitle.activeForeground`	作用中標題前景
`panelTitle.inactiveForeground`	非作用中標題前景

終端機 (Terminal)

屬性	說明
`terminal.background`	終端機背景
`terminal.foreground`	終端機前景
`terminal.ansiBlack`	ANSI 黑
`terminal.ansiRed`	ANSI 紅
`terminal.ansiGreen`	ANSI 綠
`terminal.ansiYellow`	ANSI 黃
`terminal.ansiBlue`	ANSI 藍
`terminal.ansiMagenta`	ANSI 洋紅
`terminal.ansiCyan`	ANSI 青
`terminal.ansiWhite`	ANSI 白
`terminal.ansiBrightBlack`	ANSI 亮黑
`terminal.ansiBrightRed`	ANSI 亮紅
`terminal.ansiBrightGreen`	ANSI 亮綠
`terminal.ansiBrightYellow`	ANSI 亮黃
`terminal.ansiBrightBlue`	ANSI 亮藍
`terminal.ansiBrightMagenta`	ANSI 亮洋紅
`terminal.ansiBrightCyan`	ANSI 亮青
`terminal.ansiBrightWhite`	ANSI 亮白
`terminalCursor.foreground`	終端機游標
`terminalCursor.background`	終端機游標背景

輸入框與下拉選單

屬性	說明
`input.background`	輸入框背景
`input.foreground`	輸入框前景
`input.border`	輸入框邊框
`input.placeholderForeground`	佔位文字
`inputOption.activeBackground`	選項作用中背景
`inputOption.activeBorder`	選項作用中邊框
`inputValidation.errorBackground`	驗證錯誤背景
`inputValidation.errorBorder`	驗證錯誤邊框
`inputValidation.warningBackground`	驗證警告背景
`inputValidation.warningBorder`	驗證警告邊框
`inputValidation.infoBackground`	驗證資訊背景
`inputValidation.infoBorder`	驗證資訊邊框
`dropdown.background`	下拉選單背景
`dropdown.foreground`	下拉選單前景
`dropdown.border`	下拉選單邊框

按鈕

屬性	說明
`button.background`	按鈕背景
`button.foreground`	按鈕前景
`button.hoverBackground`	按鈕懸停背景
`button.secondaryBackground`	次要按鈕背景
`button.secondaryForeground`	次要按鈕前景
`button.secondaryHoverBackground`	次要按鈕懸停

列表與樹狀圖

屬性	說明
`list.activeSelectionBackground`	作用中選取背景
`list.activeSelectionForeground`	作用中選取前景
`list.inactiveSelectionBackground`	非作用中選取背景
`list.inactiveSelectionForeground`	非作用中選取前景
`list.hoverBackground`	懸停背景
`list.hoverForeground`	懸停前景
`list.focusBackground`	焦點背景
`list.focusForeground`	焦點前景
`list.highlightForeground`	搜尋匹配高亮
`list.dropBackground`	拖放背景
`tree.indentGuidesStroke`	樹狀圖縮排線

捲軸

屬性	說明
`scrollbar.shadow`	捲軸陰影
`scrollbarSlider.background`	滑塊背景
`scrollbarSlider.hoverBackground`	滑塊懸停
`scrollbarSlider.activeBackground`	滑塊作用中

迷你地圖 (Minimap)

屬性	說明
`minimap.findMatchHighlight`	搜尋匹配高亮
`minimap.selectionHighlight`	選取高亮
`minimap.errorHighlight`	錯誤高亮
`minimap.warningHighlight`	警告高亮
`minimapSlider.background`	滑塊背景
`minimapSlider.hoverBackground`	滑塊懸停
`minimapSlider.activeBackground`	滑塊作用中
`minimapGutter.addedBackground`	新增標記
`minimapGutter.modifiedBackground`	修改標記
`minimapGutter.deletedBackground`	刪除標記

麵包屑 (Breadcrumb)

屬性	說明
`breadcrumb.background`	麵包屑背景
`breadcrumb.foreground`	麵包屑前景
`breadcrumb.focusForeground`	焦點前景
`breadcrumb.activeSelectionForeground`	選取前景
`breadcrumbPicker.background`	選擇器背景

Git 裝飾

屬性	說明
`gitDecoration.addedResourceForeground`	新增檔案
`gitDecoration.modifiedResourceForeground`	修改檔案
`gitDecoration.deletedResourceForeground`	刪除檔案
`gitDecoration.untrackedResourceForeground`	未追蹤檔案
`gitDecoration.ignoredResourceForeground`	忽略檔案
`gitDecoration.conflictingResourceForeground`	衝突檔案
`gitDecoration.submoduleResourceForeground`	子模組
`gitDecoration.stageModifiedResourceForeground`	暫存修改
`gitDecoration.stageDeletedResourceForeground`	暫存刪除

Diff 編輯器

屬性	說明
`diffEditor.insertedTextBackground`	新增文字背景
`diffEditor.removedTextBackground`	刪除文字背景
`diffEditor.insertedLineBackground`	新增行背景
`diffEditor.removedLineBackground`	刪除行背景
`diffEditor.diagonalFill`	對角線填充

合併編輯器

屬性	說明
`merge.currentHeaderBackground`	當前分支標題背景
`merge.currentContentBackground`	當前分支內容背景
`merge.incomingHeaderBackground`	傳入分支標題背景
`merge.incomingContentBackground`	傳入分支內容背景
`merge.border`	合併邊框
`merge.commonHeaderBackground`	共同祖先標題背景
`merge.commonContentBackground`	共同祖先內容背景

通知

屬性	說明
`notificationCenter.border`	通知中心邊框
`notificationCenterHeader.background`	通知中心標題背景
`notificationCenterHeader.foreground`	通知中心標題前景
`notifications.background`	通知背景
`notifications.foreground`	通知前景
`notifications.border`	通知邊框
`notificationLink.foreground`	通知連結
`notificationsErrorIcon.foreground`	錯誤圖示
`notificationsWarningIcon.foreground`	警告圖示
`notificationsInfoIcon.foreground`	資訊圖示

徽章

屬性	說明
`badge.background`	徽章背景
`badge.foreground`	徽章前景

進度條

屬性	說明
`progressBar.background`	進度條背景

選取器與命令面板

屬性	說明
`pickerGroup.border`	群組邊框
`pickerGroup.foreground`	群組前景
`quickInput.background`	快速輸入背景
`quickInput.foreground`	快速輸入前景
`quickInputList.focusBackground`	焦點背景
`quickInputTitle.background`	標題背景

編輯器小工具

屬性	說明
`editorWidget.background`	小工具背景
`editorWidget.foreground`	小工具前景
`editorWidget.border`	小工具邊框
`editorSuggestWidget.background`	建議小工具背景
`editorSuggestWidget.border`	建議小工具邊框
`editorSuggestWidget.foreground`	建議小工具前景
`editorSuggestWidget.selectedBackground`	選取背景
`editorSuggestWidget.highlightForeground`	匹配高亮
`editorHoverWidget.background`	懸停小工具背景
`editorHoverWidget.border`	懸停小工具邊框
`editorHoverWidget.foreground`	懸停小工具前景

Peek 檢視

屬性	說明
`peekView.border`	Peek 邊框
`peekViewEditor.background`	Peek 編輯器背景
`peekViewEditor.matchHighlightBackground`	匹配高亮背景
`peekViewResult.background`	結果背景
`peekViewResult.fileForeground`	檔案前景
`peekViewResult.lineForeground`	行前景
`peekViewResult.matchHighlightBackground`	匹配高亮
`peekViewResult.selectionBackground`	選取背景
`peekViewResult.selectionForeground`	選取前景
`peekViewTitle.background`	標題背景
`peekViewTitleDescription.foreground`	標題描述前景
`peekViewTitleLabel.foreground`	標題標籤前景

焦點與邊框

屬性	說明
`focusBorder`	焦點邊框（全域）
`contrastBorder`	對比邊框
`contrastActiveBorder`	作用中對比邊框
`widget.shadow`	小工具陰影
`selection.background`	選取背景（全域）

歡迎頁面

屬性	說明
`welcomePage.background`	歡迎頁背景
`welcomePage.buttonBackground`	按鈕背景
`welcomePage.buttonHoverBackground`	按鈕懸停
`walkThrough.embeddedEditorBackground`	嵌入編輯器背景

設定編輯器

屬性	說明
`settings.headerForeground`	標題前景
`settings.modifiedItemIndicator`	已修改指示
`settings.dropdownBackground`	下拉背景
`settings.dropdownForeground`	下拉前景
`settings.dropdownBorder`	下拉邊框
`settings.checkboxBackground`	核取方塊背景
`settings.checkboxForeground`	核取方塊前景
`settings.checkboxBorder`	核取方塊邊框
`settings.textInputBackground`	文字輸入背景
`settings.textInputForeground`	文字輸入前景
`settings.textInputBorder`	文字輸入邊框
`settings.numberInputBackground`	數字輸入背景
`settings.numberInputForeground`	數字輸入前景
`settings.numberInputBorder`	數字輸入邊框

除錯

屬性	說明
`debugToolBar.background`	除錯工具列背景
`debugToolBar.border`	除錯工具列邊框
`debugExceptionWidget.background`	例外小工具背景
`debugExceptionWidget.border`	例外小工具邊框
`debugConsole.infoForeground`	主控台資訊
`debugConsole.warningForeground`	主控台警告
`debugConsole.errorForeground`	主控台錯誤
`debugConsole.sourceForeground`	主控台來源
`debugConsoleInputIcon.foreground`	輸入圖示

測試

屬性	說明
`testing.iconFailed`	失敗圖示
`testing.iconErrored`	錯誤圖示
`testing.iconPassed`	通過圖示
`testing.iconQueued`	排隊圖示
`testing.iconUnset`	未設定圖示
`testing.iconSkipped`	跳過圖示

擴展

屬性	說明
`extensionButton.prominentBackground`	安裝按鈕背景
`extensionButton.prominentForeground`	安裝按鈕前景
`extensionButton.prominentHoverBackground`	安裝按鈕懸停
`extensionBadge.remoteBackground`	遠端徽章背景
`extensionBadge.remoteForeground`	遠端徽章前景

2. 語法高亮 (`tokenColors`)

程式碼 token 的著色，必須設定以下所有 scope：

基礎

Scope	說明
`comment`	註解
`comment.line`	單行註解
`comment.block`	區塊註解
`comment.block.documentation`	文件註解

字串

Scope	說明
`string`	字串
`string.quoted.single`	單引號字串
`string.quoted.double`	雙引號字串
`string.template`	模板字串
`string.regexp`	正規表達式

常數

Scope	說明
`constant`	常數
`constant.numeric`	數字
`constant.numeric.integer`	整數
`constant.numeric.float`	浮點數
`constant.numeric.hex`	十六進位
`constant.language`	語言常數 (true, false, null)
`constant.character`	字元常數
`constant.character.escape`	跳脫字元
`constant.other`	其他常數

變數

Scope	說明
`variable`	變數
`variable.parameter`	參數
`variable.language`	語言變數 (this, self)
`variable.other`	其他變數
`variable.other.readwrite`	讀寫變數
`variable.other.constant`	常數變數
`variable.other.property`	屬性

關鍵字

Scope	說明
`keyword`	關鍵字
`keyword.control`	控制關鍵字 (if, for, while)
`keyword.control.conditional`	條件 (if, else)
`keyword.control.loop`	迴圈 (for, while)
`keyword.control.import`	匯入 (import, from)
`keyword.control.flow`	流程控制 (return, break)
`keyword.operator`	運算子關鍵字 (new, typeof)
`keyword.other`	其他關鍵字

儲存

Scope	說明
`storage`	儲存
`storage.type`	型別宣告 (const, let, var, function)
`storage.modifier`	修飾詞 (public, private, static)

實體名稱

Scope	說明
`entity.name`	實體名稱
`entity.name.function`	函數名稱
`entity.name.class`	類別名稱
`entity.name.type`	型別名稱
`entity.name.tag`	標籤名稱 (HTML/XML)
`entity.name.section`	區段名稱
`entity.name.namespace`	命名空間
`entity.other.attribute-name`	屬性名稱 (HTML/XML)
`entity.other.inherited-class`	繼承類別

支援

Scope	說明
`support`	支援
`support.function`	內建函數
`support.function.builtin`	語言內建函數
`support.class`	內建類別
`support.type`	內建型別
`support.type.primitive`	原始型別
`support.constant`	內建常數
`support.variable`	內建變數

標點符號

Scope	說明
`punctuation`	標點符號
`punctuation.definition`	定義標點
`punctuation.definition.string`	字串引號
`punctuation.definition.comment`	註解符號
`punctuation.definition.tag`	標籤括號
`punctuation.separator`	分隔符 (逗號、分號)
`punctuation.accessor`	存取器 (.)
`punctuation.bracket`	括號

運算子

Scope	說明
`keyword.operator`	運算子
`keyword.operator.assignment`	賦值運算子
`keyword.operator.arithmetic`	算術運算子
`keyword.operator.logical`	邏輯運算子
`keyword.operator.comparison`	比較運算子
`keyword.operator.ternary`	三元運算子
`keyword.operator.spread`	展開運算子

Scope	說明
`meta.function`	函數區塊
`meta.function-call`	函數呼叫
`meta.class`	類別區塊
`meta.block`	程式區塊
`meta.brace`	大括號
`meta.bracket`	中括號
`meta.return.type`	回傳型別
`meta.type.annotation`	型別註解
`meta.object-literal.key`	物件鍵
`meta.import`	匯入區塊
`meta.export`	匯出區塊

無效

Scope	說明
`invalid`	無效
`invalid.illegal`	非法語法
`invalid.deprecated`	已棄用

Markup (Markdown)

Scope	說明
`markup.heading`	標題
`markup.heading.1`	H1
`markup.heading.2`	H2
`markup.heading.3`	H3
`markup.bold`	粗體
`markup.italic`	斜體
`markup.underline`	底線
`markup.strikethrough`	刪除線
`markup.quote`	引用
`markup.list`	列表
`markup.list.numbered`	有序列表
`markup.list.unnumbered`	無序列表
`markup.inline.raw`	行內程式碼
`markup.raw.block`	程式碼區塊
`markup.inserted`	插入
`markup.deleted`	刪除
`markup.changed`	變更

語言特定

JSON

Scope	說明
`support.type.property-name.json`	JSON 鍵名
`string.json`	JSON 字串值

CSS/SCSS

Scope	說明
`entity.other.attribute-name.class.css`	CSS 類別選擇器
`entity.other.attribute-name.id.css`	CSS ID 選擇器
`entity.name.tag.css`	CSS 標籤選擇器
`support.type.property-name.css`	CSS 屬性名
`support.constant.property-value.css`	CSS 屬性值
`variable.scss`	SCSS 變數

HTML/JSX

Scope	說明
`entity.name.tag.html`	HTML 標籤
`entity.other.attribute-name.html`	HTML 屬性
`support.class.component`	React 元件
`support.class.component.jsx`	JSX 元件

TypeScript

Scope	說明
`entity.name.type.ts`	TypeScript 型別
`entity.name.type.interface.ts`	TypeScript 介面
`entity.name.type.enum.ts`	TypeScript 列舉
`entity.name.type.alias.ts`	TypeScript 型別別名
`meta.type.parameters.ts`	泛型參數

Python

Scope	說明
`entity.name.function.decorator.python`	Python 裝飾器
`support.type.python`	Python 型別
`meta.function-call.arguments.python`	Python 函數參數

Swift

Scope	說明
`keyword.other.declaration-specifier.swift`	Swift 宣告修飾詞
`storage.type.swift`	Swift 儲存型別
`entity.name.type.swift`	Swift 型別名稱
`support.type.swift`	Swift 支援型別

3. 語義高亮 (`semanticTokenColors`)

必須啟用 "semanticHighlighting": true，確保變數顏色正確顯示。

變數顏色規則（重要）：

深色主題：變數使用 #FFFFFF（白色）
淺色主題：變數使用 #1a1a1a（近黑色）

必須設定的 token：

Token	說明
`variable`	變數
`variable.readonly`	唯讀變數
`variable.local`	區域變數
`variable.declaration`	變數宣告
`parameter`	參數
`function`	函數
`function.declaration`	函數宣告
`function.defaultLibrary`	預設庫函數
`method`	方法
`method.declaration`	方法宣告
`class`	類別
`class.declaration`	類別宣告
`interface`	介面
`interface.declaration`	介面宣告
`enum`	列舉
`enumMember`	列舉成員
`type`	型別
`type.declaration`	型別宣告
`namespace`	命名空間
`property`	屬性
`property.readonly`	唯讀屬性
`property.declaration`	屬性宣告
`macro`	巨集
`comment`	註解
`string`	字串
`number`	數字
`regexp`	正規表達式
`operator`	運算子

品牌色彩映射

品牌主色 → activityBar.foreground, statusBar.background, focusBorder, editorCursor
品牌背景 → editor.background, sideBar.background, panel.background
品牌文字 → editor.foreground, sideBar.foreground
品牌輔助 → editorLineNumber.foreground, tab.inactiveForeground
品牌強調 → activityBarBadge.background, button.background

語法高亮配色建議

淺色主題：

Comment：灰色 50-60% 亮度
String：品牌色變體或琥珀/綠色系
Keyword：品牌主色或深藍/紫色系
Function：品牌輔助色或橙色系
Class：深色強調，可加 underline
Type：斜體，品牌色變體

深色主題：

所有色彩亮度 +20-30%
保持色相一致性

輸出格式

提供完整的 VS Code 主題 JSON，包含：

"semanticHighlighting": true（必須）
colors 物件（UI 色彩）- 必須包含上述所有類別
tokenColors 陣列（語法高亮）- 必須包含上述所有 scope
semanticTokenColors 物件（語義高亮）- 必須，確保變數顏色正確

品牌官網參考

品牌	官網	設計系統
Claude (Anthropic)	claude.ai	anthropic.com
Microsoft Teams	teams.microsoft.com	fluent2.microsoft.design
macOS	apple.com/macos	developer.apple.com/design
iOS	apple.com/ios	developer.apple.com/design
Android	android.com	m3.material.io
Nintendo	nintendo.com	-
Sony	sony.com	-
shadcn/ui	ui.shadcn.com	-

範例提取流程

1. WebFetch: https://claude.ai → 提取頁面配色
2. WebFetch: https://anthropic.com/brand → 提取品牌指南
3. 分析 CSS 變數和主要色彩
4. 建立色彩映射表
5. 生成 VS Code 主題 JSON

品質檢查

編輯器背景非純白/純黑
文字可讀性（對比度 ≥ 4.5:1）
品牌識別度（一眼能認出品牌）
語法高亮區分度
選取/高亮狀態清晰
所有 UI 色彩類別都已設定
所有語法高亮 scope 都已設定
semanticHighlighting: true 已啟用
semanticTokenColors 變數顏色已設定（深色 #FFFFFF / 淺色 #1a1a1a）
editorUnnecessaryCode 未使用程式碼樣式已設定
終端機 ANSI 色彩完整
Git 裝飾色彩清晰區分
括號配對色彩明顯

ナビゲーション

Skillsとは？

リンク

brand-color-extractor