Atlas de diseño con Claude Code

Módulo: práctica profesional | Tiempo: unos 30 min de teoría + 30 min de práctica

Lo esencial

Claude Code sabe escribir código. Pero un producto no es solo código. Son imágenes, íconos, animaciones, dashboards bonitos. Antes para eso hacía falta todo un equipo: diseñador, ilustrador, animador. Hoy Claude Code, con los conectores adecuados, puede hacer todo eso en una sola sesión. Esta lección es un mapa: de dónde sacar cada cosa, cómo conectarla y qué obtienes al final.

🎨 Imagínalo así: antes, para remodelar una casa llamabas a 6 especialistas distintos: electricista, plomero, azulejero, pintor, diseñador, carpintero. Ahora Claude Code es el maestro de obra que tiene a todos en su agenda. Tú dices lo que quieres y él llama al que hace falta.

Conceptos clave

AI Image Generation: generar imágenes a través de una API (gpt-image-2, Flux, Stable Diffusion; DALL-E se retiró de la API de OpenAI en mayo de 2026)
fal.ai MCP: acceso unificado a cientos de modelos de IA con un solo servidor MCP
Figma MCP: el plugin oficial para trabajar con archivos de diseño desde Claude Code
shadcn/ui: componentes de React listos que Claude Code usa por defecto
Lucide Icons: más de 1500 íconos integrados en shadcn/ui
Motion (antes Framer Motion): animaciones para React con código
Lottie: animaciones JSON de After Effects directo en el navegador

Bloque 1: generar imágenes con IA

Por qué le importa a quien desarrolla

Claude Code escribe código, pero el producto necesita imágenes:

La imagen principal (hero) de la landing page
El avatar de un bot de IA
Íconos para los botones
Imágenes OG para redes sociales
Imágenes de relleno para prototipos

Antes: abrías Figma, dibujabas, exportabas. Ahora: escribes el prompt dentro del código → API → PNG → listo.

Mapa de proveedores (a octubre de 2026)

Aquí no se indican precios por imagen: cambian y dependen del tamaño y la calidad. Los precios vigentes están en las páginas de cada proveedor y en la página Lo vigente. Lo mismo con las versiones de los modelos: cada proveedor saca versiones nuevas seguido, revisa la vigente en su sitio.

Proveedor	MCP/API	Para qué es mejor
GPT Image (OpenAI, en la API: gpt-image-2)	API	Fidelidad al prompt, edición
Flux (Black Forest Labs)	fal.ai MCP	Fotorrealismo, velocidad
Stable Diffusion	Replicate MCP	Modelos personalizados, instalación propia
Ideogram	API	Texto dentro de las imágenes
Recraft	MCP	Gráficos vectoriales, íconos
Nano Banana (Google, modelos de Gemini)	Gemini API	Estilo de personajes consistente, texto en muchos idiomas
Midjourney	❌ No anuncia una API oficial	Solo la interfaz web

🎨 Imagínalo así: Midjourney es como un chef que solo cocina en su propio restaurante. Flux o Stability son como un cocinero que va a tu casa a cocinar por encargo.

fal.ai MCP: cientos de modelos con un solo conector

fal.ai es la opción más práctica. Un solo MCP te da acceso a cientos de modelos: imágenes, video, audio. A favor: instalarlo es gratis, solo pagas por cada ejecución.

Instalación:

bash

# Claude Code CLI (una sola vez)
claude mcp add --transport http fal-ai \
  https://mcp.fal.ai/mcp \
  --header "Authorization: Bearer $FAL_KEY"

O en .mcp.json:

json

{
  "mcpServers": {
    "fal-ai": {
      "url": "https://mcp.fal.ai/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_FAL_KEY"
      }
    }
  }
}

Qué sabe hacer fal.ai MCP (el conjunto de herramientas cambia; la lista vigente está en la documentación de fal.ai):

search_models: buscar un modelo por descripción
get_model_schema: conocer los parámetros del modelo
get_pricing: revisar el costo ANTES de correrlo
run_model: correrlo de forma síncrona
submit_job: correrlo de forma asíncrona (para los lentos)
check_job: revisar el estado
upload_file: subir una imagen de entrada
recommend_model: la IA elige el mejor modelo para la tarea
search_docs: documentación de cualquier modelo

