Guia completa de integracion Claude Code x SaaS: Notion, Slack, Linear, GitHub, Figma

Sigues pensando que Claude Code es solo una herramienta para editar codigo? Si lo conectas con los SaaS que usas a diario, Claude Code se convierte en un verdadero “orquestador de trabajo”. Escribir una pagina en Notion, publicar en Slack, abrir un ticket en Linear, crear un PR en GitHub o leer valores desde Figma — todo desde un unico prompt en lenguaje natural.

En este articulo recorremos los cinco patrones de integracion SaaS que usamos a diario para operar ClaudeCodeLab, con codigo funcional y pasos de configuracion. Al terminar tendras tu propio hub de automatizacion.

Las tres arquitecturas basicas de integracion

Hay basicamente tres formas de conectar Claude Code con un producto SaaS:

Enfoque	Coste de implementacion	Flexibilidad	Recomendado para
Servidor MCP	Medio	Alta	Integraciones frecuentes, reutilizadas entre proyectos
Wrapper de CLI	Bajo	Media	Scripts unicos, integraciones simples
Receptor de webhook	Alto	Alta	Integraciones bidireccionales disparadas desde el SaaS

Los principiantes deben arrancar con un wrapper de CLI: es el camino mas corto. Solo dejas que Claude Code llame una API mediante la herramienta Bash, asi que basta con tener una clave en una variable de entorno. Cuando ganes soltura, lo natural es promoverlo a un servidor MCP.

1. Integracion con Notion: producir paginas en serie con IA

Casos de uso

• Publicar minutas de reunion directamente en Notion
• Generar reportes semanales automaticamente
• Dejar que la IA amplie la base de conocimiento interna

Implementacion

// scripts/notion-create-page.mjs
import { Client } from "@notionhq/client";

const notion = new Client({ auth: process.env.NOTION_TOKEN });

async function createPage(databaseId, title, markdown) {
  const blocks = markdown.split("\n\n").map((para) => ({
    object: "block",
    type: "paragraph",
    paragraph: {
      rich_text: [{ type: "text", text: { content: para } }],
    },
  }));

  const page = await notion.pages.create({
    parent: { database_id: databaseId },
    properties: {
      Name: { title: [{ text: { content: title } }] },
      Status: { select: { name: "Draft" } },
    },
    children: blocks,
  });

  return page.url;
}

const [, , dbId, title, ...bodyParts] = process.argv;
const url = await createPage(dbId, title, bodyParts.join(" "));
console.log(`Created: ${url}`);

Uso desde Claude Code

claude -p "
Lee la siguiente minuta y resumela en tres secciones
(decisiones / accionables / agenda siguiente), luego publicala
en la base de datos de minutas de Notion:

$(cat ~/inbox/meeting-raw.txt)

Usa database_id: abc123...
Tras publicar, envia la URL al canal slack-channel-general.
"

Claude Code invoca notion-create-page.mjs mediante la herramienta Bash y reenvia la URL resultante a Slack, todo en un unico prompt.

2. Integracion con Slack: automatizar notificaciones y posts

Casos de uso

• Notificaciones de despliegue completado
• Post semanal con resumen de errores
• Dar formato a reportes largos en hilos

Implementacion (Incoming Webhook — lo mas sencillo)

// scripts/slack-notify.mjs
const webhookUrl = process.env.SLACK_WEBHOOK_URL;
const message = process.argv.slice(2).join(" ");

const res = await fetch(webhookUrl, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    text: message,
    blocks: [
      { type: "section", text: { type: "mrkdwn", text: message } },
    ],
  }),
});

console.log(res.ok ? "✓ Sent" : `✗ ${res.status}`);

Variante con Slack Bolt SDK (respuestas en hilo, DM, etc.)

// scripts/slack-post-thread.mjs
import { WebClient } from "@slack/web-api";

const client = new WebClient(process.env.SLACK_BOT_TOKEN);

async function postThread(channel, parent, replies) {
  const main = await client.chat.postMessage({ channel, text: parent });
  for (const reply of replies) {
    await client.chat.postMessage({
      channel,
      text: reply,
      thread_ts: main.ts,
    });
  }
  return main.ts;
}

