“Figma”

Build or update a professional-grade design system in Figma from a codebase.

This skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma.

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as…

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as…

Professional Figma design analysis and asset export.

Router and composition workflows for Figma via the official Figma MCP: which Figma skill/tool for which job, capture-to-canvas (screenshots or shotcraft crops…

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call.

用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务，也用于将 HTML/React/Vue 等网页复制到 Figma，尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma…

Analyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design…

Use when 需要把现有 React、Vite、Next.js、V0 或 AI Studio 页面转换为 Figma Make 可导入的 .fig 资产，或补齐、更新、验证已有 Figma Make 导出壳和 canvas.fig。

Read a Figma design offline from a .fig export — layer tree, copy, component properties, layout, colors, design-token names, and original vector or raster…

Use when implementing, reviewing, or planning Angular UI from a Figma link/frame using tds-ui components and tds-color tokens, updating/syncing TDS token JSON…

Connects Figma design components to code components using Code Connect mapping tools.

Build or update a professional-grade design system in Figma from a codebase.

Capture web pages and send them to Figma as editable design files.

Use when the user shares a figma.com URL, wants to implement/mock a UI from Figma, or do design-to-code — connect the Figma MCP, fetch the design…

Compare a running app screen or code-rendered UI against a specific Figma design node, capture visual evidence, and report actionable discrepancies.

Generates custom design system rules for the user's codebase.

Convert design tokens from Figma Variables JSON, Figma MCP/plugin variables, or plain text into Flutter design-system Dart files.

Implement an entire Figma page by auto-splitting into frames with visual verification.

Implement an entire Figma page as Android Jetpack Compose screens by auto-splitting into frames with visual verification.

Design a Google Analytics 4 tracking plan (measurement plan) for a website, landing page, web-app flow, Figma design or codebase - business objectives, KPIs…

Extract the design of a screenshot, website URL or Figma file into a design.md with tokens, components, layout and brand rules, or copy one element (navbar…

Prove a running app matches its design spec by measuring rendered values, not eyeballing a screenshot.