De Figma a Claude Code: El manual del diseñador

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   ANTES (Infierno de la entrega)          DESPUÉS (Vibe Coding)         │
4│   ──────────────────────                   ─────────────────────        │
5│                                                                         │
6│   Diseño                                 Diseño                         │
7│      ↓                                      ↓                           │
8│   Documento de especificaciones           Claude lee Figma directamente │
9│      ↓                                      ↓                           │
10│   Desarrollador interpreta                Tú indicas: "Construye esto" │
11│      ↓                                      ↓                           │
12│   Revisión                                Código de producción          │
13│      ↓                                      ↓                           │
14│   Bucle de retroalimentación ×10          Envío 🚀                      │
15│      ↓                                                                    │
16│   "Suficientemente cerca"                Cronograma: Minutos            │
17│                                                                         │
18│   Cronograma: Semanas                                                   │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → Haz clic en perfil (arriba a la izquierda) → Configuración → Seguridad
2→ Tokens de acceso personal → Generar nuevo token → Copiar inmediatamente

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1En Claude Code, escribe: /mcp
2Deberías ver: figma ✓ conectado

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         TU ARCHIVO DE FIGMA                             │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  LO QUE CLAUDE PUEDE LEER                                      │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ Nombres de capas y jerarquía   ✓ Configuración de Auto Layout │   │
9│   │  ✓ Colores (rellenos, trazos)     ✓ Variantes de componentes    │   │
10│   │  ✓ Estilos tipográficos           ✓ Espaciado y padding         │   │
11│   │  ✓ Efectos (sombras, desenfoque)  ✓ Restricciones               │   │
12│   │  ✓ Tokens/variables de diseño     ✓ Contenido de texto          │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  LO QUE CLAUDE NO PUEDE LEER                                   │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ Píxeles de imagen reales    ✗ Interacciones de prototipos   │   │
19│   │  ✗ Comentarios y retroalimentación  ✗ Historial de versiones   │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1Lee mi diseño de Figma en:
2https://www.figma.com/design/[TU-ID-DE-ARCHIVO]/[NOMBRE-DEL-ARCHIVO]
3
4Dame:
51. Resumen de la estructura de la página
62. Lista de secciones principales
73. Paleta de colores utilizada
84. Estilos tipográficos
95. Cualquier componente que puedas identificar

1Del archivo de Figma, extrae y crea:
2
31. Una configuración de Tailwind con:
4   - Colores personalizados que coincidan con el diseño
5   - Familias y tamaños de fuente
6   - Escala de espaciado basada en lo que veas
7
82. Archivo de variables CSS como respaldo
9
10Formatea los colores como nombres semánticos (primary, secondary, accent, neutral).

1Mira el [NOMBRE DEL COMPONENTE] en mi archivo de Figma.
2
3Genera un componente React que:
4- Coincida exactamente con el estilo (colores, espaciado, tipografía)
5- Use Tailwind CSS
6- Soporte todas las variantes que he definido (si las hay)
7- Esté completamente tipado con TypeScript
8- Incluya estados hover/focus basados en el diseño

1Genera la sección [NOMBRE DE LA SECCIÓN] de mi diseño de Figma.
2
3Requisitos:
4- Coincidir exactamente con el diseño
5- Hacerlo responsive:
6  - Móvil (<768px): [describe el layout]
7  - Escritorio (≥768px): [describe el layout]
8- Usar HTML semántico (section, nav, main, article)
9- Incluir todo el contenido de texto del diseño

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP EN ACCIÓN                                 │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  DISEÑO DE FIGMA  │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ───────────────  │  │  ─────────────     │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  Archivos de      │  │  Wireframes y     │  │  UI generada por  │
12│  diseño → Código  │  │  flujos de usuario │  │  IA → Inyectar    │
13│  de producción    │  │  → App funcional  │  │  en código base   │
14│                   │  │                   │  │                   │
15│  ⭐ MÁS USADO     │  │  🎯 PODEROSO      │  │  ⚡ MÁS RÁPIDO    │
16└───────────────────┘  └───────────────────┘  └───────────────────┘
17        │                       │                       │
18        ▼                       ▼                       ▼
19┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
20│ "Construye mi     │  │ "Lee mi flujo de  │  │ "Toma este diseño │
21│ landing page a    │  │ usuario y crea la │  │ de Make y agrégalo│
22│ partir de este    │  │ estructura de     │  │ a mi app de       │
23│ diseño de Figma"  │  │ rutas de Next.js" │  │ portafolio"       │
24└───────────────────┘  └───────────────────┘  └───────────────────┘

