Photoshop MCP

🚀 Photoshop MCP Server

這是一個模型上下文協議（MCP）服務器，它能讓Claude和Cursor等AI助手以編程方式控制Adobe Photoshop。藉助它，你可以在IDE中通過自然語言命令來創建設計、處理圖像以及自動化Photoshop工作流程。

🎨 50多種工具 | 🖥️ 跨平臺支持 | 📦 支持NPX | 🔧 ExtendScript API | ⏮️ 撤銷/重做

🚀 快速開始

本項目是一個非官方、由社區維護的項目，與Adobe Inc.沒有關聯，也未得到其認可。

安裝

使用NPX（推薦）

無需安裝！只需配置你的MCP客戶端：

npx @alisaitteke/photoshop-mcp

從源代碼安裝

git clone https://github.com/yourusername/photoshop-mcp.git
cd photoshop-mcp
npm install
npm run build

配置

對於Cursor

添加到你的Cursor設置（.cursor/config.json 或工作區設置）：

{
  "mcpServers": {
    "photoshop": {
      "command": "npx",
      "args": ["-y", "@alisaitteke/photoshop-mcp"],
      "env": {
        "LOG_LEVEL": "1"
      }
    }
  }
}

對於Claude Desktop

添加到你的Claude Desktop配置（在macOS上為 ~/Library/Application Support/Claude/claude_desktop_config.json，在Windows上為 %APPDATA%\Claude\claude_desktop_config.json）：

{
  "mcpServers": {
    "photoshop": {
      "command": "npx",
      "args": ["-y", "@alisaitteke/photoshop-mcp"],
      "env": {
        "LOG_LEVEL": "1"
      }
    }
  }
}

環境變量

• PHOTOSHOP_PATH：（可選）指定自定義的Photoshop安裝路徑
• LOG_LEVEL：日誌級別（0=調試，1=信息，2=警告，3=錯誤）

✨ 主要特性

• ✅ 跨平臺支持：同時適用於Windows和macOS。
• ✅ 廣泛的Photoshop版本支持：支持Photoshop 2012 - 2025+。
• ✅ ExtendScript API：通過AppleScript/COM自動化實現通用兼容性。
• ✅ 自動檢測：自動查找系統上的Photoshop安裝位置。
• ✅ 豐富的工具集：提供50多種工具，實現全面的Photoshop自動化。
• ✅ 文檔管理：支持創建、打開、保存、關閉和裁剪文檔。
• ✅ 圖層操作：可創建、刪除、複製、合併和變換圖層。
• ✅ 圖層屬性設置：能設置圖層的不透明度、混合模式、可見性和鎖定狀態。
• ✅ 文本格式化：可控制字體、字號、顏色和對齊方式。
• ✅ 圖像放置：支持放置圖像、打開文件並適配文檔。
• ✅ 濾鏡應用：提供高斯模糊、銳化、添加雜色、動感模糊等濾鏡。
• ✅ 顏色調整：可進行亮度/對比度、色相/飽和度、自動色階/對比度等調整。
• ✅ 選區和蒙版操作：支持矩形選區和圖層蒙版。
• ✅ 歷史記錄控制：可進行撤銷/重做操作並查看歷史狀態。
• ✅ 動作執行：可播放錄製的動作和執行自定義腳本。
• ✅ 自動柵格化：在需要應用濾鏡時自動轉換圖層。
• ✅ 上下文跟蹤：每次操作後返回文檔/圖層狀態，便於AI感知上下文。

📦 安裝指南

使用NPX（推薦）

無需安裝！只需配置你的MCP客戶端：

npx @alisaitteke/photoshop-mcp

從源代碼安裝

git clone https://github.com/yourusername/photoshop-mcp.git
cd photoshop-mcp
npm install
npm run build

💻 使用示例

基礎用法

創建一個簡單的設計

// 1. 創建一個新文檔
photoshop_create_document({
  width: 800,
  height: 600,
  colorMode: "RGB"
})

// 2. 創建一個背景圖層
photoshop_create_layer({ name: "Background" })

// 3. 用顏色填充它
photoshop_fill_layer({
  red: 240,
  green: 240,
  blue: 255
})

// 4. 添加一個文本圖層
photoshop_create_text_layer({
  text: "My Design",
  x: 400,
  y: 300,
  fontSize: 64
})