Ejemplo de uso en código:

python

import fal_client

# Flux Schnell es un modelo rápido y barato. Los nombres de los modelos en el catálogo de fal.ai cambian
# (salen familias nuevas de Flux): busca los vigentes con search_models
result = fal_client.subscribe(
    "fal-ai/flux/schnell",
    arguments={
        "prompt": "Modern dashboard UI, dark theme, data visualization, clean design",
        "image_size": "landscape_16_9",
        "num_images": 1
    }
)

image_url = result["images"][0]["url"]
# Guardamos
import requests
img_data = requests.get(image_url).content
with open("hero.png", "wb") as f:
    f.write(img_data)

Los precios de Flux en fal.ai dependen del modelo: las versiones rápidas son más baratas y las de mejor calidad, más caras. Antes de correrlo, revisa el costo con la herramienta get_pricing o en la página del modelo.

OpenAI gpt-image-2: precisión y edición

python

from openai import OpenAI
import base64, requests

client = OpenAI()  # la clave se toma de la variable de entorno OPENAI_API_KEY; no la escribas en el código

# Generación
result = client.images.generate(
    model="gpt-image-2",
    prompt="Minimalist SaaS landing page hero illustration, blue gradient, no text",
    size="1024x1024",
    quality="medium"  # low/medium/high
)

# Edición de una imagen existente
with open("screenshot.png", "rb") as img:
    edited = client.images.edit(
        model="gpt-image-2",
        image=img,
        prompt="Add a dark mode toggle button to the top right corner",
        size="1024x1024"
    )

# Los modelos GPT Image devuelven la imagen en base64: la guardamos en un archivo
with open("edited.png", "wb") as f:
    f.write(base64.b64decode(edited.data[0].b64_json))

Los precios de gpt-image-2 se calculan por tokens: el precio de la imagen depende de la calidad (low, medium, high) y del tamaño, no es uno solo para todo. Las tarifas vigentes están en la página de precios de OpenAI.

Replicate MCP: cualquier modelo de código abierto

Replicate es como una tienda con miles de modelos de código abierto. ¿Quieres Stable Diffusion XL, Kandinsky, ControlNet, estilo anime? Todo está ahí.

bash

# Instalación con Code mode (corre código TypeScript en un sandbox de Deno). Las banderas y la versión del paquete cambian; revisa la documentación de Replicate
export REPLICATE_API_TOKEN=r8_...
claude mcp add "replicate" --scope user --transport stdio -- \
  npx -y replicate-mcp@alpha --tools=code

Después de instalarlo, Claude Code escribe y corre el código por su cuenta:

Código

Usuario: "Encuentra el mejor modelo de upscaling y amplía esta imagen 4x"
Claude: busca modelos → escribe TypeScript → lo corre en el sandbox de Deno → devuelve el resultado

Recraft MCP: gráficos vectoriales e íconos

Recraft se especializa en SVG/vectores y en un estilo preciso. Ideal para íconos, logotipos e infografías.

bash

# Instalar desde GitHub (las instrucciones vigentes están en el repositorio y en recraft.ai)
git clone https://github.com/recraft-ai/mcp-recraft-server
cd mcp-recraft-server && npm install

json

{
  "mcpServers": {
    "recraft": {
      "command": "node",
      "args": ["/path/to/mcp-recraft-server/index.js"],
      "env": { "RECRAFT_API_KEY": "your-key" }
    }
  }
}

Workflow práctico: generar el contenido visual de un producto

python

#!/usr/bin/env python3
# generate-assets.py: genera todos los recursos visuales de la landing page

import fal_client
import requests
import os

ASSETS = [
    {
        "name": "hero",
        "prompt": "Modern SaaS dashboard hero image, purple gradient, floating UI cards, no text",
        "size": "landscape_16_9",
        "model": "fal-ai/flux/dev"
    },
    {
        "name": "persona-bot",
        "prompt": "Friendly AI assistant persona, minimalist, blue, circular",
        "size": "square_hd",
        "model": "fal-ai/flux/schnell"
    },
    {
        "name": "og-image",
        "prompt": "Clean tech product Open Graph image, 1200x630, bold typography space",
        "size": "landscape_16_9",
        "model": "fal-ai/flux/schnell"
    }
]

