figma-query

Plugin figma-query from marketplace standardbeagle-tools in standardbeagle/standardbeagle-tools. Commands read from the repo's manifest — 4 days ago.

Skills (28)

• figma-query-adversarial-design-library

  Adversarial cooperation loop for creating complete design library from Figma with CSS, assets, HTML mockups, and documentation. 對抗式協作循環，從 Figma 生成完整設計庫：CSS、資產、HTML、文檔。 Use when: extracting complete design library, running adversarial quality verification loop, creating production-ready component lib

• figma-query-build-docs

  \"Interactive wizard to build component and page documentation site from Figma using Go templates. 交互式嚮導：以 Go 模板從 Figma 構建組件與頁面文檔站點。 Use when: building design system documentation, generating component docs site, creating figma-to-html docs, interactive docs wizard, full documentation from figma\"

• figma-query-common-patterns

  Common Figma workflow patterns for design system extraction, component documentation, and asset management. Figma 常用工作流模式：設計系統提取、組件文檔、資產管理。 Use when: starting new Figma project, implementing component, exporting tokens, extracting icons, auditing design system

• figma-query-complete-extraction

  Complete design library extraction workflow with validation and dependency checking. 完整設計庫提取工作流：含驗證與依賴檢查。 Use when: extracting full design library, running all phases in order, extracting with validation, resuming failed extraction, automated design-to-code pipeline

• figma-query-component-extraction

  Extract single Figma component with CSS, assets, documentation, and HTML mockup. 單組件全量提取：CSS、資產、文檔、HTML。 Use when: extracting one component fully, generating component docs, exporting component CSS and assets, building HTML mockup from Figma component, component-level design library work

• figma-query-extract-assets

  \"Comprehensive asset extraction from Figma - finds ALL images, icons, and vectors including those without export settings. 全量提取 Figma 資產：含無導出設置的圖標與矢量。 Use when: exporting figma icons, extracting all images from figma, finding vector nodes without export settings, building asset manifest, exporting

• figma-query-extract-components

  \"Interactively extract components from Figma with SCSS/CSS using Go templates. 交互式提取 Figma 組件，以 Go 模板生成 SCSS/CSS。 Use when: extracting specific figma components, generating component SCSS, building component HTML mockups, exporting component previews, interactive component selection\"

• figma-query-extract-pages

  \"Interactively extract page mockups from Figma with SCSS/CSS layouts. 交互式提取 Figma 頁面模型及 SCSS/CSS 佈局。 Use when: extracting full page layouts, generating page HTML mockups, exporting page sections to SCSS, building page-level design artifacts, creating responsive page CSS\"

• figma-query-figma-components

  List all components in Figma file with variants, usage statistics, and categorization. 列出 Figma 文件所有組件：含變體、使用統計、自動分類。 Use when: taking component inventory, finding component IDs, checking variant details, analyzing component usage, categorizing design system components

• figma-query-figma-css

  Extract production-ready CSS from Figma nodes in multiple styling formats. 從 Figma 節點提取多種格式的生產就緒 CSS。 Use when: extracting CSS from components, generating Tailwind classes, getting SCSS with variables, extracting CSS for specific categories, writing CSS directly to output files

• figma-query-figma-diff

  Compare Figma file versions or exports to track design changes. 比較 Figma 文件版本或導出，追蹤設計變更。 Use when: tracking design changes over time, comparing two file versions, auditing style or token changes, regression checking, diffing local exports

• figma-query-figma-download

  Download images by imageRef ID or render Figma nodes as images. 按 imageRef ID 下載圖像，或將 Figma 節點渲染為圖像。 Use when: downloading image fills, rendering frames as PNG, creating documentation screenshots, exporting artboards, getting image fills for backgrounds

• figma-query-figma-export-assets

  Export images and icons from specific Figma nodes in multiple formats and scales. 從指定 Figma 節點導出圖像與圖標，支持多格式與多倍率。 Use when: exporting icons as SVG, exporting UI elements at multiple scales, batch exporting assets, rendering nodes as images, exporting for web and print

• figma-query-figma-export-tokens

  Export Figma design tokens to CSS, JSON, or Tailwind format for integration into development workflows. 導出 Figma 設計令牌為 CSS、JSON 或 Tailwind 格式。 Use when: exporting design tokens, generating CSS custom properties, creating Tailwind config from Figma, integrating tokens into CI/CD, version controlling

• figma-query-figma-info

  Get help documentation, tool information, and status from figma-query MCP server. 從 figma-query MCP 服務器獲取幫助文檔、工具信息與狀態。 Use when: first-time discovery of figma-query tools, checking server status, looking up query DSL operators, browsing workflow examples, debugging connection issues