// 5. 保存結果
photoshop_save_document({
  path: "/Users/username/Desktop/design.psd",
  format: "PSD"
})

批量處理圖像

// 1. 打開現有文檔（手動步驟）
// 2. 調整圖像大小
photoshop_resize_image({ width: 1920, height: 1080 })

// 3. 保存為JPEG
photoshop_save_document({
  path: "/Users/username/Desktop/resized.jpg",
  format: "JPEG",
  quality: 12
})

// 4. 關閉文檔
photoshop_close_document({ save: false })

使用Pexels MCP創建帶有素材圖片的設計

// 1. 在Pexels上搜索圖片（使用Pexels MCP服務器）
// 注意：你需要配置Pexels MCP服務器
pexels_photos_search({
  query: "nature landscape",
  per_page: 5
})

// 2. 下載你想要的圖片（手動或通過腳本）
// 3. 創建一個新的Photoshop文檔
photoshop_create_document({
  width: 1920,
  height: 1080,
  colorMode: "RGB"
})

// 4. 放置下載的圖片
photoshop_place_image({
  filePath: "/Users/username/Downloads/pexels-photo.jpg",
  x: 0,
  y: 0
})

// 5. 將圖片適配到文檔（新增！）
photoshop_fit_layer_to_document({
  fillDocument: true  // 填充整個畫布
})

// 6. 添加文本覆蓋
photoshop_create_text_layer({
  text: "Beautiful Nature",
  x: 960,
  y: 100,
  fontSize: 72
})

// 7. 保存最終設計
photoshop_save_document({
  path: "/Users/username/Desktop/nature-design.psd",
  format: "PSD"
})

📚 詳細文檔

可用工具

連接與信息

• photoshop_ping：測試與Photoshop的連接。

// 示例：檢查Photoshop是否可訪問
photoshop_ping()

• photoshop_get_version：獲取Photoshop版本信息。

// 示例：獲取版本詳情
photoshop_get_version()

文檔管理

• photoshop_create_document：創建一個新的Photoshop文檔。

// 示例：創建一個1920x1080的RGB文檔
photoshop_create_document({
  width: 1920,
  height: 1080,
  resolution: 72,
  colorMode: "RGB"
})

• photoshop_get_document_info：獲取活動文檔的信息。

// 示例：獲取當前文檔詳情
photoshop_get_document_info()

• photoshop_save_document：保存活動文檔。

// 示例：保存為JPEG
photoshop_save_document({
  path: "/Users/username/Desktop/output.jpg",
  format: "JPEG",
  quality: 10
})

• photoshop_close_document：關閉活動文檔。

// 示例：不保存關閉
photoshop_close_document({ save: false })

圖層操作

• photoshop_create_layer：創建一個新圖層。

// 示例：創建一個命名圖層
photoshop_create_layer({ name: "Background" })

• photoshop_delete_layer：刪除活動圖層。

// 示例：刪除當前圖層
photoshop_delete_layer()

• photoshop_create_text_layer：創建一個文本圖層。

// 示例：創建一個文本圖層
photoshop_create_text_layer({
  text: "Hello World",
  x: 200,
  y: 150,
  fontSize: 48
})

• photoshop_fill_layer：用純色填充活動圖層。

// 示例：用藍色填充
photoshop_fill_layer({
  red: 0,
  green: 100,
  blue: 255
})

• photoshop_get_layers：獲取活動文檔中所有圖層的列表。

// 示例：列出所有圖層
photoshop_get_layers()

• photoshop_set_layer_opacity：設置活動圖層的不透明度。

// 示例：將不透明度設置為75%
photoshop_set_layer_opacity({ opacity: 75 })

• photoshop_set_layer_blend_mode：設置活動圖層的混合模式。

// 示例：將混合模式設置為正片疊底
photoshop_set_layer_blend_mode({ blendMode: "MULTIPLY" })

• photoshop_set_layer_visibility：顯示或隱藏活動圖層。

// 示例：隱藏圖層
photoshop_set_layer_visibility({ visible: false })

• photoshop_set_layer_locked：鎖定或解鎖活動圖層。

// 示例：鎖定圖層
photoshop_set_layer_locked({ locked: true })

• photoshop_rename_layer：重命名活動圖層。

// 示例：重命名圖層
photoshop_rename_layer({ name: "Hero Image" })

