figma-to-spirit
✓Convert Figma designs to React code using Spirit Web components. Use when working with Figma designs, implementing UI from Figma files, converting Figma autolayouts to code, or when the user mentions Figma, Spirit components, or design-to-code conversion.
Installation
SKILL.md
CRITICAL: Match Figma layer hierarchy exactly. Each Figma autolayout layer should have a corresponding Spirit layout component.
| "Design Block" or main page section | Section | | Need to constrain content width | Section containerProps={{ size: "..." }} | | Full-width section content | Section hasContainer={false} |
Important: Section includes Container by default - don't nest another Container inside.
Convert Figma designs to React code using Spirit Web components. Use when working with Figma designs, implementing UI from Figma files, converting Figma autolayouts to code, or when the user mentions Figma, Spirit components, or design-to-code conversion. Source: alma-oss/spirit-design-system.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/alma-oss/spirit-design-system --skill figma-to-spirit- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-11
- Updated
- 2026-02-18
Quick answers
What is figma-to-spirit?
Convert Figma designs to React code using Spirit Web components. Use when working with Figma designs, implementing UI from Figma files, converting Figma autolayouts to code, or when the user mentions Figma, Spirit components, or design-to-code conversion. Source: alma-oss/spirit-design-system.
How do I install figma-to-spirit?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/alma-oss/spirit-design-system --skill figma-to-spirit Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/alma-oss/spirit-design-system
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-11