Glosario IA para Frontend: lo que necesitas saber

Glosario práctico de conceptos clave en IA aplicada al desarrollo Frontend: LLMs, tokens, prompts, context window y más. Explicado sin jerga, con enfoque directo a productividad real.

Uso IA diariamente en mi trabajo como frontend senior. GitHub Copilot, ChatGPT, Claude... son herramientas que han cambiado radicalmente mi forma de trabajar. Pero también reconozco que durante mucho tiempo (demasiado) usé términos sin entender realmente qué significaban.

Este glosario es para cualquier Frontend —junior, mid o senior— que quiera trabajar de forma más efectiva con IA. Estos conceptos son importantes independientemente de tu nivel: determinan tu capacidad real para colaborar con modelos inteligentes.

Un mid-level que domina prompt engineering puede generar código que parece escrito por un senior.

No es magia: es comunicación precisa.


Nota: Estoy preparando un artículo completo sobre Prompt Driven Development (PDD) —el workflow donde actúas como arquitecto usando prompts precisos para que la IA genere código, en lugar de escribirlo línea por línea. Si te interesa este enfoque, estate atento.


Aquí van los términos esenciales, explicados sin jerga innecesaria.

LLM (Large Language Model)

Qué es: Un modelo de lenguaje entrenado con enormes cantidades de texto para predecir la siguiente palabra (o token) en función del contexto. ChatGPT, Claude y Gemini son LLMs.

Por qué importa: Es la tecnología base de todas las herramientas que usas a diario. Entender cómo funciona un LLM cambia tu forma de escribir prompts (consulta la guía), estructurar código y revisar resultados.

En la práctica: No razonan como humanos. Funcionan como modelos de computación predictiva (MCP): predicen texto. No entienden lo que dicen, pero parecen hacerlo porque han visto millones de ejemplos.

Créeme: cuanto mejor estructures ese contexto (tu prompt), mejor será el resultado.

📖 Documentación: Wikipedia - What is a LLM

Token

Qué es: La unidad mínima que entiende un modelo de IA. Pueden ser palabras completas, partes de palabras, espacios o símbolos.

Por qué importa: Los modelos tienen límites de tokens. Si tu componente Vue (por ejemplo) es muy largo, puede que no quepa en el contexto. Por ejemplo, Claude 3.5 Sonnet tiene 200k tokens de límite —aproximadamente 150k palabras.

En la práctica: Cuando pegas un archivo de 500 líneas y te dice "el archivo es demasiado largo", no es porque tenga pereza. Literalmente no cabe en su memoria de trabajo.

Como junior: aprende a fragmentar tu código.

Como senior: diseña prompts que respeten estos límites.

📖 Documentación: OpenAI - What are tokens?

Context Window

Qué es: El límite total de tokens que un modelo puede procesar de una vez, incluyendo tu prompt y su respuesta.

Por qué importa: Determina cuánto código puedes analizar de una vez. Una vez más, si tienes una aplicación grande, no puedes pedirle que la revise completa.

En la práctica: Fragmenta tus revisiones de código. Primero la arquitectura general, luego componente por componente.

Es más efectivo que intentar meter todo el contexto de golpe.

Prompt Engineering

Qué es: El arte y ciencia de estructurar instrucciones para que una IA produzca el resultado que necesitas.

Por qué importa: No es lo mismo pedirle "haz un componente de botón" que "crea un componente Button en TypeScript con variants para size y color, usando Tailwind CSS, que sea accesible y tenga estados hover y disabled".

En la práctica: Ten templates guardados para tareas comunes.

Para juniors: empieza con prompts muy específicos.

Para seniors: desarrolla prompts que capturen el contexto arquitectónico completo.

  • "Refactoriza este componente para [criterio específico]"
  • "Revisa este código y encuentra [tipo específico de problema]"
  • "Convierte este diseño en [tecnología específica] siguiendo [convenciones específicas]"

📖 Documentación: OpenAI - Prompt Engineering Guide

Temperature

Qué es: Un parámetro que controla qué tan "creativa" o aleatoria es la respuesta. De 0 (muy predecible) a 1 (muy creativo).

Por qué importa: Para depuración necesitas una temperatura baja (0.1–0.3). Para tareas creativas de UX puedes subir a 0.7–0.8.

En la práctica: Cuando usas APIs directamente, ajusta esto según el tipo de tarea.

Para code reviews, baja la temperatura.

Para explorar arquitecturas, súbela.

📖 Documentación: Understanding OpenAI's Temperature Parameter

RAG (Retrieval Augmented Generation)

Qué es: Técnica que permite a la IA acceder a información específica que no tenía en su entrenamiento original.

Por qué importa: Explica por qué tu LLM no conoce la documentación interna de tu equipo, pero sí puede analizarla si se la proporcionas.

En la práctica: Cuando trabajas con bibliotecas específicas o documentación interna, necesitas dársela como contexto. No va a saber sobre tu UI Kit o design system, si no se lo das.

📖 Documentación: AWS - What is RAG?

Fine-tuning

Qué es: Adaptar un modelo preentrenado con ejemplos específicos para que sea mejor en una tarea concreta.

Por qué importa: Explica por qué GitHub Copilot es tan bueno con código pero menos útil para otras tareas que también son creativas. Está “fine-tuneado” específicamente para programación.

