figma-to-sfnext-pagedesigner
Installation
SKILL.md
Skill: figma-to-sfnext-pagedesigner
Convert a Figma frame into one or more live Storefront Next Page Designer blocks in one shot.
One block per section. Inspect the top-level frame and identify distinct visual sections (hero, feature strip, product row, footer band, etc.). Each section becomes its own PD component with its own file, typeId, and decorator. Run Phases 1–4 once per section before moving to the next.
Prerequisites
- Figma MCP server configured in your AI tool — the skill reads design context through it. Without it, the skill can only act as a manual checklist.
- Browser MCP (Playwright or similar) — for the Phase 5 visual validation. Optional but recommended.
- A Storefront Next project in a git repo, with the
sfnextCLI available (pnpm sfnext …). ghCLI authenticated (gh auth status) if you want the skill to clone/push for you.- A Figma frame URL that includes a
node-id.
When to use
Invoke this skill (/figma-to-sfnext-pagedesigner) whenever the user provides a Figma URL and wants the design to become a merchant-authorable Page Designer component in a Storefront Next project.