Skills
.Work. You
Rest

source-command-gravity-tokens

Community

Apply Gravity design tokens to Figma screens

Design & Creative#typography#design system#components#figma#tokens#variables#gravity
Authorcodesour-design
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill solves the inconsistency of manually applying design system tokens when translating prototypes into Figma screens by automating Gravity component, typography, color, and spacing alignment.

Core Features & Use Cases

  • Design Token Application: Applies Gravity design system components, text styles, color variables, and spacing variables to Figma screens.
  • Figma Prototype Migration Support: Guides HTML-to-Figma transposition workflows by ensuring screens are connected to the correct design system resources.
  • Validation Workflow: Verifies applied changes through metadata checks and screenshots of sections and completed frames.

Quick Start

Use the source-command-gravity-tokens skill to apply Gravity design system tokens to the provided Figma screen URL or file key and node ID.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: source-command-gravity-tokens
Download link: https://github.com/codesour-design/gravity/archive/main.zip#source-command-gravity-tokens

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 545,000+ vetted skills library on demand.