os.makedirs("public/assets", exist_ok=True)

for asset in ASSETS:
    print(f"Generando {asset['name']}...")
    result = fal_client.subscribe(
        asset["model"],
        arguments={
            "prompt": asset["prompt"],
            "image_size": asset["size"],
            "num_images": 1,
            "num_inference_steps": 4 if "schnell" in asset["model"] else 28
        }
    )
    
    url = result["images"][0]["url"]
    img = requests.get(url).content
    
    filename = f"public/assets/{asset['name']}.png"
    with open(filename, "wb") as f:
        f.write(img)
    print(f"  ✅ Guardado: {filename}")

print("✅ ¡Todos los recursos están listos!")

Bloque 2: Figma MCP, diseño y código juntos

El plugin oficial de Figma para Claude Code. Permite que Claude lea archivos de diseño y escriba código a partir de ellos.

Instalación (2 minutos)

bash

# Una sola vez
claude plugin install figma@claude-plugins-official
# Reinicia Claude Code → /plugin → Installed → Figma → Auth

Qué sabe hacer Figma MCP

Función	Qué te da
Leer componentes	Claude ve todos los componentes del diseño
Leer variables	Obtiene colores, espaciados, fuentes
Generar código	Escribe React/HTML a partir del frame elegido
Escribir en el lienzo	Crea elementos directamente en Figma
Code Connect	El código queda sincronizado con los componentes reales
Exportar la interfaz web	Manda el sitio en vivo de regreso a Figma

El workflow de trabajo

Escribe esto en el chat

1. La diseñadora creó la maqueta en Figma
2. Claude Code: "Haz un componente de React a partir de este frame"
3. Claude lee el componente con Figma MCP
4. Escribe código React preciso con los colores y fuentes correctos
5. Opcional: actualiza Figma directamente

Junto a Figma aparecieron otras herramientas entre el diseño y el código: Claude Design (prototipos y presentaciones a partir de una descripción, que se pasan a Claude Code) y Stitch de Google Labs (maquetas de pantallas a partir de una descripción). Sus planes y su estado están en la página Lo vigente y en el catálogo de herramientas.

Bloque 3: componentes de interfaz, bibliotecas que Claude Code se sabe de memoria

Claude Code conoce las bibliotecas de UI populares lo bastante bien para usarlas sin documentación. Eso acelera mucho el desarrollo.

shadcn/ui: el estándar de facto (a octubre de 2026)

No es una biblioteca: es un conjunto de componentes que se copian al proyecto. Claude Code los instala y los usa automáticamente.

bash

# Inicialización (una vez por proyecto)
npx shadcn@latest init

# Agregar un componente
npx shadcn@latest add button card dialog table chart

Qué incluye:

Más de 50 componentes (Button, Card, Dialog, Table, Form, Chart...)
Íconos de Lucide React integrados
Temas (light/dark/system)
Tailwind CSS por debajo
TypeScript de fábrica

🎨 Imagínalo así: shadcn/ui es como IKEA para interfaces. Piezas estándar y bonitas con las que puedes armar cualquier mueble. Claude Code se sabe el catálogo de IKEA de memoria.

Ejemplo de uso con Claude Code:

Escribe esto en el chat

Crea un dashboard con una tabla de usuarios, una gráfica de actividad de la semana
y tarjetas con métricas (total de usuarios, ingresos, tasa de conversión)

Claude usa de inmediato <DataTable>, <AreaChart>, <Card>, <Badge>, sin que le expliques nada.

Tremor: dashboards y analítica

Se especializa en dashboards de datos. Más de 30 componentes para visualizar datos.

bash

npm install @tremor/react

Componentes propios:

<AreaChart>: gráfica de área con tooltip
<BarChart>: de barras
<DonutChart>: dona con leyenda
<SparklineChart>: minigráfica en una línea
<ProgressBar>: barra de progreso con colores
<Tracker>: seguimiento de disponibilidad (uptime)
<ScatterChart>: gráfica de dispersión
<Callout>: bloque informativo
<Metric>: tarjeta con cifra + tendencia

