Skills
.Work. You
Rest

cgs.figma.link

Community

Link Figma designs to spec screens.

Design & Creative#automation#design#specification#figma#visual testing#linking
AuthorCodeGeneration-2020
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the process of visually validating application screens by automatically linking Figma designs to corresponding sections in your spec.md file.

Core Features & Use Cases

  • Automated Screen Linking: Generates or updates the ## Screens section in spec.md and populates the Figma Node column with matched Figma frames.
  • Visual Testing Groundwork: Establishes a clear connection between your specification and the visual design, crucial for QA and development.
  • Use Case: After defining user stories and acceptance criteria in spec.md, run this Skill with a Figma URL to automatically find and link the relevant design frames, ensuring developers and testers know exactly which design corresponds to each screen.

Quick Start

Use the cgs.figma.link skill to generate the Screens section in spec.md and link Figma frames for visual testing using the provided Figma URL.

Dependency Matrix

Required Modules

None required

Components

references

💻 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: cgs.figma.link
Download link: https://github.com/CodeGeneration-2020/cgs-team-claude-setup/archive/main.zip#cgs-figma-link

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