🎨 認識 Pencil — Design on Canvas, Land in Code

Pencil（pencil.dev）是由 High Agency 公司開發的 AI 驅動設計工具。它的核心理念是：

Pencil 不是一個獨立的設計軟體，而是一個 IDE 擴充套件，直接嵌入到你的程式碼編輯器中運作。

💡 Pencil vs 傳統設計工具

🔌 核心技術：MCP（Model Context Protocol）

📦 在 Antigravity 安裝 Pencil 擴充套件

🔧 Step 1：安裝 Pencil

1. 開啟 Antigravity（antigravity.ai）
2. 進入你的專案工作區
3. 點選左側活動列的 擴充套件圖示（四方塊圖示）
4. 在搜尋框中輸入 「Pencil」
5. 找到 Pencil（開發者為 High Agency），點選 Install 安裝
6. 安裝完成後會提示你進行 Email 驗證（輸入 Email 即可）

✅ Step 2：驗證安裝成功

1. 在 Antigravity 的檔案總管中，建立一個 .pen 檔案（例如 test.pen）
2. 點擊該檔案，應該會自動用 Pencil 編輯器開啟，出現無限畫布
3. 或在左側活動列中看到 Pencil 的圖示

📄 建立你的第一個 .pen 設計檔

Step 1：建立 .pen 檔案

方法一：用 Antigravity 終端機

# 在專案根目錄建立 designs 資料夾
mkdir -p designs

# 建立一個空的 .pen 檔案
touch designs/my-first-design.pen

方法二：用 Antigravity 檔案總管（更簡單）

1. 在左側檔案總管中，右鍵 → New File
2. 檔名輸入 my-first-design.pen
3. Pencil 編輯器會自動開啟無限畫布

Step 2：確認 MCP 連線

在 Antigravity 的 AI 聊天面板中輸入：

請確認你是否可以存取 Pencil 設計工具，列出可用的 Pencil MCP 工具

如果 AI 回應中列出了 pencil 相關的工具（如 batch_design、batch_get、get_screenshot 等），就代表 MCP 連線成功。

🎨 用 AI 操作 Pencil 設計畫面

Pencil 提供的 MCP 工具一覽

🚀 實作：用自然語言設計一個登入頁面

在 Antigravity 的 AI 聊天面板中，確保 .pen 檔案已開啟，然後輸入：

請在 my-first-design.pen 中設計一個現代風格的登入頁面，包含：
- 一個標題「歡迎回來」
- Email 和密碼輸入框
- 登入按鈕（藍色漸層）
- 「忘記密碼？」連結
- 底部的「還沒有帳號？立即註冊」文字

AI 會透過 MCP 呼叫 batch_design 工具，在 Pencil 畫布上逐步建立這些元素。你可以在旁邊的畫布上即時看到結果！

💻 設計轉程式碼 — 一步到位

Pencil 最強大的功能之一，就是可以將設計直接轉換為生產等級的程式碼。

在 Antigravity 的 AI 聊天面板中輸入：

請將目前的登入頁面設計轉換為 HTML + Tailwind CSS 程式碼

支援的輸出格式

📝 建立「Pencil 網頁設計助手」Skill

🎯 為什麼要為 Pencil 建立 Skill？

到目前為止，每次都要手動告訴 AI 用什麼風格、包含哪些元素、遵守什麼規範。如果把這些規則寫成 Skill，AI 每次設計時都會自動遵守！

Step 1：建立 Skill 資料夾

mkdir -p skills-source/pencil-web-designer/assets

Step 2：撰寫 SKILL.md

建立 skills-source/pencil-web-designer/SKILL.md，核心內容結構：

---
name: pencil-web-designer
description: >
  AI 網頁設計助手，使用 Pencil 工具在 .pen 畫布上設計網頁介面。
  當使用者需要設計網頁、Landing Page、Dashboard、表單頁面時觸發。
---

# Pencil 網頁設計助手

## 前置檢查
- Check if Pencil MCP 工具可用
- Ask user 想要設計什麼類型的頁面
- Ask user 偏好的風格

## 執行步驟
- Step 1：了解需求（MUST 確認後才開始）
- Step 2：建立設計（漸進式建構）
- Step 3：驗證設計（截圖 + 版面檢查）
- Step 4：產出程式碼（如需要）

## 安全規則
- NEVER 修改未要求修改的現有設計
- MUST 每次重大變更前先確認

## 設計規範
- MUST 使用 8px 間距系統
- MUST 確保 WCAG AA 對比度

Step 3：建立設計風格參考檔

在 assets/ 中建立 design-guidelines.md，定義三種色彩方案、字型建議、間距系統：

Step 4：同步到所有平台

bash sync-skills.sh

然後執行 tree skills-source /F 確認三個 Skill 都在：

skills-source/
├── email-reply-helper/          ← Skill 1
│   ├── SKILL.md
│   └── assets/
├── meeting-notes-generator/     ← Skill 2
│   ├── SKILL.md
│   └── assets/
└── pencil-web-designer/         ← Skill 3（新增！）
    ├── SKILL.md
    └── assets/
        └── design-guidelines.md

🧪 測試 Pencil Skill

Step 1：確認環境準備

• Pencil 擴充套件已安裝並啟動（左側看到 Pencil 圖示）
• 已開啟一個 .pen 檔案（畫布上可以看到無限畫布）
• pencil-web-designer Skill 已同步到 .agent/skills/

Step 2：在 AI 聊天面板中輸入測試指令

請用 pencil-web-designer 幫我設計一個 AI 課程的 Landing Page，
風格要現代簡約，主色用紫色漸層，
需要包含：導覽列、Hero 區塊、三個課程特色卡片、報名 CTA 按鈕

Step 3：觀察 AI 的行為

Step 4：對比「有 Skill」vs「沒有 Skill」

📅 Day 2 預告：更多精彩等著你

🧠 Pencil 模組小結

🎯 目前你的 Skill 專案成果

skills-source/
├── email-reply-helper/          ← Skill 1：Email 回覆助手
│   ├── SKILL.md
│   └── assets/
│       ├── email-template.md
│       ├── input-form.html
│       └── monetize-framework.html
├── meeting-notes-generator/     ← Skill 2：會議紀錄產生器
│   ├── SKILL.md
│   └── assets/
│       └── meeting-template.md
└── pencil-web-designer/         ← Skill 3：Pencil 網頁設計助手
    ├── SKILL.md
    └── assets/
        └── design-guidelines.md