const channel = process.argv[2];
const [parent, ...replies] = process.argv.slice(3);
await postThread(channel, parent, replies);

Ejemplo real desde Claude Code

claude -p "
Ejecuta scripts/deploy.sh.
Si tiene exito, publica 'Despliegue en prod listo 🚀' en #dev
y como respuestas de hilo:
1. Hash del commit
2. Numero de archivos modificados
3. Tiempo de build
Si falla, envia una alerta roja a #dev-alerts.
"

3. Integracion con Linear: ticketing automatico

Casos de uso

• Convertir una discusion de bug en ticket
• Crear varios tickets a la vez desde una revision de diseno
• Separar comentarios de code review en tareas individuales

Implementacion

// scripts/linear-create-issue.mjs
const LINEAR_API_KEY = process.env.LINEAR_API_KEY;
const LINEAR_TEAM_ID = process.env.LINEAR_TEAM_ID; // p. ej. "ENG"

async function createIssue(title, description, priority = 2) {
  const query = `
    mutation CreateIssue($input: IssueCreateInput!) {
      issueCreate(input: $input) {
        success
        issue { id identifier url }
      }
    }
  `;
  const res = await fetch("https://api.linear.app/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: LINEAR_API_KEY,
    },
    body: JSON.stringify({
      query,
      variables: {
        input: {
          teamId: LINEAR_TEAM_ID,
          title,
          description,
          priority, // 0=None, 1=Urgent, 2=High, 3=Medium, 4=Low
        },
      },
    }),
  });
  const json = await res.json();
  return json.data.issueCreate.issue;
}

const [, , title, ...desc] = process.argv;
const issue = await createIssue(title, desc.join(" "), 2);
console.log(`Created: ${issue.identifier} - ${issue.url}`);

Ejemplo: registro en lote desde revisiones de PR

claude -p "
Lee todos los comentarios de revision del PR #234 en GitHub y, por cada
comentario que requiera correccion, crea un ticket individual en Linear.

Cada ticket:
- Titulo: resumen breve del comentario
- Cuerpo: comentario original + URL del PR + archivo:linea
- priority: 1 si es 'obligatorio', 3 si es 'sugerencia'
"

4. Integracion con GitHub: apoyarse en la gh CLI

Para GitHub, la gh CLI es mucho mas comoda que la API directa. Basta con que Claude Code la invoque via Bash.

Patrones clave

# Crear PR
gh pr create --title "feat: add cache layer" --body "$(cat desc.md)"

# Abrir issue
gh issue create --title "Bug: user logout fails" --label "bug,priority-high"

# Ver revision de PR
gh pr view 234 --comments

# Estado de CI
gh run list --workflow deploy.yml --limit 5

# Crear release
gh release create v1.2.0 --notes "Changelog here"

Ejemplo: respuesta a incidentes

claude -p "
En produccion hay 500 errores con mucha frecuencia. Sigue este procedimiento:

1. Lee la ultima hora de logs/prod-*.log y extrae patrones de error
2. Identifica el commit sospechoso desde el stack trace usando git log
3. Crea un PR que revierta ese commit (gh pr create)
4. Abre un ticket de incidencia en Linear
5. Publica el estado en #incident-response en Slack

Objetivo: maximo 15 minutos.
"

5. Integracion con Figma: convertir disenos en codigo

Casos de uso

• Leer la estructura de componentes de un archivo Figma
• Convertir valores de Figma (colores, espacios, tipografia) a CSS
• Pruebas visuales por comparacion de screenshots

Implementacion (API REST de Figma)

// scripts/figma-extract.mjs
const FIGMA_TOKEN = process.env.FIGMA_TOKEN;
const fileKey = process.argv[2];
const nodeId = process.argv[3];

const res = await fetch(
  `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${nodeId}`,
  { headers: { "X-Figma-Token": FIGMA_TOKEN } }
);
const data = await res.json();
const node = data.nodes[nodeId].document;

// Extraer colores, tipografia y layout
const tokens = {
  colors: extractColors(node),
  typography: extractTypography(node),
  spacing: extractSpacing(node),
};

console.log(JSON.stringify(tokens, null, 2));

function extractColors(node) { /* implementacion omitida */ }
function extractTypography(node) { /* implementacion omitida */ }
function extractSpacing(node) { /* implementacion omitida */ }

