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

cgs.figma.link

Link Figma frames to the Screens section in spec.md.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about cgs.figma.link

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

FAQPage Schema
How do I link Figma designs to my specification document?▼

To link Figma designs to a spec, this skill parses user stories from spec.md, discovers Figma frames via MCP, and auto-matches them to screens by name. It then updates the spec.md file with a detailed screens table containing the matched Figma Node references.

How do I automatically generate a screens section in spec.md from Figma?▼

Automatic screen generation works by analyzing your app source code for UI structure and matching it with Figma frames. You provide a Figma URL, and the skill populates the Screens section in spec.md with linked design references for visual testing.

Can I overwrite existing Figma Node references in spec.md when updating screens?▼

Yes, you can overwrite existing Figma Node values by using the force flag. Without the force flag, the skill preserves your existing Figma Node references in spec.md while updating the rest of the screens table.

How does automated Figma frame matching work for application screens?▼

Automated Figma frame matching works by parsing acceptance criteria from your specification and analyzing your app source code. It discovers Figma frames using MCP and auto-matches them to screens based on name similarity to generate accurate visual references.

What do I need to set up before linking Figma frames to spec.md?▼

Before linking Figma frames, you need a spec.md file containing defined user stories and acceptance criteria, your app source code available for UI structure analysis, and a valid Figma URL for the skill to discover frames using MCP.

Related Skills

Explore More Design & Creative Skills→
bitovibitovi
24

cascade-analyze-figma-frame-mcp

Analyze a Figma frame's image, context, structure, and metadata via MCP.

Official
Advanced
Eva813Eva813
2

ai-pm

Generate engineer-ready draft specifications from Figma designs.

Community
Advanced
OniroHuaverOniroHuaver
30

figma-generate-design

Create Figma screens from JSON design specifications using design system components.

Community
Advanced
figmafigma
1.9k

code-connect-components

Map Figma components to code implementations using Code Connect.

Official
Advanced