skills.rest
adobecom
adobecomOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-to-merch-card

Convert Figma designs into MAS merch card variants with automated code generation.

1|1|Updated Apr 13, 2026
Search Tags:#code generation#AI#figma#design automation#MAS
One-click install
npx skills add https://github.com/adobecom/mas-claude-config --skill figma-to-merch-card
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-merch-card
Source: https://github.com/adobecom/mas-claude-config/tree/main/config/skills/figma-to-merch-card
Command: npx skills add https://github.com/adobecom/mas-claude-config --skill figma-to-merch-card

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-mcp, playwright-mcp, context7-mcp, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the conversion of Figma card designs into functional MAS merch card variants, significantly reducing the time and effort required for design-to-code integration.

Core Features & Use Cases

  • AI Visual Reasoning: Uses AI to interpret Figma designs and generate corresponding MAS merch card variants.
  • Automated Code Generation: Generates JavaScript class, responsive CSS, AEM fragment mapping, and variant registration for each card variant.
  • Use Case: For developers and designers who need to create new card variants from Figma designs, convert Figma designs to merch cards, or implement pricing card templates in the MAS system.

Quick Start

Use the figma-to-merch-card skill to convert a Figma design into a new card variant with the command: convert-figma <figma-url> <variant-name>.

Frequently Asked Questions about figma-to-merch-card

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a Figma design to a MAS merch card?▼

Converting a Figma design to a MAS merch card requires the Figma MCP, Playwright MCP, context7 MCP, and a local dev server. These dependencies enable AI visual reasoning and automated rendering validation for pixel-accurate output.

What does AI visual reasoning do for Figma to code conversion?▼

AI visual reasoning interprets Figma designs to autonomously generate corresponding MAS merch card variants. It uses a generate-test-fix loop with parallel agents to ensure pixel-accurate code output without manual adjustments.

How to generate pricing card templates from a Figma design?▼

Generate pricing card templates by running the `convert-figma` command with your Figma URL. The Skill automates code generation for the MAS system, creating the necessary JavaScript, CSS, and AEM fragment mappings.

Do I need a local dev server for Figma design automation?▼

Yes, a local dev server is required for Figma design automation using this Skill. It facilitates rendering validation during the autonomous generate-test-fix loop to ensure the generated merch cards are pixel-accurate.

Can I use Playwright MCP to validate generated merch card variants?▼

Yes, Playwright MCP is used to validate generated merch card variants. It integrates into the automated workflow to perform rendering validation, ensuring the AI-generated code matches the original Figma design accurately.

Related Skills

Explore More Software Engineering Skills→
wiltaylorwiltaylor

figma-implement-design

Convert Figma design files into application code with design tokens.

Community
Advanced
adobecomadobecom
1

card-variant-registry

List merch-card variants with field schemas, CSS classes, and slot mappings.

Official
Intermediate
CoRLab-TechCoRLab-Tech

pix-storybook

Generate Stencil components from Figma designs and test them visually with Playwright.

Official
Advanced
VoDaiLoczVoDaiLocz
24

figma-implement-design

Convert Figma designs into React components with Tailwind CSS.

Community
Advanced