Cómo deRentas pasó de tener assets a tener un sistema de marca para IA

---
name: figma-deck
description: Genera una presentación en Figma siguiendo el sistema de marca de tu empresa. Crea un archivo Figma nuevo con slides correctamente tipografiados, coloreados y layouteados según tu brand system. El usuario provee el contenido (textos, cifras, títulos) y el skill arma la estructura visual, incluyendo el logo real en cada slide. Usar cuando el usuario diga "armá un deck", "creá una presentación", "generá slides", "hacé un pitch deck", "armá la presentación para inversores", "creá slides en Figma", o cualquier pedido relacionado con presentaciones Figma.
argument-hint: <descripción del deck: tema, audiencia, cantidad de slides>
user-invocable: true
allowed-tools: Read, Glob, Bash, mcp__plugin_figma_figma__create_new_file, mcp__plugin_figma_figma__use_figma, mcp__plugin_figma_figma__get_screenshot
context: fork
agent: general-purpose
---

> **Template genérico — cómo usar este skill en tu proyecto**
>
> Este skill fue construido en una sesión de Mate & Build. Para adaptarlo a tu empresa:
> 1. Reemplazá todos los `[PLACEHOLDERS]` con los valores reales de tu brand system
> 2. Agregá tus archivos de logo en la carpeta que definas
> 3. Ajustá los 7 tipos de slide según tus templates de deck
> 4. Guardá en `skills/figma-deck/SKILL.md` dentro de tu proyecto

---

## Configuración de marca (reemplazar antes de usar)

Antes de activar este skill, definí estas variables en tu `CLAUDE.md` o en un archivo `brand/tokens/`:

```
BRAND_PRIMARY   = [COLOR PRINCIPAL — ej: #F6C300]
BRAND_DARK      = [COLOR OSCURO — ej: #0B0B0B]
BRAND_WHITE     = [COLOR CLARO — ej: #FFFFFF]
BRAND_SURFACE   = [COLOR DE CARD — ej: #303036]
BRAND_MUTED     = [COLOR DE TEXTO SECUNDARIO — ej: #6B6B6B]

FONT_FAMILY     = [TU_FUENTE — ej: PP Neue Montreal, Inter, etc.]
FONT_BOLD       = Bold
FONT_MEDIUM     = Medium
FONT_BOOK       = Regular (o Book)

LOGO_POSITIVO   = [ruta/al/logo-positivo.png]
LOGO_NEGATIVO   = [ruta/al/logo-negativo.png]
ISOTIPO         = [ruta/al/isotipo.png]
```

---

## Step 0 — Input Check

Si `$ARGUMENTS` está vacío, preguntar al usuario:
- ¿De qué trata el deck? (tema y audiencia)
- ¿Cuántos slides aproximadamente?
- ¿Hay algún slide obligatorio (portada, cierre, métricas clave)?

## Step 1 — Leer el sistema de marca

Leer antes de cualquier acción:
- `brand/templates/deck-spec.md` (o donde tengás definidos los tokens del deck)
- `brand/tokens/colors.json`
- `brand/tokens/typography.json`
- `brand/tokens/spacing.json`

**Tokens críticos que necesitás definir:**

| Propiedad | Placeholder | Ejemplo |
|---|---|---|
| Canvas | 1920 × 1080 px | (estándar 16:9, no cambiar) |
| Margin | [MARGIN_PX] | 60px |
| Card padding | [CARD_PADDING_PX] | 40px |
| Card gap | [CARD_GAP_PX] | 30px |
| Card radius | [CARD_RADIUS_PX] | 16px |
| Accent bar height | [ACCENT_BAR_H]px, color [BRAND_PRIMARY] | 8px |
| Logo size | [LOGO_W] × [LOGO_H]px | 195 × 45px |
| Logo posición | [LOGO_TOP]px top, [LOGO_RIGHT]px right | 45px / 60px |
| Page number | [PAGENUM_BOTTOM]px bottom, [PAGENUM_RIGHT]px right | 20px / 60px |
| Label sección | [LABEL_TOP]px top, [LABEL_LEFT]px left | 60px / 60px |
| BG oscuro | [BRAND_DARK] | #0B0B0B |
| BG card | [BRAND_SURFACE] | #303036 |
| Acento | [BRAND_PRIMARY] | #F6C300 |
| Texto sobre oscuro | [BRAND_WHITE] | #FFFFFF |
| Texto sobre claro | [BRAND_DARK] | #0B0B0B |

