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

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

1Figma.com → Haz clic en tu perfil (arriba a la izquierda) → Configuración → Seguridad
2→ Tokens de acceso personal → Generar nuevo token → Cópialo 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 prototipo  │  │
19│   │  ✗ Comentarios y feedback        ✗ 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 las 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 de fuentes y tamaños
6   - Escala de espaciado basada en lo que ves
7
82. Un archivo de variables CSS como respaldo
9
10Formatea los colores con nombres semánticos (primary, secondary, accent, neutral).

1Mira el [NOMBRE DEL COMPONENTE] en mi archivo de Figma.
2
3Genera un componente de 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 de hover/focus basados en el diseño

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

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

1PASO 1                    PASO 2                    PASO 3
2───────────────────────────────────────────────────────────────────
3"Lee mi archivo de       "Genera componentes       "Construye la
4sistema de diseño y      base: Botón, Tarjeta,     página de inicio
5extrae todos los         Input, Insignia"          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,
2hazla 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 todas partes                                      │
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    Button/Primary ✓  Componente 1 ✗ │
5│  [ ] Las variantes tienen propiedades    size=lg ✓        variant=2 ✗  │
6│      descriptivas                                                       │
7├─────────────────────────────────────────────────────────────────────────┤
8│  ESTRUCTURA                                                             │
9│  [ ] Auto Layout en TODOS los contenedores  Listo para Flexbox ✓  Desastre absoluto ✗│
10│  [ ] Jerarquía plana (anidamiento mínimo)  DOM limpio ✓  Sopa de divs ✗│
11│  [ ] Secciones claramente separadas        Fácil de analizar ✓  Caos ✗│
12├─────────────────────────────────────────────────────────────────────────┤
13│  TOKENS                                                                 │
14│  [ ] Colores definidos como estilos        Extraíbles ✓    Hardcodeados ✗│
15│  [ ] Tipografía como estilos de texto      Consistente ✓   Aleatorio ✗ │
16│  [ ] Espaciado consistente                 Sistemático ✓   Arbitrario ✗│
17└─────────────────────────────────────────────────────────────────────────┘

11. NOMBRA LAS CAPAS COMO CLASES CSS
2   nav-links ✓    Grupo 5 ✗
3
42. TRABAJA SECCIÓN POR SECCIÓN
5   Hero → Características → Testimonios → Footer
6   (No pidas la página completa de una vez)
7
83. REFIÉRETE A FIGMA DIRECTAMENTE
9   "Mira la tarjeta en la sección 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 DE ANTEMANO
17   "Estoy usando Next.js 14 + Tailwind + TypeScript"
18   (Claude se ajustará a 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 qué 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.