lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

configuración principiante claude-codecodexcursorreactinterfaz

Halaska UI: aplica patrones de interfaz a tu producto de IA

Da a tu prototipo pantallas coherentes para planes, aprobaciones y respuestas del agente. Puedes pedir a tu agente que adapte la interfaz existente a partir de un kit React en un archivo.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: revisa la integración

Abre la guía oficial https://ui.halaska.com/install.md y elige una pantalla pequeña de tu aplicación React. Identifica qué estilos y componentes sustituirá.

Paso 2: descarga el kit

El README muestra esta descarga desde el proyecto de destino:

curl -o src/halaska-kit.jsx https://ui.halaska.com/halaska-kit.jsx

El ejemplo de importación oficial es:

import { Button, Card, Orb, PlanPreviewPattern, usePal, tokens } from "./halaska-kit";

Ajusta la ruta de importación según la ubicación del archivo consumidor.

Paso 3: adapta una pantalla

Pide al agente que conserve las acciones existentes y cambie su presentación usando el kit. Conecta las props a estados reales; consulta la API en https://ui.halaska.com/llms.txt.

Comprobación

Abre la pantalla y prueba el recorrido completo, incluido un estado de espera y un error. Confirma que los botones siguen ejecutando la acción correcta y que los estilos no afectan a otras pantallas.

Si algo falla

Si el kit no carga, comprueba React y react-dom y la ruta de importación. Si un patrón no acepta los datos esperados, revisa si es un componente con props o una implementación de referencia.

Fuente: documentación del proyecto.

ver en .md ¿Prefieres el recurso entero?

Qué es

Halaska UI es un kit React para interfaces de productos de IA. Combina componentes visuales con patrones para conversaciones y control del agente, distribuidos en un archivo que puedes incorporar al proyecto.

Para qué te sirve

  • Cuando un prototipo funciona pero sus pantallas tienen estilos inconsistentes.
  • Cuando necesitas mostrar un plan antes de ejecutar una acción.
  • Cuando quieres distinguir una respuesta en curso, una aprobación y un error recuperable.

Cómo funciona

El archivo incluye tokens, componentes y patrones. Algunos patrones reciben props; otros son ejemplos que debes copiar y adaptar. Sus fundamentos visuales parten de shadcn/ui, pero esta distribución necesita React y react-dom, sin una configuración de Tailwind. El archivo incorpora fuentes y keyframes y empieza con la directiva de cliente.

Antes de empezar

Necesitas un proyecto React. El recorrido asistido usa un agente capaz de descargar archivos; el botón Copy prompt de la web solicita un correo. También existe descarga directa. Inspecciona cómo carga estilos y fuentes antes de integrarlo con tus reglas de privacidad y tu tema.

Repositorio activo comprobado con GitHub el 26 oct 2026; último commit consultado del 2026-10-01.

Límites y alternativas

Los controles de aprobación son piezas de interfaz: debes conectarlos a permisos y lógica reales. La colección no añade un backend de agentes ni valida que una acción sea segura. Prueba teclado, contraste, tamaños de pantalla y estados de error. Si tu proyecto ya tiene un sistema de diseño, adapta solo los patrones necesarios.

Recursos