---
name: 'figma-to-code'
description: 'Converts Figma designs to Wangsvue code following strict mapping rules and color system. Invoke when user provides Figma section link or node ID'
---

# Figma to Code Logic

This skill provides strict guidelines for converting Figma designs or React/JSX code into Wangsvue Vue 3 components.

## 0. Figma Discovery Protocol (Link/Node ID)

**Invoke this protocol when a Figma URL or Node ID is provided:**

1. **Extract Node ID:** If a URL is provided (e.g., `...node-id=1-2`), extract the ID (e.g., `1:2`).
2. **Call `mcp_figma-dev_get_design_context`:** Use the `nodeId` to get the design metadata and code.
3. **Analyze Variables:** Call `mcp_figma-dev_get_variable_defs` for the node to map any design tokens to the Wangsvue color system.

## 1. Core Conversion Logic

When converting from Figma or React:

1. **Strict Conversion:** Convert all React hooks/JSX into Vue 3 Composition API.
2. **Component Mapping:** You MUST identify and use the correct **Wangsvue Component** from the MCP. Do not use generic HTML if a Wangsvue component exists.
3. **Style Abstraction:** **DO NOT** convert Figma color variables or design system tokens manually. Trust the Wangsvue components to provide and handle the design system.
4. **Layout Focus:** Concentrate exclusively on:
   - **Layout Structure:** Component hierarchy and nesting.
   - **Layout Style:** Flex/Grid positioning, spacing, alignment, and sizing.
   - **Custom Style:** Apply only to non-Wangsvue elements where layout-specific CSS is required.
   - You MUST use tailwind css class instead of css in `<style>` block.
5. **Architecture:** You MUST break flat code into the appropriate folder defined in the **Project Structure**. Logic in `components/modules/`, NOT in views.

## 2. Component Discovery Protocol

**ALWAYS ASK BEFORE USING GENERIC COMPONENTS OR MANUAL STYLING:**

1. **Search First:** If you need functionality (Filter, Download, Bulk action, Search, Upload, Copy), search the component list first.
2. **Structural Components:** If you need a container, card, form, modal, panel, or loading state, check if Wangsvue has a specialized component (e.g., `Card`, `Dialog`, `Form`, `Loading`).
3. **Mental Shift:**
   - ❌ OLD: `<div class="bg-white p-4">` → ✅ NEW: `<Card>`
   - ❌ OLD: `<Button>` for download → ✅ NEW: `<ButtonDownload>`

## 3. Figma Conversion Rules

### Component Replacement Logic

- **`data-name="ComponentName"`** = Replace this entire element with `<ComponentName>`
- **NOT** wrap `<ComponentName>` inside this element.
- **Example:** `<div data-name="Breadcrumb">...</div>` → `<Breadcrumb />`
- **Exception:** If `data-name` is NOT in Wangsvue component list, it may be a custom layout name - keep as div with appropriate classes.

### No Double Wrapping

- ❌ **WRONG:** `<div><Breadcrumb /></div>` (when div only contains 1 component)
- ✅ **CORRECT:** `<Breadcrumb />` (every Vue component has root element)
- **Rule:** If container has only 1 component, remove the container.

### Trust Component Styling

- ❌ **NEVER:** Add styling to Wangsvue components.
- ✅ **ALWAYS:** Trust component's built-in design system.
- **Exception:** Layout positioning only (margin, positioning).
- **Example:** `<Breadcrumb class="mb-4" />` (spacing OK), `<Breadcrumb class="flex gap-2" />` (styling NOT OK).

### Figma Data-Name Decision Tree

```
Figma element has data-name="SomeName"
    ↓
Check: Is "SomeName" in Wangsvue component list?
    ↓
YES → Replace: <div data-name="Button"> → <Button />
    ↓
NO → Keep as layout: <div data-name="HeaderSection"> → <div class="...">
```

### Exact Value Preservation

- ❌ **WRONG:** `h-[21px]` → `h-5` (20px ≠ 21px)
- ✅ **CORRECT:** Keep exact values `h-[21px]`
- **Rule:** 1px difference matters for pixel-perfect design.

## 4. Color System Protocol

**WANGSVUE COLOR SYSTEM RULES:**

- ❌ **NEVER use CSS variables**: `bg-[var(--general/content,#ebeaf0)]`
- ✅ **ALWAYS use Tailwind color tokens**: `bg-general-50`
- ❌ **NEVER use hex colors directly**: `bg-[#ebeaf0]`
- ✅ **ALWAYS map hex to color palette**: `#ebeaf0` → `general-50`

### Color Palette Mapping Process

1. **Find hex color** in Figma code or design.
2. **Check `tailwind.config.js`** for the color config path.
3. **Match hex to color token** in the referenced JSON config (e.g., `general-50`, `grayscale-50`, `primary-500`).

## 5. Synthesis & Structure

- **Vue SFC Structure:** Script → Template → Style.
- **Script Organization:** Imports → Props/Emits → Lifecycle → Variables → Methods.
- **Views Architecture:** Views are lightweight, only import and compose from modules.
- **Logic Placement:** Business logic, data, columns, and handlers belong in modules, NOT in view components.
- **Testing Attributes:** Always include `data-wv-name` and `data-wv-section`.

## 6. Critical Failure Indicators (STOP IF ANY OCCUR)

- Using generic Button when specialized component exists.
- Using manual CSS when structural component exists.
- Using CSS variables or hex colors instead of Tailwind color tokens.
- Writing `<div class="bg-white p-4">` instead of `<Card>`.
- Writing component usage without checking examples.
- Guessing icon names or enum values.
- Creating custom solutions when documented patterns exist.
- Double wrapping components.
- Adding styling to Wangsvue components.
- Converting exact pixel values incorrectly (e.g., 21px → 20px).
- Putting business logic in view components.