skills.rest
ImL1s
ImL1sCOMMUNITY
Explore all skills by this author →
Website𝕏@l1s_aiGitHub

playwright-figma-scrape

Extract Figma design assets and build frame-to-code inventories via Playwright MCP.

6|Updated Apr 23, 2026
Search Tags:#automation#figma#mcp#playwright#design-tokens#scrape#layer-inventory
One-click install
npx skills add https://github.com/ImL1s/flutter-claude-skills --skill playwright-figma-scrape
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-figma-scrape
Source: https://github.com/ImL1s/flutter-claude-skills/tree/main/skills/playwright-figma-scrape
Command: npx skills add https://github.com/ImL1s/flutter-claude-skills --skill playwright-figma-scrape

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Figma MCP 限額限制官方工具的使用，當配額耗盡或需要批量處理多個 frame、提取 token、建立 frame-to-code 對照表時，這個工作流提供系統化解決方案。

Core Features & Use Cases

  • 輪批量抓取多個 frame 的截圖、token、以及 layer inventory。
  • 從 DOM 提取 design token 與元件屬性以對照設計和代碼實現。
  • 建立 frame-to-code 對照表與驗證流程，支援設計與實作的一致性檢查。
  • 適用於 Figma MCP 配額耗盡情形、需要批量處理與比對的任務場景。

Quick Start

透過觸發指令在 MCP 配額耗盡時批量抓取 Figma 設計稿的 frame、token 與 layer inventory。

Frequently Asked Questions about playwright-figma-scrape

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I batch extract Figma frames and design tokens when MCP quotas are exhausted?▼

You need Playwright MCP tools, a valid Figma fileKey, and access to target file and node ids. Provide these inputs to collect a complete frame inventory, extract tokens from the DOM, and generate frame-to-code mapping tables.

What is the best way to build a frame-to-code inventory from Figma design files?▼

Batch scrape Figma frames using Playwright to capture screenshots, extract DOM design tokens, and map layer structures. This generates a frame-to-code inventory that validates design implementation consistency across multiple components.

Can I use Playwright to scrape design tokens directly from the Figma DOM?▼

Playwright extracts design tokens and component attributes from the Figma DOM, enabling direct comparison between design specifications and code implementation. This supports consistency validation across batch-processed frames.

Does this Figma scraping approach work for batch processing multiple frames?▼

The workflow processes multiple Figma frames in batches, extracting screenshots, design tokens, and layer inventories systematically. It handles scenarios where multiple frames require scraping and comparison against code implementations.

Why does Figma MCP quota exhaustion prevent design asset extraction and how to work around it?▼

MCP quotas restrict official Figma API access, blocking batch asset extraction. Playwright automates browser-based scraping to capture screenshots, extract DOM tokens, and build layer inventories without relying on official API quotas.

Related Skills

Explore More Software Engineering Skills→
cano721cano721

figma-implement-design

Translate Figma designs into UI code using the Figma MCP server.

Community
Advanced
imehrimehr

shadcn-replication

Convert design tokens and DOM metadata into shadcn/Tailwind TSX components.

Community
Intermediate
hafiznaveedchuhan-ctrlhafiznaveedchuhan-ctrl

browser-use

Automate browser navigation, form filling, and data extraction via Playwright MCP.

Community
Intermediate
ImL1sImL1s
6

figma-playwright-fallback

Navigate Figma design workflows via Playwright when MCP quotas are exhausted.

Community
Advanced