skills.rest
CodeGeneration-2020
CodeGeneration-2020COMMUNITY
Explore all skills by this author →
GitHub

cgs.figma.capture

Capture application screen states from e2e tests and push them as Figma frames.

1|3|Updated Feb 26, 2026
Search Tags:#design#e2e tests#figma#sync#playwright#screens#capture
One-click install
npx skills add https://github.com/CodeGeneration-2020/cgs-team-claude-setup --skill cgs-figma-capture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cgs.figma.capture
Source: https://github.com/CodeGeneration-2020/cgs-team-claude-setup/tree/main/.claude/skills/cgs.figma.capture
Command: npx skills add https://github.com/CodeGeneration-2020/cgs-team-claude-setup --skill cgs-figma-capture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the process of capturing your application's screen states and pushing them directly into your Figma designs as frames, ensuring your design files accurately reflect the current UI.

Core Features & Use Cases

  • Automated Screen Capture: Discovers screen states from your project's end-to-end tests.
  • Figma Synchronization: Pushes captured screens as frames into a specified Figma file.
  • Smart Filtering: Allows capturing only new screens or specific screens based on filters.
  • Use Case: After developing a new feature, use this Skill to automatically generate Figma frames for all the new UI states discovered by your e2e tests, keeping your design and development assets in sync.

Quick Start

Use the cgs.figma.capture skill to capture all screens from the provided Figma URL.

Frequently Asked Questions about cgs.figma.capture

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

FAQPage Schema
How do I sync app screens from Playwright tests to Figma designs?▼

Yes, you can push new UI states to Figma by running this Skill to capture application screens from your e2e tests. It features smart filtering to capture only new screens not yet present in your Figma file, keeping designs in sync.

How does capturing screen states from end-to-end tests work?▼

Capturing screen states from end-to-end tests works by analyzing your project's e2e test files to discover screen states, using Playwright for browser automation to capture the UI, and pushing those screens as frames into Figma.

Can I filter which application screens are captured and pushed to Figma?▼

Yes, you can filter which application screens are captured and pushed to Figma. The Skill supports filtering by specific screen name and viewport, and offers an option to only capture new screens not already present in the Figma file.

Do I need Playwright to automate capturing screens for Figma integration?▼

Yes, you need Playwright to automate capturing screens for Figma integration. The Skill explicitly uses Playwright for browser automation to capture application screen states and Figma's MCP to push them as design frames.

What is the best way to keep Figma designs in sync with current UI from e2e tests?▼

The best way to keep Figma designs in sync with current UI from e2e tests is to automate the capture of screen states. This Skill discovers UI states from your tests and pushes them as frames into Figma, ensuring design files accurately reflect the current application.

Related Skills

Explore More Design & Creative Skills→
tomeraitztomeraitz
8

debugger

Execute automated browser user flows and monitor console logs with Playwright MCP.

Community
Advanced
xlelibertyxleliberty

figma-generate-design

Translate application pages into Figma screens using design system components.

Community
Advanced
i3ringiti3ringit
3

figma-design-sync

Detect and fix visual differences between Figma designs and web implementations.

Community
Advanced
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced