skills.rest
Scripsteam
ScripsteamOFFICIAL
Explore all skills by this author →
GitHub

figma-design-sweep

Catalog Figma canvases, components, design tokens, and metadata into an HTML inventory artifact.

Updated Aug 23, 2026
Search Tags:#figma#inventory#porting#token-metadata#html-artifact#design-sweep
One-click install
npx skills add https://github.com/Scripsteam/scrips-stack --skill figma-design-sweep
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-design-sweep
Source: https://github.com/Scripsteam/scrips-stack/tree/main/figma-design-sweep
Command: npx skills add https://github.com/Scripsteam/scrips-stack --skill figma-design-sweep

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Samer needs a structured way to catalog Figma files so canvases, components, tokens, and metadata are captured and published as an HTML inventory artifact. This sweep automates extraction and organization to support React porting and cross-file reference.

Core Features & Use Cases

  • Detect canvases, components, and design tokens; categorize canonical, deprecated, and partner canvases
  • Generate a single HTML artifact at ~/claude-os/artifacts/ containing the inventory, metric summaries, and DEV NOTES
  • Produce FHIR mappings automatically when clinical content is detected and include them in the artifact
  • Open questions and decisions are surfaced for Samer to review before porting

Quick Start

Ask Claude Code to sweep the currently open Figma file to generate the HTML inventory artifact in ~/claude-os/artifacts/.

Frequently Asked Questions about figma-design-sweep

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

FAQPage Schema
How do I catalog a Figma file into an HTML inventory?▼

You can sweep a Figma file to automatically catalog canvases, components, design tokens, and metadata into a single publishable HTML inventory artifact stored in your local artifacts directory.

What is the best way to extract design tokens and components from Figma for React porting?▼

Generating a structured Figma inventory surfaces design tokens, categorizes canonical and deprecated canvases, and includes DEV NOTES verbatim to provide a clear reference baseline before React porting.

Can I generate FHIR mappings from a Figma file containing clinical content?▼

Yes, when clinical content is detected during the Figma sweep, the tool automatically produces FHIR mappings and includes them directly in the generated HTML artifact.

Does the Figma design sweep require any specific dependencies or components?▼

No specific dependencies or components are required, but you need to open the Figma file in Desktop Bridge or invoke the sweep command to trigger the artifact generation.

How do I surface open questions and decisions from a Figma file before porting?▼

The sweep automatically extracts open questions and decisions from your Figma file and surfaces them within the HTML artifact for review before you begin the porting process.

Related Skills

Explore More Design & Creative Skills→
tmarsbrtmarsbr

figma-automation

Automate Figma file, component, token, and comment workflows via Rube MCP.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

figma-intake

Extract Figma file structure, design tokens, and component inventories into build-spec.json.

Official
Advanced
LutimiLutimi

cursor2figma

Import HTML into Figma and manage design tokens via an MCP server.

Community
Intermediate
vultisigvultisig
19

figma

Implement React components from Figma designs using MCP inspection.

Official
Advanced