HenryLeTheSloth

Figma Implement — Design skill for Claude Code

Design community

Implement a Figma design as a pixel-perfect Shopify section, block, or snippet.

How to install Figma Implement

Installs to ~/.claude/commands/henrylethesloth-shopify_claude_skills-figma-implement.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/HenryLeTheSloth/shopify_claude_skills/HEAD/.claude/commands/figma-implement.md -o ~/.claude/commands/henrylethesloth-shopify_claude_skills-figma-implement.md

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

What Figma Implement does

description: Implement a Figma design as a pixel-perfect Shopify section, block, or snippet

Implement the Figma design at this URL as Shopify Liquid:

**$ARGUMENTS**

Step 0 — Check token system

Read `base.scss`. If CSS custom properties in `:root` are still commented out (no `--color-*`, `--space-*` values), stop and run `/shopify-tokens-setup` first with the same Figma fileKey. Do not proceed until `base.scss` has real token values.

Step 1 — Parse URL

Extract `fileKey` a

Alternatives in Design

Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
WP Block Themes — WordPress block theme development 902 ★
Xilinx Skill — Xilinx/AMD FPGA & MPSoC Vivado design skill for Claude — covers block design, IP config, XDC constraints, synt 394 ★