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 ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Drawbridge — Design editor for Claude Code and Cursor 960 ★