FigJam 外掛開發需要理解 Figma API 限制與 WebSocket 通訊模式。此技能提供在 FigJam 畫布中渲染 AWS 架構圖的外掛建置、除錯與部署指引。
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"figjam-plugin" 사용 중입니다. How do I set up a FigJam plugin with the two-thread architecture?
예상 결과:
- 主執行緒（code.ts）：處理 Figma API 與畫布渲染，不可使用瀏覽器 API
- UI 執行緒（ui.ts）：管理 WebSocket 連線與瀏覽器 API
- 通訊：CLI 與 UI 之間使用 WebSocket，UI 與主執行緒之間使用 postMessage
- 在 packages/plugin 目錄使用 'bun run build' 建置
- 透過 Figma Desktop → Plugins → Development → Import from manifest 匯入
"figjam-plugin" 사용 중입니다. How do I debug WebSocket connection issues?
예상 결과:
- 在外掛 UI 上開啟瀏覽器 DevTools（右鍵 → Inspect）
- 檢查 console 的連線狀態與錯誤訊息
- 確認 WebSocket 伺服器已透過 CLI 在本機執行
- 查看 UI 與主執行緒之間的 postMessage 錯誤
- 使用 Figma console 進行主執行緒除錯
보안 감사
안전Documentation-only skill containing only markdown prompts and JSON metadata. No executable code, scripts, network calls, file system access, or external command execution. All 32 static findings are false positives triggered by markdown formatting (backticks in code blocks) and JSON hash strings. This is a pure prompt-based skill providing development guidance.
위험 요인
🌐 네트워크 접근 (1)
📁 파일 시스템 액세스 (1)
품질 점수
만들 수 있는 것
建立 AWS 架構圖
建立以 YAML 驅動的 AWS 架構圖，並即時同步到 FigJam 以利團隊協作。
設定 FigJam 外掛專案
初始化並設定具備正確架構的雙執行緒 FigJam 外掛。
除錯外掛通訊
診斷 CLI 與外掛 UI 之間的 WebSocket 問題與連線故障。
이 프롬프트를 사용해 보세요
How do I set up a FigJam plugin with the two-thread architecture? Explain code.ts and ui.ts responsibilities.
My FigJam plugin is not connecting to the WebSocket server. What steps do I take to debug the connection?
How do I build the FigJam plugin and import it into Figma Desktop? What is the manifest.json configuration?
How do I debug errors in code.ts (main thread) that affect canvas rendering? What tools do I use?
모범 사례
- 保持主執行緒程式碼精簡，專注於畫布渲染
- 在 UI 執行緒中驗證並正規化資料後再送往主執行緒
- UI 錯誤用瀏覽器 DevTools，主執行緒錯誤用 Figma console
피하기
- 在 code.ts 使用瀏覽器 API（window、document、fetch）— 會失敗
- 在處理前跳過 JSON 輸入驗證
- 未在 Figma Desktop 環境測試就建置