• photoshop_duplicate_layer：複製活動圖層。

// 示例：複製圖層並命名
photoshop_duplicate_layer({ newName: "Background Copy" })

• photoshop_merge_visible_layers：將所有可見圖層合併為一個。

// 示例：合併可見圖層
photoshop_merge_visible_layers()

• photoshop_flatten_image：將所有圖層合併為一個背景圖層。

// 示例：合併圖像
photoshop_flatten_image()

• photoshop_rasterize_layer：將活動圖層柵格化（將文本/智能對象轉換為普通圖層）。

// 示例：柵格化圖層
photoshop_rasterize_layer()

圖層排序

• photoshop_move_layer_to_position：相對於另一個圖層移動活動圖層。

// 示例：將圖層移動到“Background”上方
photoshop_move_layer_to_position({
  targetLayerName: "Background",
  position: "ABOVE"
})

• photoshop_move_layer_to_top：將活動圖層移動到圖層堆棧的頂部。

// 示例：移動到頂部
photoshop_move_layer_to_top()

• photoshop_move_layer_to_bottom：將活動圖層移動到圖層堆棧的底部。

// 示例：移動到底部
photoshop_move_layer_to_bottom()

• photoshop_move_layer_up：將活動圖層向上移動一個位置。

// 示例：向上移動
photoshop_move_layer_up()

• photoshop_move_layer_down：將活動圖層向下移動一個位置。

// 示例：向下移動
photoshop_move_layer_down()

圖層變換

• photoshop_fit_layer_to_document：縮放活動圖層以適應文檔畫布，同時保持縱橫比。

// 示例：將圖層適配到畫布內
photoshop_fit_layer_to_document({ fillDocument: false })

// 示例：填充整個畫布（必要時裁剪）
photoshop_fit_layer_to_document({ fillDocument: true })

• photoshop_scale_layer：按百分比縮放活動圖層。

// 示例：縮放至150%
photoshop_scale_layer({
  scalePercent: 150,
  centerAnchor: true
})

• photoshop_move_layer：按指定偏移量移動活動圖層。

// 示例：將圖層向右移動100px，向下移動50px
photoshop_move_layer({
  deltaX: 100,
  deltaY: 50
})

• photoshop_rotate_layer：旋轉活動圖層。

// 示例：順時針旋轉45度
photoshop_rotate_layer({ degrees: 45 })

濾鏡

• photoshop_apply_gaussian_blur：對活動圖層應用高斯模糊濾鏡。

// 示例：應用10px模糊
photoshop_apply_gaussian_blur({ radius: 10 })

• photoshop_apply_sharpen：應用銳化濾鏡。

// 示例：銳化圖像
photoshop_apply_sharpen({
  amount: 100,
  radius: 1.5,
  threshold: 0
})

• photoshop_apply_noise：應用添加雜色濾鏡。

// 示例：添加雜色
photoshop_apply_noise({
  amount: 10,
  distribution: "GAUSSIAN",
  monochromatic: false
})

• photoshop_apply_motion_blur：應用動感模糊濾鏡。

// 示例：應用動感模糊
photoshop_apply_motion_blur({
  angle: 45,
  radius: 20
})

顏色調整

• photoshop_adjust_brightness_contrast：調整亮度和對比度。

// 示例：增加亮度和對比度
photoshop_adjust_brightness_contrast({
  brightness: 20,
  contrast: 15
})

• photoshop_adjust_hue_saturation：調整色相、飽和度和亮度。

// 示例：調整顏色
photoshop_adjust_hue_saturation({
  hue: 30,
  saturation: 20,
  lightness: 0
})

• photoshop_auto_levels：應用自動色階調整。

// 示例：自動色階
photoshop_auto_levels()

• photoshop_auto_contrast：應用自動對比度調整。

// 示例：自動對比度
photoshop_auto_contrast()

• photoshop_desaturate：將圖層去飽和（轉換為灰度）。

// 示例：去飽和
photoshop_desaturate()

• photoshop_invert：反轉圖層的顏色。

// 示例：反轉顏色
photoshop_invert()

文本格式化

• photoshop_set_text_font：為活動文本圖層設置字體和字號。

// 示例：更改字體
photoshop_set_text_font({
  fontName: "Helvetica",
  fontSize: 48
})

• photoshop_set_text_color：為活動文本圖層設置顏色。

