Extract Figma design context and generate React + Tailwind components.
npx skills add https://github.com/ollieb89/.codex --skill figma-ollieb89
Please help me install this Agent Skill. Skill: figma Source: https://github.com/ollieb89/.codex/tree/main/skills/.curated/figma Command: npx skills add https://github.com/ollieb89/.codex --skill figma-ollieb89
This skill enables teams to fetch structured design context, assets, and styling data from Figma via the MCP and translate it into production-ready UI code, reducing handoffs and rework.
Fetch the design context for a given Figma frame URL and generate React + Tailwind-ready components following the project design system.
High-intent search queries and answers about installing and using this skill.
To convert Figma designs to React components, this skill extracts structured node data and assets via Figma MCP, then translates design context into production-ready React + Tailwind code aligned with your project tokens.
Figma MCP provides structured design context, metadata, and screenshots from specific frames. This skill applies that output to generate UI code, fetching design_context, downloading assets, and validating against design references.
Yes, you can generate Tailwind code from a Figma frame URL. The skill processes the URL to retrieve design context and assets, converting styling data into Tailwind-ready components conforming to your codebase conventions.
You extract design tokens and assets from Figma by applying this skill to tasks involving node IDs and frame URLs. It retrieves structured styling data and downloads assets to translate outputs into your project design system conventions.
You need a Figma frame URL or node ID to fetch design context. The skill uses these inputs to retrieve structured node data, screenshots, and metadata required to translate designs into production-ready UI components.
Figma to React code generation may not match your design system if extracted tokens are not properly mapped to project conventions. This skill validates generated components against design references to ensure alignment and reduce rework.
viably-labsFetch Figma design context, assets, and variables via MCP server.
Higashi-KotaBuild accessible React UI components with design tokens and ARIA patterns.
tunacosgunAudit UI code against the emcn design system for conformance.
nguyennamkkbExtract Figma color, typography, and spacing styles into design tokens.
