Build Shopify sections (Liquid + schema + snippets + assets) from Figma frames following Dawn/Horizon conventions, with a strict preview-and-verify loop. Requires Figma MCP and a browser-control MCP.
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.
Given a Figma frame, the agent:
sections/*.liquid + section CSS + section JS + extracted snippets and SVG assets.mcp__figma-* tools available).mcp__claude-in-chrome__*) or Chrome DevTools MCP. Required for the verify step.http://127.0.0.1:9292).If any of these are missing, the agent stops and tells the developer what to install.
This repo is itself a Claude Code plugin marketplace. Pick whichever install method fits.
/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.
/plugin install https://github.com/HaydonPowerShopify/figma-to-shopify-section
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.
git clone https://github.com/HaydonPowerShopify/figma-to-shopify-section.git
/plugin install ./figma-to-shopify-section
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.
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:
.
├── .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
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.
MIT (or update to your org's preferred license).
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub haydonpowershopify/figma-to-shopify-section --plugin figma-to-shopify-sectionBuild clean Shopify theme sections from Figma using plain CSS only — no Tailwind build, no Shopify CLI. One scoped CSS file per section, no inline Figma styles, verify against a shared preview link.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Frontend design skill for UI/UX implementation
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Memory compression system for Claude Code - persist context across sessions
Marketing skills for AI agents — conversion optimization, copywriting, SEO, paid ads, ad creative, and growth
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.