## Step 2 — Planear la estructura

Con base en la descripción del usuario y los 7 tipos de slide, diseñar la estructura completa. Mostrar al usuario (tabla N° / Tipo / Modo / Descripción) y **esperar confirmación** antes de continuar.

| Tipo | Cuándo usarlo |
|---|---|
| **Portada** | Slide 1 siempre — BG del color principal de marca, texto oscuro |
| **Sección** | Separadores entre bloques temáticos — BG oscuro, número grande en color de acento |
| **Dato/métrica** | KPIs, cifras únicas — cifra grande en color de acento |
| **3-cards** | Comparativas, ventajas, pasos — 3 columnas con tarjetas |
| **2-columnas** | Texto + dato o imagen — 55% izq / 45% der |
| **Lista con íconos** | Beneficios, características — máx 5 ítems, íconos en color de acento |
| **Cierre/CTA** | Último slide siempre — BG color principal o negro, contacto |

## Step 3 — Recopilar contenido por slide

Una vez confirmada la estructura, pedir el contenido de todos los slides en un solo mensaje (≤ 7 slides) o en bloques de 4-5 (más slides).

- **Portada:** título principal, subtítulo, label categoría/año
- **Sección:** nombre de sección, número decorativo (ej: "01")
- **Dato/métrica:** cifra principal, descripción corta, contexto/copy
- **3-cards:** titular; para cada card: título, body, número o etiqueta del ícono
- **2-columnas:** titular + body (izquierda); dato grande o texto destacado (derecha)
- **Lista:** titular; ítems (máx 5)
- **Cierre/CTA:** claim principal, datos de contacto, modo de fondo (color principal u oscuro)

## Step 4 — Preparar los assets del logo

Leer los archivos de logo locales como base64:

```bash
base64 -i '[LOGO_NEGATIVO]'   # → LOGO_NEG_B64 (slides oscuros)
base64 -i '[LOGO_POSITIVO]'   # → LOGO_POS_B64 (slides claros y de marca)
base64 -i '[ISOTIPO]'         # → ISOTIPO_B64 (watermark, opacity baja)
```

## Step 5 — Cargar skill figma-use (OBLIGATORIO)

Invocar el skill `figma:figma-use` antes de cualquier llamada a `use_figma`. Sin este paso, las llamadas al Plugin API fallan.

## Step 6 — Crear el archivo Figma

Llamar `mcp__plugin_figma_figma__create_new_file` con nombre descriptivo. Guardar el `fileKey` retornado.

## Step 7 — Generar los slides (uno por uno, secuencial)

### Helper functions (incluir en CADA llamada)

```javascript
function hexToRgb(hex) {
  return {
    r: parseInt(hex.slice(1,3), 16) / 255,
    g: parseInt(hex.slice(3,5), 16) / 255,
    b: parseInt(hex.slice(5,7), 16) / 255,
  };
}

async function imageFromBase64(b64) {
  const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
  return figma.createImage(bytes);
}

async function createImageRect(b64, w, h, x, y, scaleMode = 'FIT') {
  const img = await imageFromBase64(b64);
  const rect = figma.createRectangle();
  rect.resize(w, h);
  rect.x = x; rect.y = y;
  rect.fills = [{ type: 'IMAGE', imageHash: img.hash, scaleMode }];
  return rect;
}
```

### Estructura base (aplicar a TODOS los slides)

Reemplazá `[BRAND_PRIMARY]`, `[BRAND_DARK]`, `[BRAND_WHITE]`, `[FONT_FAMILY]`, `[LOGO_H]`, `[LOGO_W]`, y los offsets según tus tokens.