• figma-query-figma-node

  Get full details for specific Figma node by ID with selective field projection. 按 ID 取節點詳情，支持字段投影。 Use when: inspecting specific node, getting CSS properties for node, retrieving layout or typography details, exploring node hierarchy, looking up node by ID

• figma-query-figma-query

  Execute powerful JSON DSL queries against Figma files with filtering, projection, and pagination. 對 Figma 文件執行 JSON DSL 查詢：過濾、投影、分頁。 Use when: finding nodes by type or property, filtering components by name pattern, querying with complex conditions, paginating large result sets, running from local c

• figma-query-figma-search

  Full-text search across Figma files by name, text content, or properties. 在 Figma 文件中按名稱、文本或屬性全文搜索。 Use when: finding nodes by name pattern, searching text content, finding nodes by color value, locating all icons, searching for components matching pattern

• figma-query-figma-styles

  List all styles in Figma file including colors, typography, effects, and grids. 列出 Figma 文件所有樣式：顏色、排版、效果、柵格。 Use when: auditing design styles, exporting color palette, reviewing typography system, checking effect styles, analyzing style usage counts

• figma-query-figma-sync

  Export complete Figma file to local grep-friendly folder structure for offline analysis and caching. 將完整 Figma 文件導出為本地目錄，支持離線分析與緩存。 Use when: caching Figma file locally, enabling offline queries, starting bulk operations, preparing for documentation, setting up CI/CD design pipeline

• figma-query-figma-tokens

  Get design token references and resolved values from Figma boundVariables. 從 Figma boundVariables 提取設計令牌引用與解析值。 Use when: auditing token usage, checking variable bindings on nodes, verifying token consistency across variants, exporting per-node token data, multi-mode light/dark analysis

• figma-query-figma-tree

  Get file structure as ASCII tree or JSON with node IDs for navigation. 以 ASCII 樹或 JSON 獲取文件結構與節點 ID。 Use when: exploring Figma file for first time, finding page and frame IDs, navigating file hierarchy, getting node IDs for other tools, understanding file organization

• figma-query-figma-wireframe

  Generate visual wireframe representations of Figma nodes with annotations and ID legends. 生成帶標注與 ID 圖例的 Figma 節點可視化線框圖。 Use when: understanding component structure, generating ID legends for subsequent tools, creating documentation visuals, analyzing layout and spacing, exploring node hierarchy visu

• figma-query-page-extraction

  Extract complete page/screen with all components, assets, and documentation. 提取完整 Figma 頁面/屏幕：組件、資產、文檔。 Use when: extracting full screen layout, documenting page design, generating page HTML mockup, extracting section CSS, building page-level design documentation

• figma-query-preflight-check

  Pre-flight validation before starting Figma extraction to prevent failures. 提取前飛行前驗證，預防中途失敗。 Use when: before running adversarial-design-library, validating Figma access, checking file has components, verifying output directory, estimating extraction size and time

• figma-query-recommender

  Routes any Figma / figma-query intent to the one right manual skill among 30+ — the single auto-invoked gateway; all other figma-query skills are manual. figma-query 唯一自動網關，導向正確之手動技藝。 Use when: mention Figma, extract components/pages/assets/tokens, query or search a Figma file, inspect nodes/styles/

• figma-query-setup-figma

  \"Set up figma-query MCP server with SLOP management and configure Figma access token. 配置 figma-query MCP 服務器及 Figma 訪問令牌。 Use when: setting up figma-query for first time, configuring figma access token, installing figma mcp server, troubleshooting figma connection, registering figma-query with slop

• figma-query-validate-extraction

  Validate Figma design library extraction for completeness and correctness. 驗證 Figma 設計庫提取的完整性與正確性。 Use when: after completing extraction, checking for broken references, validating tokens.css exists, verifying assets are present, confirming HTML examples work

Subagents (4)

• asset-verifier

  Adversarial verification agent that validates extracted assets, CSS accuracy, and documentation completeness. 對抗性驗證代理，核查提取資源、CSS準確性及文檔完整性. Use when: verify extraction, validate CSS accuracy, check documentation completeness, audit extracted assets, confirm component fidelity

• component-documenter

  Generate comprehensive documentation for Figma components including README, usage examples, and API reference. 為Figma組件生成全面文檔，含用例及API說明. Use when: document a component, write component README, generate usage examples, create API reference, document extracted Figma component

• html-generator

  Generate implementation-ready HTML mockups from extracted Figma components and pages. 從提取的Figma組件生成可實施HTML模型. Use when: generate HTML mockup, create HTML from Figma, build prototype from components, convert Figma page to HTML, generate implementation HTML

• library-extractor

  Extract complete design libraries from Figma with adversarial quality verification. 從Figma提取完整設計庫，含對抗性質量驗證. Use when: extract design library, extract Figma file, pull all components from Figma, download design system, extract tokens and assets

Similar plugins