skills.rest
capella-hotel-group
capella-hotel-groupOFFICIAL
Explore all skills by this author →
GitHub

aem-skill-create-block-from-figma

Scaffolds AEM EDS xwalk blocks from Figma designs via the Figma MCP server.

Updated Apr 6, 2026
Search Tags:#typescript#code generation#figma#mcp#aem#edge delivery services#block scaffolding
One-click install
npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill aem-skill-create-block-from-figma-capella-hotel-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aem-skill-create-block-from-figma
Source: https://github.com/capella-hotel-group/capella-hotel-group-poc/tree/main/.github/skills/aem-skill-create-block-from-figma
Command: npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill aem-skill-create-block-from-figma-capella-hotel-group

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually translating a Figma design into an AEM Edge Delivery Services xwalk block requires writing a TypeScript decorator, scoped CSS, and a component model JSON by hand, then registering the block and verifying the build. This Skill automates that entire scaffolding workflow from a single Figma URL. ## Core Features & Use Cases - Figma-driven scaffolding: Fetches design context through the Figma MCP server and generates <block-name>.ts, <block-name>.css, and _<block-name>.json under src/blocks/. - Structure and state detection: Infers simple vs. container+filter models, maps Figma elements to AEM field types, and detects multi-state or multi-step designs with mandatory trigger-type confirmation. - End-to-end registration and verification: Updates the section filter, regenerates Universal Editor JSON via npm run build:json, runs the Vite build until it passes, and produces a demo content-entry prompt. - Use Case: A developer pastes a Figma URL for a new hero banner; the Skill generates the block files, registers it in the Universal Editor, verifies the build, and outputs a ready-to-paste content prompt. ## Quick Start Ask the agent to create an AEM block named hero-banner from your Figma design URL, optionally including a short description of interactions or states.

Frequently Asked Questions about aem-skill-create-block-from-figma

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

FAQPage Schema
How do I create an AEM EDS block from a Figma design?▼

Provide a kebab-case block name and a Figma URL containing the file key and node ID. The Skill fetches design context via the Figma MCP server, then generates the TypeScript decorator, CSS file, and component model JSON under src/blocks/.

What files are generated when scaffolding an AEM xwalk block?▼

Three files are created in src/blocks/<block-name>/: a TypeScript decorator file, a block-scoped CSS file, and a _<block-name>.json component model. The block is also added to the section filter and the root component JSON files are regenerated.

Does this Skill require the Figma MCP server?▼

Yes, the Figma MCP server must be configured in VS Code so the mcp_com_figma_mcp_* tools are available. If the server is not connected, the Skill stops with a setup message and generates no files.

How are multi-state Figma designs handled in AEM blocks?▼

When state frames like hover, loading, or step-1 are detected, the Skill asks how they are triggered: CSS-only, JS-driven, or visual reference only. JS-driven states generate data-state attribute logic in TypeScript with matching CSS selectors.

What are the limitations on AEM block model fields?▼

The component model is limited to a maximum of four fields. If more than four fields are inferred from the Figma design, the Skill stops and asks the developer to prioritize before generating any files.

Why is my new block not appearing in the Universal Editor?▼

The block must be added to the filters array in src/models/_section.json and the root component JSON files must be regenerated with npm run build:json. The Skill performs both steps automatically before verifying the build.

Related Skills

Explore More Software Engineering Skills→
reason-machinesreason-machines
4

vibefigma-figma-to-react

Convert Figma designs into React components with Tailwind CSS via the Figma API.

Official
Intermediate
aemsitesaemsites
1

content-driven-development

Orchestrate content-first AEM Edge Delivery development with real authored content validation.

Official
Advanced
yusaduymazyusaduymaz

gsd-inbox

Triage GitHub issues and pull requests against repository templates and guidelines.

Community
Intermediate
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate