用終端產出完整品牌套件：Logo、色彩、Style Guide

Fiverr 上的 Logo 和它沒有兌現的承諾

你花了四十塊美金請人做一個 logo。三天後收到一個 PNG 附件 — 800 乘 800 像素，白色背景，沒有圖層。放在網站 header 上看起來還行。然後你試著放到名片上。糊掉了。放到深色背景上。白色方塊。想把那個藍色調成跟簡報一致的色調。做不到。那個檔案是一張平面圖，像是一張畫的照片。你可以看，但你碰不到顏料。

於是你回去加購「原始檔」。收到一個 Adobe Illustrator 檔案，打開它需要每月 $23 美金的訂閱。還收到第二張 PNG。兩個檔案都沒有任何說明文件：沒有色碼、沒有字體名稱、沒有間距規則。就兩個檔案加一句「祝你好運」。

六個月後，你的網站用了一種藍，社群貼文用了另一種藍，pitch deck 又是第三種藍。它們本來應該是同一種藍。但沒有一個是。

這不是設計問題。這是文件問題。Logo 從來就不是真正的交付物。真正的交付物是一套系統 — 一組規則，寫著「這是精確的藍色、這些是字體、logo 周圍要留這麼多空間、這裡是你未來會需要的每一種格式的 logo」。這套系統叫做 style guide。

你可以在 terminal 裡用大約三十分鐘做出來。

你實際上在做什麼

先講清楚產出。這篇文章結束的時候，你會有一個資料夾，裡面包含：

1. SVG logo 檔案 — 主 logo、精簡的 icon 版本、深色背景版本。SVG 是向量格式。放大到任何尺寸都不會糊 — 看板或 favicon，同一個檔案。
2. 色彩系統 — 主色、輔色、重點色、中性色，每個都有精確的 hex code 和使用時機說明。
3. 字型規範 — 該用哪些字體、什麼尺寸、標題跟內文分別怎麼處理。
4. Style guide 文件 — 一個 markdown 檔案，把所有東西串在一起。這是規則書。任何人要為你的品牌做任何東西 — 社群貼文、簡報、T-shirt — 打開這個檔案就知道該怎麼做。

整個東西放在 git repository 裡。每個改動都有紀錄。六個月後你調了綠色的深淺，你可以看到它以前是什麼。品牌識別的版本控制。

你需要什麼

兩樣東西：

1. Claude Code — AI CLI 工具。需要 Claude Pro 訂閱（$20 美元/月）。沒用過的話，Claude Code 第一個小時有完整安裝教學。
2. 一個 terminal — 打指令的那個黑色視窗。Mac：用 Spotlight 搜尋 Terminal。Windows：打開 PowerShell。

你不需要 Illustrator。不需要 Figma。不需要知道 SVG 三個字母代表什麼（Scalable Vector Graphics，但不重要）。你只需要能用文字描述你要什麼。

第一步：建立品牌 Repo（3 分鐘）

打開 terminal，建立專案資料夾：

mkdir my-brand && cd my-brand
git init

git init 把這個資料夾變成 git repository。想成幫你在這裡建立的每個檔案開啟「追蹤修訂」。

啟動 Claude Code：

claude

準備好了。

第二步：描述你的品牌（10 分鐘）

這是最重要的步驟。你不是在要一個 logo。你是在描述一種人格。把你的品牌想成站在房間裡的一個人。他穿什麼？他怎麼說話？是大聲還是安靜？活潑還是沉穩？

這是一個範例 prompt。寫你自己的 — 這個是為一個虛構的茶葉品牌寫的：

我在做一個手工茶品牌，叫「葉與石」(Leaf & Stone)。

品牌個性：沉靜、日式極簡、安靜的儀式感。
溫暖的中性色調、低飽和的綠色、大量留白。
感覺應該是：一個陶瓷杯放在木桌上，早晨的光線。

請在 "brand" 資料夾裡建立以下內容：

1. brand/logo.svg — 主 logo。文字「Leaf & Stone」用乾淨的 serif 字體。
   文字左邊放一個簡單抽象的葉子圖案。保持極簡。不要漸層、不要陰影。

2. brand/logo-icon.svg — 只有葉子圖案，不要文字。
   這是給 favicon 和小尺寸空間用的。

3. brand/logo-dark.svg — 主 logo 但用淺色文字，
   適合深色背景。

4. brand/colors.md — 色彩系統文件，包含：
   - 主色（低飽和的鼠尾草綠）
   - 輔色（溫暖的石色/米色）
   - 重點色（陶土色或泥土色調）
   - 深色中性色（用於文字）
   - 淺色中性色（用於背景）
   每個顏色要有：hex code、RGB 值、一行使用時機說明。

5. brand/typography.md — 字型規範，包含：
   - 標題字體（serif）
   - 內文字體（乾淨的 sans-serif）
   - h1、h2、h3、body、small 的尺寸
   - 行高和字距建議

6. brand/style-guide.md — 總整合文件：
   - 用 2-3 句話寫出品牌個性
   - 引用色彩和字型文件
   - Logo 使用規範（最小尺寸、周圍留白、什麼不該做）
   - 包含範例的 do's 和 don'ts

所有 SVG 檔案要乾淨、可以手動編輯。
用 web-safe 字體或 Google Fonts，讓任何人都能用。

按 Enter。看 Claude Code 工作。

它會建立 brand 資料夾、產出三個 SVG 檔案、寫三份 markdown 文件。整個過程大約一分鐘。

關鍵洞察：你的人格描述越具體，產出越一致。「幫我做一個 logo」會得到 clip art。「沉靜、日式極簡、陶瓷杯放在木桌上、早晨的光線」會得到一套有整體感的設計系統。

第三步：檢視 SVG（5 分鐘）

請 Claude Code 讓你看看成果：

