Part 1: 認知與架構
FB YouTube 3A科技研究社 回目錄

AI Coding Assistant Skill Tutorial

Part 1: 認知與架構

深入理解 Skill 的核心概念：讓 AI 成為你的專屬工程師

Google Antigravity
Claude Code
Concept Structure Workflow

先來看 Demo - Skill 能做什麼？

學完這堂課，你可以讓 Claude 自動幫你執行複雜任務：

範例：使用 ui-ux-pro-max Skill

你只需要說一句話：

「幫我找適合科技感網站的 UI 風格和配色」
Claude 會自動：
  1. 讀取 SKILL.md 了解該怎麼做
  2. 執行 Python 腳本搜尋風格資料庫
  3. 回傳符合條件的 UI 風格、色票、字體建議
  4. 甚至產生範例 HTML 給你參考！
重點：Skill 讓你把「重複的工作流程」打包成一鍵指令！

什麼是 Skill？用「食譜」來理解

沒有 Skill 的 AI

就像請一位廚師做菜，但不給他食譜。

他很聰明，但每次做出來的味道都不一樣，因為他只能憑感覺。

有 Skill 的 AI

你給他一本「專屬食譜」，裡面寫清楚：

  • 要用哪些食材（scripts/data）
  • 烹飪步驟（SKILL.md）
  • 成品應該長怎樣（examples）
Skill = AI 的食譜
告訴 AI：「遇到這種任務，你就照這個步驟做」

為什麼需要 Skill？

沒有 Skill 的痛苦 有 Skill 的好處
每次都要重複說明同樣的需求 一鍵執行，自動按照 SOP 操作
AI 產出的品質不穩定 標準化輸出，品質一致
複雜任務需要多次對話指導 多步驟流程自動串接
學到的經驗無法累積 知識封裝，可重複使用
白話文：與其每次都跟 AI 說一樣的話，不如寫成 Skill，以後一句話搞定！

Skill 放在哪裡？（超級重要！）

不同的 AI 編程助手有不同的 Skill 存放位置：

AI 工具 Skill 存放路徑
Google Antigravity .agent/skills/技能名稱/
Claude Code .claude/skills/技能名稱/
你的專案資料夾/ │ ├── .agent/ <-- Google Antigravity │ └── skills/ │ ├── ui-ux-pro-max/ │ │ └── SKILL.md │ └── code-reviewer/ │ └── SKILL.md │ ├── .claude/ <-- Claude Code │ └── skills/ │ ├── ui-ux-pro-max/ │ │ └── SKILL.md │ └── code-reviewer/ │ └── SKILL.md │ ├── src/ └── package.json
好消息：SKILL.md 的內容格式完全相同！只是存放的資料夾位置不同。

Skill 的完整檔案架構

不論是哪個 AI 工具，Skill 資料夾結構都完全相同：

Antigravity: .agent/skills/my-skill/ Claude: .claude/skills/my-skill/
my-awesome-skill/ <-- 技能根目錄 │ ├── SKILL.md <-- [必要] 技能說明書，AI 的操作手冊 │ ├── scripts/ <-- [選用] 輔助腳本 │ ├── search.py <-- Python 工具 │ └── deploy.sh <-- Shell 腳本 │ ├── data/ <-- [選用] 資料庫、CSV、JSON │ ├── styles.csv <-- 風格資料庫 │ └── config.json <-- 設定檔 │ └── resources/ <-- [選用] 模板、範例檔案 ├── template.html <-- HTML 模板 └── example.png <-- 參考圖片
只有 SKILL.md 是必要的！其他資料夾都是選用，根據你的需求添加。

SKILL.md - Skill 的核心靈魂

SKILL.md 是一份 Markdown 文件，告訴 AI「你是誰、你能做什麼、怎麼做」。

# UI/UX Pro Max

## Description
專業的 UI/UX 設計助手，能搜尋風格資料庫並提供設計建議。

## Capabilities
- 搜尋 UI 設計風格
- 推薦色彩配置
- 建議適合的字體組合

## Instructions
當使用者詢問 UI 設計相關問題時：

1. 先詢問使用者的專案類型（網站/App/管理後台）
2. 執行 scripts/search.py 搜尋相關風格
3. 從 data/styles.csv 讀取配色資料
4. 整理成清晰的建議報告

## Examples
使用者：「我要做一個電商網站」
回應：執行風格搜尋，推薦 Modern E-commerce 風格...
重點：把 SKILL.md 想成你寫給 AI 的「工作說明書」。寫得越清楚，AI 做得越好！

真實範例：ui-ux-pro-max Skill

這是一個實際存在的 Skill，讓我們看看它的結構：

這個 Skill 能做什麼？

  • 搜尋 50+ 種 UI 設計風格
  • 查詢配色方案資料庫
  • 推薦 Google Fonts 字體組合
  • 生成設計建議報告

檔案結構

ui-ux-pro-max/
├── SKILL.md
├── scripts/
│ └── search.py
└── data/
    ├── styles.csv
    ├── colors.csv
    └── fonts.csv
學習重點：Skill 可以很簡單（只有 SKILL.md），也可以很複雜（包含腳本、資料庫）。根據你的需求決定！

AI 如何執行 Skill？

當你對 Claude 下指令時，背後的流程是這樣的：

1. 使用者下指令
「幫我設計網站風格」
→
2. Claude 搜尋 Skill
找到 ui-ux-pro-max
→
3. 讀取 SKILL.md
了解操作步驟
→
4. 執行指定動作
跑腳本、讀資料
→
5. 回傳結果
整理成報告
白話文：就像你給實習生一本 SOP 手冊，他看完後照著做。
SOP 寫得越清楚，成果就越完美！

Skill 的觸發方式

自動觸發（推薦）

Claude 會根據 SKILL.md 中的 Description 自動判斷是否使用。

使用者：「幫我查 UI 風格」
Claude：(偵測到相關 Skill) 自動載入...

手動觸發

使用 /skill 指令明確呼叫特定 Skill。

使用者：「/ui-ux-pro-max」
Claude：載入 ui-ux-pro-max Skill...
Description 超級重要！
寫好 Description，Claude 才知道什麼時候該用這個 Skill。
範例：「專門處理 UI/UX 設計、配色、字體相關問題」

Part 1 重點整理

  • 1.
    Skill = 知識 + 動作
    把你的專業知識和工作流程封裝起來，讓 AI 可以重複使用
  • 2.
    核心檔案 = SKILL.md
    這是 AI 的操作手冊，必須有這個檔案
  • 3.
    放置位置依工具而定
    Antigravity: .agent/skills/ ｜ Claude: .claude/skills/
  • 4.
    可以包含輔助資源
    scripts（腳本）、data（資料）、resources（模板）都是選用

一句話總結

不要只把 AI 當聊天機器人，用 Skill 把它訓練成專業的工程師！

準備好了嗎？

現在你已經了解 Skill 的核心概念，
下一步我們要實際動手撰寫 SKILL.md！

Part 2 你將學到

  • SKILL.md 的完整格式
  • 如何撰寫清晰的 Instructions
  • 添加範例讓 AI 更聰明
  • 實作一個完整的 Skill
前往 Part 2：學習撰寫 SKILL.md