pslhrd

Figma To CMS — Design skill for Claude Code

Design community

Analyze a Figma design frame and extract a CMS content schema — what's editable content vs decorative structure.

How to install Figma To CMS

Installs to ~/.claude/skills/pslhrd-figma-to-cms-figma-to-cms/SKILL.md

Terminal

mkdir -p ~/.claude/skills/pslhrd-figma-to-cms-figma-to-cms && curl -fsSL https://raw.githubusercontent.com/pslhrd/figma-to-cms/HEAD/commands/figma-to-cms.md -o ~/.claude/skills/pslhrd-figma-to-cms-figma-to-cms/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Figma To CMS does

Analyze a Figma design frame and extract a CMS content schema — what's editable content vs decorative structure. Then annotate the design directly in Figma.

**Core principle:** A CMS schema is a contract between the editor and the frontend — not a mirror of the design. The design shows one state. Your schema must account for all reasonable states.

0. Environment

This command requires the Figma MCP server connected to Claude Code:

Read — get_design_context + get_screenshot to fet

Alternatives in Design

Guitar — by soramimi - Serves as development guide for Guitar Git GUI Client with build commands for various platforms 1.7k ★
Icm Architect — Claude skill: design any process, idea, or problem into an ICM workspace (folder structure as agent architectu 1.3k ★
Drawbridge — Design editor for Claude Code and Cursor 960 ★