Uso desde Claude Code

claude -p "
Lee nodeId=456:789 (el componente card) del archivo Figma abc123
e implementalo como componente React components/Card.tsx.

- Alinea con los tokens de Tailwind (elige colores desde theme.colors)
- Props: children, variant (primary/secondary)
- Genera tambien una historia de Storybook
- Usa scripts/figma-extract.mjs para obtener los valores de Figma
"

Gestion de credenciales: .env + gitignore son imprescindibles

Regla de oro comun a todas las integraciones:

# .env (NUNCA subir a git)
NOTION_TOKEN=secret_xxx
SLACK_BOT_TOKEN=xoxb-xxx
SLACK_WEBHOOK_URL=https://hooks.slack.com/xxx
LINEAR_API_KEY=lin_api_xxx
LINEAR_TEAM_ID=ENG
FIGMA_TOKEN=figd_xxx

# .gitignore
.env
.env.*
!.env.example

Documentalo en CLAUDE.md para evitar accidentes

## Gestion de secretos
- Nunca commitear .env
- Leer los valores en los scripts via process.env
- No incluir API keys en prompts ni en la salida
- No imprimir el header Authorization en mensajes de error

Cinco trampas habituales

1. Ignorar los rate limits Slack admite 1 llamada por segundo, Notion 3 cada 3 segundos y Linear aplica limites de complejidad GraphQL. En procesos batch, intercala siempre un sleep.

async function batchPost(items) {
  for (const item of items) {
    await postToNotion(item);
    await new Promise((r) => setTimeout(r, 500)); // 500 ms entre llamadas
  }
}

2. No verificar la firma del webhook Al montar un receptor de webhook, omitir la verificacion de firma te expone a ataques de replay. Slack y GitHub publican su esquema de firmado, asi que impleentalo siempre.

3. No aclarar con que permisos se ejecuta Se publica como bot pero creemos que saldra con nuestro nombre. Documenta los scopes de permisos en el README.

4. Ejecucion duplicada por reintentos Un fallo de red dispara un retry y acabas con tres paginas identicas en Notion. Usa una idempotency key para garantizar un unico efecto.

5. Sin fallback cuando el servicio cae Si Slack esta caido, no llegan las notificaciones de deploy y la operativa manual se queda colgada. Prepara dos rutas principales (por ejemplo Slack + email).

Operacion integrada: un prompt que atraviesa cinco servicios

La forma definitiva: un workflow que cruza multiples SaaS en un solo tiro:

claude -p "
Prepara el release de esta semana:

1. Extrae con gh log los commits no liberados de master
2. Genera las release notes en Markdown
3. Crea una pagina nueva en la base 'Releases' de Notion
4. Cuenta en Linear los issues cerrados esta semana
5. Exporta 5 screenshots de cambios desde la pagina Figma 'v2.0 Design'
6. Publica un post en #team en Slack
   (hilo con detalle, main con resumen de 3 lineas)
7. Ejecuta gh release create v2.0.0 para el release oficial

Reporta un log conciso por cada paso.
"

Si todo fluye, el release semanal que tomaba una hora pasa a ser 5 minutos delegados a Claude Code.

Resumen

SaaS	Integracion express	Evolucion
Notion	Wrapper de CLI + API	Convertir en servidor MCP
Slack	Incoming Webhook	Bolt SDK + gestion de hilos
Linear	GraphQL directo	Empaquetar como herramienta MCP
GitHub	Con la gh CLI basta	Combinar con Actions
Figma	API REST	Plugin + MCP

Suelta la creencia de que “Claude Code = herramienta para escribir codigo” y el horizonte se amplia de inmediato. Empieza con Slack Incoming Webhook: coste minimo y lista en 10 minutos. Suma despues Notion o Linear y podras automatizar aproximadamente el 30 % del trabajo diario.

Articulos relacionados

• Guia completa de harness engineering
• Guia de integracion Claude Code x Obsidian
• 10 patrones de subagentes en Claude Code

Referencias

• Documentacion oficial de la API de Notion
• Documentacion oficial de la API de Slack
• Documentacion oficial de la API de Linear
• GitHub CLI
• Documentacion oficial de la API de Figma