前言：工具即生產力，自製擴展才是硬核進階

許多設計師渴望擁有專屬工作流面板，卻卡在「不會代碼」門檻。作者從求人無門到自主摸索，踩坑無數終獲成功，現將全流程無保留分享，助同行突破技術壁壘，從「使用工具」進化為「定製工具」，甚至探索視覺創造新疆域。

環境準備清單

項目	要求/版本	下載/備註
作業系統	Win7/Win8 首選，XP 未測，Mac 理論同理	—
目標軟體	Adobe CS6 系列（PS、InDesign）	CS5 版本稍後補充，方法通用
核心工具	Adobe Configurator 3.1	官方下載
運行依賴	Java Runtime Environment	官方下載 必須預裝
安裝器	Adobe Extension Manager CS6	隨 Creative Cloud/CS6 安裝

制作流程圖解步驟

1. 啟動 Configurator 3.1，選擇目標應用程式

2. 新建面板：設定面板名稱、ID、版本、作者等元數據

3. 拖拽組件構建 UI：從右側組件庫拖入按鈕、下拉選單、色板、文字輸入框等，佈局畫布

4. 綁定功能邏輯：為每個組件指定 JSX 腳本動作（執行選單命令、應用預設、運行腳本文件等）

5. 導出 .gmx 擴展包：File → Export Panel，生成可安裝的擴展文件

6. Extension Manager 安裝測試：雙擊 .gmx 或拖入 EM 安裝，重啟 PS/InDesign 驗證面板運行

進階拓展方向

• HTML5/JS/CSS 面板開發：Configurator 4+ / CEP 引擎支援現代前端技術棧，UI 表現力無上限
• UXP 統一插件平台：Adobe 現代插件架構，支援 PS、XD、ID 等多應用，Node.js 後端能力
• 自動化腳本庫封裝：將常用 JSX/VBS 腳本打包為面板按鈕，一鍵觸發複雜流程
• 團隊協作規範：統一面板分發、版本管理、使用培訓，沉澱組織級設計資產

避坑錦囊

• ✅ Java 版本與 Configurator 版本匹配（JRE 1.6+）
• ✅ JSX 腳本路徑使用相對路徑或 `File($.fileName).parent` 動態解析
• ✅ 面板 ID 全域唯一（反向域名格式 `com.yourname.panelname`）
• ✅ 圖標資源嵌入面板包，避免外部依賴失效
• ✅ 充分測試多語言界面、不同螢幕縮放比例下的佈局自適應

結語：從「會設計」到「造工具」的跨越

自製擴展面板，不僅解決個人工作流痛點，更是設計師向技術型設計師、設計工程師轉型的關鍵一步。當你能用代碼定義工具行為，設計邊界將被無限推廣。歡迎加入「自造工具」行列，共同拓寬視覺創造的疆域！