tsx

import { Card, Metric, Text, AreaChart } from "@tremor/react";

const data = [
  { date: "Jan 23", Revenue: 2890 },
  { date: "Feb 23", Revenue: 4890 },
  { date: "Mar 23", Revenue: 3890 },
];

export default function Dashboard() {
  return (
    <Card>
      <Text>Ingresos</Text>
      <Metric>$45,231</Metric>
      <AreaChart
        data={data}
        index="date"
        categories={["Revenue"]}
        colors={["blue"]}
      />
    </Card>
  );
}

MagicUI: efectos que impresionan

Más de 50 componentes con animaciones. Para cuando necesitas algo vistoso en una landing page.

bash

# Se instala como shadcn/ui: copia los componentes.
# El comando de instalación de MagicUI ha cambiado: revisa el vigente en la documentación de magicui.design
npx magicui-cli add animated-gradient-text
npx magicui-cli add sparkles-text
npx magicui-cli add bento-grid
npx magicui-cli add particles

Los más populares:

<AnimatedGradientText>: texto con un degradado en movimiento
<SparklesText>: texto con destellos
<BentoGrid>: una cuadrícula como la de Apple.com
<Particles>: partículas interactivas de fondo
<NumberTicker>: un contador animado
<WordFadeIn>: el texto aparece palabra por palabra
<TypewriterEffect>: texto que se escribe solo
<ShinyButton>: botón con brillo
<Ripple>: ondas como en Android

Aceternity UI: efectos de cine

Las animaciones más complejas: tarjetas 3D, parallax, spotlight.

bash

npm install framer-motion clsx tailwind-merge
# Los componentes se copian a mano desde el sitio

Los favoritos:

<3DCard>: tarjeta que gira en 3D al pasar el mouse
<HeroParallax>: sección con parallax como la de Aceternity
<Spotlight>: un reflector que sigue al mouse
<BackgroundBeams>: haces de luz sobre fondo oscuro
<TracingBeam>: un haz que sigue el scroll (estilo Medium)
<InfiniteMovingCards>: carrusel de testimonios sin pausa

Bloque 4: íconos, más de 10,000 listos

Lucide React (integrado en shadcn/ui)

La opción estándar. Más de 1500 íconos, SVG, componentes de React.

bash

npm install lucide-react

tsx

import { Search, Settings, ChevronRight, ArrowUpRight } from "lucide-react";

<Search className="w-5 h-5 text-gray-500" />
<Settings size={24} strokeWidth={1.5} />

Qué hay: flechas, elementos de interfaz, marcas (GitHub, Twitter, Youtube), naturaleza, medicina, transporte, tecnología.

Heroicons (de Tailwind Labs)

Unos 300 íconos en varios estilos: outline, solid, mini.

bash

npm install @heroicons/react

tsx

import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { StarIcon } from "@heroicons/react/24/solid";

Phosphor Icons

Más de 6000 íconos en 6 estilos (Regular, Bold, Fill, Duotone, Light, Thin). El conjunto más grande.

bash

npm install @phosphor-icons/react

tsx

import { Horse, Heart, Cube } from "@phosphor-icons/react";

<Horse size={32} weight="duotone" color="#FF69B4" />

Tabler Icons

Más de 5000 íconos. ¡Tiene un servidor MCP para buscarlos!

bash

npm install @tabler/icons-react

tsx

import { IconBrandGithub, IconDashboard } from "@tabler/icons-react";

Recursos gratuitos por API

javascript

// Unsplash: millones de fotos por API
const response = await fetch(
  `https://api.unsplash.com/photos/random?query=technology&client_id=${UNSPLASH_KEY}`
);
const photo = await response.json();
// photo.urls.regular, photo.urls.full

// Pexels: una alternativa, también gratuita
const pexels = await fetch(`https://api.pexels.com/v1/search?query=dashboard`, {
  headers: { Authorization: PEXELS_KEY }
});

// Google Fonts API: acceso programático a más de 1500 fuentes
const fonts = await fetch(
  `https://www.googleapis.com/webfonts/v1/webfonts?key=${GOOGLE_FONTS_KEY}&sort=popularity`
);