```javascript
const frame = figma.createFrame();
frame.name = `Slide ${N} — ${TIPO}`;
frame.resize(1920, 1080);
frame.x = (N - 1) * 2000;
frame.fills = [{ type: 'SOLID', color: hexToRgb(BG_COLOR) }];

// Barra de acento top (excepto portada)
if (MODO !== 'brand') {
  const bar = figma.createRectangle();
  bar.name = 'Accent Bar';
  bar.resize(1920, [ACCENT_BAR_H]);
  bar.x = 0; bar.y = 0;
  bar.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_PRIMARY]') }];
  frame.appendChild(bar);
}

// Label de sección (top-left)
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_MEDIUM]' });
const label = figma.createText();
label.fontName = { family: '[FONT_FAMILY]', style: '[FONT_MEDIUM]' };
label.fontSize = [LABEL_SIZE];
label.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_MUTED]') }];
label.characters = LABEL_SECCION;
label.x = [MARGIN_PX]; label.y = [LABEL_TOP];
frame.appendChild(label);

// Logo (top-right)
const logoB64 = (MODO === 'brand' || MODO === 'claro') ? LOGO_POS_B64 : LOGO_NEG_B64;
const logo = await createImageRect(logoB64, [LOGO_W], [LOGO_H], 1920 - [LOGO_RIGHT] - [LOGO_W], [LOGO_TOP]);
logo.name = 'Logo';
frame.appendChild(logo);

// Número de página (bottom-right)
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOOK]' });
const pageNum = figma.createText();
pageNum.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOOK]' };
pageNum.fontSize = [PAGENUM_SIZE];
pageNum.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_MUTED]') }];
pageNum.characters = String(N);
pageNum.x = 1920 - [PAGENUM_RIGHT] - pageNum.width;
pageNum.y = 1080 - [PAGENUM_BOTTOM] - pageNum.height;
frame.appendChild(pageNum);

figma.currentPage.appendChild(frame);
```

### Tipo 1 — Portada (MODO 'brand', BG_COLOR = [BRAND_PRIMARY])

```javascript
// Watermark isotipo (centrado, opacity baja — ej: 0.12)
const watermark = await createImageRect(ISOTIPO_B64, 800, 800, (1920-800)/2, (1080-800)/2, 'FIT');
watermark.name = 'Watermark Isotipo';
watermark.opacity = [WATERMARK_OPACITY]; // reemplazá con tu valor (ej: 0.12)
frame.appendChild(watermark);

await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOLD]' });

const h1 = figma.createText();
h1.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
h1.fontSize = 96;
h1.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_DARK]') }];
h1.characters = TITULO;
h1.x = [MARGIN_PX]; h1.y = 220;
frame.appendChild(h1);

const h2 = figma.createText();
h2.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
h2.fontSize = 60;
h2.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_DARK]') }];
h2.characters = SUBTITULO;
h2.x = [MARGIN_PX]; h2.y = h1.y + h1.height + 32;
frame.appendChild(h2);
```

### Tipo 2 — Sección/separador (MODO 'oscuro', BG_COLOR = [BRAND_DARK])

```javascript
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOLD]' });

const num = figma.createText();
num.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
num.fontSize = 96;
num.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_PRIMARY]') }];
num.characters = NUMERO_SECCION;
num.x = 1920 - [MARGIN_PX] - num.width; num.y = 200;
frame.appendChild(num);

const h2 = figma.createText();
h2.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
h2.fontSize = 60;
h2.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_WHITE]') }];
h2.characters = NOMBRE_SECCION;
h2.x = [MARGIN_PX]; h2.y = 400;
frame.appendChild(h2);
```

### Tipo 3 — Dato/métrica (MODO 'oscuro', BG_COLOR = [BRAND_DARK])

```javascript
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOLD]' });
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_MEDIUM]' });
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOOK]' });

const cifra = figma.createText();
cifra.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
cifra.fontSize = 96;
cifra.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_PRIMARY]') }];
cifra.characters = CIFRA;
cifra.x = [MARGIN_PX]; cifra.y = 280;
frame.appendChild(cifra);

const desc = figma.createText();
desc.fontName = { family: '[FONT_FAMILY]', style: '[FONT_MEDIUM]' };
desc.fontSize = 34;
desc.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_WHITE]') }];
desc.characters = DESCRIPCION;
desc.x = [MARGIN_PX]; desc.y = cifra.y + cifra.height + 40;
frame.appendChild(desc);

const copy = figma.createText();
copy.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOOK]' };
copy.fontSize = 24;
copy.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_MUTED]') }];
copy.characters = CONTEXTO;
copy.x = [MARGIN_PX]; copy.y = desc.y + desc.height + 24;
frame.appendChild(copy);
```