// 示例：將文本設置為藍色
photoshop_set_text_color({
  red: 0,
  green: 100,
  blue: 255
})

• photoshop_set_text_alignment：設置文本對齊方式。

// 示例：將文本居中對齊
photoshop_set_text_alignment({ alignment: "CENTER" })

• photoshop_update_text_content：更新活動文本圖層的文本內容。

// 示例：更新文本
photoshop_update_text_content({ text: "New Text" })

選區和蒙版

• photoshop_select_rectangle：創建一個矩形選區。

// 示例：選擇區域
photoshop_select_rectangle({
  left: 100,
  top: 100,
  right: 500,
  bottom: 400
})

• photoshop_select_all：選擇整個文檔。

// 示例：全選
photoshop_select_all()

• photoshop_deselect：清除所有選區。

// 示例：取消選擇
photoshop_deselect()

• photoshop_invert_selection：反轉當前選區。

// 示例：反轉選區
photoshop_invert_selection()

• photoshop_create_layer_mask：根據當前選區創建一個圖層蒙版。

// 示例：創建蒙版
photoshop_create_layer_mask()

• photoshop_delete_layer_mask：從活動圖層中刪除圖層蒙版。

// 示例：刪除蒙版
photoshop_delete_layer_mask()

• photoshop_apply_layer_mask：將圖層蒙版應用（合併）到圖層。

// 示例：應用蒙版
photoshop_apply_layer_mask()

歷史記錄與撤銷/重做

• photoshop_undo：撤銷上一個操作（相當於Ctrl/Cmd+Z）。

// 示例：撤銷上一個操作
photoshop_undo()

// 示例：撤銷上3個操作
photoshop_undo({ steps: 3 })

• photoshop_redo：重做之前撤銷的操作（相當於Ctrl/Cmd+Shift+Z）。

// 示例：重做上一個撤銷的操作
photoshop_redo()

// 示例：重做上2個撤銷的操作
photoshop_redo({ steps: 2 })

• photoshop_get_history：獲取活動文檔的歷史狀態。

// 示例：查看歷史記錄
photoshop_get_history()

動作與自動化

• photoshop_play_action：播放動作面板中錄製的動作。

// 示例：播放動作
photoshop_play_action({
  actionName: "My Action",
  actionSetName: "Default Actions"
})

• photoshop_execute_script：執行自定義ExtendScript代碼（高級）。

// 示例：執行自定義代碼
photoshop_execute_script({
  code: "app.beep();"
})

圖像操作

• photoshop_resize_image：調整活動圖像的大小。

// 示例：調整為Instagram帖子大小
photoshop_resize_image({
  width: 1080,
  height: 1080
})

• photoshop_crop_document：將文檔裁剪到指定邊界。

// 示例：裁剪文檔
photoshop_crop_document({
  left: 100,
  top: 100,
  right: 1820,
  bottom: 980
})

• photoshop_place_image：將圖像文件作為圖層放置在活動文檔中。

// 示例：在指定位置放置圖像
photoshop_place_image({
  filePath: "/Users/username/Pictures/photo.jpg",
  x: 100,
  y: 200
})

• photoshop_open_image：將圖像文件作為新文檔打開。

// 示例：打開圖像
photoshop_open_image({
  filePath: "/Users/username/Pictures/photo.jpg"
})

示例提示

以下是在配置此MCP服務器後，你可以與AI助手（Claude、Cursor等）一起使用的示例提示：

創建一個1920x1080的Photoshop文檔，顏色模式為RGB。
添加一個淺藍色背景圖層，並用RGB(240, 248, 255)填充。
添加居中的文本“Welcome”，字體大小為64pt。
保存為welcome.psd到桌面。

在Pexels上搜索“mountain sunset”圖片。
創建一個1920x1080的Photoshop文檔。
放置下載的圖片並使其填充整個畫布。
應用3px的輕微高斯模糊。
將亮度增加15，對比度增加10。
在頂部居中添加白色文本“Adventure Awaits”，字體大小為72pt。
將文本不透明度設置為90%，混合模式設置為疊加。
以質量10保存為adventure.jpg。

在Photoshop中打開桌面上的photo.jpg。
應用自動色階和自動對比度。
應用銳化濾鏡，數量為120%，半徑為1.5，閾值為0。
將飽和度增加15。
裁剪圖像，各邊緣去除100px。
以質量12保存為enhanced-photo.jpg。

