¿Puede la IA cambiar el código de mi componente?

No. La IA solo puede leer y buscar en tus datos de Storybook. No puede modificar tu código fuente ni tus archivos.

¿La IA ve mi lógica privada de componentes?

La IA solo ve los metadatos y la estructura de los componentes expuestos a través de Storybook. No tiene acceso a todo tu sistema de archivos local.

¿Puede crear componentes nuevos por mí?

No. Las herramientas solo permiten que la IA liste, categorice y busque componentes existentes.

¿Cómo sabe qué componentes existen?

Utiliza las herramientas de búsqueda y listado para extraer el registro actual de componentes directamente de tu instancia de Storybook.

¿Funcionará con cualquier configuración de Storybook?

Sí, siempre que la instancia de Storybook sea accesible mediante la conexión que configures a través de Vinkius.

REDUNDANCIADESCUBRIMIENTOESTRUCTURAHUMANO

REDUNDANCIA
DESCUBRIMIENTO
ESTRUCTURA
HUMANO

Cómo encontrar componentes de UI con tu IA y Storybook

Conecta Storybook a tu cliente de IA una sola vez. Después, podrás consultar todo tu sistema de diseño usando lenguaje natural.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Cómo encuentro componentes de UI existentes con mi IA?

Tu IA utiliza el MCP de Storybook para analizar tu librería y categorías de componentes. Identifica coincidencias basadas en tu descripción para que no tengas que reconstruir lo que ya existe.

El resultado de tus búsquedas

Lo que obtienes con estas consultas

La IA convierte tu sistema de diseño en una base de conocimientos consultable.

REDUNDANCIA

Cero código duplicado

La IA identifica los componentes existentes que cumplen con tus requisitos. Evitas escribir nuevo CSS o lógica para elementos que ya están en la librería.

DESCUBRIMIENTO

Búsqueda instantánea

En lugar de navegar por carpetas, solo pide lo que necesitas. La IA encuentra el componente correcto en segundos.

ESTRUCTURA

Vista organizada del sistema

La IA mapea las categorías de tus componentes. Esto te ayuda a entender cómo está organizado el sistema de diseño sin navegar manualmente.

HUMANO

Validación de implementación

La IA sugiere el mejor componente para usar. Tú decides si realmente encaja con el patrón de UI específico que estás construyendo.

El flujo

Lo que hace tu IA cuando llega la solicitud.

La IA actúa como un puente entre tu interfaz de chat y tus archivos de Storybook.

Mapear el sistema
La IA analiza cómo se agrupan tus componentes para entender la estructura de la librería.
list_categories
Listar partes disponibles
Extrae una lista completa de componentes de categorías específicas para ver qué hay disponible.
list_components
Búsqueda dirigida
Cuando describes un elemento de UI, la IA busca la coincidencia más cercana en la librería.
search_components
Verificar coincidencia
La IA compara tus necesidades con las propiedades del componente para asegurar que es la opción correcta.
search_components

Pruébalo

Copia estos ejemplos para empezar.

Usa estos prompts para comenzar a interactuar con tu sistema de diseño.

Puntos de partida

Cambia los nombres de los componentes o categorías por los de tu configuración específica de Storybook.

Storybook Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

1In Claude Desktop, open Settings → Connectors.
2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3Click Add and start a new chat — Storybook capabilities are ready to use.

Configuración · claude_desktop_config.jsonCopiar

{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}

Copia en el chat04

Busca todos los componentes de botones en mi Storybook.
Busca componentes de entrada que permitan escribir texto.
Lista todas las categorías disponibles en mi sistema de diseño.
Necesito un componente de tarjeta para un perfil de usuario; ¿qué tenemos en Storybook?

Claude
ChatGPT
Cursor
VS Code
Windsurf
Claude Code
JetBrains
Cline

Empieza aquí

Conecta Storybook una vez y luego pregunta.

Solo tienes que vincular tu instancia de Storybook a Vinkius. Tus credenciales permanecen cifradas y podrás empezar a preguntar a tu IA sobre tus componentes de inmediato.

Conectar Storybook a tu IA

FAQ

Cómo funciona esta tarea.

01
¿Puede la IA cambiar el código de mi componente?
No. La IA solo puede leer y buscar en tus datos de Storybook. No puede modificar tu código fuente ni tus archivos.
02
¿La IA ve mi lógica privada de componentes?
La IA solo ve los metadatos y la estructura de los componentes expuestos a través de Storybook. No tiene acceso a todo tu sistema de archivos local.
03
¿Puede crear componentes nuevos por mí?
No. Las herramientas solo permiten que la IA liste, categorice y busque componentes existentes.
04
¿Cómo sabe qué componentes existen?
Utiliza las herramientas de búsqueda y listado para extraer el registro actual de componentes directamente de tu instancia de Storybook.
05
¿Funcionará con cualquier configuración de Storybook?
Sí, siempre que la instancia de Storybook sea accesible mediante la conexión que configures a través de Vinkius.
¿Tienes más dudas sobre Storybook? La página del conector las responde. Ver todo lo que puede hacer el conector de Storybook

Conecta Storybook a Claude, Cursor, ChatGPT y más