← Volver al listado de tecnologías ← Índice de OpenPencil

IA integrada y chat

Por: Artiko
openpenciliachatagentesanthropicclaude

IA integrada y chat

La IA como ciudadano de primera clase

La diferencia fundamental entre OpenPencil y otras herramientas de diseño no es que tenga un chatbot añadido. Es que la IA fue diseñada desde el primer día como parte integral de la arquitectura del editor. El agente de IA no trabaja sobre una representación simplificada del diseño: trabaja directamente sobre el mismo modelo de datos que el editor visual.

Esto tiene consecuencias prácticas enormes. Cuando el agente crea un botón, ese botón aparece inmediatamente en el canvas, es seleccionable, editable, y tiene exactamente las mismas propiedades que tendría si lo hubieras creado manualmente. No hay una capa de traducción o serialización en el medio.

sequenceDiagram
    participant U as Usuario
    participant C as Chat UI
    participant A as Agente IA
    participant T as Design Tools (90+)
    participant S as Zustand Store
    participant CV as Canvas

    U->>C: "Crea una card de producto"
    C->>A: Prompt + contexto del canvas
    A->>A: Planifica (skeleton)
    A->>T: create_frame({width:320, height:400})
    T->>S: Actualiza estado
    S->>CV: Re-renderiza
    A->>T: create_text({content:"Nombre producto"})
    A->>T: create_rect({fills:[{type:"IMAGE"}]})
    A->>A: Refina estilos
    A->>C: "Card creada con éxito"
    C->>U: Muestra resultado

El chat integrado

Abrir el chat

El chat de IA se activa con Cmd+J (macOS) o Ctrl+J (Windows/Linux). Se abre como un panel lateral que no interfiere con el canvas. También puedes abrirlo desde el menú IA → Abrir chat.

Modos del chat

El chat tiene tres modos de operación:

Modo Canvas: El agente tiene acceso completo al canvas actual. Puede crear, modificar y eliminar elementos. Este es el modo por defecto cuando tienes un canvas abierto.

Modo Análisis: El agente analiza el diseño actual y responde preguntas sin modificar nada. Útil para obtener feedback sobre el diseño. Actívalo con /analyze al inicio del mensaje.

Modo Código: El agente responde con fragmentos de código basados en el diseño. Útil para obtener el CSS de un componente o el código de exportación. Actívalo con /code.

Historial y contexto

El chat mantiene el historial de la conversación durante la sesión. El agente recuerda las instrucciones anteriores y puede hacer referencias:

Usuario: "Crea una navbar con fondo oscuro y logo"
Agente: [crea la navbar]
Usuario: "Agrega un menú hamburguesa para mobile"
Agente: [modifica la navbar existente, no crea una nueva]

También puedes seleccionar elementos en el canvas antes de enviar un mensaje. El agente recibirá los IDs de los elementos seleccionados como contexto adicional:

[Selecciona el botón primario]
Usuario: "Crea 3 variantes de este botón: hover, disabled y loading"
Agente: [crea las 3 variantes basadas en el botón seleccionado]

Proveedores de IA soportados

OpenPencil soporta múltiples proveedores de IA a través del Vercel AI SDK v6. La selección del proveedor afecta directamente la calidad, velocidad y costo del trabajo del agente.

Configuración de proveedores

Accede a Preferencias → Agentes para configurar:

{
  "ai": {
    "providers": {
      "anthropic": {
        "apiKey": "sk-ant-...",
        "models": {
          "full": "claude-opus-4-5",
          "standard": "claude-sonnet-4-5",
          "basic": "claude-haiku-3-5"
        }
      },
      "openai": {
        "apiKey": "sk-...",
        "models": {
          "full": "gpt-4o",
          "standard": "gpt-4o-mini"
        }
      },
      "google": {
        "apiKey": "AIza...",
        "models": {
          "full": "gemini-2.0-flash-thinking",
          "standard": "gemini-2.0-flash"
        }
      },
      "openrouter": {
        "apiKey": "sk-or-...",
        "baseUrl": "https://openrouter.ai/api/v1"
      }
    },
    "defaultProvider": "anthropic"
  }
}