### Tipo 4 — 3-cards (MODO 'oscuro', BG_COLOR = [BRAND_DARK])

```javascript
// ancho de cada card: (1920 - MARGIN*2 - GAP*2) / 3
const cardW = Math.floor((1920 - [MARGIN_PX]*2 - [CARD_GAP_PX]*2) / 3);
const cardH = 680, cardY = 220;
const cardsData = [CARD1, CARD2, CARD3]; // { titulo, body, etiqueta }

await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_MEDIUM]' });
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOOK]' });
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOLD]' });

for (let i = 0; i < 3; i++) {
  const card = figma.createFrame();
  card.resize(cardW, cardH);
  card.x = [MARGIN_PX] + i * (cardW + [CARD_GAP_PX]);
  card.y = cardY;
  card.cornerRadius = [CARD_RADIUS_PX];
  card.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_SURFACE]') }];

  const iconBox = figma.createRectangle();
  iconBox.resize(56, 56);
  iconBox.x = 40; iconBox.y = 40;
  iconBox.cornerRadius = 12;
  iconBox.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_PRIMARY]') }];
  card.appendChild(iconBox);

  const iconLabel = figma.createText();
  iconLabel.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
  iconLabel.fontSize = 24;
  iconLabel.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_DARK]') }];
  iconLabel.characters = cardsData[i].etiqueta;
  iconLabel.x = 40 + (56 - iconLabel.width) / 2;
  iconLabel.y = 40 + (56 - iconLabel.height) / 2;
  card.appendChild(iconLabel);

  const titulo = figma.createText();
  titulo.fontName = { family: '[FONT_FAMILY]', style: '[FONT_MEDIUM]' };
  titulo.fontSize = 34;
  titulo.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_WHITE]') }];
  titulo.resize(cardW - 80, titulo.height);
  titulo.characters = cardsData[i].titulo;
  titulo.x = 40; titulo.y = 120;
  card.appendChild(titulo);

  const body = figma.createText();
  body.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOOK]' };
  body.fontSize = 24;
  body.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_WHITE]') }];
  body.resize(cardW - 80, body.height);
  body.characters = cardsData[i].body;
  body.x = 40; body.y = titulo.y + titulo.height + 24;
  card.appendChild(body);

  frame.appendChild(card);
}
```

### Tipo 5 — 2-columnas (MODO 'oscuro', BG_COLOR = [BRAND_DARK])

```javascript
const colIzqW = Math.floor(1920 * 0.55) - [MARGIN_PX] - 15;
const colDerX = Math.floor(1920 * 0.55) + [MARGIN_PX];

await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOLD]' });
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOOK]' });

const h2 = figma.createText();
h2.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
h2.fontSize = 60;
h2.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_WHITE]') }];
h2.resize(colIzqW, h2.height);
h2.characters = TITULAR_IZQ;
h2.x = [MARGIN_PX]; h2.y = 220;
frame.appendChild(h2);

const body = figma.createText();
body.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOOK]' };
body.fontSize = 24;
body.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_WHITE]') }];
body.resize(colIzqW, body.height);
body.characters = BODY_IZQ;
body.x = [MARGIN_PX]; body.y = h2.y + h2.height + 40;
frame.appendChild(body);

// Separador vertical
const sep = figma.createRectangle();
sep.resize(1, 800);
sep.x = Math.floor(1920 * 0.55); sep.y = 140;
sep.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_PRIMARY]') }];
frame.appendChild(sep);

// Dato destacado (col derecha)
const dato = figma.createText();
dato.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
dato.fontSize = 96;
dato.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_PRIMARY]') }];
dato.characters = DATO_DER;
dato.x = colDerX; dato.y = 320;
frame.appendChild(dato);

const copyDer = figma.createText();
copyDer.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOOK]' };
copyDer.fontSize = 24;
copyDer.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_WHITE]') }];
copyDer.characters = COPY_DER;
copyDer.x = colDerX; copyDer.y = dato.y + dato.height + 24;
frame.appendChild(copyDer);
```

### Tipo 6 — Lista con íconos (MODO 'oscuro', BG_COLOR = [BRAND_DARK])

