65 lines
3.5 KiB
Markdown
65 lines
3.5 KiB
Markdown
---
|
|
title: Chat IA
|
|
description: Asistente IA integrado con más de 90 herramientas para crear y modificar diseños.
|
|
---
|
|
|
|
# Chat IA
|
|
|
|
Presiona <kbd>⌘</kbd><kbd>J</kbd> (<kbd>Ctrl</kbd> + <kbd>J</kbd>) para abrir el asistente IA. Describe lo que quieres — crea formas, establece estilos, gestiona el layout, trabaja con componentes y analiza tu diseño.
|
|
|
|
## Configuración
|
|
|
|
1. Abre el panel de chat IA (<kbd>⌘</kbd><kbd>J</kbd>)
|
|
2. Haz clic en el icono de ajustes
|
|
3. Elige un proveedor e introduce tu clave API
|
|
4. Selecciona un modelo
|
|
|
|
### Proveedores compatibles
|
|
|
|
| Proveedor | Modelos | Configuración |
|
|
|-----------|---------|---------------|
|
|
| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek y otros | Clave API de [openrouter.ai](https://openrouter.ai) |
|
|
| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus, etc. | Clave API de [console.anthropic.com](https://console.anthropic.com) |
|
|
| **OpenAI** | GPT-4o, GPT-4, etc. | Clave API de [platform.openai.com](https://platform.openai.com) |
|
|
| **Google AI** | Gemini 2.0, Gemini 1.5, etc. | Clave API de [aistudio.google.dev](https://aistudio.google.dev) |
|
|
| **Compatible con OpenAI** | Cualquier endpoint con formato de API OpenAI | URL base personalizada + clave. Admite alternancia entre API de Completions y Responses. |
|
|
| **Compatible con Anthropic** | Cualquier endpoint con formato de API Anthropic | URL base personalizada + clave |
|
|
|
|
Sin backend, sin suscripción — tu clave se comunica directamente con el proveedor.
|
|
|
|
## Funciones
|
|
|
|
El asistente tiene más de 90 herramientas en estas categorías:
|
|
|
|
- **Crear** — frames, formas, texto, componentes, páginas. Renderiza JSX para layouts complejos.
|
|
- **Estilo** — rellenos, contornos, efectos, opacidad, radio de borde, modos de fusión.
|
|
- **Layout** — auto-layout, grid, alineación, espaciado, dimensionamiento.
|
|
- **Componentes** — crear componentes, instancias, conjuntos de componentes. Gestionar sobrecargas.
|
|
- **Variables** — crear/editar variables, colecciones, modos. Vincular a rellenos.
|
|
- **Consultar** — buscar nodos, selectores XPath, leer propiedades, listar páginas, fuentes, selección.
|
|
- **Inspeccionar** — `get_jsx` para vista JSX, `diff_jsx` para diferencias estructurales, `describe` para rol semántico y problemas de diseño.
|
|
- **Analizar** — paleta de colores, auditoría tipográfica, consistencia de espaciado, detección de patrones.
|
|
- **Exportar** — PNG, SVG, JSX con clases Tailwind. Verificación visual mediante `export_image`.
|
|
- **Vector** — operaciones booleanas, manipulación de trazados.
|
|
|
|
## Verificación visual
|
|
|
|
El asistente puede verificar su trabajo visualmente. Después de crear o modificar diseños, utiliza `export_image` para capturar una imagen y verificar el resultado contra la solicitud original.
|
|
|
|
## Ejemplos de prompts
|
|
|
|
- "Crea una tarjeta con título, descripción y un botón azul"
|
|
- "Haz que todos los botones de esta página usen el mismo radio de borde"
|
|
- "¿Qué fuentes se usan en este archivo?"
|
|
- "Cambia el fondo del frame seleccionado a un degradado de azul a morado"
|
|
- "Exporta el frame seleccionado como SVG"
|
|
- "Muéstrame el JSX de este frame"
|
|
|
|
## Consejos
|
|
|
|
- Selecciona nodos antes de preguntar — el asistente sabe qué está seleccionado.
|
|
- Sé específico con colores, tamaños y posiciones para resultados precisos.
|
|
- El asistente puede modificar múltiples nodos en un solo mensaje.
|
|
- Usa "deshacer" en el editor — las mutaciones de IA admiten deshacer completo.
|
|
- Todos los layouts se recalculan automáticamente después de cada ejecución de herramienta.
|