figma-to-deco
OfficialTurn Figma designs into Deco storefronts.
Authordecocms
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides an end-to-end workflow to translate a Figma design into a Deco storefront, bridging the gap between design and implementation, asset management, and QA validation.
Core Features & Use Cases
- End-to-end design-to-site workflow: read pages, map frames to Deco sections, configure loaders, and QA with Playwright.
- Asset and loader orchestration: download assets, set up data loaders, and ensure performance readiness.
- Reusable pattern for onboarding new Figma designs into Deco with consistent structure and review checks.
Quick Start
Provide a Figma design URL and the target Deco repository path, and this skill will generate the starter section templates, asset plan, and QA scaffolding ready for implementation.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: figma-to-deco Download link: https://github.com/decocms/storefront-skills/archive/main.zip#figma-to-deco Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.