Skills
.Work. You
Rest

figma-design-references

Community

Transform Figma designs into static HTML/CSS references for easy browser access.

Design & Creative#design system#figma#html/css#static design#reference conversion
Authortobilafinhangit
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill transforms Figma frames into static HTML/CSS references, providing a visual spec that engineers and designers can access directly in a browser without the need for a build step.

Core Features & Use Cases

  • Figma Frame to HTML/CSS: Converts Figma frames into static HTML/CSS files.
  • Browser-Openable Specs: Generates specs that are ready to be opened in a browser for visual reference.
  • Design System Translation Guide: Provides a guide to engineers on how to translate the design system for production use.
  • Use Case: Ideal for designers and engineers who want to translate Figma designs into a production-ready format without writing production code.

Quick Start

Use the figma-design-references skill with the Figma file URL 'https://figma.com/file/...'.

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-design-references
Download link: https://github.com/tobilafinhangit/skill-master/archive/main.zip#figma-design-references

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.