Niveles de agente

graph TD
    A[Petición al agente] --> B{Evalúa complejidad}
    B -->|Alta complejidad| C[Nivel Completo]
    B -->|Complejidad media| D[Nivel Estándar]
    B -->|Tarea simple| E[Nivel Básico]
    C --> C1[Claude con extended thinking<br/>Diseños complejos multicomponente<br/>Máxima calidad, mayor costo]
    D --> D1[GPT-4o / Gemini 2.0<br/>Tareas cotidianas<br/>Balance calidad/costo]
    E --> E1[Llama / Qwen / Haiku<br/>Cambios simples: color, texto<br/>Respuesta inmediata, bajo costo]

Puedes forzar el nivel manualmente:

/level full: "Diseña un sistema completo de design system con 50 componentes"
/level standard: "Crea una card de usuario"
/level basic: "Cambia el color del botón a azul"

Modo OpenRouter

Si quieres experimentar con modelos alternativos o reducir costos, OpenRouter te da acceso a decenas de modelos con una sola API key:

{
  "openrouter": {
    "apiKey": "sk-or-...",
    "model": "meta-llama/llama-3.3-70b-instruct",
    "siteUrl": "https://mi-proyecto.com",
    "siteName": "Mi Proyecto"
  }
}

Las 90+ herramientas de diseño

El agente tiene acceso a más de 90 herramientas especializadas para manipular el canvas. Estas herramientas corresponden directamente a acciones del editor visual, lo que garantiza que el resultado sea idéntico a lo que harías manualmente.

Categorías de herramientas

Creación de nodos

// El agente puede llamar a estas herramientas internamente
create_frame({ x, y, width, height, name })
create_rect({ x, y, width, height, cornerRadius })
create_ellipse({ x, y, width, height })
create_text({ x, y, content, fontSize, fontFamily, fontWeight })
create_line({ x1, y1, x2, y2 })
create_vector({ paths })  // Path SVG personalizado
create_image({ x, y, width, height, src })
create_component({ name, variants })

Propiedades de fills

set_fill_solid({ nodeId, color, opacity })
set_fill_gradient_linear({ nodeId, stops, angle })
set_fill_gradient_radial({ nodeId, stops, center, radius })
set_fill_image({ nodeId, imageUrl, scaleMode })
add_fill({ nodeId, fill })
remove_fill({ nodeId, fillIndex })

Propiedades de texto

set_text_content({ nodeId, content })
set_font_family({ nodeId, family })
set_font_size({ nodeId, size })
set_font_weight({ nodeId, weight })
set_line_height({ nodeId, value })
set_letter_spacing({ nodeId, value })
set_text_align({ nodeId, align })

Auto-layout

enable_auto_layout({ nodeId, direction })
set_layout_gap({ nodeId, gap })
set_layout_padding({ nodeId, top, right, bottom, left })
set_layout_align_items({ nodeId, align })
set_layout_justify_content({ nodeId, justify })
set_child_sizing({ nodeId, childId, sizing })

Efectos

add_drop_shadow({ nodeId, x, y, blur, spread, color })
add_inner_shadow({ nodeId, x, y, blur, color })
add_blur({ nodeId, radius })
add_background_blur({ nodeId, radius })

Organización

group_nodes({ nodeIds, name })
ungroup_node({ nodeId })
move_node({ nodeId, x, y })
resize_node({ nodeId, width, height })
reorder_node({ nodeId, index })
duplicate_node({ nodeId })
delete_node({ nodeId })

Variables y tokens

create_variable({ name, type, value })
bind_variable({ nodeId, property, variableId })
set_variable_value({ variableId, value, mode })
create_variable_collection({ name })

El flujo de 3 capas

OpenPencil implementa un proceso de diseño en tres fases que simula cómo trabajan los diseñadores profesionales: primero la estructura, luego el contenido, finalmente los detalles visuales.

Fase 1: Design Skeleton