Bloque 5: animaciones, el movimiento le da vida al producto

Motion (antes Framer Motion): el estándar para React

La biblioteca de animaciones más popular para React. Claude Code la conoce bien. Desde noviembre de 2024 el proyecto se llama Motion y se desarrolla de forma independiente de Framer: el paquete es motion y se importa desde motion/react. El paquete viejo framer-motion todavía funciona, pero el código nuevo escríbelo con motion.

bash

npm install motion

Los 5 patrones que más se repiten:

tsx

import { motion, AnimatePresence } from "motion/react";

// 1. Aparecer al cargar
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  ¡Hola!
</motion.div>

// 2. Efecto hover
<motion.button
  whileHover={{ scale: 1.05, boxShadow: "0 10px 30px rgba(0,0,0,0.2)" }}
  whileTap={{ scale: 0.95 }}
>
  Presióname
</motion.button>

// 3. Aparecer con el scroll
<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{ once: true, margin: "-100px" }}
>
  Se ve al hacer scroll
</motion.div>

// 4. Stagger: los elementos aparecen uno tras otro
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};
const item = { hidden: { opacity: 0, x: -20 }, show: { opacity: 1, x: 0 } };

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map(i => <motion.li key={i} variants={item}>{i}</motion.li>)}
</motion.ul>

// 5. AnimatePresence: animación al desmontar
<AnimatePresence>
  {isOpen && (
    <motion.div
      initial={{ opacity: 0, height: 0 }}
      animate={{ opacity: 1, height: "auto" }}
      exit={{ opacity: 0, height: 0 }}
    >
      Ventana modal
    </motion.div>
  )}
</AnimatePresence>

Lottie: animaciones de After Effects en el navegador

La diseñadora hace la animación en After Effects → la exporta como JSON → Lottie la reproduce en el navegador. En LottieFiles.com hay miles de animaciones gratuitas (revisa las condiciones de licencia de cada una).

bash

npm install lottie-react

tsx

import Lottie from "lottie-react";
import loadingAnimation from "./loading.json"; // descargada de LottieFiles

<Lottie
  animationData={loadingAnimation}
  style={{ width: 200, height: 200 }}
  loop={true}
/>

Dónde conseguir animaciones Lottie gratuitas:

LottieFiles.com: catálogo de animaciones gratuitas y de pago
Icons8 Animated: íconos animados

Three.js / React Three Fiber: 3D en el navegador

Para efectos que impresionan: gráficos 3D, partículas, escenas interactivas.

bash

npm install three @react-three/fiber @react-three/drei

tsx

import { Canvas } from "@react-three/fiber";
import { OrbitControls, Sphere, MeshDistortMaterial } from "@react-three/drei";

export default function AnimatedSphere() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} />
      <Sphere args={[1, 100, 200]} scale={2.4}>
        <MeshDistortMaterial
          color="#8352FD"
          attach="material"
          distort={0.5}
          speed={2}
        />
      </Sphere>
      <OrbitControls enableZoom={false} />
    </Canvas>
  );
}

🎨 Imagínalo así: Three.js es como tener Blender dentro del navegador. A mano es difícil, pero Claude Code conoce los patrones y lo escribe solo.

GSAP: animaciones para proyectos sin React

El animador de JavaScript más potente. Para cuando Motion no alcanza.

bash

npm install gsap

javascript

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// Animación con el scroll
gsap.from(".hero-text", {
  scrollTrigger: ".hero-text",
  y: 100,
  opacity: 0,
  duration: 1,
  stagger: 0.2
});

// Timeline: animación en secuencia
const tl = gsap.timeline({ defaults: { duration: 1 } });
tl.from(".logo", { opacity: 0, y: -50 })
  .from(".nav", { opacity: 0, y: -30 }, "-=0.5")
  .from(".hero", { opacity: 0, scale: 0.8 }, "-=0.3");

Bloque 6: generar video con IA

Runway API

Generación de video profesional (el servicio ahora está en runway.com; el modelo principal vigente lo encuentras en su sitio). El ejemplo es ilustrativo: revisa la dirección de la API, la versión y los nombres de los modelos en la documentación de Runway.

