🔗 **Analyse URL Figma**

**URL** : [URL fournie]

**Extraction** :
| Élément | Valeur |
|---------|--------|
| File Key | [file_key] |
| Node ID | [node_id ou "page entière"] |
| File Name | [nom si disponible] |

**Type de sélection** :
- [ ] Composant unique
- [ ] Frame / Screen
- [ ] Page complète

Je récupère les informations du design ?

🔍 **Mappings Code Connect**

**Composants mappés disponibles** :
| Composant Figma | Composant Code | Mapping |
|-----------------|----------------|---------|
| Button | `<Button>` | ✅ |
| Input | `<Input>` | ✅ |
| Card | `<Card>` | ✅ |
| [Autre] | - | ❌ |

**Composants dans le design** :
[Liste des composants détectés dans la sélection Figma]

**Match** : [X/Y] composants ont un mapping existant

[Si mappings manquants]
⚠️ [N] composants sans mapping. Options :
- [C] Continuer avec composants génériques
- [M] Créer les mappings d'abord (`/figma-setup`)

📐 **Design extrait**

**Structure** :

**Tokens utilisés** :
| Token Figma | Token CSS local |
|-------------|-----------------|
| Primary/500 | --color-primary-500 |
| Spacing/lg | --space-lg |
| Radius/md | --radius-md |

**Dimensions** : [W] × [H]

Je génère le code ?

💻 **Code généré**

**Fichier** : `src/components/[name].tsx`

```tsx
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

interface [ComponentName]Props {
  // Props extraites du design
}

export function [ComponentName]({ ...props }: [ComponentName]Props) {
  return (
    <div className="[styles utilisant tokens]">
      {/* Structure générée depuis Figma */}
    </div>
  );
}

**⏸️ STOP** - Validation code généré

---

### 5. Proposition de mappings manquants

Si des composants Figma n'ont pas de mapping :

```markdown
🔗 **Mappings manquants**

Ces composants Figma n'ont pas de mapping Code Connect :

| Composant Figma | Composant code suggéré | Action |
|-----------------|------------------------|--------|
| [FigmaComponent] | `src/components/ui/[name].tsx` | Créer mapping |
| [Autre] | `src/components/ui/[name].tsx` | Créer mapping |

**Créer les mappings maintenant ?**
- [Y] Oui, créer les fichiers .figma.tsx
- [N] Non, utiliser les composants génériques
- [S] Setup complet (`/figma-setup`)

// src/components/ui/[name].figma.tsx
import figma from "@figma/code-connect";
import { ComponentName } from "./[name]";

figma.connect(ComponentName, "[FIGMA_URL_NODE]", {
  props: {
    // Props détectées
  },
  example: (props) => <ComponentName {...props} />,
});

📝 **Fichier créé**

**Path** : `src/components/[path]/[name].tsx`

**Contenu** : [résumé du composant]

**Imports** :
- [X] composants UI mappés
- [Y] tokens CSS
- [Z] types

Le fichier a été créé. Vérifications :
- [ ] Pas d'erreurs TypeScript
- [ ] Imports corrects
- [ ] Tokens utilisés (pas de hardcode)

## ✅ Code généré depuis Figma

**Source** : [URL Figma]
**Fichier créé** : `src/components/[name].tsx`

**Résumé** :
| Métrique | Valeur |
|----------|--------|
| Composants mappés utilisés | [N] |
| Tokens CSS utilisés | [N] |
| Lignes de code | [N] |
| Props typées | [N] |

**Composants réutilisés** :
- `Button` ✅
- `Card` ✅
- `Input` ✅

**Nouveaux mappings créés** : [N] (si applicable)

---

**Prochaine étape ?**
- [A] Générer un autre composant (`/figma-to-code [url]`)
- [T] Écrire les tests (`/test-runner`)
- [R] Review le code (`/code-reviewer`)

// Imports
import { ComponentName } from "@/components/ui/component";

// Styles
className="flex gap-4 p-6"  // Tailwind si détecté
className={styles.container} // CSS Modules si détecté

// Props
interface Props {
  title: string;
  onClick?: () => void;
}

<template>
  <div class="container">
    <ComponentName :prop="value" />
  </div>
</template>

<script setup lang="ts">
import ComponentName from '@/components/ui/ComponentName.vue';

defineProps<{
  title: string;
}>();
</script>

<div class="container">
  <custom-button variant="primary">Click me</custom-button>
</div>

<style>
.container {
  display: flex;
  gap: var(--space-md);
}
</style>

### ✅ Checklist Output Figma to Code

| Critère | Status |
|---------|--------|
| URL Figma parsée correctement | ✅/❌ |
| Design extrait | ✅/❌ |
| Composants mappés utilisés | ✅/❌ |
| Tokens CSS utilisés (pas hardcode) | ✅/❌ |
| Code TypeScript valide | ✅/❌ |
| Fichier créé | ✅/❌ |

**Score : X/6** → Si < 5, corriger avant de terminer

## 🔗 Prochaine étape

✅ Code généré depuis Figma.

**Suggestions :**

→ 🧪 **`/test-runner`** - Écrire des tests pour le composant
→ 🔄 **`/code-reviewer`** - Review du code généré
→ 🖼️ **`/figma-to-code [autre-url]`** - Générer un autre composant

---

**[T] Tests** | **[R] Review** | **[F] Autre Figma** | **[X] Terminé**

❌ **URL Figma invalide**

L'URL fournie ne semble pas être une URL Figma valide.

**Format attendu** :

**Exemples valides** :
- `https://figma.com/design/ABC123/MyDesign?node-id=1:234`
- `https://figma.com/file/XYZ789/Components`

Fournis une URL Figma valide.

⚠️ **Code Connect non configuré**

Pour une meilleure génération, configure d'abord Code Connect :

```bash
/figma-setup

### Accès refusé

```markdown
❌ **Accès au fichier Figma refusé**

Tu n'as pas accès à ce fichier Figma.

**Solutions** :
1. Vérifie que tu es connecté au bon compte Figma
2. Demande l'accès au propriétaire du fichier
3. Vérifie que le lien de partage est activé

Re-authentification :
```bash
npx figma connect

---

## Transitions

- **Vers test-runner** : "On écrit les tests pour ce composant ?"
- **Vers code-reviewer** : "On review le code généré ?"
- **Vers figma-setup** : "On configure Code Connect d'abord ?"