En esta primera fase el agente establece la estructura del diseño: los frames principales, los contenedores de sección, el auto-layout general y las proporciones básicas. No hay colores específicos ni tipografía final todavía.

Prompt del sistema en skeleton:
"Crea la estructura espacial del diseño. 
Usa colores placeholder (grises). 
Define los contenedores principales y su layout.
No detalles aún contenido específico."

El resultado de skeleton es un wireframe fiel en el canvas. El agente puede hacerlo en paralelo para múltiples secciones si la página es compleja.

Fase 2: Design Content

Con la estructura establecida, el agente procede a poblar los contenedores con contenido real: textos representativos, imágenes placeholder de dimensiones correctas, iconos apropiados para cada sección.

Prompt del sistema en content:
"Rellena los contenedores del skeleton con contenido real.
Usa textos representativos del dominio.
Selecciona iconos apropiados de Iconify.
Usa imágenes placeholder con las dimensiones correctas."

Fase 3: Design Refine

La última fase aplica la identidad visual: colores de marca, tipografía específica, sombras, gradientes, estados hover y focus, micro-animaciones definidas como notas de prototipo, y revisión final de consistencia visual.

Prompt del sistema en refine:
"Aplica la identidad visual al diseño.
Usa los tokens de diseño definidos en las variables.
Asegura consistencia de espaciado (múltiplos de 4 o 8).
Revisa contraste de colores (WCAG AA mínimo).
Agrega efectos visuales apropiados."
sequenceDiagram
    participant P as Prompt usuario
    participant S as Skeleton Agent
    participant C as Content Agent
    participant R as Refine Agent
    participant CV as Canvas

    P->>S: "Diseña una landing page para SaaS"
    S->>CV: Crea estructura: hero, features, pricing, footer
    S->>C: Pasa referencia de frames
    C->>CV: Llena con textos, iconos, imágenes
    C->>R: Pasa diseño con contenido
    R->>CV: Aplica colores, tipografía, efectos
    R->>P: "Landing page completada"

Equipos de agentes concurrentes

Para diseños complejos (landings completas, sistemas de componentes, flujos multi-pantalla), OpenPencil puede orquestar múltiples agentes trabajando en paralelo.

El orquestador

Cuando detecta una tarea compleja, el sistema lanza un agente orquestador que:

  1. Analiza el diseño completo solicitado
  2. Lo divide en sub-tareas espacialmente independientes
  3. Lanza agentes especializados para cada sub-tarea
  4. Coordina la consistencia visual entre ellos
  5. Fusiona los resultados en el canvas final
graph TD
    O[Orquestador] --> A1[Agente: Header]
    O --> A2[Agente: Hero Section]
    O --> A3[Agente: Features Grid]
    O --> A4[Agente: Testimonials]
    O --> A5[Agente: Pricing Table]
    O --> A6[Agente: Footer]
    A1 --> CV[Canvas]
    A2 --> CV
    A3 --> CV
    A4 --> CV
    A5 --> CV
    A6 --> CV
    O --> V[Agente: Visual Review]
    V --> CV

Activar modo multi-agente

El modo multi-agente se activa automáticamente cuando la petición es suficientemente compleja. También puedes forzarlo con /multi:

/multi: "Diseña una aplicación de ecommerce completa con: 
- Página de listado de productos (grid responsive)
- Página de detalle de producto
- Carrito lateral
- Checkout en 3 pasos
Usa un design system consistente con los colores de una marca de moda sostenible"

Compartir contexto entre agentes

Los agentes concurrentes comparten un contexto común que incluye:

Para definir restricciones de marca antes de una tarea multi-agente:

/brand: 
- Color primario: #2563EB
- Color secundario: #7C3AED  
- Tipografía: Inter (headings) + DM Sans (body)
- Radio de esquina base: 8px
- Espaciado base: 4px (usa múltiplos)
- Sombras: suaves, sin color (solo negro con opacidad)

Variables de diseño generadas por IA

Una de las capacidades más útiles del agente es extraer automáticamente las variables de diseño del canvas existente.

Extraer tokens de un diseño

