身為設計師，是否常為「改幾個像素卻要煩前端同學」而抓狂？學會 GitHub，讓你直接參與代碼協作、秒級修復細節、無縫銜接開發流程。本教程完全避開命令行，基於 GitHub 官方桌面客戶端（Mac 版為例）與網頁端，帶你用最直觀的圖形化操作跑通核心流程。

為什麼設計師要學 GitHub？

• 降低溝通成本：CSS/HTML 小改動自己提交，無需排期等待。
• 版本管理安心：方案 A→B→回退 A，歷史記錄一鍵回溯，不再怕「沒另存」。
• 分支並行：多方案同時探索（B1、B2、C1、C2），隨時合併最優解。
• 團隊協作：分布式同步，衝突可視化解決，不再傳文件、蓋文件。
• 開源貢獻：Fork → 改動 → Pull Request，參與社區共建。

核心概念三分鐘速通

術語	設計師語言
Repository（倉庫）	專案資料夾雲端備份，含所有歷史版本
Commit（提交）	一次「存檔快照」，附帶說明訊息
Branch（分支）	平行宇宙，方案 A、B、C 互不干擾
Merge（合併）	把分支改動融合回主線
Fork	把別人的倉庫複製到自己賬號下
Pull Request	向原作者發起「請合併我的改動」申請

Git ≠ GitHub：Git 是版本控制工具，GitHub 是基於 Git 的代碼託管平台（類比 WordPress vs WordPress.com）。

實戰演練：Fork 專案 → 修改 → 提交 PR

Step 1 註冊 & 登錄客戶端

官網註冊 → 下載 GitHub Desktop → 登錄賬號。

Step 2 Fork 目標倉庫

打開練習倉庫 Designers-Learn-Git → 點擊右上角 Fork → 自動跳轉到你的賬號下生成副本。

Step 3 修改文件（兩種方式二選一）

方式 A：網頁端直接改（適合單文件微調）

1. 進入 Fork 後的倉庫頁面
2. 點擊 花名冊.txt → Edit（鉛筆圖示）
3. 編輯內容 → 底部填寫 Commit 訊息 → Commit changes

方式 B：客戶端本地改（適合多文件/複雜專案）

1. 客戶端右上角 + → Clone → 選倉庫 → Clone Repository
2. 本地打開資料夾，編輯 花名冊.txt 存檔
3. 客戶端 Changes 頁自動檢測變更 → 輸入摘要 → 勾選 Commit & Sync 綠色按鈕同時提交並推送

Step 4 發起 Pull Request

1. 瀏覽器打開你 Fork 的倉庫頁面
2. 點擊醒目綠色按鈕 New pull request → Create pull request
3. 原作者收到通知，審核合併後你的名字將出現在貢獻者列表

進階小貼士

• .gitignore：忽略 .psd、.sketch、node_modules 等無需版控文件。
• 分支策略：功能開發拉 feature 分支，穩定後合併 develop/master。
• 衝突解決：客戶端會高亮衝突行，逐行選擇保留哪版，極其直觀。
• Good Commit Message：Fix: 修正按鈕 hover 狀態顏色 #123 格式，利於追蹤。

結語

GitHub 不只是工程師的專利。當設計師掌握版本控制與協作流程，你就從「出圖匠」進化為「能交付可落地介面的產品設計師」。從今天的第一次 Commit 開始，擁抱更高效的協作未來。