What this agent helps you do
A Shopify Dev Plugin and Figma storefront QA agent verifies that commerce changes match design and platform requirements. Shopify developer context supplies Liquid, GraphQL, storefront, API, and data guidance, while Figma supplies layouts, components, copy, responsive behavior, and interaction states.
When to use this workflow
Use it for product page redesigns, collection updates, checkout-adjacent features, theme changes, or storefront QA before release.
How Shopify Dev Plugin and Figma give the agent context
Connect both plugins and provide the Figma design plus the storefront feature or implementation area. Figma should show the desired experience; Shopify context should show what must be true for it to work in production. Keep code or storefront changes approval-based.
Example starter prompt
Compare this Figma design with Shopify implementation requirements and prepare a storefront QA checklist with visual, content, accessibility, data, API, edge case, and release risk checks.Suggested workflow steps
Start with the target design and storefront area. Have the agent inspect design states, responsive expectations, copy, and merchandising content, then check Shopify data requirements, Liquid or GraphQL constraints, and validation steps.
Expected handoff
Ask for visual QA, content checks, accessibility notes, data and API validation, edge cases, release risks, and approval-ready fixes.