python

import requests

response = requests.post(
    "https://api.runwayml.com/v1/image_to_video",
    headers={"Authorization": f"Bearer {RUNWAY_API_KEY}"},
    json={
        "promptImage": "https://example.com/product.jpg",
        "promptText": "Product rotating slowly on white background, studio lighting",
        "model": "nombre_del_modelo_de_la_documentacion",  # los nombres de los modelos cambian; las versiones anteriores (por ejemplo Gen-3 Alpha Turbo) se vuelven obsoletas
        "duration": 5,
        "ratio": "1280:768"
    }
)
task_id = response.json()["id"]

Kling AI (Kuaishou)

Kling saca versiones nuevas de sus modelos de video con frecuencia. Tiene un plan gratuito; los modelos, precios y límites vigentes están en kling.ai.

Sora (OpenAI): cerrada

Importante: Sora cerró: según la ayuda de OpenAI, el sitio y la app se apagaron el 26 de abril de 2026, y la Sora API el 24 de septiembre de 2026 (según la página de API obsoletas). No hay reemplazo en la API de OpenAI. Para video, mira Runway, Kling, Luma, Google Flow.

Resumen: el stack de diseño para Claude Code

Código

Tarea                       → Herramienta
─────────────────────────────────────────────────────
Imagen hero, ilustraciones  → fal.ai MCP (Flux Dev/Pro)
Imágenes de relleno baratas → fal.ai MCP (modelos rápidos de Flux)
Edición de fotos            → OpenAI gpt-image-2 API
Íconos vectoriales          → Recraft MCP
Diseño → código             → Figma MCP (plugin oficial)
Componentes UI (React)      → shadcn/ui (el estándar)
Dashboards con datos        → Tremor
Efectos vistosos (landing)  → MagicUI + Aceternity UI
Conjunto de íconos          → Lucide (chico) / Phosphor (grande)
Animaciones en React        → Motion (antes Framer Motion)
Animaciones JSON            → Lottie + LottieFiles.com
Efectos 3D                  → React Three Fiber
Fotos de stock              → Unsplash API / Pexels API
Fuentes                     → Google Fonts API

Práctica

Regístrate en fal.ai y consigue tu clave de API
Agrega fal.ai MCP a tu proyecto: claude mcp add --transport http fal-ai https://mcp.fal.ai/mcp --header "Authorization: Bearer $FAL_KEY"
Pídele a Claude: "Genera con fal.ai una imagen hero para un servicio SaaS con el estilo de Linear.app"
Agrega shadcn/ui al proyecto: npx shadcn@latest init → crea un dashboard
Instala Figma MCP: claude plugin install figma@claude-plugins-official → importa un diseño real

Herramientas y recursos

fal.ai: cientos de modelos de IA con un solo MCP ($FAL_KEY)
fal.ai MCP docs: configuración del MCP
replicate.com: modelos de código abierto (Replicate MCP)
bfl.ai: Flux directamente (Black Forest Labs)
recraft.ai: gráficos vectoriales con IA
figma.com/mcp → claude plugin install figma@claude-plugins-official
ui.shadcn.com: componentes de interfaz
tremor.so: componentes para dashboards
magicui.design: componentes animados
ui.aceternity.com: efectos de cine
lucide.dev: íconos
phosphoricons.com: más de 6000 íconos
lottiefiles.com: animaciones JSON gratuitas
motion.dev: animaciones para React (antes Framer Motion)
unsplash.com/developers: API de fotos de stock

Ideas clave

fal.ai MCP = la navaja suiza de la generación con IA. Un conector → cientos de modelos. Se instala en un par de minutos.

shadcn/ui = el estándar de facto. Claude Code se lo sabe de memoria. No aprendas otras bibliotecas hasta dominar esta.

Figma MCP = el puente oficial entre diseño y código. La diseñadora dibuja y Claude Code programa directo desde Figma.

Motion + MagicUI = el stack mínimo para efectos vistosos. Te da buena parte del impacto visual con poco esfuerzo.

Siguiente lección

→ Atlas de productos e ingresos: catálogo de conectores MCP, profesiones e ideas