Cómo crear proyectos en Creator

Para iniciar y personalizar su proyecto utilizando las funciones de inteligencia artificial de Creator es muy sencillo:

1. Cree proyectos por prompt

1. Acceda a la página de inicio de Creator.

2. Localice el cuadro de diálogo del chat.

3. Describa detalladamente la aplicación que desea construir.

4. Presione Enter para enviar el comando inicial.

5. Envíe nuevos comandos a lo largo del desarrollo para refinar y ajustar su proyecto a medida que avanza.

Importante: Proporcione instrucciones claras y específicas, especialmente en el primer prompt, para obtener los mejores resultados. Esto permite que la Inteligencia Artificial comprenda el objetivo exacto en lugar de intentar predecir requisitos omitidos.

Ejemplo de escritura de prompts

❌ Prompt vago

✅ Prompt adecuado

Cree una aplicación de IA para identificar enfermedades en plantas.

Cree una aplicación de diagnóstico de plantas basada en IA. Debe contener una pantalla de registro rápido (solo correo electrónico y contraseña) que lleve al usuario a un breve cuestionario sobre el tipo de plantas que tiene en casa. En la pantalla principal, debe haber un botón centrado destacado para abrir la cámara; el usuario toma una foto de las hojas dañadas, la IA procesa la imagen, muestra el diagnóstico probable de la enfermedad con un porcentaje de certeza y enumera tres acciones inmediatas de tratamiento, permitiendo que el usuario guarde el diagnóstico en el historial de su planta.

2. Agregue archivos y contextos al Prompt

1. Acceda a la parte inferior del panel de chat.

2. Haga clic en el botón + para abrir la lista de opciones de archivos adjuntos y alcance.

3. Seleccione la opción ideal para su tarea:

   • Codebase Context: Agrega el contexto completo del repositorio de código actual a la conversación.

   • Attach Files: Adjunta archivos locales genéricos a su mensaje.

     1. Attach File As Chat Context: Inserta un archivo para que actúe específicamente como historial o instrucción de soporte en el chat.

     2. Upload File to Codebase: Envía el archivo directamente al árbol de directorios del proyecto.

   • Themes: Cambia la identidad visual del panel (opciones disponibles: No Theme, Default Theme o New Theme).

   • Show Token Usage: Muestra la cantidad de tokens consumidos en la interacción con la IA.

3. Elija el modelo de IA

Por defecto, el modelo aparece estandarizado como Auto, pero es posible elegir otro modelo de su preferencia. Para ello:

1. Acceda al menú de selección de modelos de inteligencia artificial.

2. Seleccione una opción de su preferencia (OpenAI, Google, etc.).

4. Use la entrada de voz:

1. Haga clic en el icono de Micrófono ubicado en el área derecha del campo de texto del chat.

2. Hable su comando o instrucción de forma clara.

3. Monitoree la transcripción automática del audio en la pantalla.

4. Haga clic en la flecha de envío para procesar el prompt.

5. Utilice la barra de herramientas

Preview

Gestione el comportamiento y el diseño de su aplicación en tiempo real utilizando los botones de control:

• Hide Chat: Haga clic para ocultar o mostrar la pestaña de chat, expandiendo el área de la vista previa técnica.

• Selecionar Componente / Desativar Seleção de Componente: Haga clic en el icono del cursor para activar la inspección directa de bloques en la página o desactivar la selección interactiva.

• Ativar Annotator: Haga clic en el icono de lápiz/varita mágica para habilitar la creación de notas y demarcaciones visuales sobre la interfaz en desarrollo.

• Voltar / Avançar: Utilice las flechas direccionales (← y →) para navegar por el historial de páginas renderizadas en el simulador.

• Atualizar: Haga clic en la flecha circular para recargar el estado antes mencionado de la página en la vista previa.

• Ir para Página: Utilice el selector de rutas (campo de texto con el indicador /) para alternar o escribir directamente la ruta de la página que desea visualizar.

• Restart App: Haga clic en Restart para reiniciar completamente la ejecución del microservicio de la aplicación de prueba.

• Visualizar em Outra Aba: Haga clic en el icono de enlace externo para proyectar la aplicación en una nueva pestaña completa de su navegador.

• Publicar: Haga clic en el botón azul Publish para poner la aplicación a disposición en producción.

• Modos Web, Tablet e Mobile: Alterne entre los tres iconos de dispositivos ubicados en la parte superior derecha para probar el comportamiento responsivo del diseño en los formatos Desktop, Tablet y Mobile, respectivamente.

Mensajes del Sistema

Siga los registros (logs) de ejecución del entorno. Haga clic en la flecha ubicada a la derecha del panel para abrir los registros. Puede filtrar los mensajes por niveles de criticidad (Info, Aviso y Error) y por origen (Servidor, Cliente, etc.), además de limpiar el historial haciendo clic en el icono de Papelera.

Errores

Realice verificaciones periódicas en este panel para escanear su aplicación en busca de fallas de compilación en TypeScript u otros problemas estructurales.

Código

Acceda a este menú para verificar y navegar por las carpetas, archivos y líneas de código generadas automáticamente para su proyecto.

Config

• Environment Variables: Agregue claves de configuración al proyecto. Haga clic en Add Environment Variable para completar los campos Key y Value, y haga clic en Salvar para finalizar.

Importante: Para modificar variables de entorno destinadas a Supabase o al entorno de producción definitivo, acceda a la consola de su proveedor de hospedaje y actualícelas directamente allí.

• App Commands: Configure comandos personalizados de instalación e inicio de su aplicación. Haga clic en Configure Custom Commands para definir el comando de instalación (install command, como pnpm install) y el comando de inicio (start command, como pnpm dev). Deje los campos vacíos para que el sistema adopte los comandos por defecto de pnpm. Haga clic en Salvar para concluir.

Revisión de Seguridad

• Ejecutar la revisión: Active este módulo para escanear el nivel de seguridad y cumplimiento (compliance) del código de su proyecto.

• Editar las regras: Haga clic en esta opción para abrir el cuadro de diálogo de reglas de cumplimiento. Esta acción permite incluir contextos específicos de su proyecto dedicados exclusivamente a las revisiones de seguridad. El contenido completado se guarda en el archivo SECURITY_RULES.md, lo que ayuda a la plataforma a detectar vulnerabilidades adicionales y a evitar falsos positivos que no tengan sentido para su escenario. Haga clic en Salvar para registrar los cambios.

• Fix: Haga clic en el botón Fix al lado de cualquier vulnerabilidad encontrada para que la IA corrija y optimice el elemento automáticamente.

Publicar

• Exportar código-fonte: Descargue un archivo comprimido (ZIP) que contenga el código fuente completo de esta aplicación para realizar el despliegue (deploy) manual. El sistema elimina automáticamente las carpetas node_modules, .git, builds y los archivos locales env para garantizar la ligereza y la seguridad del paquete.

• GitHub: Conecte y sincronice su código directamente con un repositorio de GitHub para habilitar flujos de trabajo colaborativos y control de versiones integrado.

Reconstruir

Haga clic en este botón para forzar la reestructuración del entorno de desarrollo.

Este comando eliminará de forma permanente la carpeta node_modules, reinstalará todas las dependencias del proyecto, limpiará los datos de sesión de la vista previa y reiniciará el servidor de desarrollo. El procedimiento suele tardar entre 30 y 90 segundos en completarse.