En la práctica: Algunas empresas entrenan modelos con su base de código para que entiendan mejor sus patrones. Aunque no lo hagas tú, esto explica por qué Copilot "conoce" ciertos patrones de React pero no de Vue.

📖 Documentación: OpenAI - Fine-tuning Guide

Hallucination

Qué es: Cuando un modelo genera información que suena convincente pero es incorrecta o directamente inventada.

Por qué importa: Puede darte APIs que no existen, sintaxis falsa o librerías que suenan reales pero no lo son.

En la práctica: Siempre verifica las dependencias que te sugiere. Especialmente si suenan demasiado específicas.

npm install vue-super-forms puede que no exista.

Como junior: desarrolla el hábito de verificar todo.

Como senior: enseña este escepticismo saludable a tu equipo.

Esto puede darte una falsa impresión de control —y es uno de los riesgos más críticos en producción.

Few-shot Learning

Qué es: Técnica donde proporcionas pocos ejemplos (2–5) de entrada y salida para que el modelo entienda el patrón que quieres.

Por qué importa: Es mucho más efectivo que explicarlo solo con palabras.

En la práctica: En lugar de explicaciones largas, muestra ejemplos:

// Ejemplo 1:
// Input: <button class="btn-primary">Click me</button>
// Output: <Button variant="primary">Click me</Button>

// Ejemplo 2:
// Input: <div class="card-container">Content</div>
// Output: <Card>Content</Card>

// Ahora convierte esto:
// Input: <span class="text-error">Error message</span>

📖 Documentación: OpenAI - Best Practices

Inference

Qué es: El proceso donde el modelo usa su entrenamiento para generar una respuesta a partir de tu input.

Por qué importa: Cada "pensada" cuesta tiempo y dinero. Por eso las interfaces tienen límites de uso.

En la práctica: No hagas 50 preguntas innecesarias. Estructura bien tus prompts para obtener más valor en menos inferencias.

La eficiencia en prompts es una habilidad profesional que está en alza. La buena noticia es que, si sabes comunicarte de forma efectiva como ser humano, ya sabes comunicarte de forma efectiva con entidades AI.

Embedding

Qué es: Representación numérica de texto que captura su significado semántico.

Por qué importa: Es como las IAs "entienden" si dos piezas de código son similares, incluso si usan palabras distintas.

En la práctica: Explica por qué tu LLM puede sugerir código correcto cuando escribes comentarios en español, inglés o pseudocódigo.

No se guía solo por las palabras, sino por su significado semántico.

📖 Documentación: OpenAI - Embeddings Guide

Lo importante aquí

Estos términos no son jerga técnica innecesaria. Son las reglas del juego si trabajas con IA y desarrollo Web Frontend.

No se trata de programar mejor. Se trata de comunicarte mejor con las herramientas que ya usas cada día.

Y eso —en 2025— puede marcar la diferencia entre ser un developer más… o uno un poco más difícil de reemplazar.

Key takeaways

  1. LLM ≠ magia

    Los modelos no “entienden”: predicen texto. Trátalos como modelos de computación predictiva (MCP).

    ➤ Esto cambia tu forma de escribir prompts y evita frustraciones.

  2. Tokens importan

    Todo lo que escribes (y responde la IA) cuesta tokens.

    ➤ Fragmenta el código, sintetiza bien y evita meter todo a la vez. Respeta el context window.

  3. Prompt Engineering es skill crítica

    No es “pedir bien”. Es “dirigir bien”.

    ➤ Con buenos prompts es una extensión de tu capacidad comunicativa.

  4. Guarda templates de prompts

    ➤ Refactor, generación de componentes, naming, testing, revisión, migraciones…

    Crea tu propio arsenal reutilizable.

  5. Controla la temperature

    0.1–0.3: depurar, revisar, refactorizar.

    0.7–0.9: explorar ideas, arquitecturas, naming creativo.

  6. Usa few-shot prompting

    ➤ Enseña con 2–3 ejemplos input/output antes del prompt real.

    Más eficaz que explicar con párrafos.

  7. No asumas que la IA lo sabe todo

    ➤ Si no le das tu UI kit o tus convenciones, no puede adivinarlas.

    Usa técnicas tipo RAG: dale el contexto que necesita.

  8. Detecta alucinaciones

    ➤ No confíes ciegamente.

    Revisa funciones, nombres de librerías, paquetes npm, etc.

    Si suena demasiado bien… probablemente es falso 🤣.

  9. Menos inferencias, más claridad

    ➤ Cada llamada cuesta. Optimiza tu primer prompt.

    Escribe con foco, reduce el número de preguntas innecesarias.

  10. Forma equipos con criterio crítico

    ➤ Como senior, enseña a verificar, validar y no comerse lo que suena bien.

    La IA no sustituye el pensamiento: lo amplifica o lo distorsiona.

Artículos relacionados

El antipatrón de generar CSS sin metodología

Pedirle a la IA "hazme CSS para este diseño" sin contexto metodológico genera código que funciona hoy pero te mata mañan...

07 Jun 2025
Prompting útil para Frontend: 3 niveles que sí funcionan

La IA te da código genérico porque le das prompts genéricos o elaborados. Context injection supera a role prompting: mej...

09 Jun 2025
Juan Andrés Núñez

Juan Andrés Núñez

Ingeniero Frontend Senior. Especialista en Vue.js. Speaker. Docente profesional. Estoico.