1PASO 1                    PASO 2                    PASO 3
2───────────────────────────────────────────────────────────────────
3"Lee mi archivo del      "Genera componentes       "Construye la
4sistema de diseño y      base: Button,              página de inicio
5extrae todos los         Card, Input, Badge"        usando estos
6tokens"                                             componentes"
7        │                        │                        │
8        └────────────────────────┴────────────────────────┘
9                                 │
10                                 ▼
11                    PASO 4: Agrega páginas una por una
12                    "Ahora construye la página de precios"
13                    "Ahora construye la página de acerca de"

1"Lee [URL], extrae tokens, genera la página completa con todas las secciones,
2hazlo responsive, usa Next.js + Tailwind. Adelante."
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Funciona mejor cuando tu archivo de Figma está     │
6     │     bien organizado con nombres adecuados y Auto Layout │
7     │     en todo                                             │
8     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ Tokens  │ → │ Átomos  │ → │ Moléculas│ → │ Secciones│ → │ Página  │
3│ (colores,│    │ (botón, │    │ (tarjeta,│    │ (hero,  │    │ (página │
4│ fuentes) │    │ input)  │    │ nav)    │    │ footer) │    │ completa)│
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  NOMBRES                                                               │
3│  [ ] Las capas usan nombres semánticos    hero-section ✓   Frame 427 ✗ │
4│  [ ] Los componentes están claramente nombrados  Button/Primary ✓  Component 1 ✗ │
5│  [ ] Las variantes tienen propiedades descriptivas  size=lg ✓  variant=2 ✗ │
6├─────────────────────────────────────────────────────────────────────────┤
7│  ESTRUCTURA                                                            │
8│  [ ] Auto Layout en TODOS los contenedores  Listo para Flexbox ✓  Desastre absoluto ✗ │
9│  [ ] Jerarquía plana (anidación mínima)    DOM limpio ✓   Sopa de divs ✗ │
10│  [ ] Secciones claramente separadas        Fácil de analizar ✓  Caos ✗ │
11├─────────────────────────────────────────────────────────────────────────┤
12│  TOKENS                                                                │
13│  [ ] Colores definidos como estilos        Extraíble ✓   Codificados ✗ │
14│  [ ] Tipografía como estilos de texto      Consistente ✓   Aleatorio ✗ │
15│  [ ] Espaciado consistente                 Sistemático ✓   Arbitrario ✗ │
16└─────────────────────────────────────────────────────────────────────────┘

11. NOMBRA LAS CAPAS COMO CLASES CSS
2   nav-links ✓    Group 5 ✗
3
42. TRABAJA SECCIÓN POR SECCIÓN
5   Hero → Características → Testimonios → Footer
6   (No pidas toda la página de una vez)
7
83. REFIÉRETE A FIGMA DIRECTAMENTE
9   "Mira la tarjeta en la sección de Características"
10   (No: "Crea una tarjeta con esquinas redondeadas")
11
124. EXPORTA LOS ACTIVOS PRIMERO
13   Las imágenes necesitan exportación manual → carpeta /public
14   Luego dile a Claude: "La imagen del hero está en /public/hero.png"
15
165. COMPARTE TU STACK DESDE EL PRINCIPIO
17   "Estoy usando Next.js 14 + Tailwind + TypeScript"
18   (Claude coincidirá con tus convenciones)

1Quiero convertir mi diseño de Figma a código.
2
3URL de Figma: [PEGA TU URL]
4
5Stack: Next.js 14 + Tailwind CSS + TypeScript
6
7Por favor:
81. Primero, analiza el diseño y dime lo que ves
92. Extrae la paleta de colores y crea una configuración de Tailwind
103. Luego te diré qué sección construir primero
11
12Vamos paso a paso.