幫我用瀏覽器打開 brand/logo.svg。

瀏覽器顯示 logo。因為是 SVG — 你可以無限放大，永遠清晰。這就是重點。這個檔案放在名片上跟放在看板上，是同一個檔案。

接下來是關鍵的部分：你可以用文字編輯它。

葉子圖案太複雜了。簡化到最多 3-4 筆。
字體粗細再細一點。
葉子圖案靠近文字一些 — 間距縮小大約 30%。

Claude Code 直接修改 SVG。重新整理瀏覽器。新版本出現。

這個循環跟設計師在 Illustrator 裡的流程一模一樣 — 草稿、檢視、修改。差別是你用語言指揮，而不是拉錨點。而且每次修改都是 git 可以追蹤的檔案變更。

滿意主 logo 之後，檢查 icon 和深色版本：

也幫我打開 brand/logo-icon.svg 和 brand/logo-dark.svg。
確認 icon 版本在 32x32 像素下還能辨識 — 需要的話就簡化。

第四步：檢視色彩系統（5 分鐘）

打開色彩文件：

讓我看 brand/colors.md 的內容。

你會看到類似這樣的東西：

```markdown
# Leaf & Stone — 色彩系統

## 主色：鼠尾草綠
- Hex: #7A8B6F
- RGB: 122, 139, 111
- 使用時機：品牌主色。按鈕、標題、logo 填色。

## 輔色：暖石色
- Hex: #C4B5A0
- RGB: 196, 181, 160
- 使用時機：背景、卡片、次要元素。

## 重點色：陶土色
- Hex: #B86F4A
- RGB: 184, 111, 74
- 使用時機：行動呼籲、強調，少量使用。

## 深色中性色：炭灰
- Hex: #2D2D2D
- RGB: 45, 45, 45
- 使用時機：內文文字、深色背景。

## 淺色中性色：暖白
- Hex: #F5F2ED
- RGB: 245, 242, 237
- 使用時機：頁面背景、留白空間。
```

那些 hex code 就是真理。從現在開始，每次你做簡報、選社群模板、或把東西交給開發者的時候，你就指著這個檔案。「#7A8B6F」就是你的綠色。不是「大概是鼠尾草的感覺」。不是「就像我們網站上用的那個綠色」。一個六位數的代碼，在全世界每一個螢幕上產出完全相同的顏色。

如果某個顏色感覺不對，調整它：

鼠尾草綠感覺太灰了。飽和度稍微拉高一點，色調偏暖一點。
更新 colors.md 裡的 hex，同時更新三個 SVG logo 用新顏色。

一個 prompt。每個檔案都更新。每個檔案都保持一致。這就是所有東西放在同一個 repo、由同一個工具管理的威力。

第五步：檢視字型規範和 Style Guide（5 分鐘）

看看字型規範：

讓我看 brand/typography.md。

確認字體選擇跟你的品牌調性合不合。想換字體的話：

標題字體換成 Playfair Display，內文字體換成 Source Sans 3。
更新 typography.md。

接下來是 style guide — 總整合文件：

讓我看 brand/style-guide.md。

這是你會分享給任何為你品牌做東西的人的檔案。它應該包含品牌個性聲明、色彩和字型文件的引用、logo 使用規範（最小尺寸、留白、什麼不該做）、還有範例的 do's 和 don'ts。

如果有任何地方讀起來不對，直接說：

品牌個性那段太空泛了。重寫，強調「安靜的儀式感」。
要提到品牌永遠不該給人匆忙、喧鬧或雜亂的感覺。

第六步：Commit 到 Git（2 分鐘）

品牌套件完成了。鎖進版本控制。

離開 Claude Code（/exit 或 Ctrl+C），執行：

git add -A
git commit -m "Initial brand kit: logos, colors, typography, style guide"

這個快照是永久的。你可以從這裡開始改任何東西，但你永遠可以回到這個確切的版本。六個月後你為了節日活動調了重點色，你可以查到原來是什麼。

這是任何 Fiverr 交付物都給不了你的東西：每個決策的歷史紀錄。

往下走

Git repo 裡的品牌套件是一個基礎。你可以在上面蓋這些東西：

• 社群模板： 叫 Claude Code 用你的品牌色和字體建立 Instagram 貼文和限動的 SVG 模板。產十個變體。挑你喜歡的。
• 簡報主題： 描述一個遵循你 style guide 的簡報模板。Claude Code 可以產出 HTML slides（用 reveal.js 之類的工具），完全符合你的品牌。
• 網站整合： 當你做 landing page 的時候，把 style guide 丟給 Claude Code 說「照這個品牌規範走」。顏色、字體、間距全部會跟其他東西一致。
• 品牌改版： 明年想換個新面貌？開一個 git branch，做改動，比較前後差異。不喜歡就切回去。一行指令。

你做了什麼

你做了一套品牌系統，不只是一個 logo。這套系統有五個部分：

1. 向量 logo — 任何尺寸都清晰，用文字指令就能編輯
2. 色彩系統 — 精確的代碼，不是感覺
3. 字型規範 — 所有地方一致的文字處理
4. Style guide — 把一切串在一起的規則書
5. 版本紀錄 — 每個改動都有追蹤，每個決策都可以回溯

Logo 是人們會注意到的部分。Style guide 是讓其他所有東西都能運作的部分。沒有它，你會慢慢偏移。有了它，每一張簡報、每一則社群貼文、每一張名片看起來都像出自同一個地方 — 因為它們確實是。它們來自一套有文件紀錄的系統，你擁有它、你控制它、你可以用一句話改變它。

不需要設計師月費。不需要 Illustrator 訂閱。不需要「你可以把那個藍色的 hex code 傳給我嗎？」

打開 style guide。Hex code 就在那裡。