```javascript
// Máx 5 ítems. Si el usuario provee más, avisar y usar solo los primeros 5.
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOLD]' });
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOOK]' });

const titular = figma.createText();
titular.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
titular.fontSize = 48;
titular.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_WHITE]') }];
titular.characters = TITULAR_LISTA;
titular.x = [MARGIN_PX]; titular.y = 160;
frame.appendChild(titular);

const items = ITEMS.slice(0, 5);
const itemY0 = titular.y + titular.height + 60;
for (let i = 0; i < items.length; i++) {
  const yPos = itemY0 + i * 110;

  const iconBox = figma.createRectangle();
  iconBox.resize(48, 48);
  iconBox.x = [MARGIN_PX]; iconBox.y = yPos;
  iconBox.cornerRadius = 12;
  iconBox.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_PRIMARY]') }];
  frame.appendChild(iconBox);

  const itemText = figma.createText();
  itemText.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOOK]' };
  itemText.fontSize = 24;
  itemText.fills = [{ type: 'SOLID', color: hexToRgb('[BRAND_WHITE]') }];
  itemText.characters = items[i];
  itemText.x = [MARGIN_PX] + 48 + 24;
  itemText.y = yPos + (48 - itemText.height) / 2;
  frame.appendChild(itemText);
}
```

### Tipo 7 — Cierre/CTA (BG = [BRAND_PRIMARY] o [BRAND_DARK])

```javascript
const textColor = MODO === 'brand' ? '[BRAND_DARK]' : '[BRAND_WHITE]';

await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_BOLD]' });
await figma.loadFontAsync({ family: '[FONT_FAMILY]', style: '[FONT_MEDIUM]' });

if (MODO === 'brand') {
  const watermark = await createImageRect(ISOTIPO_B64, 700, 700, (1920-700)/2, (1080-700)/2, 'FIT');
  watermark.opacity = [WATERMARK_OPACITY];
  frame.appendChild(watermark);
}

const claim = figma.createText();
claim.fontName = { family: '[FONT_FAMILY]', style: '[FONT_BOLD]' };
claim.fontSize = 60;
claim.fills = [{ type: 'SOLID', color: hexToRgb(textColor) }];
claim.characters = CLAIM;
claim.x = [MARGIN_PX]; claim.y = 320;
frame.appendChild(claim);

const contacto = figma.createText();
contacto.fontName = { family: '[FONT_FAMILY]', style: '[FONT_MEDIUM]' };
contacto.fontSize = 24;
contacto.fills = [{ type: 'SOLID', color: hexToRgb(textColor) }];
contacto.characters = CONTACTO;
contacto.x = [MARGIN_PX]; contacto.y = claim.y + claim.height + 48;
frame.appendChild(contacto);
```

## Step 8 — Confirmar y entregar

1. Llamar `mcp__plugin_figma_figma__get_screenshot` para capturar el resultado visual
2. Reportar: URL del archivo Figma, lista de slides generados (N° / tipo / título), problemas con fuentes o imágenes si los hubo

---

## Reglas de calidad

- Nunca usar fuentes distintas a las definidas en tu brand system
- Nunca usar colores fuera de los tokens del brand
- Máximo 5 ítems en slides de lista — si hay más, avisar y proponer dividir en 2 slides
- Portada NUNCA lleva barra de acento (el fondo ya es el color de marca)
- Logo siempre en posición top-right en todos los slides
- Generar slides secuencialmente — nunca en paralelo

## If Something Goes Wrong

| Error | Acción |
|---|---|
| Error de fuente | Avisar que debe instalarla en Figma. Continuar con Inter como fallback temporal |
| Error en `imageFromBase64` / `figma.createImage` | Verificar que el base64 no está truncado. Si falla, omitir logo en ese slide y anotar en reporte |
| `create_new_file` falla | Pedir URL de archivo Figma existente y crear frames en ese archivo |
| Más de 10 slides | Recopilar contenido en bloques de 5, confirmar cada bloque antes de avanzar |
| Usuario cambia contenido a mitad | Regenerar solo los slides afectados, no todo el deck |

---

*Skill construido en Mate & Build #4 — deRentas x Mate & Build, 2026-04-15.*
*Template genérico disponible en mateandbuild.com.ar*