創建一個1200x800的文檔。
添加一個名為“Background”的新圖層，並用RGB(50, 50, 50)填充。
在位置(100, 100)放置logo.png。
將logo圖層縮放至當前大小的50%。
將混合模式設置為濾色，不透明度設置為85%。
添加另一個圖層，用RGB(255, 100, 50)填充。
將此圖層的混合模式設置為正片疊底，不透明度設置為60%。
合併所有可見圖層。
保存為composite.psd。

創建一個1080x1350的豎版文檔（Instagram故事尺寸）。
添加一個圖層，並用類似漸變的顏色RGB(120, 40, 200)填充。
在(540, 300)處添加文本“SUMMER”，字體大小為96pt。
將文本顏色更改為白色RGB(255, 255, 255)。
將文本對齊方式設置為居中。
在(540, 450)處添加另一個文本“2026”，字體大小為128pt，顏色為白色。
對背景圖層應用2px的高斯模糊。
保存為summer-poster.png。

打開image1.jpg。
調整大小為1920x1080。
應用自動對比度。
應用輕微銳化（數量80%，半徑1.0）。
以質量10保存為processed-1.jpg。
不保存更改關閉原始文檔。

對image2.jpg和image3.jpg重複上述操作。

創建一個2000x2000的正方形文檔。
放置abstract-pattern.jpg並使其填充文檔。
複製該圖層。
在複製的圖層上，應用45度、半徑50px的動感模糊。
將混合模式設置為疊加，不透明度設置為70%。
添加居中的白色文本“MOTION”，字體大小為120pt。
從(200, 200)到(1800, 1800)創建一個矩形選區。
反轉選區並刪除（以創建邊框效果）。
合併圖像。
保存為motion-art.jpg。

創建一個3000x2000、分辨率為300 DPI的文檔用於打印。
放置hero-image.jpg並使其填充畫布。
複製圖像圖層。
在複製的圖層上，完全去飽和。
將混合模式設置為亮度，不透明度設置為50%。
創建一個名為“Overlay”的新圖層。
用RGB(255, 150, 0)填充，並將混合模式設置為柔光，不透明度設置為30%。
在頂部中心(1500, 200)處添加文本“PORTFOLIO”，字體大小為96pt。
將文本顏色設置為白色。
在(1500, 320)處添加子文本“2026 Collection”，字體大小為36pt。
圍繞文本區域創建一個矩形選區。
在覆蓋圖層上創建一個圖層蒙版。
合併可見圖層。
保存為portfolio-cover.psd。
以質量12導出為portfolio-cover.jpg。

打開my-photo.jpg。
播放“My Actions”集中的“Vintage Look”動作。
將亮度調整為-10以稍微變暗。
保存為vintage-photo.jpg。

執行以下自定義ExtendScript代碼：
app.beep();
alert('Processing started!');

對活動圖層應用15px的高斯模糊。
[等待結果]
實際上，模糊效果太強了。撤銷該操作。
改為應用5px的高斯模糊。

獲取歷史狀態以查看執行了哪些操作。
撤銷最後3個操作。
重做1步以恢復一個操作。

🔧 技術細節

上下文跟蹤

每個工具都會返回有關Photoshop當前狀態的全面上下文信息，包括：

• 文檔信息：名稱、尺寸、分辨率、顏色模式、圖層數量
• 活動圖層信息：名稱、類型、不透明度、混合模式、可見性、鎖定狀態
• 選區狀態：是否有活動選區
• 操作結果：關於所做更改的具體細節

這使AI助手能夠了解：

• 哪個文檔處於活動狀態
• 正在處理哪個圖層
• 當前圖層屬性（不透明度、混合模式等）
• 文檔尺寸和設置

示例響應：

{
  "applied": true,
  "filter": "Gaussian Blur",
  "radius": 10,
  "wasRasterized": true,
  "context": {
    "hasDocument": true,
    "document": {
      "name": "design.psd",
      "width": 1920,
      "height": 1080,
      "resolution": 72,
      "colorMode": "RGBColorMode",
      "layerCount": 3,
      "hasSelection": false
    },
    "activeLayer": {
      "name": "Background",
      "kind": "NORMAL",
      "opacity": 100,
      "blendMode": "NORMAL",
      "visible": true,
      "locked": false,
      "isBackground": false
    }
  }
}

