Vista del creador
Resumen del diseño
La vista del creador es un entorno de edición de tres paneles que abres haciendo doble clic en cualquier grupo en el Área de componentes. Proporciona una lista de bloques a la izquierda, un editor de código en el centro y una vista previa en vivo a la derecha, con un cuadro de indicaciones de IA en la parte inferior.
Panel de lista de bloques
El panel izquierdo muestra todos los bloques del grupo actual. Cada bloque muestra una vista previa de tarjeta con el nombre del bloque y una lista de archivos numerada debajo. Usa la barra de herramientas en la parte superior para navegar hacia atrás, alternar entre vistas de lista y dividida, o haz clic en el botón + para agregar un nuevo bloque.
Editor de código
El panel central es un editor de código con pestañas donde escribes y editas el contenido de los bloques. Las pestañas están organizadas por tipo de archivo:
Texto
Escribe documentación, markdown o contenido de texto plano para el bloque.
HTML
Edita la estructura HTML de tu componente.
CSS
Agrega estilos para tu componente.
JavaScript
Agrega interactividad y lógica a tu componente.
Vista previa en vivo
El panel derecho renderiza una vista previa en vivo de tu componente. A medida que agregas HTML, CSS y JavaScript en el editor, la vista previa se actualiza para mostrar el resultado compilado. También puedes arrastrar y soltar archivos o pegar contenido (Ctrl+V) directamente en el área de vista previa para agregarlos al bloque. Usa el ícono del ojo para alternar la vista previa y el toggle BG para cambiar el fondo de la vista previa.
Cuadro de indicaciones de IA
La barra inferior es el Cuadro de Indicaciones de IA. Úsalo para describir cambios y dejar que la IA genere o modifique el contenido de tu bloque. Incluye un selector de modelo, un campo de entrada de texto, entradas de voz y emoji, y un botón Generar. Dos toggles de modo — A y V — alternan entre el Modo de IA Directa y el Modo de Variaciones.
Categorías de generación de IA
El selector de modelo de IA revela categorías de generación que determinan qué tipo de contenido produce la IA:
Generación de texto
Genera o edita contenido basado en texto como código, documentación y marcado.
Generación de imágenes
Crea imágenes a partir de indicaciones de texto o edita imágenes existentes con IA (texto a imagen e imagen a imagen).
Generación de video
Genera videos a partir de descripciones de texto o anima imágenes fijas en video (texto a video e imagen a video).
Modo directo de IA (A)
Cuando el toggle A está activo, la IA hace modificaciones directas a tu componente en su lugar. El texto del campo muestra “Describe los cambios a aplicar a tu componente” y una insignia indica qué archivo será modificado (por ejemplo, “Modificará: texto”). Este modo es ideal para ediciones rápidas y específicas al archivo seleccionado actualmente.
Modo de variación (V)
Cuando el toggle V está activo, la IA genera múltiples variaciones de tu componente en lugar de editarlo en su lugar. El texto del campo cambia a “Describe las variaciones que quieres generar” y aparece un contador con controles − / + para que puedas elegir cuántas variaciones crear. Las variaciones generadas aparecen en un panel dedicado donde puedes revisarlas y agregar tus versiones preferidas al grupo.