Si tienes un diseño ya hecho (importado de Figma o creado manualmente), el agente puede analizarlo y generar un sistema de variables coherente:

/extract-tokens: "Analiza el diseño actual y extrae un sistema de tokens: 
colores, tipografía, espaciados y sombras. 
Organízalos por categoría y crea las variables en el panel de Variables."

El agente:

  1. Analiza todos los valores de color, tamaño de fuente, padding y sombra en el canvas
  2. Identifica patrones (colores que se repiten, tamaños comunes)
  3. Crea una jerarquía de variables (primitivas → semánticas → específicas de componente)
  4. Vincula las instancias en el canvas a las nuevas variables

Generar variantes de color automáticamente

/generate-palette: "Dado el color primario #2563EB, genera:
- 10 tonos (50 a 950) para uso general
- Color de texto sobre fondo primario (accesible WCAG AA)
- Color de borde y hover
- Versión dark mode de todos los anteriores"

Sincronización con CSS

Una vez que tienes variables de diseño, el agente puede generar el CSS correspondiente:

/export-tokens: css

/* Resultado generado por el agente */
:root {
  --color-primary-50: #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-900: #1E3A8A;
  
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-4: 1rem;
  --spacing-8: 2rem;
  --spacing-16: 4rem;
}

Prompts efectivos para diseño

El arte de trabajar con el agente de IA de OpenPencil está en formular prompts claros y específicos. Aquí algunas estrategias:

Especifica el contexto del dominio

❌ "Crea una card"
✅ "Crea una card para mostrar un artículo de blog médico, 
    con imagen destacada, categoría como badge, 
    título H3, extracto de 2 líneas, autor con avatar 
    y fecha de publicación"

Define las restricciones técnicas

"Diseña el formulario de registro considerando:
- Ancho máximo 480px, centered en la pantalla
- Campos: nombre, email, contraseña, confirmación
- Validación visual inline (error state con borde rojo)
- Botón primario que ocupa el 100% del ancho
- Link 'Ya tengo cuenta' debajo del botón
- Todo alineado verticalmente con auto-layout"

Itera sobre el resultado

[Turno 1] "Crea una tabla de precios con 3 planes"
[Agente crea la tabla]
[Turno 2] "El plan del medio debe destacar visualmente 
           como el más popular. Agrega un badge 'Recomendado'"
[Turno 3] "Cambia la tipografía de los precios a un tamaño 
           más grande y usa el peso 800"

Describe el estado, no la acción

❌ "Agrega sombra al botón"
✅ "El botón debe verse elevado y clickeable, 
    como si flotara ligeramente sobre el fondo"

Referencia a patrones conocidos

"Diseña un componente similar al Timeline de 
Twitter/X pero para mostrar el historial de 
cambios de un documento. Cada entrada tiene 
usuario, acción, timestamp y opción de revertir"

Feedback y correcciones en tiempo real

El agente puede recibir feedback mientras trabaja. No tienes que esperar a que termine:

/stop: Para la generación actual
/undo-agent: Deshace todos los cambios del agente en el turno actual
/feedback: "El header está muy alto, reduce la altura a 80px"

También puedes seleccionar elementos creados por el agente y pedirle que los modifique:

[Selecciona la card creada por el agente]
"Esta card se ve muy formal. Hazla más playful: 
 esquinas más redondeadas, gradiente sutil en el fondo, 
 emoji en el título"

Guardar y reutilizar prompts

Para equipos que repiten las mismas instrucciones, OpenPencil permite guardar prompts como plantillas:

# Guardar un prompt como template
op prompt save "crear-card-blog" \
  --content "Crea una card de blog con imagen, categoría badge, título, extracto y autor. Estilo: {estilo}. Color primario: {color}"

# Usar el template
op prompt run "crear-card-blog" \
  --estilo "minimalista" \
  --color "#2563EB"

Estos templates también están disponibles en el chat con /template nombre-del-template.

Resumen

En este capítulo has aprendido:

En el próximo capítulo exploraremos el CLI op para automatización y flujos de trabajo en CI/CD.

← Volver al listado de tecnologías ← Índice de OpenPencil