skills.rest
mercurjs
mercurjsOFFICIAL
Explore all skills by this author →
Website𝕏@mercurjsGitHub

figma-ui

Convert Figma designs into Mercur admin and vendor dashboard React code.

1.7k|436|Updated Apr 23, 2024
Search Tags:#Figma#design-to-code#medusa#Dashboard#Design system#ui generation#reAct
One-click install
npx skills add https://github.com/mercurjs/mercur --skill figma-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-ui
Source: https://github.com/mercurjs/mercur/tree/main/.claude/skills/figma-ui
Command: npx skills add https://github.com/mercurjs/mercur --skill figma-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Translating Figma mockups into dashboard code by hand often produces inconsistent UI: wrong components, arbitrary spacing values, hardcoded colors, and pages that don't match the surrounding codebase. This Skill reads a Figma design via the Figma MCP and generates React code for the Mercur admin or vendor dashboard that follows the project's design-system conventions exactly.

Core Features & Use Cases

  • Design-to-code conversion: Reads Figma nodes via get_screenshot and get_metadata, then maps each region to the correct @medusajs/ui or @mercurjs/dashboard-shared primitive with the right variant and props.
  • Convention enforcement through references: Ships component inventory, spacing/token scale, and structural pattern references covering page archetypes (list, detail, create, edit), section shells, RouteFocusModal/RouteDrawer hosts, Form.Field forms, DataTable, i18n, and data-testid rules.
  • Use Case: A developer shares a Figma URL for a new vendor payout settings screen. The Skill reads the screenshot, identifies it as an edit archetype, and generates a RouteDrawer page using Form.Field inputs, Medusa UI tokens, translation keys, and matching spacing—then verifies with bun run lint and bun run build.

Quick Start

Share a Figma frame URL and ask the assistant to convert this design into a Mercur admin or vendor dashboard page following the project design system.

Frequently Asked Questions about figma-ui

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

FAQPage Schema
How do I convert a Figma design to React dashboard code?▼

Share the Figma URL or select a frame, and the Skill reads it via the Figma MCP get_screenshot tool, then maps each region to Medusa UI or @mercurjs/dashboard-shared components. It picks variants and spacing from reference tables and outputs code matching the existing pages.

What component libraries does the generated Mercur dashboard code use?▼

Generated code uses only @medusajs/ui primitives and @mercurjs/dashboard-shared composites, with icons from @medusajs/icons. Third-party libraries like MUI, Chakra, Ant, Mantine, or lucide are explicitly forbidden.

Does the Figma to code workflow support both admin and vendor panels?▼

Yes, the Skill targets both packages/admin (operator surface, sdk.admin.*) and packages/vendor (seller surface, sdk.vendor.*). If the design does not make the surface obvious, the Skill asks before generating code.

How are Figma colors and spacing mapped to the design system?▼

Colors map to Medusa UI tokens like bg-ui-base and text-ui-fg-subtle, and spacing snaps to a fixed scale such as gap-y-3, px-6 py-4, and p-16. Hardcoded hex values or arbitrary spacing are forbidden; unmapped values are surfaced to the user.

What are the limitations of Figma design-to-code generation?▼

The Skill does not invent backend endpoints or data models, add new UI libraries, or push changes back to Figma. When a design needs a missing component or data contract, it stops and asks rather than improvising.

Related Skills

Explore More Software Engineering Skills→
ahandselahandsel
1

extract-copy-from-figma

Extract UX copy and layer names from Figma nodes into Markdown tables.

Community
Advanced
slingr-stackslingr-stack

frontend-data-api-hooks

Replace manual Apollo wiring with declarative useApi* data-access hooks for Drumr React components.

Official
Advanced
haryelramalhoharyelramalho

figma-implement-design

Translate Figma layouts into production-ready code with pixel-perfect fidelity.

Community
Advanced
nathangaleanathangalea

medusa-ui-conformance

Guide developers in implementing accessible UI components for Medusa admin and vendor dashboards.

Community
Basic