此上下文有助於AI助手在多個命令中記住正在處理的文檔和圖層。

平臺特定說明

Windows

• 使用COM自動化與Photoshop通信。
• 基於註冊表自動檢測安裝路徑。
• 支持32位和64位版本。

macOS

• 使用AppleScript/OSA與Photoshop通信。
• 基於Spotlight自動檢測。
• 支持同時安裝多個Photoshop版本。

支持的Photoshop版本

• 所有Photoshop版本（2012 - 2025+）：通過AppleScript（macOS）或COM（Windows）使用ExtendScript API。

重要提示：雖然Photoshop 2022+支持UXP用於插件，但通過AppleScript/COM進行的外部自動化只能使用ExtendScript。UXP是為內部插件設計的，無法從外部腳本調用。因此，此MCP服務器使用ExtendScript以確保在所有Photoshop版本上的最大兼容性。

架構

photoshop-mcp/
├── src/
│   ├── core/              # MCP服務器核心
│   │   ├── server.ts      # 主MCP服務器
│   │   ├── session.ts     # 會話管理
│   │   └── tool-registry.ts  # 工具註冊系統
│   ├── platform/          # 特定平臺的檢測與執行
│   │   ├── detector.ts    # 主檢測器
│   │   ├── connection.ts  # 連接管理器
│   │   ├── windows-detector.ts  # Windows註冊表檢測
│   │   ├── windows-executor.ts  # Windows COM自動化
│   │   ├── macos-detector.ts    # macOS Spotlight檢測
│   │   └── macos-executor.ts    # macOS AppleScript執行
│   ├── api/              # Photoshop API抽象
│   │   ├── photoshop-api.ts    # API工廠
│   │   ├── batch-play.ts       # UXP batchPlay助手（舊版）
│   │   └── extendscript.ts     # ExtendScript代碼片段庫
│   ├── tools/            # MCP工具實現（42+工具）
│   │   ├── document-tools.ts        # 文檔操作
│   │   ├── layer-tools.ts           # 圖層創建/刪除
│   │   ├── layer-properties-tools.ts # 不透明度、混合模式等
│   │   ├── layer-transform-tools.ts  # 縮放、旋轉、移動
│   │   ├── image-tools.ts           # 調整大小、裁剪
│   │   ├── image-placement-tools.ts # 放置/打開圖像
│   │   ├── filter-tools.ts          # 模糊、銳化、雜色
│   │   ├── adjustment-tools.ts      # 顏色調整
│   │   ├── text-tools.ts            # 文本格式化
│   │   ├── selection-tools.ts       # 選區和蒙版
│   │   └── action-tools.ts          # 動作和自定義腳本
│   └── utils/            # 實用工具
│       └── logger.ts     # 日誌系統（基於標準錯誤輸出）
└── examples/             # 配置示例
    ├── cursor-config.json
    └── claude-desktop-config.json

📄 許可證

本項目採用MIT許可證。

致謝

• 基於Model Context Protocol SDK構建。
• 受Adobe Photoshop腳本社區的啟發。

貢獻

歡迎貢獻代碼！請隨時提交拉取請求。

故障排除

"未找到Photoshop"

1. 確保Photoshop安裝在默認位置。
2. 或者設置 PHOTOSHOP_PATH 環境變量為自定義安裝路徑。

{
  "env": {
    "PHOTOSHOP_PATH": "C:\\Custom\\Path\\Adobe Photoshop 2025\\Photoshop.exe"
  }
}

"無法連接到Photoshop"

1. 確保Photoshop正在運行（如果未運行，服務器將嘗試啟動它）。
2. 檢查Photoshop首選項中是否啟用了腳本功能。
3. 在Windows上，驗證COM自動化是否未被安全設置阻止。

"腳本執行超時"

• 某些操作在處理大型文檔時可能需要更長時間。
• 默認超時時間為30秒。
• 對於複雜操作，考慮將其拆分為更小的步驟。

調試日誌

通過設置 LOG_LEVEL=0 啟用詳細日誌記錄：

{
  "env": {
    "LOG_LEVEL": "0"
  }
}

開發

構建

npm run build

監聽模式

npm run dev

代碼檢查與格式化

npm run lint
npm run format

快速開始示例

💡 常見用例