HenryLeTheSloth

Shopify Tokens Setup — Design skill for Claude Code

Design community

Extract design tokens from Figma and populate base.scss (run once per project).

How to install Shopify Tokens Setup

Installs to ~/.claude/commands/henrylethesloth-shopify_claude_skills-shopify-tokens-setup.md

Terminal

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

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

What Shopify Tokens Setup does

description: Extract design tokens from Figma and populate base.scss (run once per project)

Extract design tokens from this Figma file and populate `base.scss`:

**$ARGUMENTS**

This is Phase 0 — must be completed before implementing any sections or components.

Step 1 — Parse file key

Extract `fileKey` from the Figma URL or use the provided fileKey directly.

Step 2 — Fetch design variables

Call `get_variable_defs(fileKey)` to get all design variables.

If the file has no defin

Alternatives in Design

Polish UI — Polish UI elements by auditing SCSS and TSX markup against the Anytype design system, then fixing discrepancie 8.7k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★