Tips Tricks for AI Coder
1.0.0
Bienvenido a los consejos y trucos para principiantes de AI Coder , un recurso integral diseñado para ayudar a los no codificadores de manera efectiva a usar herramientas de IA para desarrollar sitios web, aplicaciones y otros proyectos. Esta guía se basa en la experiencia del mundo real y los consejos prácticos adaptados para principiantes absolutos.
Esta guía también sirve como un testimonio de mi viaje como desarrollador principiante que aprende a aprovechar el poder de la IA. Cada capítulo está inspirado en las lecciones que he aprendido al navegar por el mundo del desarrollo impulsado por la IA. Mi objetivo es compartir estas ideas con usted para que pueda evitar dificultades comunes y maximizar el potencial de estas herramientas.
Déjame compartir con ustedes una de las lecciones más importantes que aprendí desde el principio. Aquí está: la forma en que expresas lo que le pides a la IA que haga es todo. La diferencia entre obtener algo brillante y obtener algo inútil a menudo se reduce a cómo lo pidió. Suena simple, pero este consejo solo puede ahorrarle mucha frustración.
Entonces, hablemos sobre cómo pedirle ayuda a su "Asistente de codificador" de IA de una manera que realmente obtenga resultados, porque confía en mí, la forma en que habla con la IA marca la diferencia.
Aquí está el trato: las herramientas de IA son inteligentes, pero no son lectores mentales. Son brillantes en las siguientes direcciones, pero necesitan esas direcciones para ser claras y específicas. Si eres vago o deja espacio para adivinar, las cosas pueden ir de lado rápido.
Piénselo de esta manera: imagine que está contratando a un contratista para construir una casa. Si dices: "Construye algo bueno", podrías terminar con una casa en el árbol cuando lo que realmente querías era un rancho de tres dormitorios con una piscina. Pero si les entrega planos y dice: "Quiero esta casa exacta con estas características exactas", sabrán exactamente qué hacer.
AI funciona de la misma manera. Si sus instrucciones son específicas, la salida será mejor. En lugar de decir: "Arregle este código", intente algo como "solucionar el problema con el botón Enviar no funciona cuando un usuario hace clic en él". En lugar de "hacer que mi aplicación sea bonita", diga: "Moderniza la interfaz de usuario de la aplicación con fuentes elegantes y profesionales e íconos de alta calidad". ¿Ves la diferencia? La IA ahora sabe exactamente lo que quieres y tiene un camino claro a seguir.
Un truco que he aprendido es comenzar con la frase específica de la tarea correcta, piense en la salsa secreta que lleva a la IA en el modo correcto. Aquí hay ejemplos de frases que puede usar para diferentes situaciones. Siéntase libre de copiar, ajustar y usarlos tanto como desee.
Cuando algo está roto:
Esto le dice a la IA que se concentre en solucionar un problema específico. En lugar de tratar de rehacer todo su código, entra en resolver solo ese problema.
Consejo profesional: si sabe qué rompió cosas (como una cierta línea de código), incluya ese detalle. ¿Y si no estás seguro? No se preocupe, solo concéntrese en describir los síntomas del problema con la mayor claridad posible.
Al agregar nuevas funciones:
Esta frase vale su peso en oro porque le dice a la IA dos cosas críticas: (1) lo que desea agregar y (2) qué no tocar. Confía en mí, no quieres que la IA rompa accidentalmente algo mientras agrega tu nueva característica brillante. Es por eso que la parte de "sin eliminar ninguna otra característica" es tan importante: mantiene todo lo demás intacto.
Cuando necesite corregir errores del navegador:
De acuerdo, este podría ser el consejo profesional más amigable para principiantes de la historia. Si está creando una aplicación web y las cosas no funcionan, su consola de navegador es como un detective que ya ha descubierto la escena del crimen para usted. Para encontrarlo, haga clic derecho en su página web, haga clic en "Inspeccionar" y vaya a la pestaña "Consola". Verá mensajes de error allí, solo copielos y péguelos en su herramienta AI.
¿Por qué funciona tan bien esto? Porque esos mensajes de error a menudo contienen la información exacta que la IA necesita para descubrir qué salió mal. Es como darle una hoja de ruta para arreglar su aplicación. En serio, este truco es un salvavidas.
Cuando quieres mejorar cómo se ve tu aplicación:
Seamos realistas: el diseño es subjetivo. Lo que se ve genial para una persona podría no ser la taza de té de otra persona. Es por eso que es especialmente importante guiar a su IA con palabras como "moderno", "profesional" y "de alta calidad". Este tipo de adjetivos ayudan a la IA a comprender el ambiente general que está buscando.
Consejo profesional: si tiene una aplicación o sitio web específico del que le encanta, ¡mencione! Por ejemplo: "Haga que este se parezca más al diseño de Spotify". La IA intentará imitar ese estilo y aplicarlo a su proyecto.
Al eliminar las características:
Eliminar las características puede ser complicado porque no desea eliminar accidentalmente algo importante. Esta frase le permite a la IA saber que elimina limpiamente la función, pero deja que todo lo demás funcione exactamente como debería.
Cuando eliminas algo accidentalmente:
Es importante hacer que la IA sepa qué archivo perdió y le da algún contexto (por ejemplo, "este archivo manejó todo el estilo para mi página de inicio"). Si bien la IA podría no restaurar el archivo perfectamente, a menudo proporcionará lo suficiente para que las cosas vuelvan a la pista.
Si hay algo que le quitas a este capítulo, que sea esto: la especificidad lo es todo. Cuanto más detalles y claridad das en tus indicaciones, mejor funcionará. Esto es lo que he aprendido:
Este proceso puede sentirse torpe al principio, pero lo prometo, cuanto más practiques, mejor obtendrás en él.
Trabajar con IA para crear aplicaciones y sitios web no siempre es una navegación sencilla. Habrá momentos en los que sientes que estás en un rollo, solo para golpear una pared donde nada parece funcionar. Le ha dado las instrucciones claras de la IA (o eso pensó), ha reformulado sus solicitudes y, sin embargo, ... su proyecto no está avanzando.
Este capítulo tiene que ver con la solución de problemas de esas situaciones frustrantes y despegarse.
A veces, la IA simplemente ... se olvida a sí misma. Si se encuentra repitiendo un comando una y otra vez, y nada está cambiando, el problema podría no estar con sus instrucciones, podría ser el historial de chat.
Los modelos de lenguaje de IA funcionan haciendo un seguimiento de las instrucciones y respuestas anteriores en la conversación actual. Con el tiempo, esta historia puede abordarse con un contexto conflictivo . Por ejemplo:
La solución: comience una nueva conversación con la IA.
Si comenzar de nuevo no resuelve el problema, existe la posibilidad de que el problema esté en el código en sí. El código contradictor ocurre cuando dos piezas de código le dicen a su aplicación que haga cosas opuestas. Esto a menudo puede ocurrir cuando:
Por ejemplo:
La solución: pídale a la IA que identifique y resuelva las contradicciones. Usando la función de chat de su asistente de IA, puede darle un aviso como "revisar mi código e identificar cualquier parte que pueda contradicirse entre sí". Luego pegue las secciones relevantes en el chat.
Otra solución: depurar manualmente. Si la IA no está atrapando el problema (o simplemente desea más control), comience a probar piezas de su aplicación una a la vez. Deshabilite o comente partes del código y vea cómo se comporta la aplicación cuando esas secciones no se ejecutan. Este proceso puede ayudarlo a localizar las líneas específicas que causan el conflicto.
Aquí hay un cambio de juego: la IA no siempre necesita escribir código para usted. También puede usarlo como un socio de depuración confiable para responder a sus preguntas y guiarlo a través de problemas sin cambiar realmente su proyecto. Este enfoque le brinda más control y puede ayudarlo a comprender mejor cómo está conectado todo.
Por ejemplo, puede preguntar:
Esto no se trata de entregar el control a la IA, se trata de usarlo como entrenador de codificación. Al tratar la IA como maestra en lugar de un albacea de tareas, puede desbloquear ideas que lo ayuden a solucionar problemas más rápido y mejor.
Si un modelo de IA no le da respuestas con las que puede trabajar, intente mezclar cosas. Diferentes modelos tienen diferentes fortalezas:
Aquí le mostramos cómo hacerlo:
Incluso si ha estado trabajando exclusivamente con una herramienta, cambiar a otra puede proporcionar nuevas perspectivas valiosas (y soluciones).
Changelogs son salvavidas. Te dejan:
Muchas herramientas e IDE le permiten habilitar ChangeLogs o el historial de versiones. Si no, puede usar Git para el control de versiones para lograr el mismo efecto.
A veces, el problema no es usted o la IA, es el lenguaje que ha elegido. Si su aplicación no funciona bien o se siente demasiado compleja, pregunte a la IA: "¿Es [el idioma actual] la mejor opción para este proyecto?"
Este cambio puede ser un cambio de juego.
Este capítulo se centra en aprovechar las capturas de pantalla de manera creativa y efectiva, junto con estrategias para tener la pista de IA y los cambios de recordar para que su flujo de trabajo se mantenga productivo y sin frustración.
Una captura de pantalla a menudo puede decir más que palabras, especialmente cuando algo en su interfaz de usuario no se ve o se comporta como se esperaba. Sin embargo, sin el contexto adecuado, la IA podría malinterpretar la captura de pantalla y suponer que representa la solución que desea en lugar del problema que está destacando. Para abordar esto, es fundamental emparejar su captura de pantalla con indicaciones precisas que guían el enfoque de la IA.
Proporcione una descripción clara junto con la captura de pantalla:
Una captura de pantalla sin contexto puede conducir a malentendidos. Por ejemplo, si está destacando un error visual, incluya una explicación como:
Resaltar áreas clave en la captura de pantalla:
Use herramientas básicas de edición de imágenes para encabezar, subrayar o anotar las partes de la captura de pantalla que sean relevantes para el problema. Esto ayuda a la IA a saber dónde concentrarse.
Aclarar que la captura de pantalla representa un problema:
Para asegurarse de que la IA no malinterpreta la imagen como salida deseada, use este aviso:
Por qué funciona esto: esta fraseo le dice explícitamente a la IA que trate la captura de pantalla como evidencia del problema, asegurando que analice el problema en lugar de asumir el resultado.
Otro problema común es cuando la IA genera cambios en el código que no aparecen en la aplicación o la interfaz de usuario del sitio web. Esto puede suceder por varias razones: problemas de despliegue, cambios no salvos o incluso errores ocultos en la estructura de su proyecto. Las capturas de pantalla son especialmente útiles aquí porque pueden capturar visualmente los estados "antes" y "después", ayudando a la IA a identificar lo que salió mal.
Tome dos capturas de pantalla:
Incluya ambas capturas de pantalla en su mensaje con una explicación como:
Use las indicaciones específicas para profundizar:
Por qué funciona esto: la combinación de capturas de pantalla con indicaciones le da al contexto visual y escrito de IA, lo que facilita la identificación de problemas subyacentes.
Las capturas de pantalla no son solo para señalar los problemas de la interfaz de usuario. Aquí hay algunas formas adicionales en que puede usar capturas de pantalla para mejorar la comunicación con su asistente de IA:
Mostrar mensajes de error o registros:
Si la consola de su navegador o el registro de la aplicación muestra un error, tome una captura de pantalla e incluya un mensaje como:
Capturar el comportamiento inesperado en entornos en vivo:
Al depurar proyectos implementados, tome capturas de pantalla de cualquier comportamiento inesperado y describa lo que debería haber sucedido: en su lugar:
Resaltar los elementos faltantes en la interfaz de usuario:
Si falta algo de su interfaz de usuario (por ejemplo, una imagen, botón o texto), use una captura de pantalla para mostrar su ausencia:
Comparación de diseños:
Use capturas de pantalla de diseños de aplicaciones o proyectos similares como inspiración y solicite a la IA que replique elementos de esos diseños:
Otro desafío frecuente con el desarrollo asistido por AI-es cuando la IA olvida las ediciones anteriores o pierde el seguimiento de los cambios que ha realizado. Para combatir esto, puede pedirle a la IA que cree un sistema de seguimiento de cambios personalizado dentro de su proyecto. Este sistema documentará los cambios que realiza, actuando como una "memoria" para hacer referencia cada vez que algo sale mal.
Esto puede incluir:
Un archivo de registro centralizado:
La IA puede crear un archivo (por ejemplo, changelog.txt ) donde agrega automáticamente una descripción de cada cambio que realiza:
Timestamp: 2025-01-06 11:30PM
File Edited: main.js
Description: Fixed the submit button functionality to redirect to the confirmation page.
Comentarios de código en línea:
Pídale a la IA que anote sus cambios directamente en el código:
// Added event listener to fix the submit button issue (2025-01-06)
submitButton.addEventListener('click', handleSubmit);
Números de versión o etiquetas:
Tenga los números o etiquetas de versión de incrustación de IA dentro del código para que pueda volver a puntos específicos si es necesario:
https://github.com/techcow2/cursor-agent-tracking
Cuando trabaja en un proyecto, seguramente encontrará problemas, ya sea que se bloqueen, un comportamiento inesperado o errores persistentes. Estos momentos pueden ser frustrantes, pero hay una forma simple y efectiva de guiar a la IA para manejar estos desafíos cuidadosamente mientras evita las dificultades conocidas. Esta sección le mostrará cómo crear indicaciones reflexivas que ayuden a la IA a abordar los problemas de manera efectiva sin introducir otros nuevos.
A veces, al tratar de solucionar un problema o agregar una nueva característica, puede encontrar que la IA repite inadvertidamente el mismo error o introduce nuevos problemas. Esto puede suceder porque la IA no es consciente de los errores pasados o no se le da suficiente contexto para evitarlos. Sin una guía clara, puede pasar por alto detalles críticos o crear efectos secundarios no deseados.
Para evitar estos problemas, puede elaborar indicaciones que combinen su descripción de la tarea con instrucciones explícitas sobre qué evitar. Esto asegura que la IA aborde la tarea con precaución y se centre en resolver el problema sin causar más complicaciones.
Vuelva a un estado estable (si es necesario):
Identificar y documentar el problema:
Elabore su aviso:
Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
Proporcionar contexto (si corresponde):
The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.
Revisión y salida de prueba:
Al construir o mejorar un sitio web o una aplicación basada en la web, la eficiencia y el rendimiento son dos factores críticos. Una forma efectiva de lograr estos objetivos es mediante el uso de bibliotecas de la red de entrega de contenido (CDN) . Este capítulo lo guiará a través de lo que es una biblioteca de CDN, cómo beneficia a su proyecto e introducirá algunas de las bibliotecas más populares como CSS, Bootstrap, UI de material y más. También proporcionará ejemplos útiles sobre cómo solicitar a su asistente de IA que se integre y use estas bibliotecas, especialmente útiles si es nuevo en la codificación y confía en AI para simplificar las tareas de desarrollo.
Una red de entrega de contenido (CDN) es una red de servidores distribuida geográficamente que ofrece contenido web, como las bibliotecas JavaScript, los marcos CSS o las fuentes, en función de los usuarios en función de su ubicación. Una biblioteca CDN se refiere a una versión de un marco o herramienta popular (como Bootstrap o jQuery) que se aloja en estas redes. En lugar de descargar los archivos a su propio servidor o máquina de desarrollo, los hace referencia directamente desde el CDN.
Tiempos de carga más rápidos
CDNS sirve archivos de servidores ubicados más cercanos a sus usuarios, reduciendo el tiempo que tarda en cargarse su sitio.
Ancho de banda reducido para su servidor
Descargar el alojamiento de la biblioteca a un CDN significa que su propio servidor no tiene que manejar esas descargas de archivos.
Facilidad de implementación
Puede agregar bibliotecas potentes rápidamente, a menudo con solo una o dos líneas de código.
Actualizaciones automáticas
Los CDN generalmente alojan las últimas versiones de las bibliotecas, por lo que puede mantenerse actualizado fácilmente.
Ventajas de almacenamiento en caché
Si un usuario ya ha cargado la misma biblioteca o marco desde un CDN en otro sitio, su navegador puede usar la versión en caché, acelerando más los tiempos de carga.
Si es nuevo en la codificación y confía en AI para configurar su proyecto, aquí hay ejemplos de inmediato que puede usar para tener la integración de la biblioteca de identificación de IA:
Integrando un marco CSS
Solicitud de ejemplo:
“Use el Bootstrap CDN en mi archivo HTML existente. Asegúrese de que el Navbar colapse en el móvil. Coloque un pie de página en la parte inferior con un simple aviso de derechos de autor ".
Migrar de un marco a otro
Solicitud de ejemplo:
“Reemplace CSS de viento de cola con Bootstrap a través de CDN en mi proyecto. Convierta cuidadosamente las clases de viento de cola existentes en equivalentes de arranque para mantener el mismo diseño general ".
Agregar una utilidad JavaScript
Solicitud de ejemplo:
“Incluya a Lodash de un CDN en mi index.html. Luego, en mi archivo Main.js, demuestre cómo usar la función de debalidad de Lodash para una entrada de texto ".
Estas indicaciones dan la claridad de AI sobre qué biblioteca usar, cómo usarla (a través de un CDN) y cualquier tarea o característica específica que desee implementar.
A continuación, encontrará bibliotecas populares que puede agregar fácilmente a su proyecto a través de un CDN. Cada entrada incluye una descripción, notas de uso, un fragmento de muestra y un ejemplo rápido para su IA.
Descripción:
Un marco CSS de utilidad primero que lo ayuda a construir diseños personalizados rápidamente mediante el uso de clases predefinidas en su HTML.
Lo mejor para:
Desarrolladores que desean control granular sobre el diseño sin escribir muchos CSS personalizados.
Implementación de la muestra:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
>
AI Ejemplo indicador:
“Agregue CSS CSS a mi proyecto a través de un CDN. Cree una página de inicio con un encabezado, una sección de héroe simple y un pie de página. Use clases de viento de cola para garantizar un diseño limpio y moderno ".
Descripción:
Uno de los marcos CSS más utilizados para construir sitios web de primera instancia de móviles. Viene con componentes prediseñados como barras de navegación, formas, modales y más.
Lo mejor para:
Principiantes que desean un diseño rápido y consistente con una configuración mínima.
Implementación de la muestra:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
AI Ejemplo indicador:
“Agregue los últimos enlaces de Bootstrap CDN a mi sitio web. Cree una barra de navegación receptiva con un menú desplegable para 'Servicios' y una barra de búsqueda a la derecha. Asegúrese de que se vea bien en los dispositivos móviles ".
Descripción:
Una biblioteca basada en React que implementa el sistema de diseño de material de Google, que ofrece componentes listos para usar como botones, tarjetas y diálogos.
Lo mejor para:
Reaccionar proyectos que requieren una estética elegante, moderna y profesional de diseño.
Implementación de la muestra:
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
>
npm install @mui/material @emotion/react @emotion/styled
(Si bien la interfaz de usuario de material recomienda principalmente NPM, aún puede hacer referencia a sus fuentes de iconos a través de CDN).
AI Ejemplo indicador:
“Integre los iconos de material de un CDN y úselos en mi aplicación React. Construya un componente de tarjeta simple para mostrar productos con un botón 'Agregar al carrito' de estilo material.
Descripción:
Una biblioteca de iconos integral que ofrece íconos vectoriales escalables que se pueden diseñar fácilmente con CSS.
Lo mejor para:
Agregar rápidamente íconos de redes sociales, iconos de NAV o cualquier otra iconografía sin crear SVG personalizados.
Implementación de la muestra:
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
>
AI Ejemplo indicador:
“Agregue la fuente impresionante a mi HTML a través de CDN. Reemplace todos los íconos de marcadores de posición en mi barra de navegación con iconos increíbles para 'hogar', perfil 'y' carrito '. Asegúrese de que se escalen correctamente en los dispositivos móviles ".
Descripción:
Una biblioteca clásica de JavaScript conocida por simplificar la manipulación DOM, el manejo de eventos y las operaciones AJAX.
Lo mejor para:
Proyectos heredados o principiantes que desean hacer interacciones complejas de la interfaz de usuario sin escribir Javascript de vainilla extenso.
Implementación de la muestra:
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
></script>
AI Ejemplo indicador:
"Agregue jQuery a través de CDN a mi index.html. Muéstrame cómo ocultar un DIV cuando un usuario hace clic en un botón e registra un mensaje de éxito en la consola ".
Descripción:
Una biblioteca de utilidad de JavaScript que proporciona una amplia gama de funciones para la manipulación de datos, que incluye clonación profunda, desacuerdo y más.
Lo mejor para:
Simplificando operaciones complejas en matrices, objetos y cadenas.
Implementación de la muestra:
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
></script>
AI Ejemplo indicador:
"Agregue Lodash de un CDN. Convierta mis avances existentes a los métodos de Lodash y demuestre cómo desbloquear un campo de búsqueda ".
Descripción:
Una biblioteca CSS que ofrece animaciones prefabricadas (desvanecimiento, rebote, diapositiva, etc.) que puede aplicar a los elementos agregando clases específicas.
Lo mejor para:
Agregar rápidamente animaciones a elementos sin escribir animaciones CSS personalizadas.
Implementación de la muestra:
<link
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
rel="stylesheet"
>
AI Ejemplo indicador:
“Incluya animate.css a través de CDN y aplique una animación de desvanecimiento a mi sección de héroes en la carga de la página. También aplique un efecto de rebote al botón 'Registrarse ahora' ".
Descripción:
Una biblioteca de JavaScript versátil para crear gráficos y gráficos interactivos.
Lo mejor para:
Principiantes que desean una forma directa de visualizar los datos sin sumergirse en bibliotecas más complejas.
Implementación de la muestra:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'yellow']
}]
}
});
AI Ejemplo indicador:
“Agregue Chart.js a través de un CDN y cree un gráfico de barras que muestre datos de ventas mensuales. Etiquete el eje Y como 'ventas' y el eje X con los meses del año ".
Identifica tus necesidades
Decida si necesita ayuda principalmente con el estilo (CSS) o con la funcionalidad de JavaScript. Algunas bibliotecas (como Bootstrap o Tailwind) se centran en el diseño, mientras que otras (como JQuery o Lodash) se centran en ayudar con las tareas de JavaScript.
Verifique la compatibilidad
Asegúrese de que la biblioteca que elija funcione bien con las herramientas o marcos que ya tiene en su lugar.
Busque la comunidad y la documentación activa
Las bibliotecas bien respaldadas generalmente tienen mejores tutoriales, comunidades más grandes para la resolución de problemas y actualizaciones frecuentes.
Pregúntele a su IA
Si todavía no está seguro de qué biblioteca usar, solicite consejo a su IA:
"¿Qué biblioteca es la mejor para una interfaz de usuario para principiantes y altamente personalizable: Viento de cola, bootstrap o UI material?"
La IA puede explicar los pros y los contras para cada opción en el contexto de su proyecto.
