figma-to-shopify-section

Figma → Shopify Section

A Claude Code / Claude Cowork skill for building Shopify sections from Figma frames. Targets Dawn/Horizon-style themes (vanilla web components, CSS variables, Online Store 2.0 schema) and enforces a strict preview-and-verify loop so the agent never hands back work it hasn't visually confirmed against the Figma source.

What this skill does

Given a Figma frame, the agent:

1. Verifies the prerequisites are in place (Figma MCP, dev server, browser-control MCP).
2. Reads the theme to learn its conventions — sibling sections, settings_schema, color schemes, image patterns.
3. Generates the section: sections/*.liquid + section CSS + section JS + extracted snippets and SVG assets.
4. Wires the section into a JSON template so it can be previewed.
5. Populates sample content so the preview matches Figma's filled-in look.
6. Loads the preview URL through the browser MCP, screenshots at each Figma breakpoint, diffs against the source frame, reads the console + network tab, and reports concrete differences.
7. Only then declares "done."

Requirements

• Figma MCP server connected (mcp__figma-* tools available).
• A browser-control MCP — Claude in Chrome (mcp__claude-in-chrome__*) or Chrome DevTools MCP. Required for the verify step.
• A Shopify theme repo with Shopify CLI dev server running locally (default http://127.0.0.1:9292).
• A Figma file in Dev Mode with the target frame selected (or a frame URL/node ID handy).

If any of these are missing, the agent stops and tells the developer what to install.

Install

This repo is itself a Claude Code plugin marketplace. Pick whichever install method fits.

Claude Code — via marketplace (recommended)

/plugin marketplace add HaydonPowerShopify/figma-to-shopify-section
/plugin install figma-to-shopify-section@figma-to-shopify-section

You'll get /plugin update figma-to-shopify-section for future updates.

Claude Code — direct from URL (one-shot)

/plugin install https://github.com/HaydonPowerShopify/figma-to-shopify-section

Claude Cowork

Download the latest .plugin file from the Releases page (or build it yourself: cd <repo> && zip -r figma-to-shopify-section.plugin . -x "*.DS_Store"), then drag it into Cowork and accept the install prompt.

Local development install

git clone https://github.com/HaydonPowerShopify/figma-to-shopify-section.git
/plugin install ./figma-to-shopify-section

Configuration

The skill reads shopify.theme.toml if present to detect a non-default dev server port. Otherwise it assumes http://127.0.0.1:9292.

Usage

After installing, ask the agent something like:

Build this Figma frame as a Shopify section: https://www.figma.com/file/abc123/.../node-id=101%3A42

The skill auto-triggers on phrases like:

• "build this Figma section in Shopify"
• "convert Figma to a Shopify section"
• "turn this design into a section"
• "implement this Figma frame on the theme"

Repository structure

.
├── .claude-plugin/
│   ├── marketplace.json     # declares this repo as a marketplace listing the plugin
│   └── plugin.json          # the plugin manifest
├── skills/
│   └── figma-to-shopify-section/
│       ├── SKILL.md         # main skill entry — workflow + hard rules
│       ├── references/      # progressive-disclosure docs loaded on demand
│       ├── examples/        # canonical hero-banner example
│       └── scripts/         # validate-section.sh sanity checker
└── README.md

Contributing

Open issues and PRs against the main branch. The skill's conventions live in skills/figma-to-shopify-section/references/; new tips/gotchas are welcome additions there.

License

MIT (or update to your org's preferred license).