Translates Figma nodes into Marobase Vue 3 + Vuetify code. Use when the user provides a Figma URL or node ID, or when implementing a design that must match Figma. Reuses existing Mp* components, follows app shell and page layout patterns, and generates or updates Storybook stories (and tests when needed).
Turns Figma designs into Marobase Vue/Vuetify code by reusing Mp* components and app patterns.
figma.com/design/...?node-id=...)get_design_context with fileKey and nodeId from the URL.figma.com/design/:fileKey/:fileName?node-id=:nodeId (convert - to : in nodeId for the API).CLAUDE.md for inventory:
MpPageHeader, MpFilterTabs, MpDataTableToolbar, MpEmptyState, MpFloatingBulkBarv-card flat border rounded="lg"; metrics → MpKpiCardMpStatusChip (with correct type)MpFormDrawer; section titles → MpSectionHeader.cursorrules: header → filter tabs → card → toolbar → table → empty state → bulk bar.AppBar + AppSidebar patterns from existing views.<script setup lang="ts">, Vuetify 3, design tokens (no hardcoded colors/spacing).src/views/ or src/components/ as appropriate.mdi-*).MpComponentName.stories.ts next to the component (see marobase-component-author skill).get_design_context to verify.CLAUDE.md — component list and data-table/form patterns.cursorrules — page view pattern and styling rulesdocs/figma-integration.md — Code Connect and token sync