docs: stage-1 i18n coverage + news
This commit is contained in:
sanbuphy
@@ -0,0 +1,82 @@
|
||||
# Introducción al Proyecto
|
||||
|
||||
2025 es considerado por muchos como el año inaugural de la programación con IA. Cada vez más personas comienzan a usar IA para escribir código, pero a menudo los resultados se quedan en el nivel de juguetes: no saben cómo organizar el flujo de desarrollo con Vibe Coding, no saben qué herramientas elegir, y mucho menos cuáles son los pasos clave entre el prototipo y el despliegue en producción.
|
||||
|
||||
Adoptamos una **ruta práctica de tres etapas, progresiva**: la etapa de iniciación permite a los novatos familiarizarse rápidamente con la programación con IA a través de juegos pequeños; la primera etapa domina el flujo de trabajo de Vibe Coding y completa un prototipo de aplicación web; la segunda etapa aprende desarrollo fullstack y despliegue en producción; la tercera etapa construye aplicaciones complejas multiplataforma.
|
||||
|
||||
Cada etapa está acompañada de proyectos prácticos completos, que te permiten avanzar de juguete a producto en desafíos reales, y finalmente adquirir la capacidad de **convertir cualquier idea en una aplicación funcional**.
|
||||
|
||||
Creemos que, dominando Vibe Coding junto con un entrenamiento sistemático, una sola persona puede convertirse en un **desarrollador integral que combina desarrollo frontend y backend, integración de capacidades de IA y diseño de productos**.
|
||||
|
||||
Este proyecto está dirigido principalmente a tres tipos de aprendices:
|
||||
|
||||
- **Novatos (personas sin formación técnica / perfiles de producto y operaciones)**: ayuda a quienes no tienen antecedentes técnicos y a los aprendices principiantes a comprender los conceptos clave y completar su primera herramienta de IA o prototipo de producto.
|
||||
- **Desarrolladores junior e intermedios (estudiantes y desarrolladores con cierta base)**: dominar sistemáticamente vibe coding y el desarrollo de aplicaciones nativas de IA.
|
||||
- **Desarrolladores senior (empresas y startups, desarrolladores de código abierto e independientes)**: apoyar a equipos e individuos para construir, validar e iterar rápidamente aplicaciones nativas de IA.
|
||||
|
||||
## 📖 Navegación de Contenido
|
||||
|
||||
### Apéndice General
|
||||
|
||||
[Diccionario de capacidades de IA: conceptos centrales, términos y escenarios comunes de IA](/es-es/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### Etapa Cero: Jardín de Infancia
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
|
||||
| [Introducción: Mapa de aprendizaje](/es-es/stage-1/learning-map/) | Visión general de la ruta de aprendizaje completa | ✅ |
|
||||
| [Introducción: En la era de la IA, saber hablar es saber programar](/es-es/stage-1/ai-capabilities-through-games/) | Experimentar inicialmente las capacidades de la programación con IA a través de casos como el juego Snake | ✅ |
|
||||
|
||||
### Etapa Uno: Product Manager de IA
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
|
||||
| [Nivel 2: Conociendo las herramientas AI IDE](/es-es/stage-1/introduction-to-ai-ide/) | Aprender a usar IDE, dominar la estructura de la interfaz y las formas eficientes de usar prompts | ✅ |
|
||||
| [Nivel 3: Construyendo un prototipo](/es-es/stage-1/building-prototype/) | Ciclo completo desde el análisis de producto hasta la implementación de un prototipo multipágina | ✅ |
|
||||
| [Nivel 4: Añadiendo capacidades de IA al prototipo](/es-es/stage-1/integrating-ai-capabilities/) | Comprender y completar la integración de API de capacidades de IA comunes (texto, imagen, video) | ✅ |
|
||||
| [Nivel 5: Práctica de proyecto completo](/es-es/stage-1/complete-project-practice/) | Simular escenarios reales, recibir retroalimentación de usuarios, iterar y completar la presentación del proyecto (incluye proyecto final) | ✅ |
|
||||
|
||||
#### Apéndices
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
|
||||
| [Apéndice A: Pensamiento de producto](/es-es/stage-1/appendix-a-product-thinking/) | Marco de pensamiento de producto desde la evaluación de ideas hasta la descomposición de requisitos y MVP | ✅ |
|
||||
| [Apéndice B: Errores comunes y soluciones](/es-es/stage-1/appendix-b-common-errors/) | Errores comunes en vibe coding y métodos de solución | ✅ |
|
||||
| [Apéndice: De dónde sacar ideas](/es-es/stage-1/appendix-idea-sources/) | Encontrar direcciones específicas a partir de aplicaciones de referencia, tendencias y listas de VC | ✅ |
|
||||
| [Apéndice: Modelo Double Diamond](/es-es/stage-1/appendix-double-diamond/) | Comprender el ritmo completo de definir primero el problema y luego desarrollar la solución | ✅ |
|
||||
| [Apéndice: Jobs to Be Done](/es-es/stage-1/appendix-jobs-to-be-done/) | Usar el método JTBD para comprender lo que el usuario realmente quiere lograr | ✅ |
|
||||
| [Apéndice: Método de entrevistas The Mom Test](/es-es/stage-1/appendix-mom-test/) | Método de investigación para validar necesidades a través de entrevistas con usuarios | ✅ |
|
||||
|
||||
### Etapa Dos: Desarrollador Junior e Intermedio
|
||||
|
||||
#### Parte Frontend
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
|
||||
| Uso de Lovart para producir materiales | Aprender a usar Lovart para generar por lotes materiales visuales como personajes y escenarios, proporcionando una base de materiales para el diseño UI y el desarrollo frontend | 🚧 |
|
||||
| Introducción a Figma y MasterGo | Usar herramientas de diseño para organizar la arquitectura de información y la estructura de páginas, sentando las bases para la implementación frontend | 🚧 |
|
||||
| Construir la primera aplicación moderna - Diseño UI | Completar una interfaz basada en componentes a partir del diseño, realizando el primer enlace de diseño a código | 🚧 |
|
||||
| Diseñar páginas y botones con referencia a especificaciones de diseño UI | Aprender a organizar la estructura de páginas y la jerarquía de botones con especificaciones de diseño convencionales, y usar IA para generar esquemas de diseño | 🚧 |
|
||||
| [Construyendo retratos de Hogwarts juntos](/es-es/stage-2/frontend/hogwarts-portraits/) | De 0 a 1, crear una aplicación frontend integrando capacidades de IA, uniendo diseño y desarrollo | 🚧 |
|
||||
|
||||
#### Parte de Desarrollo Backend
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| Qué es una API | Comprender las interfaces HTTP y el modelo petición-respuesta, preparándose para la integración backend y la depuración conjunta | 🚧 |
|
||||
| [De la base de datos a Supabase](/es-es/stage-2/backend/database-supabase/) | Implementar bases de datos y APIs en Supabase, conectando modelos de datos con páginas frontend | 🚧 |
|
||||
| Modelos grandes asistiendo en la redacción de código de interfaz y documentación de interfaz | Usar modelos grandes para ayudar a generar interfaces, documentación de base de datos y código, logrando un backend legible y testeable | 🚧 |
|
||||
| Flujo de trabajo Git y despliegue en Zeabur | Gestionar código en un flujo de trabajo Git, y desplegar la aplicación en Zeabur para ponerla en línea | 🚧 |
|
||||
| Herramientas modernas de desarrollo CLI | Usar herramientas de programación AI tipo CLI para acelerar el desarrollo y la depuración, formando un flujo de trabajo de ingeniería personal | 🚧 |
|
||||
| Cómo integrar sistemas de pago como Stripe | Integrar sistemas de pago, completando el enlace de cobro y el flujo básico de liquidación | 🚧 |
|
||||
| Construir la primera aplicación moderna - Aplicación fullstack | Integrar frontend, backend y módulo de pago para completar una aplicación web fullstack que pueda ponerse en línea | 🚧 |
|
||||
| Biblioteca de componentes frontend moderna + Práctica con Trae | Usar una biblioteca de componentes frontend moderna y Trae para completar independientemente un producto con login, registro y soporte de pago | 🚧 |
|
||||
|
||||
#### Apéndice de Capacidades de IA
|
||||
|
||||
| Sección | Contenido clave | Estado |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [Introducción a Dify e integración de base de conocimientos](/es-es/stage-2/ai-capabilities/dify-knowledge-base/) | Usar Dify Workflow y RAG básico para construir un producto tipo herramienta, preparando el terreno para futuras actualizaciones de aplicaciones | 🚧 |
|
||||
| Aprender a consultar el diccionario de IA e integrar APIs multimodales | Aprender a encontrar modelos y APIs adecuados, e integrar capacidades multimodales como texto e imagen en el producto | 🚧 |
|
||||
|
||||
### Etapa Tres: Desarrollador Senior
|
||||
@@ -0,0 +1,219 @@
|
||||
# Nivel Basico 1: En la era de la IA, saber hablar es saber programar
|
||||
|
||||
Este es un tutorial de aprendizaje **basado en proyectos**. Te recomendamos seguir los pasos uno por uno y tratar de reproducir los resultados.
|
||||
No tengas miedo de equivocarte o de cambiar cosas. Recuerda:
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
|
||||
<span style="font-size: 15px; font-weight: 500; color: #666;">Terminar es mas importante que ser perfecto</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'aprox. <strong>4 horas</strong> (puede hacerse en varias sesiones)'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['es-es/stage-1/ai-capabilities-through-games'] ?? []
|
||||
</script>
|
||||
|
||||
## Introduccion del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Programacion conversacional', 'Mini-juegos nativos de IA', 'Practica con Snake']" coreOutput="Snake nativo de IA + un mini-juego propio" expectedOutput="1 Snake nativo de IA ejecutable + (opcional) 1 mini-juego o demo propio">
|
||||
|
||||
Si <strong>no sabes programar</strong> o solo conoces lo minimo, este capitulo es para ti. Empezamos desde cero: vas a usar <strong>conversacion</strong> para que la IA te ayude a escribir codigo. Sin memorizar sintaxis ni configurar entornos, en muchos casos puedes ejecutarlo directamente en una pagina web.
|
||||
|
||||
Construiras tu <strong>primer programa que corre</strong>: una version de Snake que puede "comerse palabras", "escribir poemas" o "dibujar". Veras como se siente programar con IA: no es que la IA piense por ti; tu expresas tu intencion y la IA la implementa.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Nivel 1: Hablar = Programar', description: 'Aprende programacion con IA a traves de juegos. De Snake a tus propios mini-juegos nativos de IA.' },
|
||||
{ title: 'Exploracion rapida', description: 'Experiencia de 60 segundos' },
|
||||
{ title: 'Practica nativa', description: 'Construir Snake nativo de IA' },
|
||||
{ title: 'Extender y crear', description: 'Crear un juego propio' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. La dificultad de la gente comun y la oportunidad
|
||||
|
||||
Mucha gente tiene ideas: una herramienta para gastos, una pagina para registrar el crecimiento de un hijo, o incluso un mini-juego. Pero al pensar en "escribir codigo" o "buscar programadores", se desanima.
|
||||
|
||||
Con la IA aparece una posibilidad real: no necesitas saber programar para empezar; necesitas aprender a decirle a la IA con claridad que quieres. Incluso para desarrolladores profesionales, la IA ya es parte del flujo de trabajo, lo que significa que para quienes no programan, hablar bien con un agente se vuelve una habilidad muy valiosa.
|
||||
|
||||
Esta parte del curso busca que desarrolles una nueva capacidad: <strong>crear aplicaciones describiendo requisitos en lenguaje natural</strong>. Aprenderas a comunicarte con la IA "como una computadora": objetivos claros, pasos, entradas y salidas, y como depurar cuando algo no sale bien.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Dificultad y oportunidad', description: 'Una nueva forma de crear con IA' },
|
||||
{ title: 'Exploracion rapida', description: 'Experiencia de 60 segundos' },
|
||||
{ title: 'Practica nativa', description: 'Construir Snake nativo de IA' },
|
||||
{ title: 'Extender y crear', description: 'Crear un juego propio' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Hasta donde puede llegar la IA hoy
|
||||
|
||||
Pregunta concreta: si no sabes escribir codigo, hasta donde puedes llegar con una IA conversacional?
|
||||
|
||||
De forma realista, hoy la IA suele funcionar muy bien para:
|
||||
|
||||
- herramientas internas simples,
|
||||
- tableros de visualizacion,
|
||||
- mini-juegos ligeros,
|
||||
- prototipos para validar ideas desde perspectiva de producto.
|
||||
|
||||
Para productos grandes y listos para produccion, aun hace falta trabajo humano en diseno de flujo, detalles, seguridad, rendimiento y mantenibilidad. Pero para prototipos y herramientas personales, el nivel es sorprendentemente util.
|
||||
|
||||
### 2.1 Construye Snake en 60 segundos (con z.ai)
|
||||
|
||||
Abre la pagina de laboratorio del curso: [z.ai](https://chat.z.ai/). En este tutorial usaremos su modo de "desarrollo full-stack" para ver como la IA crea un proyecto y lo previsualiza.
|
||||
|
||||
::: details Que significa "programar desde el navegador"
|
||||
|
||||
Antes, para hacer una app web tenias que instalar entornos (Node.js, Python), configurar editor, aprender HTML/CSS/JS y resolver dependencias.
|
||||
|
||||
Ahora, con plataformas de programacion con IA:
|
||||
|
||||
- abres el navegador,
|
||||
- describes la funcionalidad en lenguaje natural,
|
||||
- la IA genera codigo y muestra vista previa.
|
||||
|
||||
Este estilo se parece a "conversar = programar": el foco pasa de escribir sintaxis a describir requisitos.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
Pega un requerimiento simple como este y ejecutalo:
|
||||
|
||||
```txt
|
||||
Haz un juego de Snake:
|
||||
1. Control con flechas
|
||||
2. Al comer, la serpiente crece y sube la puntuacion
|
||||
3. Chocar con la pared o contigo mismo termina el juego
|
||||
4. Boton de iniciar y reiniciar
|
||||
5. Interfaz simple y agradable
|
||||
```
|
||||
|
||||
|
||||
|
||||
Cuando termine, a la derecha veras la pagina lista para probar. Normalmente puedes:
|
||||
|
||||
- hacer scroll,
|
||||
- entrar en pantalla completa,
|
||||
- descargar el proyecto,
|
||||
- ver el codigo.
|
||||
|
||||
|
||||
|
||||
Para ver el codigo, usa el icono de codigo en la esquina superior derecha.
|
||||
|
||||
|
||||
|
||||
::: tip Explora mas herramientas
|
||||
|
||||
Ademas de z.ai, puedes probar herramientas como Google AI Studio, v0.dev, Bolt, Replit Agent y otras. Lo importante no es la marca, sino practicar el mismo ciclo:
|
||||
|
||||
1. describir requisito,
|
||||
2. probar en el navegador,
|
||||
3. corregir con una instruccion concreta,
|
||||
4. iterar.
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 Que puede y que no puede hacer la programacion conversacional
|
||||
|
||||
Un resumen practico:
|
||||
|
||||
- La IA es muy buena para construir algo "pequeno y completo" si describes bien UI e interacciones.
|
||||
- Para proyectos grandes, necesitas una vision de proceso: dividir el problema en pasos, definir entradas/salidas, y luego pedir a la IA que implemente modulos por separado.
|
||||
- "Que pueda escribirlo" no significa "que este listo para uso real". Para produccion hay que revisar arquitectura, seguridad, pruebas y calidad.
|
||||
|
||||
::: warning Guia rapida de escenarios
|
||||
|
||||
- **Prototipo / demo / herramienta interna**: excelente para que la IA haga la primera version, luego tu iteras.
|
||||
- **Producto grande para usuarios reales**: requiere inversion sostenida en ingenieria.
|
||||
- **Alta seguridad / alta regulacion (pagos, salud, riesgo)**: no se debe "generar y publicar" sin revision y pruebas estrictas.
|
||||
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Dificultad y oportunidad', description: 'Una nueva forma de crear con IA' },
|
||||
{ title: 'Exploracion rapida', description: 'Experiencia de 60 segundos' },
|
||||
{ title: 'Practica nativa', description: 'Construir Snake nativo de IA' },
|
||||
{ title: 'Extender y crear', description: 'Crear un juego propio' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Practica: hacer un Snake "nativo de IA"
|
||||
|
||||
La idea de "nativo de IA" es que el juego no solo sea un Snake tradicional. Puedes agregar una habilidad IA dentro del gameplay, por ejemplo:
|
||||
|
||||
- al comer una palabra, traducirla y generar ejemplos,
|
||||
- al comer un tema, generar una frase o un mini poema,
|
||||
- al comer un prompt, generar una imagen o un icono.
|
||||
|
||||
Lo importante es practicar el mismo patron: describir claramente y pedir a la IA que implemente, y luego iterar en base al resultado.
|
||||
|
||||
> Consejos al pedir cambios:
|
||||
>
|
||||
> 1. describe el fenomeno observable,
|
||||
> 2. explica el comportamiento esperado,
|
||||
> 3. si hay error, copia el error completo,
|
||||
> 4. pide que modifique el codigo minimo necesario.
|
||||
|
||||
Para seguir el flujo visual de la practica, veras capturas de referencia:
|
||||
|
||||
> 
|
||||
>
|
||||
> 
|
||||
>
|
||||
> 
|
||||
|
||||
|
||||
|
||||
En esta practica tambien puedes aprender un habito clave: cuando algo sale mal, no "adivines". Copia y pega el error a la IA y pide explicacion simple y una correccion concreta.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 4. Extiende: crea un mini-juego propio
|
||||
|
||||
Una vez que Snake funcione, tu objetivo no es "memorizar codigo", sino crear variaciones.
|
||||
|
||||
Algunas ideas:
|
||||
|
||||
- un juego de reaccion (click en el momento correcto),
|
||||
- un quiz corto de vocabulario,
|
||||
- un contador/temporizador con recompensas,
|
||||
- un "generador" que produce tarjetas y puntuacion.
|
||||
|
||||
Lo mas importante: define primero el objetivo y el bucle del juego (entrada -> estado -> salida) y luego pide a la IA que lo implemente.
|
||||
|
||||
|
||||
|
||||
## Tarea
|
||||
|
||||
1. Repite el juego Snake basico con tus propios colores y UI.
|
||||
2. Agrega una habilidad IA dentro del juego (traduccion, resumen, generacion de texto, etc.).
|
||||
3. Crea una variante de mini-juego (aunque sea muy simple) y asegurate de que sea jugable.
|
||||
|
||||
## Siguiente paso
|
||||
|
||||
En los siguientes capitulos conectaremos capacidades IA mas concretas (texto a texto, imagen a texto, texto a imagen) y avanzaremos hacia proyectos mas completos.
|
||||
|
||||
<RelatedArticles :articles="relatedArticles" />
|
||||
---
|
||||
title: 'Principiante 1: En la era de la IA, hablar es programar'
|
||||
description: 'Crea una serpiente AI-native con dialogo y aplica el metodo para construir tu propio mini juego o demo.'
|
||||
---
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
title: 'Pensamiento de producto y diseno de soluciones'
|
||||
description: 'Como pasar de "construir una herramienta" a "disenar un producto valioso": fuentes de ideas, descomposicion en MVP, mejora de UX y uso razonable de IA.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aprox. <strong>6 horas</strong>'
|
||||
</script>
|
||||
|
||||
# Pensamiento de producto y diseno de soluciones
|
||||
|
||||
## Introduccion del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Producto', 'Necesidades', 'Diseno de soluciones', 'Insights de usuario']" coreOutput="1 esquema completo de producto" expectedOutput="Ideas de producto ejecutables">
|
||||
|
||||
En capitulos anteriores ya aprendiste a construir prototipos con AI IDEs. Aqui cambiamos el foco de <strong>"puedo construirlo?"</strong> a <strong>"que vale la pena construir?"</strong>.
|
||||
|
||||
Vamos a trabajar un metodo repetible para:
|
||||
|
||||
1. Encontrar ideas mas confiables (no solo inspiracion).
|
||||
2. Convertir una idea en un flujo de producto construible.
|
||||
3. Pasar de "funciona" a "se usa de verdad".
|
||||
4. Usar IA donde aumenta el valor y no solo "se ve cool".
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Fuentes de ideas', description: 'Encontrar ideas confiables' },
|
||||
{ title: 'Descomposicion', description: 'Convertir idea en app construible' },
|
||||
{ title: 'Mejora', description: 'De usable a buena' },
|
||||
{ title: 'IA como amplificador', description: 'Aplicar IA donde aporta valor' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Lo que aprenderas
|
||||
|
||||
Al final deberias poder responder:
|
||||
|
||||
1. De donde salen ideas confiables?
|
||||
2. Como descomponer una idea en un MVP construible?
|
||||
3. Como evaluar y mejorar una app para que la gente la use?
|
||||
4. Donde usar IA para amplificar valor?
|
||||
5. Como conseguir los primeros usuarios reales?
|
||||
|
||||
---
|
||||
|
||||
# 1. Fuentes de ideas confiables
|
||||
|
||||
No necesitas una "idea genial". Necesitas un problema real en un escenario real.
|
||||
|
||||
## 1.1 Que es una idea (en sentido de producto)?
|
||||
|
||||
Una idea construible tiene al menos:
|
||||
|
||||
1. Un usuario objetivo claro (quien exactamente?).
|
||||
2. Un escenario concreto (cuando/donde ocurre).
|
||||
3. Una tarea concreta (que quiere lograr).
|
||||
4. Una mejora plausible frente a como se hace hoy.
|
||||
|
||||
## 1.2 Idea vs necesidad real
|
||||
|
||||
Una idea es una hipotesis. Una necesidad real es algo que el usuario ya intenta resolver (aunque sea con workarounds).
|
||||
|
||||
Regla rapida:
|
||||
|
||||
- Necesidad real: el usuario ya paga con tiempo/dinero/estres.
|
||||
- Necesidad falsa: el usuario dice "interesante", pero no cambia conducta ni paga.
|
||||
|
||||
|
||||
|
||||
## 1.3 Por que algunas ideas crecen solas
|
||||
|
||||
Cuando el valor es inmediato y el flujo es corto, la recomendacion aparece de forma natural:
|
||||
|
||||
Problema -> valor pequeno inmediato -> repeticion -> recomendacion.
|
||||
|
||||
Si el producto necesita mucha explicacion o empuje externo, suele ser senal de que el dolor no es fuerte.
|
||||
|
||||
## 1.4 Cuatro fuentes estables
|
||||
|
||||
1. Tu trabajo: procesos repetitivos, coordinacion, reportes, QA.
|
||||
2. Comunidades: preguntas repetidas y quejas recurrentes.
|
||||
3. Reviews/comentarios: fricciones y "por que esto es tan dificil?".
|
||||
4. Productos existentes: encontrar huecos (caro, complejo, poco especializado).
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 2. Descomposicion: de idea a app
|
||||
|
||||
Una idea se vuelve construible cuando se convierte en decisiones.
|
||||
|
||||
## 2.1 Minimo: usuario, escenario, flujo
|
||||
|
||||
Define:
|
||||
|
||||
1. Usuario: rol, objetivo, restricciones, presupuesto.
|
||||
2. Escenario: disparador -> pasos -> resultado.
|
||||
3. Flujo principal: 3-7 pasos que entregan valor.
|
||||
|
||||
## 2.2 Cortar alcance (MVP)
|
||||
|
||||
Un MVP no es "menos features", es "una promesa clara que se cumple".
|
||||
|
||||
Preguntas utiles:
|
||||
|
||||
- Cual es el primer minuto donde el usuario dice "esto me ahorro tiempo"?
|
||||
- Que se puede quitar sin romper el valor central?
|
||||
- Cual es la suposicion mas riesgosa? (validala primero)
|
||||
|
||||
---
|
||||
|
||||
# 3. Mejora: de usable a buena
|
||||
|
||||
Despues del MVP, el trabajo es:
|
||||
|
||||
1. Claridad: el usuario entiende el siguiente paso sin leer manual.
|
||||
2. Friccion baja: menos clicks, menos formularios, menos contexto.
|
||||
3. Confianza: datos claros, resultados explicables, defaults seguros.
|
||||
|
||||
Test simple: un usuario nuevo obtiene valor en 60 segundos?
|
||||
|
||||
---
|
||||
|
||||
# 4. IA como amplificador de valor
|
||||
|
||||
La IA aporta mas cuando:
|
||||
|
||||
1. Convierte lenguaje en estructura (texto -> tareas, notas -> plan).
|
||||
2. Resume y prioriza (mucho contenido -> accion).
|
||||
3. Personaliza (recomendaciones segun contexto).
|
||||
|
||||
Suele aportar poco cuando solo se pega un chat sin mejorar el flujo central.
|
||||
|
||||
---
|
||||
|
||||
## Output esperado
|
||||
|
||||
Un esquema de producto que incluya:
|
||||
|
||||
1. Usuario y caso de uso
|
||||
2. Problema central y coste actual
|
||||
3. Flujo principal (3-7 pasos)
|
||||
4. Alcance del MVP
|
||||
5. Plan de validacion (7 dias) y metricas
|
||||
|
||||
<RelatedArticlesSection />
|
||||
|
||||
+359
@@ -0,0 +1,359 @@
|
||||
# Comparacion de 7 herramientas de programacion con IA
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
Frente a la gran cantidad de herramientas de programacion con IA, cual es la mas adecuada para ti? Este capitulo realiza una evaluacion comparativa profunda de 7 plataformas principales de Web Vibe Coding como Lovable, Replit, Z.ai y otras, a traves de una tarea practica unificada: desarrollar un juego de "Snake + IA que escribe poesia". Compararemos desde multiples dimensiones como la amigabilidad para principiantes, la controlabilidad del codigo y la comodidad de despliegue, para ayudarte a elegir rapidamente la mejor herramienta de desarrollo asistido.
|
||||
|
||||
---
|
||||
|
||||
# 1. Construir un juego Snake con Vibe Coding: tutorial practico completo
|
||||
|
||||
Este articulo presenta una nueva practica de desarrollo de software llamada "Vibe Coding (codificacion de ambiente)", que utiliza inteligencia artificial para acelerar el proceso de construccion de aplicaciones.
|
||||
|
||||
A continuacion, presentaremos secuencialmente los conceptos centrales de Vibe Coding, explicaremos que es un AI Agent, y proporcionaremos metodos practicos para escribir prompts. Finalmente, a traves de una practica completa de construccion desde cero del juego "Snake (Serpiente)", y una comparacion detallada de multiples plataformas de Vibe Coding principales, te ayudaremos a elegir la combinacion de herramientas mas adecuada para ti.
|
||||
|
||||
## Aprenderas:
|
||||
|
||||
- **Que es Vibe Coding:** entender su definicion, flujo de trabajo y ventajas clave.
|
||||
- **El rol del AI Agent:** comprender como funciona un AI Agent y en que se diferencia de un programa tradicional.
|
||||
- **Como escribir buenos prompts:** dominar la escritura de prompts claros y especificos para obtener mejores resultados.
|
||||
- **Herramientas de Vibe Coding:** conocer un conjunto de plataformas principales de programacion y diseno con IA.
|
||||
- **Comparacion de plataformas:** evaluar y comparar las ventajas y desventajas de 7 plataformas de AI Agent desde la perspectiva de un principiante.
|
||||
- **Herramientas UI / UX:** aprender como integrar herramientas UI/UX como Figma y Mastergo en el flujo de trabajo general.
|
||||
|
||||
## 1. Introduccion
|
||||
|
||||
En las lecciones anteriores, siempre hemos usado el modelo de desarrollo fullstack de z.ai para completar tareas de programacion.
|
||||
|
||||
Sin embargo, nos hemos preguntado: su nucleo es realmente un "AI Agent" (diferente de la IA de chat comun, y mucho mas inteligente)? Esto se debe a que no solo conversa contigo, sino que es capaz de pensar (cuando le das una tarea, primero elabora un plan) y tomar acciones proactivas (como invocar busqueda web, ejecutar comandos de computadora, abrir paginas web, etc.). Lo explicaremos en detalle mas adelante.
|
||||
|
||||
## 1. Que es Vibe Coding?
|
||||
|
||||
Vibe Coding es un nuevo enfoque de desarrollo de software que utiliza IA para acelerar el proceso de desarrollo de aplicaciones. No es un reemplazo de la programacion tradicional, sino un modo de programacion mas "conversacional". Este concepto fue propuesto por el investigador de IA Andrej Karpathy: en este flujo de trabajo, los desarrolladores ya no escriben codigo linea por linea manualmente, sino que principalmente guian al AI Agent para generar, optimizar y depurar aplicaciones.
|
||||
|
||||
La idea central de Vibe Coding es pasar de **"centrado en codigo (code-first)"** a **"centrado en intenciones (intent-first)"*. Ya no necesitas concebir desde la primera linea de codigo, sino describir el resultado que deseas en lenguaje natural.
|
||||
|
||||
Un flujo de trabajo tipico de Vibe Coding es un ciclo iterativo continuo:
|
||||
|
||||
- **Describir el objetivo:** primero describe en una frase o parrafo la funcionalidad que deseas implementar, por ejemplo: "crear un juego de Snake simple con un backend en Python que pueda generar poesia."
|
||||
- **IA genera codigo:** el AI Agent analiza tus necesidades, genera una version inicial del codigo, incluyendo la estructura basica, la pagina frontend y la logica backend.
|
||||
- **Ejecutar y observar:** ejecuta el codigo generado, verifica si funciona como se espera, y descubre bugs o areas de mejora.
|
||||
- **Retroalimentar e iterar:** si hay errores o los resultados no son ideales, continua dando instrucciones en la conversacion, por ejemplo: "la serpiente se mueve muy lento, acelera la velocidad", o "ahora la API Key en el archivo `.env` no se esta leyendo correctamente, por favor arregla el codigo del backend."
|
||||
- **Repetir los pasos anteriores:** itera continuamente en el ciclo de "describir -> generar -> ejecutar -> retroalimentar" hasta que la aplicacion alcance un estado satisfactorio.
|
||||
|
||||
### Principales ventajas de Vibe Coding:
|
||||
|
||||
- **Reduccion de la barrera de entrada:** permite que disenadores, emprendedores, estudiantes y otros sin experiencia en programacion participen en el desarrollo de aplicaciones a traves del lenguaje natural.
|
||||
- **Prototipado rapido:** el tiempo desde la idea hasta el producto minimo viable (MVP) se reduce drasticamente.
|
||||
- **Mejora de eficiencia:** maneja automaticamente una gran cantidad de trabajo de codificacion repetitivo y mecanico (como codigo boilerplate), permitiendo a los desarrolladores enfocarse en el diseno de arquitectura y la abstraccion de problemas.
|
||||
- **Fomento de la experimentacion:** anima a producir primero rapidamente y luego refinar continuamente, facilitando la prueba de nuevas ideas y funcionalidades.
|
||||
|
||||
## 2. Que son las plataformas de Vibe Coding en linea (Web-based)?
|
||||
|
||||
En esta prueba practica, descubriras que las herramientas que evaluamos se dividen en dos categorias: **Web-based (plataformas en linea)** y **IDE (entorno de desarrollo local)**.
|
||||
|
||||
Aunque su nucleo es usar IA para ayudarte a escribir codigo, hay una gran diferencia en la experiencia de uso y los escenarios aplicables:
|
||||
|
||||
### Plataformas de Vibe Coding en linea (Web-based)
|
||||
|
||||
**Herramientas representativas:** Lovable, Replit, Z.ai, v0
|
||||
|
||||
Es como un apartamento hotelero "listo para vivir".
|
||||
|
||||
- **Sin configuracion de entorno:** no necesitas preocuparte por el entorno de Python, la version de Node.js, ni la instalacion de dependencias. Abres el navegador, introduces la URL y puedes empezar a codificar directamente.
|
||||
- **Vista previa y despliegue con un clic:** despues de generar el codigo, la plataforma suele mostrar automaticamente el resultado en la ventana derecha. Cuando este listo, haz clic en un boton para generar un enlace y compartirlo con tus amigos.
|
||||
- **Escenarios adecuados:**
|
||||
- **Validacion rapida de ideas (MVP):** tienes una idea en mente y quieres dedicar media hora a ver si puedes hacerla realidad.
|
||||
- **Principiantes:** no quieres que los complejos errores de entorno te frustren; solo quieres experimentar la diversion de la programacion con IA.
|
||||
- **Aplicaciones ligeras:** hacer una pagina web de herramienta simple, un pequeno juego o una pagina de presentacion personal.
|
||||
|
||||
### AI IDE (entorno de desarrollo local)
|
||||
|
||||
**Herramientas representativas:** Cursor, Trae, VS Code + plugin de IA
|
||||
|
||||
Es como una vivienda propia "completamente renovada".
|
||||
|
||||
- **Poderosas capacidades locales:** se ejecuta en tu computadora y puede acceder directamente a todos tus archivos locales, utilizando la potencia de calculo de tu equipo.
|
||||
- **Integracion sin fisuras con flujos de trabajo profesionales:** adecuado para proyectos grandes, puedes instalar libremente todo tipo de plugins, conectarte a bases de datos locales y realizar depuracion compleja.
|
||||
- **Escenarios adecuados:**
|
||||
- **Desarrollo de proyectos profesionales:** proyectos comerciales complejos que requieren mantenimiento a largo plazo.
|
||||
- **Personalizacion profunda:** necesitas control extremo sobre los detalles del codigo, o necesitas integracion profunda con flujos de trabajo locales existentes (como Git, Docker).
|
||||
- **Privacidad de datos:** el codigo permanece completamente local, mas compatible con ciertas normativas de seguridad empresarial.
|
||||
|
||||
**En resumen:** si estas empezando con la programacion con IA, o solo quieres hacer algo pequeno rapidamente, las **plataformas en linea** son un excelente punto de partida. Si eres un desarrollador profesional o tu proyecto se vuelve cada vez mas complejo, un **IDE local** te proporcionara un techo mas alto.
|
||||
|
||||
---
|
||||
|
||||
## 3. Que es un AI Agent?
|
||||
|
||||
### Que es un AI Agent?
|
||||
|
||||
Un AI Agent es un sistema de software capaz de percibir su entorno, tomar decisiones y actuar autonomamente para lograr objetivos especificos. Comparado con el software tradicional que sigue instrucciones fijas con un flujo unico, los AI Agents son mas flexibles y adaptables.
|
||||
|
||||
A continuacion, algunas caracteristicas clave que distinguen a los AI Agents de los programas tradicionales:
|
||||
|
||||
- **Autonomia (Autonomy):** los AI Agents tienen un alto grado de independencia. Los programas tradicionales suelen requerir que una persona los active paso a paso, mientras que un Agent puede decidir autonomamente su siguiente paso basandose en el objetivo.
|
||||
- **Percepcion y memoria (Perception & Memory):** el Agent recopila datos del entorno (por ejemplo, respuestas de API, datos de sensores, entrada del usuario, etc.) y retiene el contexto a traves de la "memoria", reutilizando experiencia en acciones posteriores y mejorando continuamente los resultados.
|
||||
- **Racionalidad y orientacion a objetivos (Rationality & Goal-Orientation):** el Agent analiza y planifica en torno al objetivo dado, seleccionando la secuencia de acciones mas adecuada para buscar un mayor "indicador de rendimiento".
|
||||
- **Uso de herramientas (Tool Use):** una caracteristica clave de los AI Agents modernos es la capacidad de invocar herramientas externas, sin limitarse a "generar texto". Por ejemplo, puede navegar la web, ejecutar codigo, consultar bases de datos, enviar correos electronicos, etc.; es un cerebro que "despacha herramientas".
|
||||
|
||||
Puedes entenderlo con esta analogia:
|
||||
|
||||
- Un **programa tradicional** es como una calculadora. Le das numeros y operadores, y solo ejecuta el calculo cuando presionas el boton.
|
||||
- Un **asistente de IA** es como un asistente humano. Le pides "ayudame a encontrar restaurantes cercanos", te dara resultados de busqueda y listara opciones, pero al final tu tomas la decision.
|
||||
- Un **AI Agent** es mas como un equipo de investigacion automatizado. Solo necesitas dar un objetivo de alto nivel (por ejemplo, "planificame un viaje a Japon"), y descompondra la tarea, buscara informacion en internet, reservara vuelos y hoteles (via API), organizara el itinerario, y finalmente te entregara los resultados, casi sin necesidad de que intervengas en los detalles.
|
||||
|
||||
---
|
||||
|
||||
# 2. Sobre la escritura de prompts
|
||||
|
||||
## 1. Es mejor escribir un prompt completo de una vez o dividirlo en multiples pasos?
|
||||
|
||||
Muchas personas tienen la tentacion de intentar explicar en un solo prompt "crear una aplicacion fullstack completa" de una vez. De hecho, las herramientas actuales ya son lo suficientemente potentes como para potencialmente dar un resultado decente en un intento. Pero en terminos de experiencia general y tasa de exito, dividir el trabajo en pequenos pasos e iterar por etapas suele dar mejores resultados y es menos probable que termines en un callejon sin salida de "ya no se puede modificar".
|
||||
|
||||
> **Pequeno consejo:** En lugar de esperar "hacerlo perfecto de una vez", es mejor dividir el objetivo grande en pequenas tareas ejecutables (To-do).
|
||||
> Por ejemplo, en lugar de decir directamente "build me a Snake game", dividelo en:
|
||||
> "1. Primero haz el frontend de un juego de Snake",
|
||||
> "2. Luego implementa un backend que registre puntuaciones",
|
||||
> "3. Finalmente conecta el frontend y el backend".
|
||||
> Esto permite que la IA comprenda tus necesidades con mayor precision y produzca resultados mas fiables.
|
||||
|
||||
## 2. Cuanto mas claro, mejor
|
||||
|
||||
- En Vibe Coding, los prompts que escribes son tan importantes como el codigo que escribes. Cuanto mas claro y especifico sea el prompt, mas cerca estara el resultado de lo que tienes en mente.
|
||||
- Explicar claramente los objetivos y restricciones desde el principio puede reducir la cantidad de iteraciones posteriores, lo que no solo ahorra tiempo sino tambien uso de cuotas y costos.
|
||||
|
||||
---
|
||||
|
||||
# 3. Resumen de herramientas (Vibe Coding / UIUX)
|
||||
|
||||
## 1. Plataformas de AI Agent
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| ------------------------------------------ | ------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
|
||||
## 2. Plataformas AI UIUX
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| ------------------------------------- | -------------------- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[FIgma](https://www.figma.com/)** | Web-based, PC Plugin |
|
||||
|
||||
---
|
||||
|
||||
# 4. Tutorial practico (combinacion de Vibe Coding + UI)
|
||||
|
||||
1. En la ventana de chat de la plataforma de Vibe Coding que elijas, introduce la descripcion del programa que deseas.
|
||||
Ejemplo:
|
||||
|
||||
> Por favor construye una aplicacion web simple de Snake (Serpiente) con frontend y backend.
|
||||
>
|
||||
> 1. Frontend
|
||||
>
|
||||
> - Pagina 1: pagina del juego
|
||||
> - Usa el teclado para controlar el movimiento de la serpiente.
|
||||
> - La serpiente no come comida, sino palabras en ingles.
|
||||
> - La barra lateral de la pagina muestra las palabras recolectadas y su cantidad.
|
||||
> - Al terminar el juego, las palabras recolectadas se conservan y se mantienen en la nueva partida.
|
||||
> - Pagina 2: pagina de escribir poesia (Make Poem)
|
||||
> - Muestra la misma lista de palabras que la pagina del juego (datos consistentes).
|
||||
> - Proporciona un boton para enviar las palabras actualmente recolectadas al backend para generar un poema.
|
||||
> - Despues de generar el poema, las palabras utilizadas se eliminan de la lista o se reduce su contador.
|
||||
>
|
||||
> * Anade navegacion simple para cambiar entre las paginas Game y Make Poem.
|
||||
> * Asegurate de que las palabras recolectadas sean visibles en ambas paginas.
|
||||
>
|
||||
> 2. Backend
|
||||
>
|
||||
> - Proporciona un endpoint backend que reciba las palabras recolectadas y devuelva un poema.
|
||||
> - Usa la API de DeepSeek para generar poesia.
|
||||
> - Almacena la API Key en un archivo `.env` e ignora ese archivo en `.gitignore`.
|
||||
|
||||
2. Introduce tu DeepSeek API Key. (Puedes obtenerla en [https://platform.deepseek.com/](https://platform.deepseek.com/))
|
||||
1. La API Key del LLM se usa para invocar el modelo grande en tu propio proyecto. Como es informacion sensible, no puede ser publica, por lo que debe escribirse por separado en un archivo de configuracion.
|
||||
**Por que usar un archivo `.env` y no subirlo a GitHub?**
|
||||
- El archivo `.env` se usa especificamente para almacenar **claves o contrasenas** (por ejemplo, la DeepSeek API Key).
|
||||
- Si este archivo se sube a GitHub, todo el mundo podra ver tu clave y usarla indebidamente.
|
||||
- Por seguridad, necesitamos declarar en el archivo `.gitignore` que se ignore `.env`, para que Git no lo rastree.
|
||||
- De esta forma, tu proyecto puede seguir usando estas claves normalmente en tu maquina local, pero no se filtraran en el repositorio.
|
||||
|
||||
3. Despues de ver el resultado generado, si encuentras errores o algo que quieras modificar, puedes introducir directamente tu solicitud de cambio en la ventana de chat.
|
||||
4. Si no estas satisfecho con el diseno de la pagina, tambien puedes elegir redisenar la interfaz en Figma o Mastergo, y luego retroalimentar las ideas de diseno al Agent.
|
||||
|
||||
- **Ejemplo**
|
||||
|
||||
> Por favor disena una **aplicacion web de dos paginas** llamada _Word-Snake_.
|
||||
>
|
||||
> - **Pagina Game:**
|
||||
> - La serpiente se controla con el teclado.
|
||||
> - La serpiente come palabras en ingles, no comida normal.
|
||||
> - El panel derecho muestra las palabras recolectadas y su cantidad.
|
||||
> - Al terminar el juego, el inventario de palabras no se vacia; se sigue usando en la nueva ronda.
|
||||
> - **Pagina Make Poem:**
|
||||
> - Muestra el mismo inventario de palabras compartido.
|
||||
> - El usuario selecciona algunas palabras y hace clic en el boton **Generate Poem**.
|
||||
> - Se envian estas palabras al backend, donde la API de DeepSeek genera un poema.
|
||||
> - Despues de generar el poema, se eliminan o reducen del inventario las palabras utilizadas.
|
||||
> - **Navegacion:** cambia entre las dos paginas con un Tab simple o menu superior.
|
||||
> - **Estado compartido:** asegurate de que las palabras recolectadas siempre permanezcan sincronizadas y visibles en ambas paginas.
|
||||
|
||||
- **Ejemplo de resultado**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Comparacion de plataformas de AI Agent (como elegir la mejor combinacion para proyectos simples)
|
||||
|
||||
Las diferentes plataformas de Vibe Coding tienen caracteristicas y flujos de trabajo distintos. Usamos el mismo conjunto de requisitos para un "juego de Snake con API DeepSeek" y lo probamos en multiples plataformas, evaluando sus pros y contras desde la perspectiva de un principiante. A continuacion el resumen.
|
||||
|
||||
## 1. Criterios de comparacion
|
||||
|
||||
1. **Objetivo (Goal)**
|
||||
Construir una aplicacion web de Snake (Serpiente) integrada con la API de DeepSeek.
|
||||
2. **Detalles del juego (Game Details)**
|
||||
1. El juego genera poesia a traves de la API DeepSeek LLM.
|
||||
2. La serpiente come palabras en ingles; las palabras recolectadas se conservan despues de terminar el juego y se siguen usando en la nueva partida. La misma palabra puede ser recolectada multiples veces, con conteo separado.
|
||||
3. Cuando se genera un poema, las palabras utilizadas se eliminan del inventario.
|
||||
|
||||
3. **Funciones esenciales (Must-Haves)**
|
||||
1. Una pagina frontend funcional con el juego de Snake (control por teclado, renderizado Canvas).
|
||||
2. Mecanismo de recoleccion de palabras (las palabras aparecen en el tablero; al comerlas, la lista de la barra lateral se actualiza).
|
||||
3. Persistencia del inventario de palabras entre multiples rondas de juego.
|
||||
4. Backend usando la API de DeepSeek (si no hay API Key, se puede devolver poesia simulada primero).
|
||||
5. Boton "Generar poesia": al hacer clic invoca el backend, muestra el poema y actualiza el inventario de palabras segun su uso.
|
||||
6. Soporte de `.env` para la API Key y `.gitignore` para evitar la filtracion de claves.
|
||||
|
||||
4. **Extras (Nice-to-Haves)**
|
||||
1. El usuario puede elegir que palabras usar para generar poesia.
|
||||
2. Experiencia de usuario amigable (por ejemplo, barra lateral que muestra claramente la lista de palabras, area de visualizacion de poesia con diseno razonable).
|
||||
3. Comentarios en el codigo para principiantes que expliquen la logica clave.
|
||||
|
||||
## 2. Comparacion de resultados de codificacion
|
||||
|
||||
### 1. Lovable (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** Lovable hace un buen trabajo en integracion y colaboracion. Completa automaticamente tareas de inicializacion como la conexion a la base de datos Supabase, haciendo que el proceso de configuracion del proyecto sea muy fluido. Solo necesitas describir los requisitos del proyecto, y el Agent te ayudara a conectar todo tipo de servicios y construir la estructura basica.
|
||||
- **Usuarios adecuados:** Para los principiantes que prueban Vibe Coding por primera vez, Lovable es una opcion muy amigable. Simplifica la complejidad de conectar multiples servicios, permitiendote enfocarte en los prompts y la iteracion en lugar de en la configuracion del entorno. Gracias a su alta automatizacion, puedes obtener rapidamente un prototipo funcional.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:** Relativamente caro, pero si tienes un correo universitario, puedes obtener la mitad de precio mediante la verificacion de estudiante.
|
||||
|
||||
|
||||
### 2. Cursor (IDE)
|
||||
|
||||
- **Tipo de plataforma:** Aplicacion de escritorio (PC)
|
||||
- **Caracteristicas principales y flujo de trabajo:** Cursor es un IDE propietario con capacidades de IA integradas, compatible con Windows, macOS y Linux. Incrusta funciones como generacion de codigo, reescritura inteligente y consulta de codigo directamente en el entorno de desarrollo. Comparado con las herramientas web, se asemeja mas a la experiencia de desarrollo local tradicional. Al ser un entorno local, las configuraciones varian entre computadoras, por lo que ocasionalmente pueden surgir problemas relacionados con el entorno. La ventaja es que el proyecto esta en tu maquina local, sin necesidad de descargar o configurar adicionalmente un entorno de ejecucion; Cursor te ayuda a manejar muchos de los pasos mas tediosos.
|
||||
- **Usuarios adecuados:** Para usuarios que ya tienen cierta base de programacion, Cursor es un entorno muy potente y familiar. Pero para principiantes absolutos, necesitan comprender por si mismos conceptos como la estructura del proyecto, la gestion de dependencias y la organizacion de archivos, por lo que la curva de aprendizaje es mas pronunciada. Mas adecuado para desarrolladores que quieren incorporar un asistente de IA en su flujo de codificacion tradicional.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:**
|
||||
|
||||
|
||||
### 3. Z.ai (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** El uso de Z.ai es bastante directo, pero un desafio obvio es que necesitas **copiar y pegar manualmente el codigo generado**. La plataforma en si carece de una ventana de vista previa en tiempo real, por lo que es dificil ver el resultado del codigo inmediatamente.
|
||||
- **Usuarios adecuados:** Esta plataforma requiere un uso mas "manual". La falta de automatizacion significa que debes lidiar directamente con el codigo, lo cual es en realidad una forma de entrenamiento para quienes quieren profundizar en la comprension de lo que genera la IA. Sin embargo, el copiar y pegar frecuente genera problemas de eficiencia y riesgo de errores. Mas adecuado para estudiantes que quieren ver "codigo generado por IA en su forma original", no para quienes buscan una experiencia de un solo clic.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:**
|
||||
|
||||
|
||||
### 4. Replit (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** Replit es un entorno de desarrollo y despliegue en linea todo-en-uno; puedes escribir codigo, ejecutar programas y generar URLs accesibles en linea directamente desde el navegador. Antes de empezar a codificar, te presenta un plan de accion claro; ademas proporciona un editor visual donde puedes modificar la UI directamente en la ventana de vista previa, y el codigo fuente se actualiza automaticamente. Esto te permite verificar en todo momento si el resultado de la IA cumple con lo esperado, reduciendo drasticamente la cantidad de iteraciones necesarias.
|
||||
|
||||
|
||||
|
||||
- **Usuarios adecuados:** Replit es muy amigable para principiantes. Simplifica el ciclo completo desde la codificacion hasta el despliegue, sin necesidad de configurar servidores adicionales ni servicios de hosting por tu cuenta. Las funciones de colaboracion tambien son potentes, ideales para que companeros de clase trabajen juntos en proyectos o pidan ayuda remota para revisar codigo.
|
||||
- **Proceso de prompts:** Durante la construccion, la IA no comprendio completamente los requisitos desde el principio; hubo aproximadamente 3 rondas de iteracion antes de que el resultado final alcanzara el efecto ideal.
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:**
|
||||
|
||||
|
||||
### 5. Minimax (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** Minimax suele tardar bastante en ejecutar tareas. Su proceso a menudo incluye: la IA descubre y repara errores automaticamente, por lo que todo el proceso puede ser lento e incluso un tanto laborioso. Tomando este proyecto como ejemplo, el Agent generalmente genera primero un plan detallado y luego construye paso a paso el backend, la base de datos y la logica frontend.
|
||||
- **Usuarios adecuados:** Dado que ejecuta automaticamente pruebas y repara errores, tanto el tiempo como el consumo de Token son considerables, pero puedes ver claramente como la IA identifica y resuelve problemas, lo cual es muy valioso desde una perspectiva de aprendizaje.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:** La version gratuita probablemente no pueda completar proyectos complejos de principio a fin sin problemas, por lo que se recomienda actualizar a una version de pago para asegurar que el proyecto se pueda construir completamente.
|
||||
|
||||
|
||||
### 6. Trae (IDE)
|
||||
|
||||
- **Tipo de plataforma:** Aplicacion de escritorio (PC)
|
||||
- **Caracteristicas principales y flujo de trabajo:** Como aplicacion de escritorio, Trae suele tener ventaja en rendimiento y velocidad de respuesta frente a las herramientas web. Pero requiere descarga e instalacion, lo que supone una barrera de entrada ligeramente mayor para algunos usuarios. Igualmente, al ser un entorno local, las diferencias en configuraciones de diferentes computadoras y entornos de dependencias introducen cierta incertidumbre. La ventaja es que Trae te ayuda a completar la creacion del proyecto y la configuracion de ejecucion localmente; puedes desarrollar y depurar directamente en tu maquina.
|
||||
- **Usuarios adecuados:** Mas adecuado para usuarios que planean realizar proyectos de Vibe Coding a largo plazo y desean usar una herramienta de escritorio dedicada. Para estudiantes que solo quieren "probar de vez en cuando", puede que no sea la opcion mas ligera.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
|
||||
|
||||
- **Precio:** Precio relativamente asequible; incluso la version gratuita es suficiente para completar pequenos proyectos de buena calidad.
|
||||
|
||||
|
||||
### 7. V0 (Web-based)
|
||||
|
||||
- **Tipo de plataforma:** Web
|
||||
- **Caracteristicas principales y flujo de trabajo:** V0 es una herramienta enfocada en generar componentes UI de React, proporcionada por Vercel. Sobresale en generar interfaces de alta calidad aptas para produccion. Sin embargo, en uso practico, te encontraras con problemas como "dificultad para encontrar la vista de codigo" y "falta de indicaciones claras sobre donde configurar la API Key".
|
||||
- **Usuarios adecuados:** V0 es ideal para estudiantes o disenadores enfocados en frontend y diseno UI/UX. Pero no es una solucion fullstack completa; aun necesitaras usar otras plataformas para implementar la logica del backend y la integracion de APIs, por lo que si tu objetivo es "construir una aplicacion completa de forma integral", puede que no sea la mejor primera opcion.
|
||||
- **Proceso de prompts:**
|
||||
|
||||
|
||||
|
||||
|
||||
- **Resultado del juego Snake:**
|
||||
|
||||
- **Precio:** Los usuarios gratuitos pueden construir aproximadamente 4-5 proyectos simples.
|
||||
|
||||
|
||||
## 3. Tabla comparativa resumida de plataformas
|
||||
|
||||
| **Plataforma** | **Resena** | **Plataforma** | **Notas** |
|
||||
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------- |
|
||||
| **[Lovable](https://lovable.dev/)** | Muy amigable para principiantes en programacion con IA, facil de empezar y experiencia fluida; la opcion ideal para iniciarse. | Web-based | Completa automaticamente la conexion de servicios como Supabase, reduciendo costos de configuracion. |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | Adecuado para usuarios con experiencia en desarrollo; mejora drasticamente la productividad y la calidad del codigo. | PC | Requiere cierta base de programacion; en el entorno local necesitas comprender la estructura del proyecto y las dependencias. |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Mas adecuado para usuarios con base de programacion que quieren estudiar directamente los detalles del codigo generado por la IA. | Web-based | Sin ventana de vista previa, verificar resultados es mas complicado; requiere pegar codigo manualmente, crear carpetas y archivos y ejecutar el servicio manualmente. |
|
||||
| **[Replit](https://replit.com/~)** | Recomendado para usuarios que quieren convertir rapidamente ideas en servicios en linea accesibles. | Web-based | Desarrollo y despliegue en linea todo-en-uno, soporta colaboracion y proporciona un editor visual. |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Adecuado para quienes quieren ver todo el proceso de la IA detectando y reparando errores automaticamente y aprender de el, pero en general es lento y consume muchos Tokens. | Web-based | Todo el proceso es largo; la IA ejecuta multiples pruebas automaticamente y repara errores. |
|
||||
| **[Trae](https://www.trae.ai/)** | Para usuarios con experiencia en programacion que buscan la combinacion de IDE de escritorio + AI Agent; una herramienta poderosa para mejorar la eficiencia. | PC | Requiere instalacion local y configuracion del entorno, pero mejor rendimiento; adecuado para proyectos de Vibe Coding a largo plazo. |
|
||||
| **[V0](https://v0.app/)** | Optimizado para no desarrolladores que quieren crear rapidamente efectos visuales de React UI; adecuado para estudiantes orientados a frontend / diseno. | Web-based | Enfocado en generar React UI; necesita combinarse con otras plataformas para completar el backend y la construccion de la aplicacion completa. |
|
||||
---
|
||||
title: 'Comparacion de 7 herramientas de programacion con IA'
|
||||
description: 'Una evaluacion practica de plataformas Web de Vibe Coding con una tarea unificada, comparando facilidad para principiantes, control de codigo y despliegue.'
|
||||
---
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
# Disenar un sitio web con Agent de diseno y programacion
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
Este capitulo mostrara como el diseno y el desarrollo pueden colaborar perfectamente a traves de la IA. Tu asumiras el rol de product manager, dirigiendo al "Agent de diseno" para completar el diseno del logotipo, el esquema de colores y el layout de la pagina, y luego coordinando con el "Agent de programacion" para convertir los bocetos visuales en codigo ejecutable. Desde la concepcion creativa hasta la publicacion del sitio web, experimenta el flujo de desarrollo potenciado por IA de principio a fin, convirtiendo a una sola persona en todo un equipo.
|
||||
|
||||
---
|
||||
|
||||
# 1. Guia de inicio
|
||||
|
||||
## 1. Introduccion al tutorial
|
||||
|
||||
Vamos a usar un Agent de diseno de IA y un Agent de codificacion para construir un sitio web completo desde cero.
|
||||
|
||||
- **Agent de diseno**: responsable de crear el logotipo, el layout de la pagina web, el esquema de colores y otros elementos visuales
|
||||
- **Agent de codificacion**: segun los requisitos y layout que definas en los prompts, escribe el codigo real como HTML/CSS/JS, construyendo un sitio web funcional
|
||||
|
||||
## 2. Agent de diseno vs Agent de codificacion
|
||||
|
||||
- **Agent de diseno**: IA que genera imagenes, mockups de pagina o estilos de diseno basandose en los prompts que le proporcionas.
|
||||
- Mastergo
|
||||
- Lovart
|
||||
- Figma MCP
|
||||
- **Agent de codificacion**: IA que escribe el codigo real (HTML/CSS/JS, etc.) basandose en las funcionalidades y layout que solicitas en tus prompts.
|
||||
- Z.AI
|
||||
- Trae
|
||||
- Cursor
|
||||
- Lovable
|
||||
|
||||
---
|
||||
|
||||
# 2. Crear un logotipo con el Agent de diseno
|
||||
|
||||
## 1. Elementos clave a considerar al disenar un logotipo
|
||||
|
||||
El logotipo es uno de los elementos clave que determinan la primera impresion de tu sitio web. Para obtener resultados satisfactorios del Agent de diseno de IA, necesitas describir claramente en tu prompt que tipo de logotipo deseas.
|
||||
|
||||
1. **Nombre de marca / texto**
|
||||
|
||||
- El texto que debe aparecer en el logotipo (por ejemplo: titulo del sitio web, nombre de la marca, etc.).
|
||||
|
||||
2. **Estilo (estado de animo / atmosfera)**
|
||||
|
||||
- La sensacion o atmosfera general que el logotipo debe transmitir.
|
||||
- _Ejemplos: minimalista, mono, limpio, moderno, retro, futurista, etc._
|
||||
|
||||
3. **Esquema de colores** (opcional)
|
||||
|
||||
- Es preferible que los colores del logotipo coincidan con el tono general del sitio web.
|
||||
- Puedes especificar codigos hexadecimales concretos o tonos generales (frios, calidos, etc.).
|
||||
- _Ejemplos: **`#171721`** (negro), **`#FF7130`** (naranja)._
|
||||
|
||||
4. **Forma (figura / estructura)**
|
||||
|
||||
- Define si el logotipo necesita una forma o composicion especifica.
|
||||
- _Ejemplos: texto dentro de un circulo, combinacion de icono + texto, logotipo centrado en un icono, etc._
|
||||
|
||||
5. **Icono / elemento simbolico** (opcional)
|
||||
|
||||
- Graficos o simbolos que deseas que aparezcan en el logotipo.
|
||||
- _Ejemplos: icono de libro, simbolo de rayo, graficos relacionados con IA, formas geometricas abstractas, etc._
|
||||
|
||||
## 2. Escribir prompts para el diseno del logotipo
|
||||
|
||||
**Ejemplo de prompt**
|
||||
|
||||
```
|
||||
"Por favor disename un logotipo de estilo minimalista. El nombre de la marca es 'My First Website'.
|
||||
Usa negro (#171721) y naranja (#FF7130), y coloca el texto dentro de un circulo."
|
||||
```
|
||||
|
||||
```
|
||||
"Por favor disena un logotipo con el nombre de marca 'AIID'.
|
||||
El estilo general debe ser futurista, limpio y simple, con azul y blanco como colores principales.
|
||||
Combina un grafico abstracto que simbolice la IA con el texto, y exportalo como PNG con fondo transparente."
|
||||
```
|
||||
|
||||
## 3. Solicitar el diseno al Agent
|
||||
|
||||
- Introduce el prompt anterior -> compara los multiples disenos generados por el Agent.
|
||||
|
||||
|
||||
|
||||
## 4. Confirmar el logotipo final
|
||||
|
||||
- Selecciona tu version favorita entre los borradores y descargala.
|
||||
|
||||
---
|
||||
|
||||
# 3. Planificar la estructura de tu sitio web
|
||||
|
||||
## 1. Conocer las secciones basicas
|
||||
|
||||
Antes de empezar realmente a crear el sitio web, es muy importante planificar que menus (secciones) incluir. El diseno de los menus depende de lo que quieras que vean los visitantes y que acciones deseas que realicen.
|
||||
Generalmente, un sitio web esta compuesto por secciones basicas como **Home / About / Contact**.
|
||||
|
||||
## 2. Dibujar primero un esquema de estructura (opcional)
|
||||
|
||||
Puedes escribir primero un esquema simple de la estructura de menus basandote en los objetivos del sitio web.
|
||||
|
||||
### Menus basicos
|
||||
|
||||
1. **Home**
|
||||
1. La pagina principal que los visitantes ven al entrar al sitio web
|
||||
2. Suele incluir el logotipo, un area visual principal y un lema o introduccion breve
|
||||
2. **About**
|
||||
1. Presenta quien eres, o el proposito del proyecto / servicio
|
||||
2. Portafolio personal: presentacion + breve curriculum
|
||||
3. Sitio web de servicios: vision, objetivos y funcionalidades principales
|
||||
3. **Contact**
|
||||
1. Informacion de contacto, como correo electronico, numero de telefono, enlaces a redes sociales, etc.
|
||||
2. Tambien puedes anadir un formulario de contacto simple
|
||||
|
||||
### Menus opcionales
|
||||
|
||||
4. **Services / Projects**
|
||||
1. Muestra los servicios que ofreces, o tus proyectos / portafolio
|
||||
2. Generalmente presentados en formato de lista o tarjetas
|
||||
|
||||
5. **Gallery**
|
||||
1. Para mostrar imagenes, fotos o trabajos de diseno
|
||||
|
||||
6. **Blog / News**
|
||||
1. Para publicar articulos, actualizaciones o diarios
|
||||
|
||||
7. **FAQ**
|
||||
1. Recopila las preguntas frecuentes de los visitantes con sus respuestas
|
||||
|
||||
## 3. Elegir un esquema de colores (opcional)
|
||||
|
||||
Si ya tienes un logotipo, o quieres disenar el sitio web con una combinacion de colores especifica, puedes incluir directamente en tu prompt los codigos de color que deseas usar.
|
||||
|
||||
**Ejemplo:** `#171721, #872B97, #FF7130, #FF3C68`
|
||||
|
||||
Incluso si no se te ocurre un esquema de colores en este momento, puedes encontrar inspiracion a traves de sitios web de colores o buscando palabras clave.
|
||||
|
||||
- **Sitios web de referencia de colores**
|
||||
- https://colorhunt.co/
|
||||
- https://coolors.co/
|
||||
|
||||
|
||||
|
||||
- **Buscar esquemas de colores en Google por palabras clave**
|
||||
|
||||
|
||||
|
||||
## 4. Escribir el prompt para el diseno del sitio web
|
||||
|
||||
**Ejemplo de prompt**
|
||||
|
||||
```
|
||||
"Por favor disena un sitio web de una sola pagina compuesto por las secciones Home, About y Contact.
|
||||
Usa los colores #171721, #FF7130 y #FF3C68.
|
||||
El estilo general debe ser moderno y limpio."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. Disenar el sitio web con el Agent de diseno
|
||||
|
||||
## 1. Introducir el prompt -> generar el diseno
|
||||
|
||||
- Escribe en el prompt la estructura que has planificado y los colores que has seleccionado.
|
||||
|
||||
**Ejemplo de prompt en Mastergo**
|
||||
|
||||
|
||||
|
||||
## 2. Revisar el diseno y sugerir cambios
|
||||
|
||||
Puedes proporcionar retroalimentacion al Agent segun tus necesidades, por ejemplo:
|
||||
|
||||
- "Es demasiado recargado, simplifica el estilo general."
|
||||
- "Cambia la fuente."
|
||||
- "Ajusta la combinacion de colores."
|
||||
- "Elimina esta seccion de aqui."
|
||||
|
||||
|
||||
|
||||
## 3. Confirmar el diseno final
|
||||
|
||||
Cuando hayas realizado multiples rondas de modificaciones al diseno y estes satisfecho, puedes convertir este diseno en codigo, para que el Agent de codificacion pueda entenderlo y continuar trabajando.
|
||||
|
||||
La forma de convertir el diseno a codigo varia segun la plataforma, pero generalmente se hace instalando y usando ciertos plugins dentro de la plataforma de diseno.
|
||||
|
||||
**Ejemplo con Mastergo**
|
||||
|
||||
1. Abre el [sitio de plugins de Mastergo](https://mastergo.com/community/plugin) y busca **seal**.
|
||||
|
||||
|
||||
|
||||
2. Vuelve a la pagina de diseno y haz clic en el **icono de cubo (plugin)**.
|
||||
|
||||
|
||||
|
||||
3. Selecciona el area de diseno que deseas convertir a codigo y haz clic en el boton **Generate** para generar el codigo.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Construir el sitio web con el Agent de codificacion
|
||||
|
||||
## 1. Entender los conceptos basicos de HTML/CSS/JS
|
||||
|
||||
Un sitio web esta esencialmente compuesto por tres lenguajes:
|
||||
|
||||
- **HTML (HyperText Markup Language)** -> Estructura (esqueleto)
|
||||
- **CSS (Cascading Style Sheets)** -> Estilos (apariencia)
|
||||
- **JavaScript (JS)** -> Funcionalidad (interaccion)
|
||||
|
||||
Estos tres trabajan juntos para formar la pagina web completa que vemos.
|
||||
|
||||
1. **HTML (Estructura)**
|
||||
|
||||
- Define "que se muestra" en la pagina
|
||||
- Se usa para colocar elementos como texto, imagenes, botones, enlaces, etc.
|
||||
- Es como los **muros y el armazon** de un edificio
|
||||
|
||||
**Ejemplo**
|
||||
|
||||
```html
|
||||
<h1>Hola!</h1>
|
||||
<p>Este es mi primer sitio web.</p>
|
||||
<a href="contact.html">Contacto</a>
|
||||
```
|
||||
|
||||
2. **CSS (Estilos)**
|
||||
|
||||
- Decide "como se muestra el contenido"
|
||||
- Controla el tamano del texto, colores, espaciado, fondo, forma de los botones, etc.
|
||||
- Le da a HTML su "ropa" y estilo visual
|
||||
|
||||
**Ejemplo**
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: #FF7130; /* Color del texto */
|
||||
font-size: 36px; /* Tamano de fuente */
|
||||
text-align: center; /* Alineacion centrada */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #171721; /* Color de fondo */
|
||||
color: white; /* Color de texto predeterminado */
|
||||
}
|
||||
```
|
||||
|
||||
3. **JavaScript (JS) (Funcionalidad)**
|
||||
|
||||
- Permite que la pagina web interactue con el usuario
|
||||
- Puede implementar efectos dinamicos como clics de botones, menus desplegables, carruseles de imagenes, envio de formularios, etc.
|
||||
- Si HTML/CSS son el esqueleto y la apariencia estaticos, entonces JS es el **cerebro** que hace que la pagina web "cobrara vida"
|
||||
|
||||
**Ejemplo**
|
||||
|
||||
```javascript
|
||||
function showAlert() {
|
||||
alert("Se ha hecho clic en el boton!");
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<button onclick="showAlert()">Haz clic en mi</button>
|
||||
```
|
||||
|
||||
## 2. Dejar que el Agent de codificacion genere el codigo
|
||||
|
||||
**Ejemplo de prompt**
|
||||
|
||||
```
|
||||
"Por favor escribe HTML y CSS para un sitio web de una sola pagina con las secciones Home, About y Contact.
|
||||
Usa los colores #171721, #FF7130, #FF3C68.
|
||||
Fondo negro y texto blanco."
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3. Ejecutar el sitio web
|
||||
|
||||
Cuando se ha generado el codigo borrador, el Agent generalmente inicia automaticamente el proyecto y muestra la pagina del sitio web generada.
|
||||
|
||||
Si has reiniciado el Agent o la pagina del sitio web no aparece, puedes introducir un prompt como este:
|
||||
|
||||
```
|
||||
"Please activate the project"
|
||||
```
|
||||
|
||||
Para que el Agent reinicie el proyecto y abra la pagina de vista previa, facilitandote ver el efecto actual.
|
||||
|
||||
## 4. Realizar modificaciones simples
|
||||
|
||||
Puedes seguir ajustando el borrador mediante lenguaje natural, por ejemplo:
|
||||
|
||||
- "Haz el boton mas grande."
|
||||
- "La fuente mas gruesa."
|
||||
|
||||
|
||||
|
||||
## 5. Modificar el contenido del texto del sitio web
|
||||
|
||||
El sitio web de la version inicial generada por el Agent generalmente incluye algo de texto de marcador de posicion generado automaticamente. Para que se acerque mas a tu escenario real, puedes preparar el contenido real de antemano y luego pedirle al Agent que lo reemplace.
|
||||
|
||||
**Ejemplo de aplicacion**: actualizar la pagina About del sitio web AIID
|
||||
|
||||
1. Primero escribe el contenido que deseas mostrar en la pagina About. Para facilitar la comprension del Agent, puedes guardar el contenido en formato Markdown.
|
||||
|
||||
|
||||
|
||||
2. Luego dile al Agent en la conversacion que aplique el contenido del archivo a la pagina especificada.
|
||||
|
||||
|
||||
|
||||
3. Revisa la version actualizada despues de aplicar el contenido.
|
||||
|
||||
|
||||
|
||||
## 6. Insertar imagenes
|
||||
|
||||
Si deseas anadir imagenes especificas (por ejemplo, logotipo, imagen de fondo, etc.), primero sube las imagenes a la carpeta del proyecto y luego indica en el prompt en que posicion de la pagina deseas usarlas.
|
||||
|
||||
- **Ejemplo:**
|
||||
|
||||
|
||||
|
||||
- **Resultado:**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 6. Integrar diseno y codigo
|
||||
|
||||
## 1. Integrar los archivos de diseno con el codigo del sitio web (opcional)
|
||||
|
||||
Cuando hayas descargado los archivos de codigo del Agent de diseno, puedes moverlos al directorio del proyecto actual y luego pedirle al Agent de codificacion que te ayude a fusionar este codigo de diseno con el proyecto existente.
|
||||
|
||||
- **Ejemplo:**
|
||||
|
||||
|
||||
|
||||
- **Resultado:**
|
||||
|
||||
|
||||
---
|
||||
title: 'Construir un sitio con agentes de diseno y programacion'
|
||||
description: 'Del concepto al lanzamiento: coordina un agente de diseno para el visual y un agente de codigo para convertirlo en un sitio funcionando con un flujo reutilizable.'
|
||||
---
|
||||
@@ -0,0 +1,325 @@
|
||||
---
|
||||
title: 'Qué hacer cuando encuentras errores al escribir código - Guía práctica para preguntar a la IA con capturas de pantalla'
|
||||
description: 'Aprende a preguntar eficientemente a la IA para resolver diversos errores de desarrollo, domina el flujo estándar de capturas de pantalla, descripción y localización de problemas, y convierte a la IA en tu asistente de depuración.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>30 minutos</strong>'
|
||||
</script>
|
||||
|
||||
# Qué hacer cuando encuentras errores al escribir código
|
||||
|
||||
## Resumen del capítulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Técnicas de depuración', 'Colaboración con IA', 'Resolución de problemas', 'Herramientas de desarrollo']" coreOutput="Un flujo estandarizado de resolución de errores" expectedOutput="Poder resolver independientemente el 90% de los errores comunes">
|
||||
|
||||
En la era de la IA, la forma de resolver errores ha cambiado.
|
||||
|
||||
No necesitas memorizar todos los tipos de errores, no necesitas ser un experto en depuración, ni siquiera necesitas entender qué significa el error.
|
||||
|
||||
<strong>Solo necesitas aprender una cosa: cómo preguntar a la IA.</strong>
|
||||
|
||||
Este capítulo te enseñará un flujo de resolución <strong>de lo simple a lo avanzado</strong>:
|
||||
|
||||
1. <strong>Paso 1: Pregunta directamente</strong>: Describe el síntoma + captura de pantalla, una sola frase
|
||||
2. <strong>Paso 2: Complementa información</strong>: Si no se puede resolver, abre F12 y añade información clave
|
||||
|
||||
Después de dominar este flujo, <strong>podrás resolver el 90% de los errores por tu cuenta</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Nota
|
||||
Todos los métodos de este capítulo se basan en la experiencia real de uso de AI IDEs como Cursor/Trae/Claude, y pueden aplicarse directamente al desarrollo diario.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Preguntar directamente', description: 'Describe el síntoma + captura de pantalla' },
|
||||
{ title: 'Complementar información', description: 'Abre F12 para localizar el problema' },
|
||||
{ title: 'Iterar hasta resolver', description: 'Hasta que el problema se resuelva' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Método central: pregunta a la IA con capturas de pantalla
|
||||
|
||||
::: warning ¿Por qué es importante este capítulo?
|
||||
|
||||
La primera reacción de muchos principiantes al encontrar errores es:
|
||||
- Entrar en pánico y empezar a modificar código al azar
|
||||
- Pasar media hora buscando "cómo solucionar el error xxx"
|
||||
- Intentar entender qué significa el error por sí mismos
|
||||
- Depurar solo hasta altas horas de la noche
|
||||
|
||||
<strong>Todo esto es perder el tiempo.</strong>
|
||||
|
||||
En la era de la IA, la depuración se ha convertido en algo muy simple:
|
||||
|
||||
```
|
||||
Ver error → Captura de pantalla → Pregunta a la IA → Haz lo que dice la IA
|
||||
```
|
||||
|
||||
No necesitas entender el error, no necesitas saber depurar, ni siquiera necesitas saber dónde está el problema.
|
||||
|
||||
<strong>Solo necesitas aprender cómo preguntar.</strong>
|
||||
|
||||
:::
|
||||
|
||||
### 1.1 La forma más simple de preguntar
|
||||
|
||||
No necesitas plantillas complejas, elige entre dos métodos:
|
||||
|
||||
**Método 1: Describe el síntoma**
|
||||
|
||||
Formato: qué hiciste, qué apareció ahora
|
||||
|
||||
```
|
||||
Acabo de modificar el código de la página de login y ahora la página está en blanco, ¿qué hago?
|
||||
```
|
||||
|
||||
**Método 2: Captura de pantalla**
|
||||
|
||||
Haz una captura de pantalla directamente de la página actual o del mensaje de error
|
||||
|
||||
```
|
||||
[captura de pantalla]
|
||||
|
||||
¿Cómo soluciono este error?
|
||||
```
|
||||
|
||||
**El mejor método: Descripción + captura de pantalla**
|
||||
|
||||
```
|
||||
Acabo de modificar el código de la página de login y ahora la página está en blanco.
|
||||
|
||||
[captura de pantalla]
|
||||
|
||||
¿Qué hago?
|
||||
```
|
||||
|
||||
**Recuerda: describe claramente el contexto, añade una captura de pantalla, y la IA podrá ayudarte más rápido.**
|
||||
|
||||
### 1.2 Cómo explicar el problema claramente
|
||||
|
||||
Muchos principiantes saben que deben preguntar, pero no saben cómo expresarse. En realidad, solo necesitas explicar tres cosas:
|
||||
|
||||
**1. Qué acabas de hacer**
|
||||
|
||||
```
|
||||
Acabo de hacer clic en el botón guardar
|
||||
Acabo de modificar el código de la página de login
|
||||
Acabo de actualizar la página
|
||||
```
|
||||
|
||||
**2. Qué ves ahora**
|
||||
|
||||
```
|
||||
Ahora la página está en blanco
|
||||
Ahora el botón no responde al hacer clic
|
||||
Ahora muestra un mensaje de error
|
||||
```
|
||||
|
||||
**3. Qué efecto quieres lograr**
|
||||
|
||||
```
|
||||
Quiero que los datos se guarden correctamente
|
||||
Quiero que la página se muestre normalmente
|
||||
Quiero que aparezca un aviso después de hacer clic en el botón
|
||||
```
|
||||
|
||||
**Ejemplo completo:**
|
||||
|
||||
```
|
||||
Acabo de hacer clic en el botón guardar, y ahora la página muestra un error de "error al guardar".
|
||||
|
||||
[captura de pantalla]
|
||||
|
||||
Quiero que los datos del formulario se guarden correctamente en la base de datos, ¿qué debo hacer?
|
||||
```
|
||||
|
||||
**Principios clave:**
|
||||
- Describe en lenguaje llano, sin terminología técnica
|
||||
- Sigue el orden cronológico: qué hiciste primero, qué pasó después
|
||||
- Expresa tu expectativa para que la IA sepa qué quieres
|
||||
|
||||
## 2. Paso 1: Describe el síntoma directamente
|
||||
|
||||
Cuando encuentres un problema, <strong>no te apresures a abrir F12</strong>. Primero describe el síntoma, haz una captura de pantalla de la página actual y pásasela a la IA.
|
||||
|
||||
Muchas veces, la IA puede dar una solución directamente al ver la captura de pantalla.
|
||||
|
||||
### 2.1 Cómo describir síntomas comunes
|
||||
|
||||
::: tip Simplemente describe
|
||||
|
||||
**Página en blanco**
|
||||
```
|
||||
La página se abre en blanco, ¿qué hago?
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
**El botón no responde al hacer clic**
|
||||
```
|
||||
Al hacer clic en este botón no pasa nada, ayúdame a revisar.
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
**Los datos no se guardan**
|
||||
```
|
||||
Hice clic en guardar, pero los datos no se guardaron, ¿qué hago?
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
**El estilo no se muestra correctamente**
|
||||
```
|
||||
El botón está desalineado, ¿cómo lo ajusto?
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
**Error en la API**
|
||||
```
|
||||
La llamada a la API da error, ayúdame a revisar.
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 Si la IA lo resuelve directamente
|
||||
|
||||
¡Felicidades, problema resuelto! Simplemente haz las modificaciones que indica la IA.
|
||||
|
||||
### 2.3 Si la IA dice "necesito más información"
|
||||
|
||||
Entonces es cuando necesitas abrir F12 y complementar información clave. Sigue leyendo.
|
||||
|
||||
## 3. Paso 2: Complementa información clave
|
||||
|
||||
Cuando la IA dice que necesita más información, según el tipo de problema, abre F12 y captura el contenido correspondiente.
|
||||
|
||||
### 3.1 Cuándo necesitas complementar información
|
||||
|
||||
La IA podría responder así:
|
||||
- "Por favor, abre la Console a ver si hay errores"
|
||||
- "Haz una captura de pantalla del panel Network"
|
||||
- "Necesito ver el mensaje de error específico"
|
||||
|
||||
En ese caso, sigue las indicaciones de abajo para complementar las capturas.
|
||||
|
||||
### 3.2 Complementar información de Console (página en blanco/errores)
|
||||
|
||||
::: tip Pasos
|
||||
|
||||
**Paso 1: Presiona F12 para abrir las herramientas de desarrollo**
|
||||
|
||||
En Mac es `Cmd+Option+I`, o haz clic derecho en la página y selecciona "Inspeccionar".
|
||||
|
||||
**Paso 2: Cambia a la pestaña Console**
|
||||
|
||||
**Paso 3: Haz una captura de pantalla de los errores en rojo**
|
||||
|
||||
**Paso 4: Envíalo a la IA**
|
||||
|
||||
```
|
||||
Los errores de Console son los siguientes:
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.3 Complementar información de Network (problemas de datos/errores de API)
|
||||
|
||||
::: tip Pasos
|
||||
|
||||
**Paso 1: Presiona F12 para abrir las herramientas de desarrollo**
|
||||
|
||||
**Paso 2: Cambia a la pestaña Network**
|
||||
|
||||
**Paso 3: Repite la operación** (haz clic en guardar/actualiza la página)
|
||||
|
||||
**Paso 4: Encuentra la petición correspondiente y haz una captura de pantalla**
|
||||
|
||||
- Mira la URL y el código de estado
|
||||
- Mira el Payload (parámetros enviados)
|
||||
- Mira el Response (resultado devuelto)
|
||||
|
||||
**Paso 5: Envíalo a la IA**
|
||||
|
||||
```
|
||||
La información de Network es la siguiente:
|
||||
|
||||
Petición: [captura 1]
|
||||
Parámetros: [captura 2]
|
||||
Respuesta: [captura 3]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.4 Complementar información de Elements (problemas de estilos)
|
||||
|
||||
::: tip Pasos
|
||||
|
||||
**Paso 1: Clic derecho en el elemento → "Inspeccionar"**
|
||||
|
||||
Las herramientas de desarrollo se posicionarán automáticamente en ese elemento.
|
||||
|
||||
**Paso 2: Haz una captura de pantalla del panel Styles**
|
||||
|
||||
**Paso 3: Envíalo a la IA**
|
||||
|
||||
```
|
||||
Los estilos del elemento son los siguientes:
|
||||
|
||||
[captura de pantalla]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 4. Paso 3: Itera hasta resolver
|
||||
|
||||
### 4.1 Lo que NO debes hacer
|
||||
|
||||
Estas acciones harán que pierdas tiempo:
|
||||
|
||||
Entrar en pánico al ver un error y empezar a modificar código al azar
|
||||
Pasar media hora buscando soluciones de errores
|
||||
Intentar entender el significado de cada error por tu cuenta
|
||||
Depurar solo hasta altas horas de la noche
|
||||
|
||||
### 4.2 Lo que SÍ debes hacer
|
||||
|
||||
Sigue este flujo:
|
||||
|
||||
Primero describe el síntoma y haz una captura de pantalla para preguntar
|
||||
Cuando la IA diga que necesita más información, abre F12 y complementa
|
||||
Modifica el código según las sugerencias
|
||||
Después de modificar, prueba; si el problema persiste, sigue haciendo capturas y preguntando
|
||||
|
||||
## 5. Resumen: Flujo completo
|
||||
|
||||
```
|
||||
Encuentras un problema
|
||||
↓
|
||||
Describe el síntoma directamente + captura de pantalla
|
||||
↓
|
||||
Pásalo a la IA: "¿Qué hago?"
|
||||
↓
|
||||
¿La IA lo resolvió directamente?
|
||||
↓ Sí
|
||||
Haz lo que dice la IA
|
||||
↓
|
||||
Prueba si se resolvió
|
||||
↓
|
||||
↓ No / La IA necesita más información
|
||||
Abre F12 y complementa información clave
|
||||
↓
|
||||
Envíalo de nuevo a la IA
|
||||
↓
|
||||
Repite hasta resolver
|
||||
```
|
||||
@@ -0,0 +1,642 @@
|
||||
---
|
||||
title: 'Referencia de inspiracion para escenarios de consumo B2C'
|
||||
description: 'Una coleccion de direcciones creativas de aplicacion de modelos LLM en escenarios de consumo B2C, cubriendo estilo de vida, compania emocional, entretenimiento y mas.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'aprox. <strong>4 horas</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// Pool de temas por escenario: énfasis en sensación, ambiente y sugestión psicológica
|
||||
const topicPool = {
|
||||
'lifestyle': [
|
||||
{ title: 'Asistente de despertar con ritual matutino', desc: 'Genera rituales matutinos según clima, agenda y ánimo para empezar bien cada día' },
|
||||
{ title: 'Creador de ambiente para vivir solo', desc: 'Diseña ambientes domésticos para quienes viven solos, con sugerencias de luz, música y aromas' },
|
||||
{ title: 'Generador de planes reparadores de fin de semana en casa', desc: 'Recomienda la combinación perfecta según el ánimo: película + snacks + ambientación' },
|
||||
{ title: 'Radio calmante antes de dormir', desc: 'Genera historias suaves y meditaciones guiadas como una radio privada para conciliar el sueño' },
|
||||
{ title: 'Capturador de inspiración estética cotidiana', desc: 'Descubre belleza en lo cotidiano y genera sugerencias estéticas con sentido de ritual' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'Confidente nocturno', desc: 'Un espacio emocional disponible 24 horas, sin juicio, para recibir cualquier preocupación' },
|
||||
{ title: 'Acompañante para sanar una ruptura', desc: 'Ofrece compañía amable, consejos de recuperación y salida emocional durante una ruptura' },
|
||||
{ title: 'Coach de respiración contra la ansiedad', desc: 'Percibe la ansiedad y guía ejercicios de respiración y mindfulness' },
|
||||
{ title: 'Mentor para reconstruir la confianza', desc: 'Ayuda a reconstruir identidad y valor personal con diálogo positivo y sugestión psicológica' },
|
||||
{ title: 'Interpretación inteligente del diario emocional', desc: 'Analiza diarios emocionales, encuentra patrones y ofrece ideas y consejos cálidos' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'DM inmersivo para juegos de misterio', desc: 'Actúa como anfitrión, crea suspense y hace avanzar la trama' },
|
||||
{ title: 'NPC con alma en juegos de mundo abierto', desc: 'NPC con personalidad que recuerda historias del jugador y genera vínculos emocionales reales' },
|
||||
{ title: 'Generación de podcasts personalizados', desc: 'Genera podcasts exclusivos según intereses, con naturalidad de conversación entre amigos' },
|
||||
{ title: 'Equipo de ambiente para concierto virtual', desc: 'Crea sensación de directo en conciertos online con interacción, apoyo y ambiente en tiempo real' },
|
||||
{ title: 'Compañero de cocreación de novela interactiva', desc: 'Crea historias junto con lectores; cada elección cambia el rumbo del mundo' }
|
||||
],
|
||||
'growth': [
|
||||
{ title: 'Testigo del crecimiento personal', desc: 'Registra la trayectoria de crecimiento y ofrece ánimo y revisión en hitos importantes' },
|
||||
{ title: 'Coach gamificado de hábitos', desc: 'Convierte la formación de hábitos en una aventura divertida' },
|
||||
{ title: 'Emparejador de compañeros para aprender habilidades', desc: 'Encuentra compañeros afines para supervisarse y compartir avances' },
|
||||
{ title: 'Descubridor diario de pequeñas alegrías', desc: 'Ayuda a descubrir pequeños momentos bellos y cultivar gratitud y optimismo' },
|
||||
{ title: 'Simulador de experiencias de vida', desc: 'Simula decisiones vitales y explora posibilidades de vidas paralelas' }
|
||||
],
|
||||
'social': [
|
||||
{ title: 'Generador de temas rompehielos', desc: 'Ofrece temas interesantes en situaciones sociales para reducir incomodidad y acercar personas' },
|
||||
{ title: 'Redactor de ambiente para publicaciones sociales', desc: 'Genera textos con estilo según fotos y estado de ánimo' },
|
||||
{ title: 'Planificador de ambiente para citas', desc: 'Diseña una experiencia completa de cita: lugar, conversación y sorpresa' },
|
||||
{ title: 'Animador de reuniones remotas', desc: 'Activa reuniones online con juegos e interacción guiada' },
|
||||
{ title: 'Asistente de gestión de energía social', desc: 'Ayuda a personas introvertidas a gestionar energía y encontrar un ritmo social cómodo' }
|
||||
],
|
||||
'creative': [
|
||||
{ title: 'Kit de emergencia contra el bloqueo creativo', desc: 'Aporta chispas inesperadas cuando aparece el bloqueo creativo' },
|
||||
{ title: 'Guía de exploración del estilo personal', desc: 'Ayuda a descubrir un estilo propio, desde la ropa hasta la expresión' },
|
||||
{ title: 'Asesor estético para journaling y diarios', desc: 'Sugiere maquetación, paletas y contenido creativo para diarios' },
|
||||
{ title: 'Guía de composición y ambiente fotográfico', desc: 'Ofrece consejos de foto y edición según escena y sensación buscada' },
|
||||
{ title: 'Emparejador de música y estado de ánimo', desc: 'Recomienda la combinación musical perfecta según ánimo y contexto' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'Guía para paseos urbanos', desc: 'Explora la ciudad como una persona local y descubre lugares ocultos' },
|
||||
{ title: 'Generador de diario emocional de viaje', desc: 'Convierte fotos y emociones de viaje en relatos y recuerdos bellos' },
|
||||
{ title: 'Acompañante para viajar en solitario', desc: 'Ofrece compañía, consejos y seguridad para viajar solo' },
|
||||
{ title: 'Vista previa del ambiente del destino', desc: 'Permite sentir el destino antes de salir y entrar en ambiente' },
|
||||
{ title: 'Guía de ambiente para fotografía de viaje', desc: 'Ayuda a tomar fotos con historia según escena y luz' }
|
||||
],
|
||||
'health': [
|
||||
{ title: 'Activador de motivación deportiva', desc: 'Da el empujón justo cuando no apetece moverse' },
|
||||
{ title: 'Cocina de inspiración saludable', desc: 'Genera recetas saludables y reparadoras según ánimo e ingredientes' },
|
||||
{ title: 'Optimizador de ambiente para dormir mejor', desc: 'Crea un entorno de sueño de calidad desde lo ambiental hasta lo psicológico' },
|
||||
{ title: 'Guía de conciencia corporal', desc: 'Guía la atención hacia señales del cuerpo y fortalece la conexión cuerpo-mente' },
|
||||
{ title: 'Recordatorio de autocuidado', desc: 'Recuerda detenerse y cuidarse en medio del ajetreo' }
|
||||
],
|
||||
'learning': [
|
||||
{ title: 'Guía gamificada de exploración del conocimiento', desc: 'Convierte el aprendizaje aburrido en una aventura de exploración' },
|
||||
{ title: 'Compañero situacional para aprender idiomas', desc: 'Interpreta roles distintos para aprender idioma de forma natural en diálogos' },
|
||||
{ title: 'Asistente para satisfacer la curiosidad', desc: 'Responde ideas curiosas y alimenta la curiosidad por el mundo' },
|
||||
{ title: 'Inspirador de notas de lectura', desc: 'Ayuda a ordenar reflexiones de lectura y encontrar nuevos ángulos' },
|
||||
{ title: 'Creador de ambiente para compartir conocimiento', desc: 'Convierte lo aprendido en contenido interesante para compartir' }
|
||||
],
|
||||
'relationship': [
|
||||
{ title: 'Coach de comunicación para relaciones íntimas', desc: 'Ayuda a expresar emociones difíciles y mejorar relaciones cercanas' },
|
||||
{ title: 'Asistente de cuidado familiar', desc: 'Recuerda cuidar a la familia y ofrece sugerencias de interacción cálida' },
|
||||
{ title: 'Creador de ambiente para mantener amistades', desc: 'Ayuda a sostener amistades a distancia y crear temas comunes' },
|
||||
{ title: 'Planificador de confesiones y sorpresas', desc: 'Diseña sorpresas y momentos románticos memorables para personas importantes' },
|
||||
{ title: 'Guía para suavizar conflictos', desc: 'Ofrece consejos y frases para aliviar tensiones relacionales' }
|
||||
],
|
||||
'pet': [
|
||||
{ title: 'Diario antropomórfico de mascotas', desc: 'Genera diarios desde la perspectiva de la mascota y registra momentos cálidos' },
|
||||
{ title: 'Intérprete del comportamiento animal', desc: 'Interpreta lenguaje conductual y profundiza el vínculo con la mascota' },
|
||||
{ title: 'Planificador de tiempo de calidad con mascotas', desc: 'Diseña actividades creativas para interactuar y fortalecer el afecto' },
|
||||
{ title: 'Generador de historias conmemorativas de mascotas', desc: 'Convierte fotos y recuerdos de la mascota en historias cálidas' },
|
||||
{ title: 'Guía tranquila para nuevos cuidadores', desc: 'Ofrece compañía y orientación amable a nuevos dueños de mascotas' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'Asistente de conciencia emocional del consumo', desc: 'Detecta emociones detrás de compras impulsivas y construye una visión saludable del consumo' },
|
||||
{ title: 'Motivación visual para metas de ahorro', desc: 'Convierte metas de ahorro en progreso visual hacia sueños' },
|
||||
{ title: 'Aprendizaje ligero de finanzas personales', desc: 'Enseña finanzas de manera ligera y entretenida' },
|
||||
{ title: 'Aliviador de ansiedad financiera', desc: 'Ofrece apoyo emocional y consejos prácticos ante presión financiera' },
|
||||
{ title: 'Juego de inversión de bajo monto', desc: 'Permite experimentar la inversión de forma gamificada y con menor barrera de entrada' }
|
||||
],
|
||||
'career': [
|
||||
{ title: 'Acompañante para la confusión profesional', desc: 'Escucha, explora y orienta durante etapas de duda profesional' },
|
||||
{ title: 'Activador de sentido de logro laboral', desc: 'Ayuda a descubrir valor y sentido en el trabajo y reavivar entusiasmo' },
|
||||
{ title: 'Asistente de ambiente social en el trabajo', desc: 'Propone temas ligeros y consejos de interacción para el entorno laboral' },
|
||||
{ title: 'Generador de inspiración para proyectos paralelos', desc: 'Activa ideas de side projects según intereses y habilidades' },
|
||||
{ title: 'Estación de confianza antes de entrevistas', desc: 'Ofrece preparación psicológica y ánimo antes de entrevistas' }
|
||||
],
|
||||
'home': [
|
||||
{ title: 'Diseñador de ambiente para el hogar', desc: 'Diseña ambientes domésticos según estado de ánimo y estación' },
|
||||
{ title: 'Guía de transformación estacional del hogar', desc: 'Renueva la decoración por temporada para mantener frescura' },
|
||||
{ title: 'Magia para espacios pequeños', desc: 'Hace que los espacios pequeños se sientan cómodos y cálidos' },
|
||||
{ title: 'Creador de rituales domésticos', desc: 'Crea rituales para actividades cotidianas del hogar' },
|
||||
{ title: 'Acompañamiento psicológico para decluttering', desc: 'Ofrece apoyo psicológico y consejos de decisión al ordenar objetos' }
|
||||
],
|
||||
'food': [
|
||||
{ title: 'Cocina reparadora para comer a solas', desc: 'Diseña comidas sencillas y reconfortantes para quienes viven solos' },
|
||||
{ title: 'Diseño de ambiente para mesas festivas', desc: 'Diseña mesas con ritual para días especiales' },
|
||||
{ title: 'Emparejador de cocina y estado de ánimo', desc: 'Recomienda alimentos y preparaciones según el ánimo actual' },
|
||||
{ title: 'Generador de confianza para principiantes en cocina', desc: 'Ofrece ánimo cálido y recetas sencillas a quienes empiezan desde cero' },
|
||||
{ title: 'Guía de ambiente para fotografía gastronómica', desc: 'Hace que la comida casera también se vea apetecible en fotos' }
|
||||
],
|
||||
'fashion': [
|
||||
{ title: 'Mood board del outfit de hoy', desc: 'Genera inspiración de vestimenta según clima, ocasión y ánimo' },
|
||||
{ title: 'Estilista de armario cápsula', desc: 'Crea infinitas combinaciones con prendas limitadas' },
|
||||
{ title: 'Viaje de exploración del estilo personal', desc: 'Ayuda a descubrir y construir un estilo personal único' },
|
||||
{ title: 'Creativo para reinventar ropa antigua', desc: 'Da nueva inspiración para combinar ropa antigua' },
|
||||
{ title: 'Asesor de look para ocasiones especiales', desc: 'Diseña looks que den confianza para momentos importantes' }
|
||||
]
|
||||
}
|
||||
|
||||
// Mapa predefinido de recomendaciones según ambiente y sensación
|
||||
const recommendationMap = {
|
||||
// Ambiente: reparador
|
||||
'healing': {
|
||||
'relax': ['emotion', 'lifestyle', 'health', 'home'],
|
||||
'inspire': ['creative', 'growth', 'learning', 'entertainment'],
|
||||
'connect': ['relationship', 'social', 'pet', 'emotion'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Ambiente: crecimiento
|
||||
'growth': {
|
||||
'relax': ['growth', 'learning', 'creative', 'health'],
|
||||
'inspire': ['career', 'learning', 'creative', 'growth'],
|
||||
'connect': ['social', 'relationship', 'career', 'learning'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Ambiente: social
|
||||
'social': {
|
||||
'relax': ['social', 'pet', 'food', 'home'],
|
||||
'inspire': ['social', 'creative', 'entertainment', 'travel'],
|
||||
'connect': ['relationship', 'social', 'pet', 'travel'],
|
||||
'escape': ['social', 'travel', 'entertainment', 'creative']
|
||||
},
|
||||
// Ambiente: exploración
|
||||
'explore': {
|
||||
'relax': ['travel', 'creative', 'lifestyle', 'food'],
|
||||
'inspire': ['travel', 'creative', 'learning', 'entertainment'],
|
||||
'connect': ['travel', 'social', 'relationship', 'pet'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Ambiente: cotidiano
|
||||
'daily': {
|
||||
'relax': ['lifestyle', 'home', 'health', 'emotion'],
|
||||
'inspire': ['creative', 'food', 'fashion', 'home'],
|
||||
'connect': ['relationship', 'social', 'pet', 'lifestyle'],
|
||||
'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
|
||||
}
|
||||
}
|
||||
|
||||
const vibeOptions = [
|
||||
{ label: 'Reparador', value: 'healing', desc: 'Cálido, calmante, sanador' },
|
||||
{ label: 'Crecimiento', value: 'growth', desc: 'Progreso, avance, transformación' },
|
||||
{ label: 'Social', value: 'social', desc: 'Conexión, compartir, interacción' },
|
||||
{ label: 'Exploración', value: 'explore', desc: 'Curiosidad, aventura, descubrimiento' },
|
||||
{ label: 'Cotidiano', value: 'daily', desc: 'Sencillo, real, presente' }
|
||||
]
|
||||
|
||||
const feelingOptions = [
|
||||
{ label: 'Quiero relajarme', value: 'relax', desc: 'Aliviar presión, despejar la mente' },
|
||||
{ label: 'Busco inspiración', value: 'inspire', desc: 'Activar creatividad, encontrar ideas' },
|
||||
{ label: 'Deseo conexión', value: 'connect', desc: 'Conectar con personas, resonar emocionalmente' },
|
||||
{ label: 'Escapar por un momento', value: 'escape', desc: 'Salir de la realidad, vivir inmersión' }
|
||||
]
|
||||
|
||||
const scenarios = [
|
||||
{ key: 'lifestyle', name: 'Estilo de vida', anchor: '#_1-estilo-de-vida' },
|
||||
{ key: 'emotion', name: 'Acompañamiento emocional', anchor: '#_2-acompañamiento-emocional' },
|
||||
{ key: 'entertainment', name: 'Entretenimiento y ocio', anchor: '#_3-entretenimiento-y-ocio' },
|
||||
{ key: 'growth', name: 'Crecimiento personal', anchor: '#_4-crecimiento-personal' },
|
||||
{ key: 'social', name: 'Interacción social', anchor: '#_5-interacción-social' },
|
||||
{ key: 'creative', name: 'Expresión creativa', anchor: '#_6-expresión-creativa' },
|
||||
{ key: 'travel', name: 'Exploración de viajes', anchor: '#_7-exploración-de-viajes' },
|
||||
{ key: 'health', name: 'Salud física y mental', anchor: '#_8-salud-física-y-mental' },
|
||||
{ key: 'learning', name: 'Exploración del conocimiento', anchor: '#_9-exploración-del-conocimiento' },
|
||||
{ key: 'relationship', name: 'Gestión de relaciones', anchor: '#_10-gestión-de-relaciones' },
|
||||
{ key: 'pet', name: 'Acompañamiento de mascotas', anchor: '#_11-acompañamiento-de-mascotas' },
|
||||
{ key: 'finance', name: 'Salud financiera', anchor: '#_12-salud-financiera' },
|
||||
{ key: 'career', name: 'Desarrollo profesional', anchor: '#_13-desarrollo-profesional' },
|
||||
{ key: 'home', name: 'Espacio del hogar', anchor: '#_14-espacio-del-hogar' },
|
||||
{ key: 'food', name: 'Cocina y gastronomía', anchor: '#_15-cocina-y-gastronomía' },
|
||||
{ key: 'fashion', name: 'Estilo y vestimenta', anchor: '#_16-estilo-y-vestimenta' }
|
||||
]
|
||||
|
||||
// Calcula recomendaciones tomando elementos aleatorios del pool de temas
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!vibePoint.value || !feeling.value) return []
|
||||
|
||||
const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
|
||||
const topics = []
|
||||
|
||||
// Toma aleatoriamente 1-2 temas de cada escenario recomendado
|
||||
keys.forEach(key => {
|
||||
const scenario = scenarios.find(item => item.key === key)
|
||||
const scenarioTopics = topicPool[key] || []
|
||||
|
||||
if (scenario && scenarioTopics.length > 0) {
|
||||
// Toma aleatoriamente 1-2 temas
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
scenarioKey: key,
|
||||
scenarioName: scenario.name,
|
||||
scenarioAnchor: scenario.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Orden aleatorio y límite total
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// Obtiene la descripción de la selección actual
|
||||
const currentSelection = computed(() => {
|
||||
const vibe = vibeOptions.find(i => i.value === vibePoint.value)
|
||||
const feel = feelingOptions.find(p => p.value === feeling.value)
|
||||
return {
|
||||
vibe: vibe?.label || '',
|
||||
feeling: feel?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// Retrasa el desplazamiento para asegurar que el DOM esté actualizado
|
||||
setTimeout(() => {
|
||||
// Intenta buscar por ID (soporta varios formatos)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// Si no se encuentra, prueba otros formatos posibles
|
||||
if (!element) {
|
||||
// Intenta quitar el prefijo de guion bajo
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// Si aún no se encuentra, busca por texto del encabezado
|
||||
if (!element) {
|
||||
// Extrae el nombre del escenario desde el ancla
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// Coincidencia exacta o parcial
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// Resalta el bloque de destino
|
||||
element.style.backgroundColor = '#fdf2f8'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
vibePoint.value = ''
|
||||
feeling.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# Referencia de inspiración para escenarios de consumo B2C
|
||||
|
||||
## Introducción del capítulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Aplicaciones B2C', 'Estilo de vida', 'Experiencia emocional', 'Creación de ambiente']" coreOutput="Descubrir más de 15 inspiraciones de escenarios de vida" expectedOutput="Encontrar una dirección de producto que emocione a los usuarios">
|
||||
|
||||
Este documento resume <strong>direcciones creativas de aplicación de modelos LLM en escenarios de consumo B2C</strong>. A diferencia de los productos B2B, que se centran en eficiencia y puntos de dolor, los productos B2C se enfocan más en <strong>crear sensaciones, sugestiones psicológicas y ambiente</strong>, para que el usuario obtenga resonancia emocional y una experiencia agradable.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Selección rápida de ambiente
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Encuentra la inspiración que te toca</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Elige el ambiente que quieres y tu sensación actual. El sistema recomendará escenarios relacionados; haz clic en una etiqueta para saltar a la sección correspondiente.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="vibePoint" placeholder="Elige tipo de ambiente" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in vibeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="feeling" placeholder="Elige tu sensación actual" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in feelingOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
|
||||
Escenarios recomendados para {{ currentSelection.vibe }} × {{ currentSelection.feeling }}:
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<el-tag
|
||||
v-for="topic in recommendationTopics"
|
||||
:key="topic.title"
|
||||
type="danger"
|
||||
effect="light"
|
||||
style="cursor: pointer; margin-bottom: 4px;"
|
||||
@click="scrollToAnchor(topic.scenarioAnchor)"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
|
||||
Elegir de nuevo
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
---
|
||||
|
||||
## 1. Estilo de vida
|
||||
|
||||
> 💡 **Idea central**: convertir la rutina cotidiana en una experiencia con rituales y crear belleza en los detalles
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Asistente de despertar con ritual matutino | Integra API de clima y datos de calendario; un LLM genera planes matutinos personalizados; reproduce música a medida con altavoces inteligentes y enciende las luces gradualmente |
|
||||
| 2 | Creador de ambiente para vivir solo | Se conecta a dispositivos de hogar inteligente (luces, audio, difusor); el LLM ajusta parámetros según la hora y el estado de ánimo; aprende preferencias para optimizar continuamente |
|
||||
| 3 | Generador de planes reparadores para quedarse en casa el fin de semana | Se conecta a APIs de streaming para obtener listas de contenido y combina historial de preferencias para proponer película + comida + ambientación |
|
||||
| 4 | Radio calmante antes de dormir | Usa TTS para generar historias suaves, mezcla ruido blanco y reduce el volumen gradualmente; ajusta el contenido según datos de sueño |
|
||||
| 5 | Capturador de inspiración estética cotidiana | Analiza fotos del entorno mediante reconocimiento de imagen, genera sugerencias estéticas con LLM y recomienda contenido al estilo Pinterest/Xiaohongshu |
|
||||
|
||||
---
|
||||
|
||||
## 2. Acompañamiento emocional
|
||||
|
||||
> 💡 **Idea central**: aceptación y compañía incondicionales, como un contenedor amable para las emociones
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Confidente nocturno | Cifrado de extremo a extremo para proteger la privacidad; análisis emocional con LLM; memoria de largo plazo para guardar historias del usuario y acompañamiento en diálogos continuos |
|
||||
| 2 | Acompañante para sanar una ruptura | Algoritmo de identificación de etapas emocionales; apoyo por fases (desahogo → descarga → reconstrucción); recuperación RAG sobre una base de conocimiento psicológica |
|
||||
| 3 | Coach de respiración contra la ansiedad | Entrada de datos de biosensores (ritmo cardiaco/respiración), monitoreo en tiempo real del nivel de ansiedad, guía de respiración por voz y relajación muscular progresiva |
|
||||
| 4 | Mentor para reconstruir la confianza | Marco conversacional de psicología positiva; registro y retroalimentación sobre pequeños logros; técnicas de reestructuración cognitiva para cambiar el diálogo interno negativo |
|
||||
| 5 | Interpretación inteligente del diario emocional | Modelo NLP de reconocimiento emocional, análisis de series temporales para detectar patrones; visualización del mapa emocional y alertas predictivas |
|
||||
|
||||
---
|
||||
|
||||
## 3. Entretenimiento y ocio
|
||||
|
||||
> 💡 **Idea central**: crear experiencias inmersivas para que el entretenimiento sea un refugio emocional
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | DM inmersivo para juegos de misterio | El LLM genera ramificaciones de trama en tiempo real, usa síntesis de voz para interpretar NPC, ajusta dificultad y ritmo según la reacción de los jugadores; renderizado de escenas AR/VR |
|
||||
| 2 | NPC con alma en juegos de mundo abierto | Base de datos de memoria a largo plazo para historial de interacción; diálogos personalizados con LLM; computación afectiva para respuestas emocionales creíbles |
|
||||
| 3 | Generación de podcasts personalizados | Crea contenido exclusivo según el grafo de intereses del usuario; TTS clona voces preferidas; interacción en tiempo real para responder preguntas de oyentes |
|
||||
| 4 | Equipo de ambiente para concierto virtual | Renderizado de avatares, interacción en tiempo real con mensajes, varitas luminosas y objetos de apoyo virtuales; audio espacial para sensación de presencia |
|
||||
| 5 | Compañero de cocreación de novela interactiva | El LLM genera trama en tiempo real; las elecciones del usuario cambian la historia; múltiples finales y relaciones dinámicas entre personajes |
|
||||
|
||||
---
|
||||
|
||||
## 4. Crecimiento personal
|
||||
|
||||
> 💡 **Idea central**: crecer no es una penitencia, sino un viaje interesante de autodescubrimiento
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Testigo del crecimiento personal | Línea de tiempo visual para mostrar el progreso; marcado automático de hitos; comparativas de "mi yo de antes" frente a "mi yo actual" |
|
||||
| 2 | Coach gamificado de hábitos | Mecánicas de juego (experiencia, niveles, insignias), clasificaciones sociales y coach de IA con rol narrativo, por ejemplo "mentor de aventuras" |
|
||||
| 3 | Emparejador de compañeros para aprender habilidades | Algoritmo de matching por intereses y metas de aprendizaje, comunidades de grupos de estudio y mecanismo de registro con supervisión mutua |
|
||||
| 4 | Descubridor diario de pequeñas alegrías | Reconocimiento de imágenes para encontrar momentos bonitos; guía de gratitude journal; revisión semanal de momentos positivos |
|
||||
| 5 | Simulador de experiencias de vida | Simula resultados de decisiones con tramas ramificadas, compara vidas paralelas y visualiza consecuencias |
|
||||
|
||||
---
|
||||
|
||||
## 5. Interacción social
|
||||
|
||||
> 💡 **Idea central**: hacer que socializar sea ligero y natural, encontrando formas cómodas de conexión
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Generador de temas rompehielos | Recomendación inteligente de temas según ocasión y participantes; análisis de conversación en tiempo real para sugerir continuidad; rescate en momentos incómodos |
|
||||
| 2 | Redactor de ambiente para publicaciones sociales | Análisis de imágenes, textos en varios estilos con LLM (artístico/humorístico/profundo); recomendación inteligente de emojis y maquetación |
|
||||
| 3 | Planificador de ambiente para citas | Genera planes de cita según intereses de ambas partes; recomienda restaurantes/actividades y temas de conversación; alertas de clima y tráfico |
|
||||
| 4 | Animador de reuniones remotas | Biblioteca de juegos online, generador de actividades rompehielos, ruleta de temas; fondos virtuales y filtros para reforzar el ambiente |
|
||||
| 5 | Asistente de gestión de energía social | Evalúa el desgaste tras actividades sociales, sugiere recuperación (actividades en solitario) y planifica inteligentemente el calendario social |
|
||||
|
||||
---
|
||||
|
||||
## 6. Expresión creativa
|
||||
|
||||
> 💡 **Idea central**: todas las personas tienen creatividad; solo necesita despertarse
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Kit de emergencia contra el bloqueo creativo | Algoritmo de asociaciones entre dominios, generación de estímulos aleatorios, biblioteca de prompts creativos y herramienta de expansión tipo mapa mental |
|
||||
| 2 | Guía de exploración del estilo personal | Análisis de imagen para reconocer el estilo actual; recomendaciones de tendencias; prueba virtual de ropa/maquillaje; línea de evolución del estilo |
|
||||
| 3 | Asesor estético para journaling y diarios | Recomendación de plantillas de maquetación, generación de paletas, sugerencias decorativas, reconocimiento de escritura manual y embellecimiento de contenido |
|
||||
| 4 | Guía de composición y ambiente fotográfico | Reconocimiento de escena, sugerencias de composición, filtros recomendados, ajuste inteligente de parámetros de edición y ruta de aprendizaje fotográfico |
|
||||
| 5 | Emparejador de música y estado de ánimo | Análisis emocional de música, detección del estado de ánimo, listas personalizadas e historias/contexto de las canciones |
|
||||
|
||||
---
|
||||
|
||||
## 7. Exploración de viajes
|
||||
|
||||
> 💡 **Idea central**: viajar no es solo ver paisajes, sino sentir distintas formas de vida
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Guía para paseos urbanos | Agrega contenido de expertos locales, recomienda lugares poco conocidos, ofrece navegación AR, traducción en tiempo real y explicación por voz |
|
||||
| 2 | Generador de diario emocional de viaje | Clasifica y selecciona fotos automáticamente, genera relatos de viaje con LLM, marca ubicaciones en una línea de tiempo y crea videos con un clic |
|
||||
| 3 | Acompañante para viajar en solitario | Compartición de ubicación en tiempo real, alertas de seguridad, contactos de emergencia locales, guía de IA por voz y comunidad para viajeros solos |
|
||||
| 4 | Vista previa del ambiente del destino | Panoramas VR/360°, simulación de sonidos y aromas locales, contexto cultural y experiencia virtual de "probar vivir allí" |
|
||||
| 5 | Guía de ambiente para fotografía de viaje | Recordatorios de hora dorada, líneas de composición, puntos fotográficos locales y sugerencias de color grading |
|
||||
|
||||
---
|
||||
|
||||
## 8. Salud física y mental
|
||||
|
||||
> 💡 **Idea central**: la salud no es una meta, sino una forma amable de cuidarse
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Activador de motivación deportiva | Recomienda tipos de ejercicio según el estado del usuario, ofrece microejercicios de 5 minutos, retos gamificados y registro social de actividad |
|
||||
| 2 | Cocina de inspiración saludable | Reconocimiento de ingredientes en la nevera, recetas personalizadas, análisis nutricional y guía de cocina paso a paso |
|
||||
| 3 | Optimizador de ambiente para dormir mejor | Analiza datos de sueño, genera rituales nocturnos, sugiere mejoras ambientales (temperatura/humedad/luz) y ofrece despertar inteligente |
|
||||
| 4 | Guía de conciencia corporal | Meditación de escaneo corporal, relación entre emociones y partes del cuerpo, ejercicios de conexión cuerpo-mente y visualización de biofeedback |
|
||||
| 5 | Recordatorio de autocuidado | Monitorea intensidad de trabajo, recuerda descansos, sugiere microcuidados (beber agua/estirar/respirar) y registra autocuidado |
|
||||
|
||||
---
|
||||
|
||||
## 9. Exploración del conocimiento
|
||||
|
||||
> 💡 **Idea central**: aprender es una aventura interminable, y la curiosidad es la mejor maestra
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Guía gamificada de exploración del conocimiento | Visualiza mapas de conceptos, rutas de aprendizaje por niveles, sistema de insignias y mentor de IA con rol narrativo |
|
||||
| 2 | Compañero situacional para aprender idiomas | El LLM interpreta distintos roles en conversaciones, corrige pronunciación, explica contexto cultural y simula situaciones inmersivas |
|
||||
| 3 | Asistente para satisfacer la curiosidad | Conexión a Wikipedia/grafos de conocimiento, explicación simple de conceptos complejos, recomendaciones relacionadas y registro de curiosidades |
|
||||
| 4 | Inspirador de notas de lectura | Analiza libros, extrae y relaciona ideas, recomienda ángulos de reflexión, plantillas y embellecimiento de notas |
|
||||
| 5 | Creador de ambiente para compartir conocimiento | Genera tarjetas de conocimiento, optimiza copy para compartir, mejora visuales y ofrece retroalimentación de datos sociales |
|
||||
|
||||
---
|
||||
|
||||
## 10. Gestión de relaciones
|
||||
|
||||
> 💡 **Idea central**: las buenas relaciones requieren atención, y atenderlas no tiene por qué ser complicado
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Coach de comunicación para relaciones íntimas | Genera plantillas de expresión emocional, guía comunicación no violenta, ofrece frases para resolver conflictos y evalúa salud relacional |
|
||||
| 2 | Asistente de cuidado familiar | Recordatorios de fechas importantes (cumpleaños/aniversarios), sugerencias de mensajes afectivos, actividades familiares y creación de álbum familiar |
|
||||
| 3 | Creador de ambiente para mantener amistades | Registro de interacciones con amigos, temas comunes recomendados, organización de reuniones remotas y generación de línea de tiempo de recuerdos |
|
||||
| 4 | Planificador de confesiones y sorpresas | Genera planes personalizados de sorpresa, recomienda regalos, sugiere frases románticas, cronograma y recordatorios |
|
||||
| 5 | Guía para suavizar conflictos | Frases para bajar la intensidad emocional, guía para ponerse en el lugar del otro, pasos de reconciliación y seguimiento de reparación |
|
||||
|
||||
---
|
||||
|
||||
## 11. Acompañamiento de mascotas
|
||||
|
||||
> 💡 **Idea central**: las mascotas son familia, y su compañía merece ser registrada y valorada
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Diario antropomórfico de mascotas | Analiza comportamiento, genera diarios en primera persona, añade imágenes automáticamente y crea un "muro social" para la mascota |
|
||||
| 2 | Intérprete del comportamiento animal | Analiza videos de comportamiento, alerta sobre salud, ofrece consejos de entrenamiento y base de conocimiento por raza |
|
||||
| 3 | Planificador de tiempo de calidad con mascotas | Recomienda actividades, tutoriales de juguetes DIY, lugares pet-friendly y matching social para mascotas |
|
||||
| 4 | Generador de historias conmemorativas de mascotas | Selecciona fotos y videos, genera historias en línea de tiempo, añade música y crea álbumes/videos conmemorativos automáticamente |
|
||||
| 5 | Guía tranquila para nuevos cuidadores | Guía de cuidado por etapas, respuestas a problemas frecuentes, manejo de emergencias y comunidad de apoyo para principiantes |
|
||||
|
||||
---
|
||||
|
||||
## 12. Salud financiera
|
||||
|
||||
> 💡 **Idea central**: la libertad financiera no es el objetivo; la salud financiera sí
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Asistente de conciencia emocional del consumo | Analiza registros de gasto, relaciona emociones y consumo, alerta sobre compras impulsivas y propone satisfacciones alternativas |
|
||||
| 2 | Motivación visual para metas de ahorro | Visualiza progreso, renderiza escenas de sueños, celebra hitos y gamifica el hábito de ahorrar |
|
||||
| 3 | Aprendizaje ligero de finanzas personales | Entrega conocimiento fragmentado, casos situacionales, preguntas interactivas, pruebas y certificados |
|
||||
| 4 | Aliviador de ansiedad financiera | Evalúa salud financiera, ofrece técnicas de gestión del estrés, planes de pequeños pasos y apoyo psicológico financiero |
|
||||
| 5 | Juego de inversión de bajo monto | Simulación de inversión virtual, educación de riesgos, juego de portafolio y guía hacia inversión real de bajo monto |
|
||||
|
||||
---
|
||||
|
||||
## 13. Desarrollo profesional
|
||||
|
||||
> 💡 **Idea central**: la carrera profesional no es una vía fija, sino un territorio abierto para explorar
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Acompañante para la confusión profesional | Evaluación de intereses, inventario de habilidades, recomendaciones de información sectorial y conversaciones con mentor profesional |
|
||||
| 2 | Activador de sentido de logro laboral | Registro de resultados, extracción de valor, visualización de logros y recopilación de feedback positivo de colegas/clientes |
|
||||
| 3 | Asistente de ambiente social en el trabajo | Recomendación de temas profesionales, técnicas de networking, eventos del sector y optimización de contenido en LinkedIn |
|
||||
| 4 | Generador de inspiración para proyectos paralelos | Matching entre habilidades, intereses y demanda de mercado; casos de side projects, guía de inicio y comunidad |
|
||||
| 5 | Estación de confianza antes de entrevistas | Entrevistas simuladas, preparación de preguntas frecuentes, técnicas de confianza y sugerencias de imagen |
|
||||
|
||||
---
|
||||
|
||||
## 14. Espacio del hogar
|
||||
|
||||
> 💡 **Idea central**: el hogar no es solo un lugar donde vivir, sino un refugio para la mente
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Diseñador de ambiente para el hogar | Analiza fotos del espacio, recomienda estilos, muebles/decoración y previsualización AR |
|
||||
| 2 | Guía de transformación estacional del hogar | Recomienda temas por temporada, organización y exhibición, decoración festiva y listas de compra |
|
||||
| 3 | Magia para espacios pequeños | Algoritmos de optimización espacial, muebles multifuncionales, técnicas de orden y trucos de ampliación visual |
|
||||
| 4 | Creador de rituales domésticos | Diseño de rituales cotidianos (mañana/noche/fin de semana), recordatorios de ejecución y feedback sobre efecto |
|
||||
| 5 | Acompañamiento psicológico para decluttering | Evalúa valor emocional de objetos, guía pasos de descarte, ofrece apoyo psicológico y recomienda canales de donación/reciclaje |
|
||||
|
||||
---
|
||||
|
||||
## 15. Cocina y gastronomía
|
||||
|
||||
> 💡 **Idea central**: la comida es el lenguaje del amor, y cocinar es una forma de expresarlo
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Cocina reparadora para comer a solas | Reconocimiento de ingredientes en la nevera, recetas sencillas, guía paso a paso y estética de emplatado individual |
|
||||
| 2 | Diseño de ambiente para mesas festivas | Menús temáticos, propuestas de montaje de mesa, técnicas de ambientación y optimización de experiencia de invitados |
|
||||
| 3 | Emparejador de cocina y estado de ánimo | Algoritmo emoción-comida, recetas para regulación emocional, recomendación de comfort food y guía terapéutica de cocina |
|
||||
| 4 | Generador de confianza para principiantes en cocina | Recetas ultrafáciles, técnicas de rescate ante errores, frases de confianza y progresión gradual de dificultad |
|
||||
| 5 | Guía de ambiente para fotografía gastronómica | Consejos de emplatado, uso de luz natural, ángulos de captura, filtros y sugerencias de postproducción |
|
||||
|
||||
---
|
||||
|
||||
## 16. Estilo y vestimenta
|
||||
|
||||
> 💡 **Idea central**: vestirse es autoexpresión, y el estilo es la manifestación externa de lo interior
|
||||
|
||||
| N.º | Escenario de aplicación | Funcionalidad del escenario |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Mood board del outfit de hoy | Recomendaciones combinando clima, ocasión y estado de ánimo; prueba virtual, inspiración de conjuntos y gestión del armario |
|
||||
| 2 | Estilista de armario cápsula | Inventario del armario, combinaciones de prendas, planes de múltiples usos y sugerencias de compra para cubrir vacíos |
|
||||
| 3 | Viaje de exploración del estilo personal | Test de estilo, recomendación de referentes, ruta de evolución y construcción de confianza |
|
||||
| 4 | Creativo para reinventar ropa antigua | Inspiración para transformar ropa, nuevas combinaciones, detalles con accesorios y moda sostenible |
|
||||
| 5 | Asesor de look para ocasiones especiales | Interpretación del dress code, generación de propuestas, consejos de maquillaje/peinado y coordinación general |
|
||||
|
||||
---
|
||||
|
||||
## Principios centrales para diseñar productos B2C
|
||||
|
||||
### 1. De "función" a "sensación"
|
||||
|
||||
Los productos B2B se preguntan "qué problema resuelve esta función"; los productos B2C se preguntan "qué sensación aporta esta función".
|
||||
|
||||
| Pensamiento B2B | Pensamiento B2C |
|
||||
|---------|---------|
|
||||
| Mejorar la eficiencia | Ahorrar tiempo para hacer lo que gusta |
|
||||
| Reducir costes | Hacer que cada euro valga la pena |
|
||||
| Resolver puntos de dolor | Crear experiencias agradables |
|
||||
| Funcionalidad completa | Sensación bien lograda |
|
||||
|
||||
### 2. Tres niveles para crear ambiente
|
||||
|
||||
**Nivel sensorial**: diseño visual, auditivo y táctil
|
||||
- Colores cálidos
|
||||
- Sonidos relajantes
|
||||
- Animaciones fluidas
|
||||
|
||||
**Nivel emocional**: resonancia y guía emocional
|
||||
- Comprender el estado de ánimo del usuario
|
||||
- Ofrecer apoyo emocional
|
||||
- Crear emociones positivas
|
||||
|
||||
**Nivel de significado**: reconocimiento de valor y pertenencia
|
||||
- Hacer que el usuario se sienta comprendido
|
||||
- Crear sentido de pertenencia
|
||||
- Dar significado a la acción
|
||||
|
||||
### 3. El poder de la sugestión psicológica
|
||||
|
||||
El copy y el diseño de un producto B2C siempre transmiten sugestiones psicológicas:
|
||||
|
||||
- **Sugestión positiva**: "ya lo estás haciendo bien", "ve despacio, no pasa nada"
|
||||
- **Sugestión de pertenencia**: "muchas personas sienten lo mismo", "no estás solo"
|
||||
- **Sugestión de crecimiento**: "cada intento es progreso", "estás mejorando"
|
||||
|
||||
### 4. Ayudar al usuario a ser una mejor versión de sí mismo
|
||||
|
||||
Los mejores productos B2C no cambian al usuario; le ayudan a convertirse en la persona que quiere ser.
|
||||
|
||||
- No es "deberías...", sino "puedes..."
|
||||
- No es "tienes que...", sino "si quieres..."
|
||||
- No es "aún no eres suficiente...", sino "ya has..."
|
||||
|
||||
---
|
||||
|
||||
> 🌟 **Recuerda**: los usuarios B2C no compran funciones, sino sensaciones; no compran herramientas, sino compañía; no compran servicios, sino comprensión.
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,544 @@
|
||||
---
|
||||
title: 'Modelo Double Diamond: primero haz lo correcto, luego hazlo bien'
|
||||
description: 'Comprende las cuatro etapas de Discover, Define, Develop, Deliver para evitar crear prototipos antes de entender bien el problema.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>1.5 horas</strong>'
|
||||
</script>
|
||||
|
||||
# Modelo Double Diamond: primero haz lo correcto, luego hazlo bien
|
||||
|
||||
<a id="top-dd"></a>
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Double Diamond', 'Pensamiento de diseno', 'Analisis de necesidades', 'Diseno de soluciones']"
|
||||
coreOutput="1 definicion de problema mas clara y 1 punto de entrada de validacion mas razonable"
|
||||
expectedOutput="Dejar de precipitarse a dibujar prototipos, sabiendo primero pensar claramente en el problema y luego comparar soluciones"
|
||||
>
|
||||
|
||||
Muchas personas, la primera vez que hacen un producto, caen en la trampa mas facil: no es que "no se esfuercen lo suficiente", sino que entran demasiado rapido en la solucion.
|
||||
|
||||
Apenas les viene una direccion a la mente, ya estan pensando en como dibujar la pagina, donde poner los botones, si conectar IA, si hacer login y registro, con que herramienta hacer el prototipo. Despues de un rato de trabajo, descubren que el problema mas fundamental no se ha pensado claramente: el usuario realmente tiene este punto de dolor? Vale la pena resolver este problema ahora? Crees que estas avanzando en el proyecto, pero en realidad solo estas acelerando en la direccion equivocada.
|
||||
|
||||
El modelo Double Diamond existe precisamente para evitar esta situacion.
|
||||
|
||||
Su recordatorio mas valioso es: **"hacer lo correcto" y "hacerlo bien" son dos etapas completamente diferentes.** Si aun no has aclarado el problema y te precipitas a hacer prototipos, normalmente solo haras la direccion equivocada mas completa.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimo
|
||||
**Objetivo**: Despues de leer, sabras mejor cuando hacer productos, cuando pensar primero en el problema y cuando empezar a pensar en soluciones y prototipos, evitando precipitarte en la direccion equivocada desde el principio.
|
||||
|
||||
**Accion**: Sigue los cuatro pasos `Discover -> Define -> Develop -> Deliver`, haciendo solo lo que corresponde a la etapa actual en cada paso.
|
||||
|
||||
**Resultado**: Obtendras una definicion de problema mas clara, varias soluciones comparables y una version minima verificable.
|
||||
|
||||
**Enlaces rapidos**: [Que es el Double Diamond](#dd-what) · [Primer diamante](#dd-first) · [Como te ayuda la IA](#dd-ai)
|
||||
:::
|
||||
|
||||
## Aprenderas lo siguiente
|
||||
|
||||
1. Que es el modelo Double Diamond, y por que es adecuado para personas sin experiencia al hacer productos
|
||||
2. Que hacen las cuatro etapas Discover, Define, Develop y Deliver respectivamente
|
||||
3. Como distinguir entre "ahora debo seguir divergiendo" y "ahora debo empezar a converger"
|
||||
4. Como usar el modelo Double Diamond en productos de IA, diseno de prototipos y validacion de necesidades
|
||||
|
||||
<a id="dd-what"></a>
|
||||
## [1. Que es exactamente el modelo Double Diamond](#top-dd)
|
||||
|
||||
El modelo Double Diamond es un marco clasico de proceso de diseno promovido por el **Design Council** del Reino Unido. Representa un proceso completo de diseno e innovacion como dos formas de diamante consecutivas.
|
||||
|
||||
La razon de ser "diamantes" es que cada diamante contiene dos acciones opuestas pero igualmente importantes:
|
||||
|
||||
- **Divergencia**: primero abrir el campo de vision, ver mas posibilidades
|
||||
- **Convergencia**: luego reducir el alcance, tomar decisiones y priorizar
|
||||
|
||||
Todo el proceso tiene cuatro pasos:
|
||||
|
||||
1. **Discover**: entender ampliamente a los usuarios, problemas, entorno y mercado
|
||||
2. **Define**: extraer de la gran cantidad de informacion el problema central que realmente vale la pena resolver
|
||||
3. **Develop**: explorar multiples soluciones alrededor del problema central
|
||||
4. **Deliver**: filtrar, prototipar, probar y entregar la solucion mas adecuada
|
||||
|
||||
Si comprimes estos cuatro pasos en una frase facil de recordar, seria:
|
||||
|
||||
- **Primer diamante**: primero aclarar que problema resolver exactamente
|
||||
- **Segundo diamante**: luego decidir con que solucion resolverlo
|
||||
|
||||
Que es exactamente lo que dijiste muy bien:
|
||||
|
||||
- **Primer diamante: hacer lo correcto**
|
||||
- **Segundo diamante: hacerlo bien**
|
||||
|
||||
## 2. Por que el modelo Double Diamond es especialmente adecuado para principiantes
|
||||
|
||||
El ritmo mas comun de los principiantes al hacer productos suele ser:
|
||||
|
||||
- Se les ocurre una idea
|
||||
- Les parece que esta direccion es genial
|
||||
- Empiezan inmediatamente a dibujar prototipos
|
||||
- Haciendo y haciendo, descubren que las funciones son cada vez mas
|
||||
- Al final no saben que problema estan resolviendo exactamente
|
||||
|
||||
El valor del modelo Double Diamond no esta en complicar el proceso, sino en **obligarte a separar "entender el problema" y "disenar la solucion".**
|
||||
|
||||
Esto suena muy comun, pero en realidad es muy importante. Porque muchos productos fracasados no es que la ejecucion no fuera seria, sino:
|
||||
|
||||
- Eligieron el problema equivocado
|
||||
- Malentendieron al usuario
|
||||
- Se bloquearon demasiado pronto en una solucion
|
||||
- Gastaron mucho tiempo en pulir detalles sin validar la direccion
|
||||
|
||||
El modelo Double Diamond te esta recordando constantemente:
|
||||
|
||||
- No porque una idea te parezca facil, asumas que el problema ya esta confirmado
|
||||
- No porque una solucion pueda implementarse, asumas que vale la pena hacerla
|
||||
- No porque un prototipo parezca completo, asumas que los usuarios realmente lo necesitaran
|
||||
|
||||
<a id="dd-first"></a>
|
||||
## [3. Primer diamante: hacer lo correcto](#top-dd)
|
||||
|
||||
El primer diamante se centra en **el problema en si**, no en la solucion.
|
||||
|
||||
Puedes entenderlo como una frase: **no te precipites, primero averigua si realmente vale la pena hacerlo.**
|
||||
|
||||
### 3.1 Discover: primero abre el espacio del problema
|
||||
|
||||
La tarea central de la fase Discover es **investigar ampliamente, no llegar rapido a conclusiones.**
|
||||
|
||||
Lo que normalmente se hace en este paso incluye:
|
||||
|
||||
- Ver como los usuarios actuan en escenarios reales
|
||||
- Entrevistar a usuarios potenciales, entender cuando fue la ultima vez que encontraron el problema
|
||||
- Observar como se las arreglan actualmente
|
||||
- Ver como manejan la competencia y las soluciones alternativas
|
||||
- Recoger informacion de mercado, procesos, restricciones y relaciones aguas arriba/aguas abajo
|
||||
|
||||
Muchas personas confunden Discover con "ver mas informacion". Pero lo mas critico es: **tienes que entender a las personas y los escenarios, no solo buscar un monton de informacion.**
|
||||
|
||||
Por ejemplo, si quieres hacer una herramienta de "IA que ayuda a organizar actas de reuniones", en la fase Discover deberias prestar mas atencion a:
|
||||
|
||||
- Despues de la reunion, donde duele mas exactamente al usuario
|
||||
- Es dificil tomar notas, organizarlas o sincronizarlas
|
||||
- Ahora escriben ellos mismos, le piden al becario, escuchan la grabacion, o simplemente no organizan
|
||||
- Que escenarios de reunion necesitan mas actas y cuales no las necesitan en absoluto
|
||||
|
||||
El objetivo mas importante de este paso no es llegar a una respuesta, sino **no asumir demasiado pronto que ya conoces la respuesta.**
|
||||
|
||||
### 3.2 Define: extraer el problema central de un monton de informacion
|
||||
|
||||
Si Discover abre el campo de vision, Define empieza a cerrarlo.
|
||||
|
||||
Lo que hay que hacer en la fase Define no es mantener todas las observaciones, sino preguntar:
|
||||
|
||||
- Cual es el problema que realmente merece la pena resolver primero
|
||||
- Que problema aparece con mas frecuencia, es el mas doloroso y el mas valioso
|
||||
- En que escenario unico debemos centrarnos en la primera version
|
||||
|
||||
El nucleo de este paso es converger un tema amplio en una definicion de problema clara.
|
||||
|
||||
Por ejemplo, al principio dices:
|
||||
|
||||
> Quiero hacer una herramienta con IA para mejorar la eficiencia de las reuniones.
|
||||
|
||||
En la fase Define, una mejor expresion podria ser:
|
||||
|
||||
> Primero resolvamos el problema de que los equipos de proyecto, despues de reuniones de colaboracion de 30 a 60 minutos, no pueden producir en 10 minutos un acta con tareas pendientes, responsables y fechas limite.
|
||||
|
||||
En este punto el problema empieza a aclararse:
|
||||
|
||||
- Quien es el usuario
|
||||
- Cual es el escenario
|
||||
- Cual es el punto de bloqueo
|
||||
- Cual es el criterio de exito
|
||||
|
||||
La esencia de Define es **converger de "hay muchos problemas" a "que problema resolver primero esta vez".**
|
||||
|
||||
## 4. Segundo diamante: hacerlo bien
|
||||
|
||||
Cuando completas el primer diamante, solo entonces es realmente apropiado entrar en el segundo. Porque ahora no estas resolviendo una direccion vaga, sino un problema concreto que ha sido convergido.
|
||||
|
||||
### 4.1 Develop: diverge soluciones alrededor del problema central
|
||||
|
||||
El foco de la fase Develop es **explorar multiples soluciones posibles alrededor del mismo problema.**
|
||||
|
||||
Nota, la divergencia aqui es diferente de la fase Discover.
|
||||
|
||||
- La divergencia de Discover explora el espacio de problemas
|
||||
- La divergencia de Develop explora el espacio de soluciones
|
||||
|
||||
Por ejemplo, en el caso de las actas de reuniones, al llegar a la fase Develop, puedes empezar a pensar:
|
||||
|
||||
- Hacer una herramienta web o un plugin de reuniones
|
||||
- Procesar despues de subir la grabacion o registrar en tiempo real
|
||||
- Solo hacer resumenes o enfocarse en extraer tareas pendientes
|
||||
- Enfatizar la eficiencia individual o la sincronizacion del equipo
|
||||
- Dar al usuario libertad de edicion o producir directamente plantillas estructuradas
|
||||
|
||||
Este paso es ideal para brainstorming y para abrir las soluciones con el equipo.
|
||||
|
||||
Pero hay un requisito previo: **todas las soluciones deben servir al mismo problema ya definido.**
|
||||
Si el problema no esta claramente definido, Develop facilmente se convierte de nuevo en funciones volando en todas direcciones.
|
||||
|
||||
### 4.2 Deliver: elegir la solucion, hacer prototipos, probar y entregar
|
||||
|
||||
La fase Deliver es la fase de convergencia del segundo diamante.
|
||||
|
||||
Lo que debes hacer aqui no es seguir pensando mas, sino empezar a juzgar:
|
||||
|
||||
- Que solucion es mas adecuada para la etapa actual
|
||||
- Que version es la mas pequena pero mas util
|
||||
- Que funciones deben hacerse primero y cuales pueden esperar
|
||||
- Como hacer prototipos, pruebas y validacion a pequena escala
|
||||
|
||||
Muchas personas piensan que Deliver equivale a "lanzamiento". Pero su significado mas preciso es: **convertir una solucion en algo que se pueda probar, verificar e iterar.**
|
||||
|
||||
Puede ser:
|
||||
|
||||
- Un diagrama de flujo de baja fidelidad
|
||||
- Un prototipo en Figma
|
||||
- Un MVP funcional
|
||||
- Una prueba de usuario a pequena escala
|
||||
- Una version iterada despues de retroalimentacion real
|
||||
|
||||
El punto de Deliver no es "entrega perfecta", sino **poner la solucion en un entorno real para verificarla lo antes posible.**
|
||||
|
||||
## 5. Una tabla de comparacion facil de recordar
|
||||
|
||||
Si siempre te confundes con las cuatro etapas, puedes recordar directamente esta version:
|
||||
|
||||
| Etapa | Que estas haciendo | Palabras clave | Productos comunes |
|
||||
| --- | --- | --- | --- |
|
||||
| Discover | Entender el problema | Investigacion, observacion, entrevistas, recopilar informacion | Insights de usuarios, notas de escenario, lista de problemas |
|
||||
| Define | Definir el problema | Extraer, enfocar, priorizar, reescribir el problema | Definicion del problema, prioridades, punto de entrada MVP |
|
||||
| Develop | Explorar soluciones | Brainstorming, comparacion, cocreacion, conceptos de prototipo | Lista de soluciones, bocetos de flujo, direccion del prototipo |
|
||||
| Deliver | Verificar soluciones | Prototipos, pruebas, iteracion, entrega | Prototipos, retroalimentacion de pruebas, version optimizada |
|
||||
|
||||
Comprimiendolo aun mas:
|
||||
|
||||
- **Discover / Define**: resolver "hacer lo correcto"
|
||||
- **Develop / Deliver**: resolver "hacerlo bien"
|
||||
|
||||
## 6. Los errores mas comunes con el modelo Double Diamond
|
||||
|
||||
### 6.1 Pasar directamente a Deliver sin Discover
|
||||
|
||||
Este es el mas comun. Muchas personas apenas tienen una idea y ya estan dibujando prototipos, escribiendo PRDs, conectando modelos, haciendo paginas.
|
||||
|
||||
El problema no es que no trabajes en serio, sino que puede que ni siquiera hayas confirmado si el problema vale la pena resolver.
|
||||
|
||||
### 6.2 Discover mucho tiempo, pero nunca llegar a Define
|
||||
|
||||
Otro extremo es investigar continuamente, leer informacion constantemente, hacer entrevistas sin parar, pero sin atreverse a converger.
|
||||
|
||||
El Double Diamond no es para que diverjas infinitamente, sino para recordarte: despues de la divergencia debes entrar en la evaluacion y priorizacion.
|
||||
|
||||
### 6.3 Despues de Define, cambiar el problema a escondidas
|
||||
|
||||
Muchos equipos, al llegar a Develop, modifican la definicion del problema para adaptarse a una solucion que es mas facil de implementar.
|
||||
|
||||
Esto es peligroso. Porque puede que no estes resolviendo el problema, sino buscando justificaciones para la solucion que te gusta.
|
||||
|
||||
### 6.4 Confundir Deliver con "lanzamiento completo"
|
||||
|
||||
Deliver no significa que debas completar todo el producto para considerar que ha terminado. Muchas veces, un prototipo que se puede probar o una ronda de pruebas con usuarios reales ya es un buen deliver.
|
||||
|
||||
## 7. Como usar el modelo Double Diamond en productos de IA
|
||||
|
||||
Los productos de IA son especialmente propensos a caer en la trampa de "las capacidades primero", porque las capacidades del modelo parecen demasiado atractivas. Querras pensar directamente en:
|
||||
|
||||
- Deberia conectar multimodalidad?
|
||||
- Deberia hacer un Agent?
|
||||
- Deberia anadir workflows?
|
||||
- Deberia conectar voz, imagen, busqueda en la web?
|
||||
|
||||
Pero el modelo Double Diamond te obliga a preguntar primero:
|
||||
|
||||
- En que paso exactamente el usuario esta bloqueado
|
||||
- Este bloqueo requiere SI o SI IA?
|
||||
- Sin IA, cual es exactamente la mayor debilidad del metodo actual
|
||||
- Despues de anadir IA, cual es el progreso mas importante
|
||||
|
||||
Esto te ayuda a evitar una situacion comun: **capacidades fuertes, valor debil.**
|
||||
|
||||
Una secuencia practica es:
|
||||
|
||||
1. En la fase Discover, observar como los usuarios manejan las tareas actualmente
|
||||
2. En la fase Define, escribir el escenario mas doloroso como una definicion de problema clara
|
||||
3. En la fase Develop, comparar que capacidades de IA sirven mejor a este problema
|
||||
4. En la fase Deliver, hacer una version minima para que usuarios reales la prueben
|
||||
|
||||
## 8. Una plantilla Double Diamond que puedes usar directamente
|
||||
|
||||
Si estas haciendo tu propio producto, puedes seguir esta secuencia:
|
||||
|
||||
### Discover
|
||||
|
||||
- Quien es el usuario que he observado?
|
||||
- Cuando fue la ultima vez que encontraron este problema?
|
||||
- Como lo resuelven ahora?
|
||||
- Cual es la parte mas molesta, lenta o que menos confianza les da?
|
||||
|
||||
### Define
|
||||
|
||||
- De todos estos problemas, cual merece la pena resolver primero?
|
||||
- Que escenario es el mas frecuente o critico?
|
||||
- A quien serviremos primero en la primera version, y que problema resolveremos?
|
||||
- Despues de resolverlo exitosamente, como cambiara el estado del usuario?
|
||||
|
||||
### Develop
|
||||
|
||||
- Para este problema, que soluciones posibles hay?
|
||||
- Que soluciones son las mas ligeras, rapidas y faciles de verificar?
|
||||
- Que es imprescindible y que puede esperar?
|
||||
|
||||
### Deliver
|
||||
|
||||
- Cual es lo minimo que podemos entregar para verificar esta direccion?
|
||||
- Es un diagrama de flujo, un prototipo o un MVP?
|
||||
- A quien necesitamos pedir que pruebe?
|
||||
- Despues de la prueba, como decidimos si continuar, modificar o abandonar?
|
||||
|
||||
## 9. Un ejemplo que incluso un principiante puede entender
|
||||
|
||||
Supongamos que quieres hacer una herramienta de IA para "ayudar a universitarios a preparar su curriculum de busqueda de empleo".
|
||||
|
||||
Muchas personas entrarian directamente en el segundo diamante, pensando:
|
||||
|
||||
- Deberia hacer embellecimiento con un clic?
|
||||
- Deberia hacer reescritura inteligente?
|
||||
- Deberia hacer matching automatico con la descripcion del puesto?
|
||||
- Deberia generar una presentacion personal?
|
||||
|
||||
Pero siguiendo el modelo Double Diamond, un mejor proceso seria:
|
||||
|
||||
### Primer diamante
|
||||
|
||||
**Discover**
|
||||
|
||||
- Hablar con graduados recientes sobre cuando fue la ultima vez que modificaron su curriculum
|
||||
- Ver como pasan de un curriculum viejo a una nueva version
|
||||
- Entender si lo que mas les frustra es "no saber escribir", "no saber modificar" o "no saber juzgar si esta bien"
|
||||
|
||||
**Define**
|
||||
|
||||
- Finalmente converger en un problema mas concreto:
|
||||
- No es "los universitarios no saben hacer curriculums"
|
||||
- Sino "los estudiantes que envian su primera candidatura de practica tienen dificultades para reescribir sus experiencias existentes de forma adaptada al puesto, por lo que retrasan el envio"
|
||||
|
||||
### Segundo diamante
|
||||
|
||||
**Develop**
|
||||
|
||||
- Pensar varias soluciones: biblioteca de plantillas, reescritura con IA, comparacion con el puesto, puntuacion del curriculum, referencia de casos
|
||||
|
||||
**Deliver**
|
||||
|
||||
- La primera version solo hace "reescribir los bullet points de experiencias segun la descripcion del puesto"
|
||||
- Probar con 5 estudiantes, ver si enviaran su primera version mas rapido
|
||||
|
||||
Descubriras que, una vez que el primer diamante se hace solidamente, el segundo diamante se vuelve mucho mas claro.
|
||||
|
||||
## 10. Resumen
|
||||
|
||||
Lo mas poderoso del modelo Double Diamond es que te ayuda a descomponer una masa confusa en cuatro acciones mas claras:
|
||||
|
||||
- Primero diverge para entender el problema
|
||||
- Luego converge para definir el problema
|
||||
- Luego diverge para explorar soluciones
|
||||
- Finalmente converge para entregar la solucion
|
||||
|
||||
No te hace mas lento, sino que te hace **evitar muchos desvios que parecen ocupados pero van en la direccion equivocada.**
|
||||
|
||||
Especialmente en la era de la IA, donde hacer cosas se vuelve cada vez mas rapido, el modelo Double Diamond se vuelve aun mas importante. Porque cuando "hacerlo" es cada vez mas facil, la capacidad verdaderamente escasa se convierte en: **estas resolviendo un problema que vale la pena resolver, y lo estas haciendo de la forma adecuada.**
|
||||
|
||||
Recuerda solo esta frase:
|
||||
|
||||
**Primero haz lo correcto, luego hazlo bien.**
|
||||
|
||||
<a id="dd-ai"></a>
|
||||
## [11. Como usar la IA para recorrer el proceso Double Diamond](#top-dd)
|
||||
|
||||
El modelo Double Diamond en si no es una herramienta de IA, pero la IA es muy adecuada para actuar como "acelerador" en las cuatro etapas. La clave no es que la IA tome decisiones por ti, sino que te ayude a expandir tu campo de vision, organizar informacion, comparar soluciones y generar materiales de validacion.
|
||||
|
||||
### 11.1 En la fase Discover, usar la IA para hacer una primera preparacion de informacion
|
||||
|
||||
Antes de las entrevistas e investigacion formales, puedes pedir a la IA que haga un barrido ligero de problemas, como:
|
||||
|
||||
- Que soluciones alternativas comunes existen en el mercado
|
||||
- De que se quejan mas los usuarios en comunidades publicas
|
||||
- En que escenarios y grupos de personas es mas frecuente este problema
|
||||
- Que suelen ignorar los productos existentes
|
||||
|
||||
Este paso no puede sustituir la investigacion real, pero es ideal para construir rapidamente un mapa de problemas.
|
||||
|
||||
Una entrada simple para principiantes podria ser:
|
||||
|
||||
```text
|
||||
Quiero hacer una herramienta para ayudar a universitarios a modificar su curriculum.
|
||||
No me des ideas de funciones todavia, primero ayudame a ver que problemas encuentra mas a menudo la gente con este tema.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Mapa inicial de problemas:
|
||||
|
||||
1. No saber que experiencias incluir
|
||||
2. No saber como adaptar el curriculum a cada puesto
|
||||
3. Modificar muchas versiones sin certeza de si esta bien
|
||||
4. Necesitar que alguien lo revise, pero no querer molestar siempre
|
||||
5. Por la incertidumbre, posponer continuamente el envio
|
||||
```
|
||||
|
||||
La funcion de este tipo de resultado no es sacar conclusiones por ti, sino ayudarte a entrar mas rapido en Discover.
|
||||
|
||||
### 11.2 En la fase Define, dejar que la IA te ayude a converger la definicion del problema
|
||||
|
||||
Despues de recoger mucha informacion, lo mas dificil para mucha gente es comprimir el problema en una frase verdaderamente clara. Puedes pasar tus notas de investigacion a la IA y pedirle que las comprima en varias definiciones de problema candidatas:
|
||||
|
||||
```text
|
||||
A continuacion estan los comentarios de usuarios y notas de investigacion que he recogido en la fase Discover:
|
||||
[pega el contenido]
|
||||
|
||||
Por favor ayudame a hacer tres cosas:
|
||||
1. Identificar los patrones de problemas que aparecen con mas frecuencia
|
||||
2. Organizar 3 problemas que merezca la pena priorizar, segun frecuencia, intensidad de dolor y verificabilidad
|
||||
3. Escribir cada problema como una definicion concreta en una frase
|
||||
```
|
||||
|
||||
Asi te sera mas facil entrar en Define, en lugar de quedarte atrapado en "hay muchos problemas".
|
||||
|
||||
Puedes incluso hacer la entrada muy simple:
|
||||
|
||||
```text
|
||||
Los problemas que he recogido son:
|
||||
1. La gente no sabe que poner en el curriculum
|
||||
2. La gente no sabe como modificarlo
|
||||
3. La gente siempre siente que no esta bien modificado y no se atreve a enviarlo
|
||||
|
||||
Ayudame a ver, cual problema es mas adecuado para resolver primero en la primera version.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Problema sugerido para priorizar:
|
||||
|
||||
"Los estudiantes que envian su primera candidatura de practica no estan seguros de si su curriculum ha alcanzado el nivel necesario para enviar, por lo que lo modifican repetidamente y retrasan el envio."
|
||||
|
||||
Razones:
|
||||
1. Este problema es mas concreto
|
||||
2. Puede explicar el comportamiento de procrastinacion
|
||||
3. Es mas facil disenar una version pequena para verificar
|
||||
```
|
||||
|
||||
Este tipo de resultado es muy util porque te ayuda a converger de un monton de problemas vagos a una definicion mas como un punto de partida para un MVP.
|
||||
|
||||
### 11.3 En la fase Develop, usar la IA para diverger multiples soluciones
|
||||
|
||||
Muchas personas, una vez definido el problema, se fijan solo en la primera solucion que les viene a la mente. La IA es ideal en este paso para forzarte a diverger:
|
||||
|
||||
```text
|
||||
Ya he definido un problema central: [tu definicion del problema]
|
||||
Por favor no me des una respuesta final directamente, sino que propongas 2-3 direcciones de solucion desde cada uno de estos angulos:
|
||||
1. El MVP mas ligero
|
||||
2. La solucion mas adecuada para verificar la necesidad
|
||||
3. La solucion mas adecuada para mejorar la experiencia
|
||||
4. Una solucion que no dependa de IA
|
||||
5. Una solucion que dependa de IA
|
||||
Finalmente, compara las ventajas, riesgos y costos de verificacion de cada solucion.
|
||||
```
|
||||
|
||||
Asi no te ataras demasiado pronto a una unica solucion.
|
||||
|
||||
Una entrada simple podria ser:
|
||||
|
||||
```text
|
||||
Mi definicion de problema ahora es:
|
||||
"Los universitarios no estan seguros de si su curriculum ya se puede enviar, por lo que siguen posponiendo el envio."
|
||||
|
||||
Por favor ayudame a pensar en 4 soluciones diferentes, no me des solo una.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Solucion 1: Checklist de "preparacion para enviar" del curriculum
|
||||
Solucion 2: Reescritura adaptada segun la descripcion del puesto
|
||||
Solucion 3: Subir el curriculum y recibir alertas de riesgo
|
||||
Solucion 4: Proporcionar comparacion con casos excelentes para ayudar al usuario a juzgar la distancia
|
||||
```
|
||||
|
||||
En este punto te sera mas facil entrar en "comparar soluciones", en lugar de fijarte solo en la reescritura con IA desde el principio.
|
||||
|
||||
### 11.4 En la fase Deliver, usar la IA para generar textos de prototipos y materiales de prueba
|
||||
|
||||
Cuando entras en la fase Deliver, la IA es muy adecuada para acelerar estos trabajos:
|
||||
|
||||
- Generar textos de pagina para prototipos de baja fidelidad
|
||||
- Organizar un guion de prueba de usuario
|
||||
- Generar multiples versiones comparables de titulos, botones y descripciones
|
||||
- Organizar la retroalimentacion y la lista de problemas despues de las pruebas
|
||||
|
||||
Por ejemplo, puedes pedir a la IA que genere un guion de prueba de usuario de 20 minutos, o que te ayude a resumir la retroalimentacion de 5 usuarios en criterios de "continuar / modificar direccion / pausar".
|
||||
|
||||
Una entrada minima podria ser:
|
||||
|
||||
```text
|
||||
He hecho un prototipo muy simple:
|
||||
el usuario sube su curriculum y el sistema le indica que partes aun no estan listas para enviar.
|
||||
|
||||
Por favor ayudame a generar un guion de prueba de usuario de 15 minutos.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Guion de prueba de 15 minutos:
|
||||
|
||||
1. Primero pedir al usuario que describa su ultima experiencia enviando un curriculum
|
||||
2. Dejar que el usuario complete independientemente la subida del curriculum
|
||||
3. Observar si entiende los resultados de la retroalimentacion
|
||||
4. Preguntar: de estas indicaciones, cuales son las mas utiles y cuales te confunden
|
||||
5. Preguntar: antes del proximo envio, te gustaria usar esto de nuevo?
|
||||
```
|
||||
|
||||
Este tipo de resultado es muy practico porque te ayuda a pasar de "ya termine el prototipo" a "como lo pruebo ahora".
|
||||
|
||||
### 11.5 Dejar que la IA actue como "guardian de etapas"
|
||||
|
||||
El problema mas comun del modelo Double Diamond es que la gente se salta etapas. Puedes pedir directamente a la IA que actue como guardian, recordandote en que etapa estas realmente:
|
||||
|
||||
```text
|
||||
Por favor actua como coach de proceso de producto.
|
||||
A continuacion esta el estado actual de mi proyecto: [tu descripcion]
|
||||
Por favor juzga en que etapa estoy mas: Discover, Define, Develop o Deliver.
|
||||
Y dime:
|
||||
1. Me he saltado demasiado pronto a la siguiente etapa?
|
||||
2. Cual es la accion mas importante que debo completar en la etapa actual?
|
||||
3. Que cosas no debo hacer ahora?
|
||||
```
|
||||
|
||||
Esto es especialmente util para principiantes, porque es facil "empezar a dibujar prototipos antes de haber aclarado el problema".
|
||||
|
||||
## 📚 Tareas
|
||||
|
||||
Por favor completa las siguientes tareas basandote en el contenido anterior:
|
||||
|
||||
1. Elige una idea de producto que quieras hacer recientemente, y escribe un borrador de sus cuatro pasos: Discover, Define, Develop, Deliver
|
||||
2. En la fase Define, obligate a comprimir el problema en una frase concreta
|
||||
3. En la fase Develop, lista al menos 3 soluciones diferentes, en lugar de fijarte solo en la primera que se te ocurra
|
||||
4. En la fase Deliver, escribe una version minima de verificacion que puedas entregar en una semana
|
||||
|
||||
## Lectura adicional
|
||||
|
||||
Este articulo se basa principalmente en los materiales oficiales del Design Council sobre el Double Diamond, adecuados para seguir profundizando:
|
||||
|
||||
- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
|
||||
- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
|
||||
- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'De donde sacar ideas: 3 fuentes de referencia mas adecuadas para principiantes'
|
||||
description: 'Articulo introductorio de ideas de producto para lectores sin experiencia. Lista sitios web, fuentes de tendencias y listas de VC para encontrar direcciones especificas.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>1.5 horas</strong>'
|
||||
</script>
|
||||
|
||||
# De donde sacar ideas: 3 fuentes de referencia mas adecuadas para principiantes
|
||||
|
||||
<a id="top-idea-sources"></a>
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Buscar ideas', 'Direccion de producto', 'Descubrimiento de necesidades', 'Observacion de la industria']"
|
||||
coreOutput="1 direccion de producto mas concreta y que valga la pena investigar"
|
||||
expectedOutput="Saber donde buscar, como analizar y que mirar primero, sin quedarse solo con ideas vagas como 'AI + cierto sector'"
|
||||
>
|
||||
|
||||
Muchas personas se quedan atascadas en el primer paso, no porque no tengan ninguna inspiracion, sino porque despues de ver mucho contenido, lo que les queda en la cabeza son palabras grandes:
|
||||
|
||||
- AI for education
|
||||
- AI for healthcare
|
||||
- AI for finance
|
||||
- AI agent for business
|
||||
|
||||
Todas estas aun no son ideas. Solo te dicen que "la direccion es muy grande", pero no te dicen:
|
||||
|
||||
- Quien las usa
|
||||
- En que escenario se usan
|
||||
- Como se las arreglan ahora
|
||||
- Que paso vale la pena atacar primero
|
||||
|
||||
Este articulo no habla de metodologias abstractas, directamente te ofrece un conjunto de fuentes mas utiles.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimo
|
||||
**Objetivo**: Despues de leer, sabras a donde ir cuando no tengas ideas, cuales enlaces son buenos para ver "necesidades concretas", cuales para ver "tendencias" y cuales para ver "negocios reales".
|
||||
|
||||
**Accion**: Primero revisa una ronda de listas de ideas, luego una ronda de pequenos productos que ya generan dinero, despues mira tendencias y fuentes mas orientadas a negocios, y finalmente quedate con 1 direccion que estes dispuesto a seguir investigando.
|
||||
|
||||
**Resultado**: Obtendras 1 direccion mas concreta y que valga la pena verificar, en lugar de quedarte con palabras grandes.
|
||||
|
||||
**Enlaces rapidos**: [Lista de aplicaciones de referencia](#idea-apps) · [Fuentes de tendencias](#idea-trends) · [Fuentes mas orientadas a negocios](#idea-business) · [Fuentes de VC / aceleradoras](#idea-vc) · [Camino mas corto](#idea-path) · [Como te ayuda la IA](#idea-ai)
|
||||
:::
|
||||
|
||||
## Aprenderas lo siguiente
|
||||
|
||||
1. Que sitios web son adecuados para buscar ideas directamente
|
||||
2. Que sitios web son adecuados para ver pequenos productos que ya generan dinero
|
||||
3. Que fuentes son adecuadas para ver tendencias y cambios en la industria
|
||||
4. Que fuentes estan mas cerca de negocios reales y pagos reales
|
||||
5. Un camino minimo adecuado para personas sin experiencia
|
||||
|
||||
<a id="idea-apps"></a>
|
||||
## [1. Lista de aplicaciones de referencia: primero mira lo que otros ya estan haciendo](#top-idea-sources)
|
||||
|
||||
Este es el mejor punto de partida para principiantes, porque es lo mas concreto.
|
||||
|
||||
### Primer nivel: abres y ya tienes una lista de ideas, solo elige
|
||||
|
||||
- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
El uso principal de este subreddit es: usuarios reales publican directamente "Ojala alguien hiciera un XX". Cada post suele ser una necesidad de producto concreta, con algo de descripcion del escenario. Entra y ordena por `Top -> Past Month` o `Top -> Past Year`, en 20 minutos puedes escanear un lote de necesidades reales.
|
||||
- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
Similar al anterior, pero mas orientado a software / Apps. El formato comun de los posts es "Necesito una aplicacion que pueda hacer XX", con mayor granularidad, muchos son nichos pequenos y atractivos.
|
||||
- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
Mas completo que los dos anteriores. Muchos posts no son solo una necesidad de una linea, sino que incluyen un poco de analisis de mercado, modelo de negocio y por que vale la pena hacerlo ahora.
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
Publica semanalmente ideas de startup no validadas. Los campos comunes incluyen usuario objetivo, forma de monetizacion y enfoque de validacion inicial. Formato uniforme, ideal para escaneo rapido.
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
Usa IA para generar ideas de startup, puedes seguir navegando. La calidad es variable, pero es muy util para estimular la inspiracion cuando "no tienes ninguna sensacion", y luego profundizar por tu cuenta en escenarios mas especificos.
|
||||
|
||||
### Segundo nivel: mira los pequenos productos rentables que otros ya hacen, e infiere ideas
|
||||
|
||||
La logica de este tipo de plataformas es: otros ya han validado la necesidad, e incluso ya estan ganando dinero. Tu los miras no para copiar, sino para ver "que problemas pequenos ya tienen clientes dispuestos a pagar".
|
||||
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
Recopila muchos casos reales de pequenos negocios, generalmente con entrevistas a fundadores, datos de ingresos y proceso de inicio. Enfocate en los pequenos productos con ingresos mensuales de 10 mil a 100 mil dolares; suelen ser mas de nicho y mas cercanos a la escala de productos que una persona comun puede entender.
|
||||
- [Indie Hackers — Products](https://www.indiehackers.com/products)
|
||||
Donde los desarrolladores independientes muestran sus productos; muchos publican sus ingresos y crecimiento. Ordena por ingresos y mira que problemas concretos resuelven los productos que ganan de miles a decenas de miles de dolares al mes.
|
||||
- [MicroConf Blog](https://microconf.com/blog)
|
||||
Orientado a Micro SaaS. Ideal para ver cortes de productos "suficientemente pequenos, pero donde alguien esta dispuesto a pagar".
|
||||
- [1000 Tools](https://1000.tools/)
|
||||
Sitio de agregacion de herramientas de IA. Ideal para ver que categorias ya tienen competidores, pero con calidad mediocre, o que direcciones aun no estan bien cubiertas en ciertos mercados verticales.
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
Mira los tipos de productos que aparecen repetidamente. No te fijes solo en el numero uno, enfocate en que categorias tienen actividad continua pero aun sin un ganador claro.
|
||||
- [BetaList](https://betalist.com/)
|
||||
Ideal para ver productos en etapa temprana y equipos que aun estan probando direcciones.
|
||||
|
||||
### Al mirar productos, no mires solo el producto en si; mira tambien las malas resenas y los "servicios de reemplazo"
|
||||
|
||||
- [G2](https://www.g2.com/)
|
||||
Modo de uso: mira las resenas de 1 y 2 estrellas. Las malas resenas suelen esconder "que parte del producto existente no esta bien hecha".
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
Modo de uso: similar a G2, ideal para ver quejas reales sobre productos SaaS.
|
||||
- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhubajie
|
||||
Modo de uso: busca "hacer por ti", "organizar por ti", "transcribir por ti". Si cierto servicio manual se vende bien, detras suele haber un proceso repetible y susceptible de ser convertido en producto.
|
||||
|
||||
La senal de juicio es simple:
|
||||
|
||||
- Los usuarios ya se estan quejando de las herramientas existentes
|
||||
- Los usuarios ya estan pagando para que alguien haga el trabajo por ellos
|
||||
- Los usuarios ya estan invirtiendo mucho trabajo manual y tiempo en este proceso
|
||||
|
||||
### Cuarto nivel: mira videos, hay quien directamente te desglosa ideas
|
||||
|
||||
Si no te gusta navegar foros ni rankings, y prefieres "alguien que me desglose las ideas", entonces los videos y podcasts tambien son muy utiles.
|
||||
|
||||
- Busca `Greg Isenberg startup ideas`
|
||||
Ideal para ver a alguien desglosando directamente 2 o 3 ideas concretas, incluyendo tamano de mercado, analisis de competencia y punto de entrada.
|
||||
- Busca `My First Million podcast`
|
||||
Los dos presentadores suelen dedicar episodios enteros a hacer brainstorming de ideas de negocio; alta densidad y a menudo surgen nichos muy concretos.
|
||||
- Busca `YC startup ideas` o `Michael Seibel startup ideas`
|
||||
Adecuado para principiantes, contenido directo, muchos explican explicitamente como elegir una direccion.
|
||||
|
||||
<a id="idea-trends"></a>
|
||||
## [2. Fuentes de tendencias: mira que direcciones estan emergiendo](#top-idea-sources)
|
||||
|
||||
La funcion de los sitios de tendencias no es darte ideas directamente, sino ayudarte a juzgar: si cierta direccion esta ganando traccion y si vale la pena seguir investigando.
|
||||
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
Usa datos para rastrear temas y categorias de productos que crecen rapidamente pero que aun no han entrado en el mainstream. Ideal para ver direcciones "que estan emergiendo pero que aun no estan especialmente saturadas".
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
Busca palabras clave, mira la linea de tendencias del ultimo ano, y luego revisa las "consultas relacionadas" con "terminos en alza".
|
||||
- [Glimpse](https://meetglimpse.com/)
|
||||
Similar a Google Trends.
|
||||
- Paginas de resumenes de informes de la industria
|
||||
Adecuadas cuando ya tienes una direccion y quieres ver rapidamente su posicion en la industria.
|
||||
- Contenido de tendencias de McKinsey / BCG / Gartner
|
||||
Mas orientado a la perspectiva empresarial y de grandes industrias; adecuado para B2B, industria y sectores tradicionales.
|
||||
- [State of AI Report](https://www.stateof.ai/)
|
||||
Si tu direccion esta relacionada con la tecnologia de IA en si, este tipo de informes anuales son ideales para construir una vision general.
|
||||
|
||||
Al mirar tendencias, enfocate solo en tres cosas:
|
||||
|
||||
- Si el termino esta en calentamiento continuo
|
||||
- En que escenario concreto se enmarca
|
||||
- Quien seria el primero en invertir tiempo, costos de cambio o presupuesto en ello
|
||||
|
||||
<a id="idea-business"></a>
|
||||
## [3. Fuentes mas orientadas a negocios: mira quien esta gastando dinero, quien se esta quejando, quien esta vendiendo servicios manuales](#top-idea-sources)
|
||||
|
||||
Si lo que buscas no es una direccion que "suena genial", sino una mas cercana a "negocios reales", entonces debes mirar fuentes mas proximas a los flujos de trabajo.
|
||||
|
||||
### Mira quien esta gastando dinero real en que
|
||||
|
||||
- [China Government Procurement Network](https://www.ccgp.gov.cn/)
|
||||
Modo de uso: busca terminos como "construccion inteligente", "sistema de gestion de laboratorio", "recopilacion de datos", "gestion de clinicas", "sistema de presupuestos", y mira los presupuestos, requisitos tecnicos y escenarios de uso.
|
||||
- Centros de transaccion de recursos publicos de cada provincia y ciudad
|
||||
Modo de uso: mira que sistemas estan comprando realmente los gobiernos locales y las empresas publicas.
|
||||
- Bibiao / Qianlima / Biaoshitong
|
||||
Modo de uso: mira las necesidades de compra del lado empresarial y los tipos de sistemas de alta frecuencia.
|
||||
|
||||
La senal fuerte de estas fuentes es: no se esta hablando del futuro, sino exponiendo "hoy alguien ya esta dispuesto a pagar por esto".
|
||||
|
||||
### Mira quien se esta quejando de que
|
||||
|
||||
- Manufactura: comunidades de maquinaria, foros de control industrial
|
||||
- Salud: Dingxiangyuan, Yimaitong
|
||||
- Construccion / Ingenieria: Tumuzai Xianxi, Glodon Community
|
||||
- Finanzas / Contabilidad: Foro de China Accounting Vision
|
||||
- Comercio exterior: Fubu Foreign Trade Forum, Mikiquan
|
||||
- Hosteleria / Retail: Zhiye Canyin Wang, Lianshang Wang Forum
|
||||
- [Reddit](https://www.reddit.com/) en secciones verticales: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
|
||||
- [V2EX](https://www.v2ex.com/)
|
||||
- Jike
|
||||
- Xiaohongshu
|
||||
|
||||
Al buscar, no busques solo "AI" o "innovacion"; es mas efectivo buscar:
|
||||
|
||||
- demasiado engorroso
|
||||
- hay alguna mejor manera
|
||||
- recomienden herramientas
|
||||
- ya no puedo gestionarlo con Excel
|
||||
- I wish there was
|
||||
- is there a tool for
|
||||
- I hate
|
||||
|
||||
### Mira quien esta vendiendo servicios manuales repetitivos
|
||||
|
||||
- [Fiverr](https://www.fiverr.com/)
|
||||
- [Upwork](https://www.upwork.com/)
|
||||
- Zhubajie Wang
|
||||
- Taobao
|
||||
- Xianyu
|
||||
|
||||
Si ves que estos servicios se venden bien, vale la pena investigar mas:
|
||||
|
||||
- Te organizan los presupuestos en PDF a Excel
|
||||
- Te organizan masivamente los datos de clientes
|
||||
- Te revisan el CV / redactan textos / hacen transcripciones / archivan documentos
|
||||
|
||||
Detras de estos servicios normalmente no hay necesidades de un solo uso, sino flujos de trabajo que se repiten.
|
||||
|
||||
### Mira flujos de trabajo completos, no solo listas de ideas
|
||||
|
||||
A veces el metodo mas directo es elegir una industria, revisar todo el proceso y encontrar los pasos que aun dependen de WeChat, Excel, papel y lapiz, o telefono.
|
||||
|
||||
- Comercio exterior: buscar proveedores, solicitar cotizaciones, comparar precios, hacer presupuestos, enviar a clientes, hacer seguimiento de respuestas, organizar inspecciones, reservar transporte, despacho de aduanas.
|
||||
Corte digno de analizar: organizar presupuestos de proveedores en presupuestos para clientes.
|
||||
- Clinicas dentales: recepcion, radiografias, lectura de radiografias, comunicacion del plan, seguimiento, tratamiento, revisita.
|
||||
Corte digno de analizar: explicar el plan al paciente y hacer seguimiento continuo.
|
||||
- Obras de construccion: inspeccion, fotos, envio al grupo, elaboracion de informes, entrega al cliente.
|
||||
Corte digno de analizar: de fotos en sitio a informes de cumplimiento.
|
||||
|
||||
<a id="idea-vc"></a>
|
||||
## [4. Fuentes de VC / aceleradoras: mira "hacia donde sopla la corriente"](#top-idea-sources)
|
||||
|
||||
Este tipo de fuentes son adecuadas para encontrar direcciones generales, no para reemplazar directamente la validacion.
|
||||
|
||||
- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
Modo de uso: ideal para encontrar cortes, porque a menudo dice directamente "queremos ver a alguien haciendo esto".
|
||||
- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
Modo de uso: mas orientado a grandes tendencias y evaluacion de sectores, ideal para construir sensibilidad a la industria.
|
||||
- [NFX](https://www.nfx.com/)
|
||||
Modo de uso: ideal para escanear rapidamente un conjunto de temas de startup.
|
||||
- [Sequoia Capital](https://www.sequoiacap.com/article/)
|
||||
Modo de uso: no necesariamente lista ideas directamente, pero a menudo habla sobre ciertos tipos de cambios de plataforma y oportunidades.
|
||||
- [First Round Review](https://review.firstround.com/)
|
||||
Modo de uso: ideal para profundizar en una direccion; no necesariamente es una lista de ideas, pero la calidad de los articulos suele ser muy alta.
|
||||
|
||||
Ventajas de este tipo de fuentes:
|
||||
|
||||
- Pueden decirte que direcciones futuras valen la pena explorar
|
||||
- Pueden decirte que sectores probablemente seguiran recibiendo impulso
|
||||
- Pueden hacerte entrar rapidamente en el lenguaje de un sector
|
||||
|
||||
Limitaciones de este tipo de fuentes:
|
||||
|
||||
- Suele ser desde la perspectiva de inversores
|
||||
- No necesariamente te dice que rol es el que mas sufre
|
||||
- No necesariamente te dice que paso del proceso es el mas bloqueado
|
||||
- No necesariamente te dice quien ya esta pagando por esto hoy
|
||||
|
||||
Por lo tanto, un mejor uso es: primero usa estas fuentes para encontrar una direccion, y luego vuelve a los productos de referencia, foros de la industria, informacion de compras y flujos de trabajo reales para encontrar cortes mas especificos.
|
||||
|
||||
<a id="idea-path"></a>
|
||||
## [5. El camino mas corto para quienes "no tienen ideas y solo saben hacer asistentes"]( #top-idea-sources)
|
||||
|
||||
Si solo quieres seguir un camino minimo, puedes hacerlo asi:
|
||||
|
||||
1. Primer paso, 30 minutos.
|
||||
Abre [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/), ordena por `Top -> Past Year`, escanea rapidamente 50 posts y guarda todas las direcciones que pienses "esto creo que podria hacerlo".
|
||||
2. Segundo paso, 30 minutos.
|
||||
Abre [Starter Story](https://www.starterstory.com/) o [Indie Hackers Products](https://www.indiehackers.com/products), ordena por ingresos, mira los productos de ingresos medios, no solo los mas exitosos. Encuentra direcciones relacionadas con el primer paso y mira especificamente a quien venden y que paso resuelven.
|
||||
3. Tercer paso, 20 minutos.
|
||||
Ve a [Google Trends](https://trends.google.com/) y busca palabras clave relacionadas, mira si la tendencia esta creciendo, y luego revisa los "terminos en alza" en "consultas relacionadas".
|
||||
4. Cuarto paso, 20 minutos.
|
||||
Ve a G2 / Capterra / foros de la industria / plataformas de licitacion / Fiverr y similares, y mira en esta direccion que es exactamente lo que mas molesta hoy y donde aun se depende del trabajo manual.
|
||||
|
||||
Despues de ver todo, te basta con poder expresar claramente esta frase:
|
||||
|
||||
- Cierta tipo de persona, en cierto escenario, esta bloqueada por cierto paso del proceso, y actualmente depende principalmente de cierto metodo torpe para sobrevivir.
|
||||
|
||||
<a id="idea-ai"></a>
|
||||
## [6. Como te ayuda la IA](#top-idea-sources)
|
||||
|
||||
El foco de este articulo no es la IA, pero la IA es muy util para organizar.
|
||||
|
||||
Los usos mas practicos son solo dos:
|
||||
|
||||
- Pega a la IA los enlaces, titulos de posts y palabras textuales de usuarios que has encontrado, y dejala que te los clasifique en "publico / escenario / punto de dolor / solucion alternativa".
|
||||
- Deja que la IA te ayude a condensar un monton de informacion dispersa en 3 direcciones candidatas, en lugar de seguir divergiendo en 50 funcionalidades.
|
||||
|
||||
Puedes preguntar directamente asi:
|
||||
|
||||
```text
|
||||
He encontrado estas fuentes recientemente:
|
||||
1. [pega titulo o cita textual]
|
||||
2. [pega titulo o cita textual]
|
||||
3. [pega titulo o cita textual]
|
||||
|
||||
Por favor no me des una lista de funcionalidades.
|
||||
Por favor haz solo tres cosas:
|
||||
1. Clasifica por publico y escenario
|
||||
2. Identifica los pasos problematicos que se repiten
|
||||
3. Ayudame a organizarlo en 3 direcciones candidatas mas concretas
|
||||
```
|
||||
|
||||
## Lectura adicional
|
||||
|
||||
- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
- [NFX](https://www.nfx.com/)
|
||||
- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
- [Indie Hackers - Products](https://www.indiehackers.com/products)
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
- [BetaList](https://betalist.com/)
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
- [G2](https://www.g2.com/)
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
@@ -0,0 +1,765 @@
|
||||
---
|
||||
title: 'Referencia de escenarios de aplicación industrial B2B'
|
||||
description: 'Este documento recopila las aplicaciones prácticas de los modelos LLM en escenarios empresariales B2B, incluyendo áreas como la industria manufacturera, servicio al cliente inteligente, educación, programación inteligente, salud, ciberseguridad, gestión financiera, servicios empresariales y más, sirviendo como referencia para desarrolladores de aplicaciones de IA orientadas a clientes empresariales.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'Aprox. <strong>6 horas</strong>'
|
||||
|
||||
const interestPoint = ref('')
|
||||
const purpose = ref('')
|
||||
|
||||
// Grupo de temas por industria
|
||||
const topicPool = {
|
||||
'manufacturing': [
|
||||
{ title: 'Plataforma de diseño asistido por IA para exteriores de autobuses de nueva energía', desc: 'Diseño conceptual de exteriores basado en modelos de generación de imágenes' },
|
||||
{ title: 'Asistente inteligente de diseño y revisión de planos técnicos', desc: 'Construcción de una base de conocimiento de normativas de diseño empresarial mediante tecnología RAG' },
|
||||
{ title: 'Generación y gestión automatizada de documentación técnica', desc: 'Generación automática de especificaciones de productos y manuales de operación basada en LLM' },
|
||||
{ title: 'Asistente de generación automática de informes de inspección de equipos de producción', desc: 'Descripción por voz del estado del equipo, generación estructurada de informes de inspección' },
|
||||
{ title: 'Asistente de preguntas y respuestas sobre diagnóstico de fallos en equipos industriales', desc: 'Construcción de una base de conocimiento vectorial basada en casos históricos de fallos' }
|
||||
],
|
||||
'customer-service': [
|
||||
{ title: 'Sistema de respuesta automática y generación de tickets de servicio al cliente multicanal inteligente', desc: 'Integración de mensajes multicanal, LLM comprende la intención y genera respuestas' },
|
||||
{ title: 'Asistente de prospección y seguimiento de clientes potenciales', desc: 'Análisis de registros de conversaciones históricas para identificar clientes con alta intención de compra' },
|
||||
{ title: 'Sistema inteligente de búsqueda y respuestas del conocimiento interno empresarial', desc: 'Construcción de una base de conocimiento vectorial basada en documentos internos' },
|
||||
{ title: 'Herramienta de resumen inteligente de conversaciones y generación de tickets de servicio', desc: 'Generación automática de resúmenes de sesión y extracción de información clave' },
|
||||
{ title: 'Sistema de base de conocimiento de guiones de ventas destacados del servicio al cliente', desc: 'Análisis de casos exitosos para extraer plantillas de guiones ganadores' }
|
||||
],
|
||||
'education': [
|
||||
{ title: 'Sistema de planificación de rutas de aprendizaje de idiomas personalizado y tutoría inteligente', desc: 'Evaluación del nivel del aprendiz, planificación de tareas de estudio diarias' },
|
||||
{ title: 'Plataforma de elaboración automatizada de planes de clase y recomendación de recursos educativos', desc: 'Generación de estructura de planes de clase según el programa de estudios' },
|
||||
{ title: 'Sistema de corrección automatizada de tareas y análisis diagnóstico del rendimiento', desc: 'Corrección automática de preguntas subjetivas y generación de sugerencias de corrección' },
|
||||
{ title: 'Construcción de modelos de competencias laborales y mapas de aprendizaje', desc: 'Análisis de descripciones de puestos para extraer requisitos de competencias' },
|
||||
{ title: 'Práctica conversacional individualizada de idiomas extranjeros en escenarios simulados', desc: 'LLM asume diferentes roles para practicar conversaciones orales' }
|
||||
],
|
||||
'programming': [
|
||||
{ title: 'Asistente de autocompletado de código inteligente y reparación automática de bugs', desc: 'Plugin de IDE que ofrece sugerencias de autocompletado en tiempo real' },
|
||||
{ title: 'Plataforma de construcción de aplicaciones low-code y automatización de flujos', desc: 'Descripción de requisitos en lenguaje natural, conversión a configuración low-code' },
|
||||
{ title: 'Sistema de generación de casos de prueba unitarios', desc: 'Análisis AST del código fuente, generación de casos de prueba con condiciones límite' },
|
||||
{ title: 'Herramienta de análisis inteligente de código y migración entre lenguajes', desc: 'Análisis de la calidad del código y sugerencias de optimización' },
|
||||
{ title: 'Herramienta de generación automática de código de interfaz de usuario (UI)', desc: 'Reconocimiento de imágenes de diseño, generación de CSS responsivo' }
|
||||
],
|
||||
'healthcare': [
|
||||
{ title: 'Asistente inteligente de interpretación de informes de análisis clínicos', desc: 'OCR identifica indicadores clave, interpretación de valores anómalos' },
|
||||
{ title: 'Experto en consultas de salud basado en tecnología de búsqueda de conocimiento', desc: 'Construcción de un grafo de conocimiento médico, búsqueda RAG para generar respuestas' },
|
||||
{ title: 'Plataforma de análisis de decisión de datos de investigación clínica', desc: 'Integración de datos EMR, asistencia en la generación de código de análisis estadístico' },
|
||||
{ title: 'Herramienta de generación automática de informes de imágenes médicas', desc: 'Descripción de características de imágenes, generación automática de informes estructurados' },
|
||||
{ title: 'Asistente inteligente de recordatorio de medicación para enfermedades crónicas', desc: 'Generación de recordatorios de medicación personalizados, verificación de contraindicaciones' }
|
||||
],
|
||||
'security': [
|
||||
{ title: 'Motor de detección y reparación de vulnerabilidades de seguridad en código', desc: 'Escaneo SAST del código, análisis de principios de vulnerabilidad' },
|
||||
{ title: 'Sistema inteligente de identificación e interceptación de correos de phishing generados por IA', desc: 'Análisis del contenido del correo, identificación de correos de phishing generados por IA' },
|
||||
{ title: 'Asistente de generación automática de informes diarios de operaciones de seguridad', desc: 'Resumen de registros, extracción automática de eventos clave' },
|
||||
{ title: 'Asistente de generación inteligente de informes de pruebas de penetración', desc: 'Generación automática de informes basada en descripciones de vulnerabilidades' },
|
||||
{ title: 'Asistente de consulta y análisis inteligente de inteligencia sobre amenazas', desc: 'Conexión con múltiples fuentes de inteligencia sobre amenazas, interpretación del contenido' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'Asistente de generación inteligente de informes de debida diligencia crediticia', desc: 'Entrada de datos financieros, generación automática de informes de debida diligencia crediticia' },
|
||||
{ title: 'Asesor inteligente de gestión de patrimonio bancario privado', desc: 'Análisis del perfil de riesgo del cliente, generación de recomendaciones de asignación de activos' },
|
||||
{ title: 'Asistente de generación inteligente y verificación de cumplimiento de prospectos de IPO', desc: 'Plantillas modulares, llenado automático de descripciones del negocio' },
|
||||
{ title: 'Sistema de generación automática de informes financieros y alerta de anomalías operativas', desc: 'Generación automática de análisis financiero y discusión de la dirección' },
|
||||
{ title: 'Entrenador de guiones de venta inteligente para agentes de seguros', desc: 'Simulación de conversaciones, evaluación de la conformidad y persuasión de los guiones' }
|
||||
],
|
||||
'enterprise': [
|
||||
{ title: 'Plataforma de revisión de cumplimiento y sugerencias de modificación de contratos empresariales en todo su ciclo de vida', desc: 'Comparación de cláusulas con bases de datos normativas, generación de informes de cumplimiento' },
|
||||
{ title: 'Transcripción por voz de reuniones de ventas y recomendación de guiones', desc: 'Transcripción ASR, análisis de conversaciones y recomendación de guiones ganadores' },
|
||||
{ title: 'Sistema inteligente de generación y diseño de contenido de marketing', desc: 'Generación de textos de marketing y extracción de puntos de venta' },
|
||||
{ title: 'Plataforma de análisis de publicidad de la competencia', desc: 'Recopilación de anuncios de la competencia, análisis de estrategias de publicación' },
|
||||
{ title: 'Sistema de análisis inteligente de temas populares y recomendación de contenido', desc: 'Análisis de tendencias populares y recomendación de ángulos temáticos' }
|
||||
],
|
||||
'content': [
|
||||
{ title: 'Plataforma de asistencia creativa para contenido de cine y televisión y novelas', desc: 'Proporciona sinopsis, desarrollo de personajes, generación de diálogos' },
|
||||
{ title: 'Asistente de redacción inteligente de historias de marca y artículos de relaciones públicas', desc: 'Entrada de palabras clave de marca, generación de textos en múltiples estilos' },
|
||||
{ title: 'Sistema de gestión de transmisión en vivo e interacción de avatares digitales virtuales', desc: 'Imagen digital + voz TTS + diálogo LLM' },
|
||||
{ title: 'Generación de guiones de videos cortos y edición inteligente', desc: 'Generación de guiones y storyboards de videos cortos' },
|
||||
{ title: 'Sistema inteligente de generación y diseño de contenido de marketing', desc: 'Generación de textos de marketing y extracción de puntos de venta' }
|
||||
],
|
||||
'government': [
|
||||
{ title: 'Sistema de navegación por voz inteligente y despacho automático de la línea de servicio ciudadano 12345', desc: 'Reconocimiento de voz, comprensión de solicitudes y despacho inteligente' },
|
||||
{ title: 'Robot de guía inteligente y respuestas sobre políticas para oficinas de servicios gubernamentales', desc: 'Búsqueda RAG en base de conocimiento gubernamental' },
|
||||
{ title: 'Plataforma de emparejamiento inteligente y envío preciso de políticas de beneficio empresarial', desc: 'Perfil empresarial con emparejamiento automático de políticas aplicables' },
|
||||
{ title: 'Asistente de pre-revisión inteligente y verificación de cumplimiento de materiales administrativos', desc: 'Reconocimiento OCR y extracción de información clave' },
|
||||
{ title: 'Plataforma de identificación inteligente y gestión de despacho de eventos urbanos en cuadrícula', desc: 'Identificación del tipo de evento y despacho' }
|
||||
],
|
||||
'legal': [
|
||||
{ title: 'Agent de detección de riesgos y vulnerabilidades en contratos con un clic', desc: 'Identificación de problemas potenciales comparando con listas de verificación de riesgos' },
|
||||
{ title: 'Asesor de evaluación inteligente por IA de la tasa de éxito en casos similares', desc: 'Extracción de características del caso, búsqueda y emparejamiento de casos similares' },
|
||||
{ title: 'Radar de monitoreo en tiempo real de cambios legislativos y análisis de impacto empresarial', desc: 'Análisis del contenido modificado y evaluación del impacto empresarial' },
|
||||
{ title: 'Herramienta de redacción automática AIGC de cartas de abogado', desc: 'Entrada de declaración de hechos, generación de cartas de abogado estandarizadas' },
|
||||
{ title: 'Plugin de explicación en lenguaje sencillo de cláusulas legales complejas', desc: 'Generación de explicaciones fáciles de entender' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'Generador de itinerarios automáticos basado en AIGC para viajeros perezosos', desc: 'Generación de planes de itinerario diario' },
|
||||
{ title: 'Robot de predicción de tendencias de precios de vuelos y hoteles y bloqueo automático de precios bajos', desc: 'Modelo ML de predicción de tendencias de precios' },
|
||||
{ title: 'Sistema de pre-revisión inteligente de documentos de visa y asistencia de llenado automatizado', desc: 'Verificación de integridad de información mediante OCR' },
|
||||
{ title: 'Asistente de traducción por voz en tiempo real y traducción visual de menús para viajes al extranjero', desc: 'Traducción de voz sin conexión, OCR de imágenes de menús' },
|
||||
{ title: 'Asistente de generación automática de diarios de viaje ilustrados y textos para redes sociales', desc: 'Extracción de información de fotos, generación de textos de diarios de viaje' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'Compañero virtual de compañía profunda 24 horas basado en modelos LLM', desc: 'Sistema de memoria que almacena el historial de conversaciones' },
|
||||
{ title: 'Asesor de IA de reconocimiento emocional multimodal y orientación psicológica', desc: 'Análisis de tono de voz + reconocimiento de emociones en texto' },
|
||||
{ title: 'Avatar digital de entrenamiento cognitivo y recuperación de memorias para personas con Alzheimer', desc: 'Juegos cognitivos de entrenamiento, fotografías antiguas que activan recuerdos' },
|
||||
{ title: 'Entrenador de práctica social simulada con AIGC para personas con ansiedad social', desc: 'Simulación de escenarios sociales virtuales' },
|
||||
{ title: 'Asistente de monitoreo del estado de ánimo las 24 horas y motivación emocional positiva con IA', desc: 'Análisis de tendencias emocionales y generación de contenido motivacional' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'Motor de toma de decisiones autónoma para NPC de juegos de mundo abierto impulsado por LLM', desc: 'Árbol de comportamiento del NPC integrado con toma de decisiones LLM' },
|
||||
{ title: 'Herramienta de deducción de tramas AIGC y asistencia de control de DM para juegos de misterio inmersivos', desc: 'Las elecciones de los jugadores activan ramas de la historia' },
|
||||
{ title: 'Modificador generativo de finales de novelas interactivas', desc: 'Las elecciones del lector influyen en la dirección de la trama' },
|
||||
{ title: 'Análisis visual CV y comentarista inteligente por IA de partidas de esports', desc: 'Análisis en tiempo real de la pantalla del juego' },
|
||||
{ title: 'Sistema de generación automática de audiolibros con síntesis TTS multicolor', desc: 'Asignación de personajes del texto, generación de voces personalizadas' }
|
||||
],
|
||||
'ecommerce': [
|
||||
{ title: 'Herramienta de producción masiva de páginas de detalles de productos AIGC con alta tasa de conversión', desc: 'Generación de textos de puntos de venta y descripciones de escenarios' },
|
||||
{ title: 'Fábrica de generación de videos de prueba de vestir y exhibición de modelos virtuales con IA', desc: 'Generación de efectos de prueba de vestir en modelos virtuales' },
|
||||
{ title: 'Asistente de traducción y pulido localizado multilingüe con LLM para comercio electrónico transfronterizo', desc: 'Traducción multilingüe de descripciones de productos' },
|
||||
{ title: 'Sistema de transmisión en vivo con avatares digitales AIGC las 24 horas', desc: 'Imagen digital + generación de guiones en tiempo real' },
|
||||
{ title: 'Motor de análisis de tendencias de mercado por IA y predicción de productos exitosos', desc: 'Análisis de tendencias populares, recomendaciones de selección de productos' }
|
||||
],
|
||||
'energy': [
|
||||
{ title: 'Asesor de análisis del comportamiento de consumo eléctrico doméstico y estrategias de ahorro energético con IA', desc: 'Análisis de patrones de consumo, generación de recomendaciones de ahorro' },
|
||||
{ title: 'Sistema de reconocimiento visual CV por dron de defectos en paneles fotovoltaicos', desc: 'Inspección con dron, análisis de imágenes termoinfrarrojas' },
|
||||
{ title: 'Agente de predicción de tendencias de precios de mercado eléctrico al contado y estrategia automática de ganancias con IA', desc: 'Modelo de predicción de precios, generación de estrategias' },
|
||||
{ title: 'Asistente de cálculo automático de emisiones de carbono en toda la cadena empresarial y generación de informes ESG con IA', desc: 'Cálculo de factores de emisión de carbono, generación de informes ESG' },
|
||||
{ title: 'Sistema de predicción de carga ante clima extremo y comando de despacho de emergencia de la red eléctrica con IA', desc: 'Modelo de predicción de carga, generación de estrategias de despacho' }
|
||||
],
|
||||
'av-media': [
|
||||
{ title: 'Herramienta de identificación por IA de fragmentos destacados y edición automática de videos cortos a partir de videos largos', desc: 'Análisis del contenido del video, identificación de fotogramas clave' },
|
||||
{ title: 'Asistente de separación inteligente de ruido de fondo y mejora de voz por IA en video', desc: 'Modelo de separación de audio, eliminación de ruido de fondo' },
|
||||
{ title: 'Estación de trabajo de restauración 4K y colorización inteligente por IA de material audiovisual antiguo', desc: 'Modelo de superresolución de video, colorización automática por IA' },
|
||||
{ title: 'Sistema de doblaje TTS de texto a voz de nivel realista y control emocional', desc: 'Modelo TTS multicolor, control emocional' },
|
||||
{ title: 'Asistente de transcripción inteligente por IA y extracción de tareas pendientes de grabaciones de reuniones', desc: 'Separación y transcripción de voz en reuniones multilingües' }
|
||||
],
|
||||
'ai-marketing': [
|
||||
{ title: 'Motor de redacción automática AIGC de textos virales para Xiaohongshu (RED)', desc: 'Generación de textos de recomendación, optimización de emoji' },
|
||||
{ title: 'Herramienta de diseño inteligente de pósters de marketing y adaptación a múltiples tamaños', desc: 'Emparejamiento inteligente de plantillas de pósters' },
|
||||
{ title: 'Plataforma de generación creativa AIGC de LOGO de marca y construcción del sistema de identidad visual (VI)', desc: 'Generación creativa de LOGO, generación de normativas VI' },
|
||||
{ title: 'Asistente de seguimiento de tendencias populares por IA y generación creativa de marketing oportunista', desc: 'Análisis de ángulos de marketing, generación de propuestas creativas' },
|
||||
{ title: 'Asistente de generación creativa AIGC de guiones de videos cortos y guía de storyboards', desc: 'Generación de guiones y storyboards, sugerencias de filmación' }
|
||||
],
|
||||
'data-intelligence': [
|
||||
{ title: 'Herramienta de generación automática de sentencias SQL a partir de lenguaje natural', desc: 'Conversión de consultas en lenguaje natural a SQL' },
|
||||
{ title: 'Sistema inteligente de inventario y clasificación de activos de datos empresariales', desc: 'Recopilación de metadatos, clasificación automática' },
|
||||
{ title: 'Motor de detección automática de anomalías de calidad de datos y sugerencias de reparación', desc: 'Motor de reglas + modelos ML para detección de anomalías' },
|
||||
{ title: 'Asistente de generación inteligente de informes y configuración de visualización', desc: 'Generación conversacional de configuraciones de informes' },
|
||||
{ title: 'Asistente inteligente de preguntas y respuestas sobre definiciones de indicadores de datos', desc: 'Construcción de base de conocimiento basada en documentos de definición de indicadores' }
|
||||
]
|
||||
}
|
||||
|
||||
// Tabla de mapeo predefinida de recomendaciones
|
||||
const recommendationMap = {
|
||||
// Punto de interés: Contenido creativo
|
||||
'creative-content': {
|
||||
'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
|
||||
'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
|
||||
'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
|
||||
'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
|
||||
},
|
||||
// Punto de interés: Servicios técnicos
|
||||
'tech-service': {
|
||||
'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
|
||||
'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
|
||||
'improve-experience': ['customer-service', 'enterprise', 'programming'],
|
||||
'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
|
||||
},
|
||||
// Punto de interés: Inteligencia de datos
|
||||
'data-intel': {
|
||||
'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
|
||||
'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
|
||||
'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
|
||||
'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
|
||||
},
|
||||
// Punto de interés: Servicio al usuario
|
||||
'user-service': {
|
||||
'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
|
||||
'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
|
||||
'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
|
||||
'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
|
||||
},
|
||||
// Punto de interés: Soluciones sectoriales
|
||||
'industry-solution': {
|
||||
'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
|
||||
'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
|
||||
'improve-experience': ['healthcare', 'education', 'government', 'travel'],
|
||||
'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
|
||||
}
|
||||
}
|
||||
|
||||
const interestOptions = [
|
||||
{ label: 'Generación de contenido creativo', value: 'creative-content', desc: 'Textos, imágenes, videos y otros contenidos creativos' },
|
||||
{ label: 'Herramientas de servicios técnicos', value: 'tech-service', desc: 'Herramientas de desarrollo, automatización, asistencia de código' },
|
||||
{ label: 'Análisis de inteligencia de datos', value: 'data-intel', desc: 'Análisis de datos, predicción, toma de decisiones inteligente' },
|
||||
{ label: 'Experiencia de servicio al usuario', value: 'user-service', desc: 'Atención al cliente, marketing, experiencia de usuario' },
|
||||
{ label: 'Soluciones sectoriales', value: 'industry-solution', desc: 'Aplicaciones profundas en industrias específicas' }
|
||||
]
|
||||
|
||||
const purposeOptions = [
|
||||
{ label: 'Mejorar la eficiencia', value: 'increase-efficiency', desc: 'Automatización, aceleración de procesos' },
|
||||
{ label: 'Reducir costos', value: 'reduce-cost', desc: 'Reducción de personal, optimización de recursos' },
|
||||
{ label: 'Mejorar la experiencia', value: 'improve-experience', desc: 'Satisfacción del usuario, calidad del servicio' },
|
||||
{ label: 'Innovación empresarial', value: 'innovate-business', desc: 'Nuevos productos, nuevos modelos' }
|
||||
]
|
||||
|
||||
const industries = [
|
||||
{ key: 'manufacturing', name: 'Industria manufacturera', anchor: '#_1-industria-manufacturera' },
|
||||
{ key: 'customer-service', name: 'Servicio al cliente inteligente', anchor: '#_2-servicio-al-cliente-inteligente' },
|
||||
{ key: 'education', name: 'Sector educativo', anchor: '#_3-sector-educativo' },
|
||||
{ key: 'programming', name: 'Programación inteligente', anchor: '#_4-programación-inteligente' },
|
||||
{ key: 'healthcare', name: 'Sector salud', anchor: '#_5-sector-salud' },
|
||||
{ key: 'security', name: 'Ciberseguridad', anchor: '#_6-ciberseguridad' },
|
||||
{ key: 'finance', name: 'Gestión financiera, seguros y banca', anchor: '#_7-gestión-financiera-seguros-y-banca' },
|
||||
{ key: 'enterprise', name: 'Servicios empresariales', anchor: '#_8-servicios-empresariales' },
|
||||
{ key: 'content', name: 'Producción y gestión de contenido', anchor: '#_9-producción-y-gestión-de-contenido' },
|
||||
{ key: 'government', name: 'Administración pública inteligente', anchor: '#_10-administración-pública-inteligente' },
|
||||
{ key: 'legal', name: 'Asuntos legales y gestión de contratos', anchor: '#_11-asuntos-legales-y-gestión-de-contratos' },
|
||||
{ key: 'travel', name: 'Turismo y servicios de viaje', anchor: '#_12-turismo-y-servicios-de-viaje' },
|
||||
{ key: 'emotion', name: 'Acompañamiento emocional', anchor: '#_13-acompañamiento-emocional' },
|
||||
{ key: 'entertainment', name: 'Entretenimiento y ocio', anchor: '#_14-entretenimiento-y-ocio' },
|
||||
{ key: 'ecommerce', name: 'Servicios de comercio electrónico', anchor: '#_15-servicios-de-comercio-electrónico' },
|
||||
{ key: 'energy', name: 'Energía', anchor: '#_16-energía' },
|
||||
{ key: 'av-media', name: 'Audio y video', anchor: '#_17-audio-y-video' },
|
||||
{ key: 'ai-marketing', name: 'Marketing con IA', anchor: '#_18-marketing-con-ia' },
|
||||
{ key: 'data-intelligence', name: 'Inteligencia de datos', anchor: '#_19-inteligencia-de-datos' }
|
||||
]
|
||||
|
||||
// Calcular resultados de recomendación - extracción aleatoria del grupo de temas
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!interestPoint.value || !purpose.value) return []
|
||||
|
||||
const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
|
||||
const topics = []
|
||||
|
||||
// Extraer 1-2 temas aleatoriamente de cada industria recomendada
|
||||
keys.forEach(key => {
|
||||
const industry = industries.find(item => item.key === key)
|
||||
const industryTopics = topicPool[key] || []
|
||||
|
||||
if (industry && industryTopics.length > 0) {
|
||||
// Extraer 1-2 temas aleatoriamente
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
industryKey: key,
|
||||
industryName: industry.name,
|
||||
industryAnchor: industry.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Ordenar aleatoriamente y limitar el total
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// Obtener descripción de la selección actual
|
||||
const currentSelection = computed(() => {
|
||||
const interest = interestOptions.find(i => i.value === interestPoint.value)
|
||||
const pur = purposeOptions.find(p => p.value === purpose.value)
|
||||
return {
|
||||
interest: interest?.label || '',
|
||||
purpose: pur?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// Retraso del desplazamiento para asegurar la actualización del DOM
|
||||
setTimeout(() => {
|
||||
// Intentar encontrar por ID (soporta múltiples formatos)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// Si no se encuentra, intentar otros formatos de ID posibles
|
||||
if (!element) {
|
||||
// Intentar quitar el prefijo de guion bajo
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// Si aún no se encuentra, buscar por texto del título
|
||||
if (!element) {
|
||||
// Extraer el nombre de la industria del ancla
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// Coincidencia exacta o por inclusión
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// Resaltar la sección de destino
|
||||
element.style.backgroundColor = '#f0f9ff'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
interestPoint.value = ''
|
||||
purpose.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# Referencia de escenarios de aplicación industrial B2B
|
||||
|
||||
## Guía del capítulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Aplicaciones B2B', 'Aplicaciones industriales', 'Escenarios de IA', 'Referencia de implementación', 'Soluciones sectoriales']" coreOutput="Conocer más de 15 escenarios de aplicación B2B por industria" expectedOutput="Encontrar la dirección de proyecto adecuada para clientes empresariales">
|
||||
|
||||
Este documento recopila las <strong>aplicaciones prácticas de los modelos LLM en escenarios empresariales B2B</strong>. A diferencia del enfoque B2C centrado en la experiencia del usuario y las emociones, los productos B2B se centran más en <strong>resolver necesidades reales del negocio, mejorar la eficiencia y reducir costos</strong>. Cada escenario cuenta con <strong>viabilidad real de implementación</strong>, abarcando desde el <strong>análisis de requisitos hasta la implementación técnica</strong>, sirviendo como referencia para desarrolladores de aplicaciones de IA orientadas a clientes empresariales.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Selección rápida de dirección sectorial
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Encuentra el escenario de aplicación adecuado para ti</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Selecciona tu área de interés y el objetivo que deseas alcanzar. El sistema recomendará escenarios sectoriales relevantes. Haz clic en las etiquetas para saltar al capítulo correspondiente.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="interestPoint" placeholder="Seleccionar área de interés" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in interestOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="purpose" placeholder="Seleccionar objetivo" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in purposeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- Visualización de resultados de recomendación - formato de tabla -->
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
|
||||
Se recomiendan {{ recommendationTopics.length }} escenarios de aplicación para ti
|
||||
<span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
|
||||
({{ currentSelection.interest }} + {{ currentSelection.purpose }})
|
||||
</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="recommendationTopics"
|
||||
style="width: 100%; cursor: pointer;"
|
||||
@row-click="(row) => scrollToAnchor(row.industryAnchor)"
|
||||
highlight-current-row>
|
||||
<el-table-column prop="title" label="Escenario de aplicación" min-width="300">
|
||||
<template #default="scope">
|
||||
<div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="industryName" label="Industria" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px; font-size: 12px; color: #909399;">
|
||||
Haz clic en cualquier fila de la tabla para saltar al capítulo de la industria correspondiente
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensaje cuando la selección está incompleta -->
|
||||
<div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
|
||||
<span v-if="!interestPoint && !purpose">Selecciona un área de interés y un objetivo</span>
|
||||
<span v-else-if="!interestPoint">Selecciona un área de interés</span>
|
||||
<span v-else>Selecciona un objetivo</span>
|
||||
</div>
|
||||
|
||||
<!-- Botón de restablecimiento -->
|
||||
<div v-if="interestPoint || purpose" style="margin-top: 12px;">
|
||||
<el-button size="small" @click="resetSelection">Restablecer selección</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## Introducción rápida a las industrias
|
||||
|
||||
### Tecnologías principales
|
||||
|
||||
En el desarrollo de aplicaciones de IA, las direcciones tecnológicas comunes incluyen:
|
||||
|
||||
1. **LLM (Grandes modelos de lenguaje)**: Especializados en procesar tareas de lenguaje natural, como diálogo, generación de texto, resumen, traducción, etc., adecuados para construir aplicaciones de atención al cliente inteligente, creación de contenido, preguntas y respuestas de conocimiento.
|
||||
2. **VLM (Modelos de lenguaje visual)**: Combinan comprensión visual y capacidades lingüísticas, permitiendo descripción de imágenes, preguntas y respuestas visuales, generación de contenido multimodal, etc., aplicables a escenarios como análisis de imágenes médicas, control de calidad industrial y diseño creativo.
|
||||
3. **GenAI (IA generativa)**: Incluye generación de texto, generación de imágenes (como Stable Diffusion, DALL·E), generación de video, etc., capaz de generar contenido creativo rápidamente, aplicable a áreas como diseño asistido, producción de materiales de marketing y educación.
|
||||
|
||||
### Estrategia de selección
|
||||
|
||||
Los aprendices pueden elegir la dirección de aplicación adecuada según las siguientes dimensiones:
|
||||
|
||||
1. **Orientación por interés**: Priorizar la industria o dirección tecnológica que más les interese para mantener la motivación de aprendizaje. Por ejemplo:
|
||||
- Interés en diseño creativo: probar aplicaciones de producción de contenido o diseño industrial
|
||||
- Interés en desafíos técnicos: probar aplicaciones en ciberseguridad o sector salud
|
||||
- Interés en impacto social: probar aplicaciones en administración pública inteligente o educación
|
||||
|
||||
2. **Adaptación sectorial**: Combinar el trasfondo sectorial propio o las ventajas de recursos para elegir escenarios:
|
||||
- Profesionales de la industria manufacturera: considerar primero aplicaciones de fabricación industrial o servicios empresariales
|
||||
- Educadores: priorizar aplicaciones del sector educativo o producción de contenido
|
||||
- Profesionales de la salud: explorar aplicaciones del sector salud o gestión de la salud
|
||||
|
||||
3. **Dificultad técnica**: Elegir el nivel adecuado de complejidad según la base técnica propia:
|
||||
- Nivel inicial: servicio al cliente inteligente, creación de contenido, sistemas simples de preguntas y respuestas
|
||||
- Nivel intermedio: control de calidad industrial, análisis de imágenes médicas, asistente de código inteligente
|
||||
- Nivel profesional: control de riesgos financieros, ciberseguridad, aplicaciones multimodales complejas
|
||||
|
||||
## 1. Industria manufacturera
|
||||
|
||||
Los escenarios de la industria manufacturera se centran principalmente en tres direcciones: asistencia al diseño, optimización de la producción y mantenimiento inteligente. Las aplicaciones comunes incluyen la utilización de IA para asistir el diseño de productos, la revisión automatizada de planos, la generación inteligente de documentación técnica, el diagnóstico de fallos en equipos industriales, etc., capaces de mejorar significativamente la eficiencia del diseño y reducir los costos de mantenimiento.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Plataforma de diseño asistido por IA para exteriores de autobuses de nueva energía | Diseño conceptual de exteriores basado en modelos de generación de imágenes, combinado con LLM para verificación de normativas de diseño e iteración creativa; integración de renderizado 3D con Three.js |
|
||||
| 2 | Asistente inteligente de diseño y revisión de planos técnicos | Construcción de una base de conocimiento de normativas de diseño empresarial mediante tecnología RAG, DALL·E genera imágenes de referencia para facilitar la comprensión; integración con API de CAD para análisis automatizado de planos |
|
||||
| 3 | Generación y gestión automatizada de documentación técnica | Generación automática de especificaciones de productos y manuales de operación a partir de la base de datos del producto mediante LLM, ChromaDB almacena documentos históricos para búsqueda inteligente |
|
||||
| 4 | Asistente de generación automática de informes de inspección de equipos de producción | El personal de inspección describe el estado del equipo por voz, LLM genera informes de inspección estructurados; asociación automática con registros históricos de fallos |
|
||||
| 5 | Sistema inteligente de despacho y planificación de rutas para carretillas elevadoras en fábrica | LLM analiza tareas de pedidos y ubicaciones del almacén, combinado con API de mapas para generar el plan de despacho óptimo |
|
||||
| 6 | Almacén de datos basado en recuperación de información LLM | Tecnología Text-to-SQL para convertir lenguaje natural en consultas a bases de datos, Superset para visualización de resultados; Doris o ClickHouse como motor OLAP |
|
||||
| 7 | Asistente de preguntas y respuestas sobre diagnóstico de fallos en equipos industriales | Construcción de una base de conocimiento vectorial basada en casos históricos de fallos, LLM proporciona recomendaciones de diagnóstico y soluciones según la descripción del fallo |
|
||||
| 8 | Generación inteligente de informes de control de calidad y clasificación de defectos en producción | OCR identifica defectos en fotografías de control de calidad, LLM genera informes de control de calidad estructurados; clasificación automática de tipos y gravedad de defectos |
|
||||
| 9 | Asistente inteligente de inventario y generación de informes de recuento | Ingreso de datos de recuento, LLM compara automáticamente con el inventario del sistema y genera informe de diferencias; alerta de inventario anómalo |
|
||||
| 10 | Sistema inteligente de preguntas y respuestas sobre optimización de procesos de producción | Construcción de base de conocimiento RAG basada en documentos de procesos de producción, LLM proporciona recomendaciones de optimización según problemas de producción |
|
||||
|
||||
## 2. Servicio al cliente inteligente
|
||||
|
||||
Los escenarios de servicio al cliente inteligente se centran en la mejora de la eficiencia del servicio al cliente y la optimización de la experiencia del usuario. Las aplicaciones típicas abarcan la integración multicanal, la generación de respuestas inteligentes, el análisis de emociones de los clientes, el procesamiento automatizado de tickets, etc., ayudando a las empresas a lograr servicio al cliente 24/7.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Sistema de respuesta automática y generación de tickets de servicio al cliente multicanal inteligente | Integración de mensajes de múltiples canales (WeChat, APP, sitio web, etc.), LLM comprende la intención y genera respuestas creando tickets automáticamente; uso de LangChain para construir el flujo de conversación, MySQL para almacenar datos de tickets |
|
||||
| 2 | Asistente de prospección y seguimiento de clientes potenciales | LLM analiza registros históricos de conversaciones de servicio al cliente, identifica características de clientes con alta intención de compra y los puntúa; sistema de recomendación combinado con algoritmos de filtrado colaborativo |
|
||||
| 3 | Sistema inteligente de búsqueda y respuestas del conocimiento interno empresarial | Construcción de base de conocimiento vectorial basada en Confluence y documentos internos, LLM combinado con tecnología RAG para generar respuestas |
|
||||
| 4 | Sistema de encuestas de satisfacción del cliente y gestión de mejora del servicio | LLM analiza automáticamente el contenido de las conversaciones de servicio al cliente para clasificación de sentimientos y puntuación de satisfacción; informes BI muestran los resultados del análisis |
|
||||
| 5 | Herramienta de resumen inteligente de conversaciones y generación de tickets de servicio | Tras finalizar la conversación, LLM genera automáticamente un resumen de la sesión y extrae información clave; llenado automático de campos del ticket |
|
||||
| 6 | Asistente de detección automática de conformidad de guiones de servicio al cliente | El agente ingresa el contenido de respuesta, LLM detecta en tiempo real la conformidad del guion y palabras sensibles; proporciona sugerencias de modificación |
|
||||
| 7 | Herramienta de resumen automático y clasificación de tickets de servicio al cliente | LLM genera resúmenes y clasificación automática de etiquetas a partir de registros de conversaciones largas; Elasticsearch soporta búsqueda de texto completo en tickets |
|
||||
| 8 | Herramienta de monitoreo de emociones del cliente y alerta de anomalías | Análisis en tiempo real de características de tono de voz y emociones en texto, LLM identifica emociones anómalas y activa alertas; notificaciones de alerta por WebSocket |
|
||||
| 9 | Sistema de base de conocimiento de guiones ganadores del servicio al cliente | LLM analiza casos de conversación excelentes de agentes, extrae plantillas de guiones ganadores; sistema de recomendación sugiere guiones en tiempo real según el contexto de la conversación |
|
||||
| 10 | Asistente de análisis de contenido de llamadas salientes y control de calidad | Tras la transcripción de grabaciones de llamadas salientes, LLM analiza el contenido de la conversación para extraer información clave; generación automática de informes de control de calidad y sugerencias de mejora |
|
||||
|
||||
## 3. Sector educativo
|
||||
|
||||
Los escenarios del sector educativo buscan lograr una enseñanza personalizada y una gestión educativa inteligente. Las aplicaciones centrales incluyen planificación inteligente de rutas de aprendizaje, corrección automatizada de tareas, generación de planes de clase, análisis del rendimiento académico, etc., promoviendo la optimización de la asignación de recursos educativos y la enseñanza adaptada a las capacidades de cada estudiante.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Sistema de planificación de rutas de aprendizaje de idiomas personalizado y tutoría inteligente | LLM evalúa el nivel actual del aprendiz, planifica tareas de estudio diarias según los objetivos de aprendizaje; algoritmo de recomendación combinado con grafo de conocimiento para recomendar recursos de aprendizaje |
|
||||
| 2 | Plataforma de elaboración automatizada de planes de clase y recomendación de recursos educativos | LLM genera la estructura del plan de clase y el diseño didáctico según el programa de estudios; base de conocimiento vectorial almacena planes de clase y materiales de calidad, soportando búsqueda por palabras clave y recomendaciones similares |
|
||||
| 3 | Sistema de corrección automatizada de tareas y análisis diagnóstico del rendimiento | LLM corrige automáticamente preguntas subjetivas y genera sugerencias de corrección, el grafo de conocimiento identifica los puntos débiles de conocimiento del estudiante |
|
||||
| 4 | Construcción de modelos de competencias laborales y mapas de aprendizaje | LLM analiza las descripciones de puestos para extraer requisitos de competencias, construyendo perfiles de competencias laborales; generación de mapas de aprendizaje personalizados según las brechas identificadas |
|
||||
| 5 | Sistema de construcción del currículo escolar y herramientas de elaboración de materiales didácticos | LLM analiza las características de la escuela y las necesidades de los estudiantes, genera la estructura del currículo escolar; integración con API de generación de PPT para crear automáticamente materiales |
|
||||
| 6 | Práctica conversacional individualizada de idiomas extranjeros en escenarios simulados | LLM asume diferentes roles para practicar conversaciones orales, ASR reconoce la pronunciación y la puntúa; TTS genera ejemplos de pronunciación estándar |
|
||||
| 7 | Plataforma de recomendación basada en big data para selección de carreras universitarias y orientación profesional | LLM analiza información del estudiante como puntuaciones, clasificaciones e intereses, combinado con datos de admisión para recomendar universidades y carreras |
|
||||
| 8 | Asistente de programación para niños | LLM explica la lógica del código y proporciona orientación de programación, soportando alternancia entre lenguajes por bloques y Python |
|
||||
| 9 | Herramienta de generación automática de mapas mentales de conceptos y recomendación de rutas de aprendizaje | Ingreso del tema del curso, LLM genera automáticamente mapas mentales de conceptos; recomendación del siguiente contenido de estudio según el progreso |
|
||||
| 10 | Motor de calificación y corrección automatizada de redacciones en chino e inglés | LLM califica desde múltiples dimensiones (temática, estructura, lenguaje, diversidad) y genera comentarios; comparación con redacciones modelo destacadas |
|
||||
|
||||
## 4. Programación inteligente
|
||||
|
||||
Los escenarios de programación inteligente buscan mejorar la eficiencia del desarrollo y la calidad del código. Las aplicaciones típicas incluyen autocompletado inteligente de código, reparación automática de bugs, generación automatizada de pruebas, conversión de código, etc., permitiendo a los desarrolladores centrarse en la lógica del negocio en lugar de tareas de codificación repetitivas.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Asistente de autocompletado de código inteligente y reparación automática de bugs | Modelo de código ajustado basado en CodeLlama, plugin de IDE que ofrece sugerencias de autocompletado en tiempo real; LLM analiza el stack de errores para localizar automáticamente bugs y generar código de corrección |
|
||||
| 2 | Plataforma de construcción de aplicaciones low-code y automatización de flujos | El usuario describe los requisitos en lenguaje natural, LLM los convierte en configuración low-code o framework de código |
|
||||
| 3 | Sistema de generación de casos de prueba unitarios | Análisis AST del código fuente para extraer la lógica de funciones, LLM genera casos de prueba con condiciones límite y escenarios de excepción; integración con Jest/Pytest para ejecutar pruebas |
|
||||
| 4 | Herramienta de análisis inteligente de código y migración entre lenguajes | Análisis de la estructura del código basado en Tree-sitter, LLM analiza la calidad del código y proporciona sugerencias de optimización; combinación con motor de reglas para conversión entre lenguajes |
|
||||
| 5 | Herramienta de generación automática de sentencias SQL a partir de lenguaje natural | LLM convierte consultas en lenguaje natural a SQL, soportando uniones complejas de múltiples tablas y consultas de agregación |
|
||||
| 6 | Plataforma de pruebas automatizadas de API y generación de documentación | LLM analiza comentarios del código y definiciones de interfaces, genera automáticamente casos de prueba y documentación de API; integración con Postman para ejecución de pruebas |
|
||||
| 7 | Herramienta inteligente de grabación y mantenimiento de scripts de pruebas UI | Plugin del navegador que graba las operaciones del usuario, LLM analiza la intención de las operaciones para generar scripts de prueba; IA repara localizadores obsoletos |
|
||||
| 8 | Análisis de registros del sistema y localización de fallos | ELK Stack recopila datos de registros, LLM analiza registros anómalos para extraer información clave y localizar la causa raíz; recomendación de soluciones de reparación |
|
||||
| 9 | Herramienta de generación automática de código de interfaz de usuario (UI) | Imágenes de diseño reconocidas por OCR para identificar la estructura de layout, LLM genera CSS responsivo y código de componentes; integración con TailwindCSS para soportar múltiples frameworks de estilos |
|
||||
| 10 | Asistente de diseño inteligente y modelado de estructura de base de datos | Documentos de requisitos del negocio ingresados a LLM, generación automática de diagramas ER y estructuras de tablas; soporte de exportación de scripts DDL para MySQL/PostgreSQL |
|
||||
|
||||
## 5. Sector salud
|
||||
|
||||
Los escenarios del sector salud buscan mejorar la eficiencia diagnóstica y la calidad de los servicios médicos. Las aplicaciones comunes incluyen generación automatizada de historiales clínicos, preguntas y respuestas sobre conocimiento médico, análisis asistido de imágenes, soporte a la investigación farmacológica, etc., promoviendo la transformación inteligente del sector de la salud.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Asistente inteligente de interpretación de informes de análisis clínicos | Carga de imágenes de informes de análisis, OCR identifica indicadores clave, LLM interpreta valores anómalos y genera explicaciones en lenguaje sencillo |
|
||||
| 2 | Experto en consultas de salud basado en tecnología de búsqueda de conocimiento | Construcción de un grafo de conocimiento médico (ICD-10, prospectos de medicamentos, guías clínicas), búsqueda RAG para generar respuestas |
|
||||
| 3 | Plataforma de análisis de decisión de datos de investigación clínica | Integración de datos EMR y resultados de análisis, LLM asiste en la generación de código de análisis estadístico y gráficos de visualización; soporte para estudios de cohorte y análisis de supervivencia |
|
||||
| 4 | Sistema inteligente de generación de preguntas de examen médico y análisis de errores | Ingreso de capítulos de libros de texto y puntos de conocimiento, LLM genera preguntas de práctica y explicaciones; registro automático de errores y generación de análisis de puntos débiles |
|
||||
| 5 | Experto en preguntas y respuestas del grafo de conocimiento del proceso completo de investigación farmacológica | Construcción de un grafo de conocimiento fármaco-diana-enfermedad, LLM responde preguntas relacionadas con investigación; soporte para búsqueda bibliográfica y recomendación de protocolos experimentales |
|
||||
| 6 | Asistente inteligente de preguntas y respuestas sobre prospectos de medicamentos | Carga de imágenes de prospectos o ingreso del nombre del medicamento, LLM responde preguntas sobre dosificación, efectos adversos, precauciones, etc. |
|
||||
| 7 | Asistente de generación de artículos de divulgación sobre enfermedades | Ingreso del nombre de la enfermedad y la audiencia, LLM genera artículos de divulgación accesibles; soporte de múltiples versiones (versión para pacientes/versión para familiares) |
|
||||
| 8 | Herramienta de generación automática de informes de imágenes médicas | El radiólogo describe las características de las imágenes, LLM genera automáticamente un informe estructurado; soporte de plantillas para tipos comunes de exámenes |
|
||||
| 9 | Asistente de generación y archivo inteligente de registros quirúrgicos | Grabación por voz de pasos clave durante la cirugía, LLM genera registros quirúrgicos estructurados; asociación automática con códigos quirúrgicos |
|
||||
| 10 | Asistente inteligente de recordatorio de medicación para enfermedades crónicas | El paciente ingresa su lista de medicamentos, LLM genera recordatorios de medicación personalizados; soporte de verificación de contraindicaciones y preguntas y respuestas interactivas |
|
||||
|
||||
## 6. Ciberseguridad
|
||||
|
||||
Los escenarios de ciberseguridad se centran en la protección de seguridad y el control de riesgos. Las aplicaciones centrales abarcan detección de vulnerabilidades, análisis de inteligencia sobre amenazas, identificación de correos de phishing, respuesta a incidentes de seguridad, etc., construyendo un sistema integral de protección de seguridad inteligente para las empresas.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Motor de detección y reparación de vulnerabilidades de seguridad en código | Herramienta de análisis estático de código (SAST) escanea el código, LLM analiza los principios de las vulnerabilidades y genera sugerencias de reparación; integración con pipeline CI/CD |
|
||||
| 2 | Sistema inteligente de identificación e interceptación de correos de phishing generados por IA | LLM analiza el contenido del correo, las características del remitente y la seguridad de los enlaces, identifica correos de phishing generados por IA; integración con la pasarela de correo para interceptar en tiempo real |
|
||||
| 3 | Asistente de generación automática de informes diarios de operaciones de seguridad | Resumen de registros de dispositivos de seguridad, LLM extrae automáticamente eventos clave y genera informes diarios; marcado highlight de eventos anómalos |
|
||||
| 4 | Asistente inteligente de preguntas y respuestas de la base de conocimiento de seguridad | Construcción de base de conocimiento vectorial basada en documentos de seguridad y la base CVE, LLM responde preguntas sobre técnicas de seguridad y procedimientos de respuesta |
|
||||
| 5 | Asistente de generación inteligente de informes de pruebas de penetración | Tras completar la prueba de penetración, LLM genera automáticamente el informe según la descripción de vulnerabilidades; generación masiva de sugerencias de reparación |
|
||||
| 6 | Protección contra código malicioso y monitoreo de cumplimiento de privacidad | Análisis en sandbox del comportamiento de archivos sospechosos, LLM identifica características maliciosas y genera firmas; escaneo de identificación de datos privados |
|
||||
| 7 | Herramienta de generación de listas de verificación de configuración de seguridad | Ingreso del tipo de sistema objetivo, LLM genera listas de verificación de configuración de seguridad; soporte de estándares como MLPS 2.0, CIS, etc. |
|
||||
| 8 | Asistente de consulta y análisis inteligente de inteligencia sobre amenazas | Conexión con múltiples fuentes de inteligencia sobre amenazas (código abierto, comerciales), LLM interpreta la inteligencia y la relaciona con los activos empresariales; recomendación de estrategias de protección |
|
||||
| 9 | Asistente de generación de informes de revisión post-incidente de seguridad | Tras un incidente de seguridad, LLM genera automáticamente un informe de revisión según la línea de tiempo; análisis de causa raíz y sugerencias de mejora |
|
||||
| 10 | Centro de monitoreo y alerta temprana de inteligencia sobre amenazas global | Rastreo web de información de seguridad global y divulgación de vulnerabilidades, LLM extrae información clave y evalúa el impacto; notificaciones de alerta por correo/SMS |
|
||||
|
||||
## 7. Gestión financiera, seguros y banca
|
||||
|
||||
Los escenarios del sector financiero se centran en el control de riesgos y la inteligencia empresarial. Las aplicaciones típicas incluyen evaluación de riesgos crediticios, asesor de gestión patrimonial, generación de informes financieros, monitoreo contra el blanqueo de capitales, etc., mejorando la eficiencia operativa y la capacidad de gestión de riesgos de las instituciones financieras.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Asistente de generación inteligente de informes de debida diligencia crediticia | Ingreso de información básica de la empresa y datos financieros, LLM genera automáticamente el informe de debida diligencia crediticia; marcado automático de puntos de riesgo |
|
||||
| 2 | Asesor inteligente de gestión de patrimonio bancario privado | LLM analiza el perfil de riesgo y los objetivos financieros del cliente, genera recomendaciones de asignación de activos; integración con productos financieros y base de fondos |
|
||||
| 3 | Asistente de generación inteligente y verificación de cumplimiento de prospectos de IPO | Plantillas modulares del prospecto de oferta, LLM llena automáticamente la descripción del negocio y los factores de riesgo; motor de reglas de verificación de cumplimiento para comprobar la consistencia entre secciones |
|
||||
| 4 | Sistema de generación automática de informes financieros y alerta de anomalías operativas | Recopilación automática de datos del sistema financiero, LLM genera la sección de análisis financiero y discusión de la dirección; reglas de alerta para indicadores anómalos |
|
||||
| 5 | Asistente de extracción de información y preguntas y respuestas sobre facturas y recibos financieros | Carga de imágenes de facturas, OCR reconoce la información, LLM responde preguntas relacionadas con los documentos; soporte para facturas de IVA, billetes de tren, etc. |
|
||||
| 6 | Asistente de búsqueda inteligente y preguntas y respuestas sobre casos regulatorios | Construcción de base de conocimiento basada en casos de sanciones regulatorias, LLM responde preguntas de cumplimiento y proporciona referencias de casos |
|
||||
| 7 | Entrenador inteligente de guiones para agentes de seguros | LLM asume el papel de diferentes tipos de clientes para simular conversaciones, evalúa la conformidad y la persuasión del guion del agente; análisis de transcripción de grabaciones |
|
||||
| 8 | Plataforma de análisis de cláusulas de pólizas de seguros y comparación con la competencia | Análisis estructurado de cláusulas, LLM genera resúmenes de puntos destacados y precauciones |
|
||||
| 9 | Servicio de reconocimiento de emociones en conversaciones con clientes | Reconocimiento de emociones por voz combinado con detección de conformidad del guion, retroalimentación en tiempo real de sugerencias de mejora para el agente |
|
||||
| 10 | Asistente de consulta inteligente del progreso de reclamaciones de seguros y diálogo | El usuario ingresa el número de póliza o de denuncia, LLM consulta el progreso de la reclamación y responde preguntas relacionadas |
|
||||
|
||||
## 8. Servicios empresariales
|
||||
|
||||
Los escenarios de servicios empresariales buscan mejorar la eficiencia operativa y el nivel de gestión organizacional. Las aplicaciones comunes incluyen gestión de relaciones con clientes, predicción de ventas, monitoreo de reputación, gestión inteligente de RRHH, etc., ayudando a las empresas a lograr su transformación digital.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Plataforma de análisis de retención de clientes y alerta temprana de pérdida | Recopilación de datos de comportamiento mediante tracking de usuarios, modelo ML predice la probabilidad de pérdida, LLM genera sugerencias de retención |
|
||||
| 2 | Plataforma de prospección y correo de marketing B2B | Filtrado de clientes objetivo a partir de datos empresariales, LLM genera contenido de marketing personalizado; integración con plataforma de envío masivo de correos |
|
||||
| 3 | Plataforma de monitoreo de pipeline de ventas y predicción de resultados | Recopilación automática de datos de CRM, LLM analiza el embudo de ventas y predice el cumplimiento de objetivos; alertas de anomalías para los gerentes |
|
||||
| 4 | Radar de monitoreo de reputación de marca y alerta temprana de crisis | Recopilación de datos de opinión pública de toda la web (redes sociales, noticias, foros), LLM analiza sentimientos y tendencias de propagación; alertas de crisis |
|
||||
| 5 | Asistente inteligente de redacción de correos profesionales y gestión de la comunicación emocional | Comprensión del contexto del correo, LLM genera borradores de correos profesionales; análisis de emociones con retroalimentación de sugerencias de mejora |
|
||||
| 6 | Sistema de análisis inteligente de currículums y emparejamiento con puestos | Análisis de PDF de currículums para extraer información clave, LLM empareja con puestos adecuados y genera sugerencias de entrevista; integración con sistemas ATS |
|
||||
| 7 | Guía de incorporación y asistente de preguntas y respuestas para nuevos empleados | Búsqueda RAG en base de conocimiento de documentos de incorporación, LLM responde preguntas frecuentes de los nuevos empleados |
|
||||
| 8 | Plataforma de retroalimentación de desempeño y gestión de objetivos OKR | Recopilación de datos del sistema OKR, LLM analiza el cumplimiento de objetivos y genera sugerencias de retroalimentación; recopilación de feedback 360° |
|
||||
| 9 | Registro inteligente de reuniones y gestión de tareas pendientes | Transcripción de grabaciones de reuniones, LLM extrae puntos clave de discusión y tareas pendientes; creación automática de tareas en el sistema de gestión |
|
||||
| 10 | Reconocimiento de facturas y procesamiento automatizado de reembolsos | OCR reconoce la información de las facturas, verificación automática de autenticidad y cumplimiento de políticas de reembolso; integración con el sistema financiero |
|
||||
|
||||
## 9. Producción y gestión de contenido
|
||||
|
||||
Los escenarios de producción y gestión de contenido se centran en la generación creativa y la gestión de tráfico. Las aplicaciones centrales incluyen creación de textos, producción de videos cortos, transmisión en vivo con avatares digitales, optimización SEO, etc., ayudando a las empresas a mejorar la eficiencia de producción de contenido y las tasas de conversión de marketing.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Plataforma de asistencia creativa para contenido de cine y televisión y novelas | LLM proporciona asistencia creativa como sinopsis, desarrollo de personajes, generación de diálogos; mapas mentales para visualizar la estructura de la historia |
|
||||
| 2 | Asistente de redacción inteligente de historias de marca y artículos de relaciones públicas | Ingreso de palabras clave de marca e información del producto, LLM genera versiones de textos en múltiples estilos; integración con API de pruebas A/B |
|
||||
| 3 | Sistema de gestión de transmisión en vivo e interacción de avatares digitales virtuales | Modelado de imagen digital + voz TTS + diálogo LLM, respuesta en tiempo real a los comentarios de los espectadores; integración con transmisión OBS |
|
||||
| 4 | Generación de guiones de videos cortos y edición inteligente | LLM genera guiones y storyboards de videos cortos, Sora/Runway genera fragmentos de video; herramienta de edición los ensambla automáticamente |
|
||||
| 5 | Transcripción por voz de reuniones de ventas y recomendación de guiones | Transcripción ASR de llamadas telefónicas, LLM analiza la conversación y recomienda guiones ganadores; integración con sistema CRM |
|
||||
| 6 | Sistema inteligente de generación y diseño de contenido de marketing | Ingreso de información del producto, LLM genera textos de marketing y extracción de puntos de venta; integración con plantillas de Canva/Gaoding |
|
||||
| 7 | Sistema de monitoreo en tiempo real del ROI de publicidad multicanal y optimización de estrategias | Integración con APIs de plataformas publicitarias para recopilar datos, LLM analiza el rendimiento y genera sugerencias de optimización; alertas de anomalías |
|
||||
| 8 | Análisis de palabras clave de motores de búsqueda y análisis de tráfico | Recopilación de datos de Baidu Index, 5118, LLM analiza tendencias y competitividad de palabras clave; recomendación de temas de contenido |
|
||||
| 9 | Plataforma de análisis de publicidad de la competencia | API de plataformas de datos de terceros para recopilar anuncios de la competencia, LLM analiza estrategias de publicación y características creativas |
|
||||
| 10 | Sistema de análisis inteligente de temas populares y recomendación de contenido de toda la web | Recopilación de datos de tendencias de Weibo, listas populares de Douyin, LLM analiza tendencias y recomienda ángulos temáticos; programación calendario de contenido |
|
||||
|
||||
## 10. Administración pública inteligente
|
||||
|
||||
Los escenarios de administración pública inteligente buscan mejorar la eficiencia del servicio gubernamental y la capacidad de gobernanza. Las aplicaciones típicas incluyen navegación inteligente de líneas de servicio gubernamental, preguntas y respuestas sobre políticas, optimización de trámites administrativos, gestión de eventos urbanos, etc., promoviendo la construcción del gobierno digital.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Sistema de navegación por voz inteligente y despacho automático de la línea de servicio ciudadano 12345 | Reconocimiento de voz de las llamadas de los ciudadanos, LLM comprende la solicitud y la despacha inteligentemente al departamento correspondiente; flujo automático de tickets |
|
||||
| 2 | Robot de guía inteligente y respuestas sobre políticas para oficinas de servicios gubernamentales | Búsqueda RAG en base de conocimiento gubernamental, LLM responde sobre procedimientos y políticas; integración con sistema de turnos |
|
||||
| 3 | Plataforma de emparejamiento inteligente y envío preciso de políticas de beneficio empresarial | Análisis estructurado de políticas, perfil empresarial con emparejamiento automático de políticas aplicables; recordatorios por SMS/correo |
|
||||
| 4 | Asistente de pre-revisión inteligente y verificación de cumplimiento de materiales administrativos | Reconocimiento OCR de materiales y extracción de información clave, LLM verifica la integridad y conformidad de los documentos |
|
||||
| 5 | Sistema de detección de comportamiento anómalo en videovigilancia de seguridad pública | Análisis en tiempo real de flujos de video, modelo CV detecta comportamientos anómalos (peleas, caídas, etc.); notificaciones de alerta |
|
||||
| 6 | Plataforma de identificación inteligente y gestión de despacho de eventos urbanos en cuadrícula | Recopilación de datos de percepción urbana (IoT, cámaras), LLM identifica el tipo de evento y lo despacha |
|
||||
| 7 | Sistema de análisis big data de opinión pública y alerta temprana de riesgos sociales | Análisis fusionado de múltiples fuentes de datos (línea de servicio gubernamental, opinión pública en internet, encuestas comunitarias); LLM identifica puntos calientes de riesgo |
|
||||
| 8 | Plataforma de digitalización y archivo inteligente de registros gubernamentales | OCR reconoce el contenido textual de los archivos, LLM extrae información clave y los clasifica automáticamente; soporte de búsqueda de texto completo |
|
||||
| 9 | Plataforma de comando de emergencia y despacho inteligente de recursos de rescate para eventos públicos | Recopilación de información del evento, LLM genera el plan de respuesta de emergencia; algoritmo de optimización de despacho de recursos |
|
||||
| 10 | Sistema de monitoreo en cuadrícula de contaminación ambiental atmosférica y localización precisa de fuentes | Recopilación de datos de sensores de calidad del aire, modelo CV identifica fuentes de contaminación; LLM analiza tendencias de contaminación y rastrea el origen |
|
||||
|
||||
## 11. Asuntos legales y gestión de contratos
|
||||
|
||||
Los escenarios de asuntos legales se centran en la mejora de la eficiencia de los servicios legales y la gestión de cumplimiento. Las aplicaciones comunes incluyen revisión de contratos, análisis de casos, monitoreo regulatorio, generación de documentos legales, etc., proporcionando herramientas inteligentes para los profesionales del derecho.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Agent de detección de riesgos y vulnerabilidades en contratos con un clic | Análisis estructurado del texto del contrato, LLM identifica problemas potenciales comparando con la lista de verificación de riesgos; marcado de cláusulas de alto riesgo |
|
||||
| 2 | Plataforma de revisión de cumplimiento y sugerencias de modificación de contratos empresariales en todo su ciclo de vida | Comparación de cláusulas contractuales con la base de datos normativa, LLM genera informes de cumplimiento; seguimiento de sugerencias de modificación |
|
||||
| 3 | Asesor de evaluación inteligente por IA de la tasa de éxito en casos similares | Extracción de características del caso, búsqueda y emparejamiento de casos similares; LLM analiza los factores que influyen en el éxito |
|
||||
| 4 | Radar de monitoreo en tiempo real de cambios legislativos y análisis de impacto empresarial | Actualización en tiempo real de la base de datos legislativa, LLM analiza el contenido modificado y evalúa el impacto empresarial; notificaciones de alerta |
|
||||
| 5 | Herramienta de redacción automática AIGC de cartas de abogado | Ingreso de la declaración de hechos, LLM genera plantillas de cartas de abogado estandarizadas; verificación de elementos y cumplimiento normativo |
|
||||
| 6 | Grabadora de transcripción en tiempo real de juicios y extracción automatizada de puntos de controversia | Transcripción ASR de grabaciones de juicios, LLM extrae puntos de controversia y argumentos clave; marcado de marcas de tiempo |
|
||||
| 7 | Sistema de monitoreo automatizado de infracciones de propiedad intelectual y obtención de pruebas blockchain de toda la web | Monitoreo de infracciones en plataformas de comercio electrónico y redes sociales; recopilación y almacenamiento automático de evidencia |
|
||||
| 8 | Agent de verificación de consistencia de datos clave y alerta temprana de riesgos en prospectos de IPO basado en LLM | Comparación de datos entre múltiples secciones del prospecto, LLM identifica inconsistencias y anomalías en los datos; marcado de riesgos |
|
||||
| 9 | Plugin de explicación en lenguaje sencillo de cláusulas legales complejas | Selección de disposiciones legales, LLM genera explicaciones fáciles de entender |
|
||||
| 10 | Sistema de organización inteligente y visualización de la cadena de pruebas de un caso | Carga de materiales probatorios, LLM analiza las relaciones entre pruebas y la línea de tiempo |
|
||||
|
||||
## 12. Turismo y servicios de viaje
|
||||
|
||||
Los escenarios de turismo y viajes buscan mejorar la experiencia de viaje y la comodidad del servicio. Las aplicaciones centrales incluyen planificación inteligente de itinerarios, predicción de precios, tours virtuales, servicios de traducción, etc., haciendo que los viajes sean más agradables y sin complicaciones.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Generador de itinerarios automáticos basado en AIGC para viajeros perezosos | Ingreso de preferencias del usuario (días, presupuesto, intereses), LLM genera planes de itinerario diario; API de atracciones para obtener horarios y precios de entradas |
|
||||
| 2 | Robot de predicción de tendencias de precios de vuelos y hoteles de toda la web y bloqueo automático de precios bajos | Recopilación de datos de precios de plataformas OTA, modelo ML predice tendencias de precios; alertas de monitoreo de precios |
|
||||
| 3 | Asesor de reorganización de itinerarios entre aerolíneas y recomendación de planes de emergencia tras cancelación de vuelos | Monitoreo del estado de vuelos, LLM analiza planes de itinerario alternativos; comparación de precios entre aerolíneas |
|
||||
| 4 | Sistema de pre-revisión inteligente de documentos de visa y asistencia de llenado automatizado | Carga de fotos de documentos, verificación de integridad de información mediante OCR; llenado automático de formularios |
|
||||
| 5 | Asistente de traducción por voz en tiempo real y traducción visual de menús para viajes al extranjero | Modelo de traducción por voz sin conexión, OCR de imágenes de menús para reconocimiento y traducción |
|
||||
| 6 | Analizador de guía para evitar hoteles problemáticos basado en reseñas reales de big data | Recopilación de datos de reseñas de hoteles, LLM extrae palabras clave de reseñas positivas y negativas |
|
||||
| 7 | Plataforma de vista previa inmersiva en VR y selección virtual de habitaciones en el destino | Recopilación de imágenes panorámicas 360°, tecnología VR para vista previa inmersiva; recorrido virtual de habitaciones |
|
||||
| 8 | Asistente de generación automática de diarios de viaje ilustrados y textos para redes sociales a partir de huellas de viaje | Extracción de información de fecha y lugar de las fotos, LLM genera textos de diarios de viaje; composición con plantillas |
|
||||
| 9 | Plataforma de recopilación automática de facturas de viajes de negocios y gestión de reembolsos conforme a normativa | Integración con API de plataformas de viajes, recopilación automática de información de facturas; verificación de cumplimiento |
|
||||
| 10 | Predicción en tiempo real de congestión de visitantes y navegación con rutas de visita en horarios no pico | Recopilación de datos de flujo de visitantes en atracciones, modelo ML predice períodos de congestión; recomendación de horarios no pico |
|
||||
|
||||
## 13. Acompañamiento emocional
|
||||
|
||||
Los escenarios de acompañamiento emocional se centran en la salud mental y el consuelo emocional. Las aplicaciones típicas incluyen compañeros virtuales, consultas emocionales, entrenamiento cognitivo, orientación psicológica, etc., proporcionando acompañamiento y apoyo las 24 horas del día.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Compañero virtual de compañía profunda 24 horas basado en modelos LLM | Sistema de memoria que almacena el historial de conversaciones, LLM genera respuestas personalizadas; módulo de apoyo emocional |
|
||||
| 2 | Asesor de IA de reconocimiento emocional multimodal y orientación psicológica | Análisis de tono de voz + reconocimiento de emociones en texto, LLM genera sugerencias de orientación; alerta de intervención en crisis |
|
||||
| 3 | Avatar digital de entrenamiento cognitivo y recuperación de memorias para personas con Alzheimer | Juegos cognitivos (memoria, cálculo, lenguaje) para entrenamiento; fotografías antiguas/canciones antiguas que activan recuerdos |
|
||||
| 4 | Entrenador de práctica social simulada con AIGC para personas con ansiedad social | Simulación de escenarios sociales virtuales, LLM asume diferentes roles; sugerencias de habilidades sociales |
|
||||
| 5 | Generador personalizado de cuentos para dormir para niños con IA generativa | Los padres ingresan el tema y las preferencias, LLM genera cuentos personalizados; generación de música de fondo |
|
||||
| 6 | Sistema de restauración digital de vidas de seres queridos fallecidos y diálogo trans temporal con LLM | Entrenamiento de modelo personalizado con datos vitales (voz, textos); generación de conversaciones con memoria |
|
||||
| 7 | Chatbot empático de espejo de personalidad basado en datos MBTI con IA | Ingreso de resultados de tests MBTI, LLM genera análisis de personalidad y respuestas empáticas; recomendaciones de compatibilidad de personalidad |
|
||||
| 8 | Asistente de monitoreo del estado de ánimo las 24 horas y motivación emocional positiva con IA | Registro diario del estado de ánimo, LLM analiza tendencias y genera contenido motivacional; envío de recordatorios positivos |
|
||||
| 9 | Refugio anónimo de desahogo para adolescentes con protección de privacidad con IA | Entrada anónima de desahogo, LLM proporciona escucha y sugerencias; alerta por palabras sensibles |
|
||||
| 10 | Sistema de crianza de mascotas virtuales con IA y capacidad de evolución autónoma | Entrenamiento de modelo de personalidad de mascota, crecimiento y evolución a través de interacción conversacional; sistema de vestuario virtual |
|
||||
|
||||
## 14. Entretenimiento y ocio
|
||||
|
||||
Los escenarios de entretenimiento y ocio buscan ofrecer una rica experiencia de entretenimiento digital. Las aplicaciones comunes incluyen toma de decisiones inteligente de NPC en juegos, asistencia en juegos de misterio, creación de contenido, procesamiento de audio y video, etc., satisfaciendo las diversas necesidades de entretenimiento de los usuarios.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Motor de toma de decisiones autónoma para NPC de juegos de mundo abierto impulsado por LLM | Árbol de comportamiento del NPC integrado con toma de decisiones LLM, sistema de diálogo genera interacciones personalizadas; motor de comportamiento |
|
||||
| 2 | Herramienta de deducción de tramas AIGC y asistencia de control de DM para juegos de misterio inmersivos | Las elecciones de los jugadores activan ramas de la historia, LLM genera lógica deductiva; generación automática de tarjetas de pistas |
|
||||
| 3 | Modificador generativo de finales de novelas interactivas | Las elecciones del lector influyen en la dirección de la trama, LLM genera múltiples ramas de finales |
|
||||
| 4 | Estación de trabajo de generación automática AIGC de modelos 3D de personajes de anime | Texto descriptivo genera bocetos de personajes, herramientas de modelado 3D crean automáticamente los modelos; renderizado de texturas y materiales |
|
||||
| 5 | Análisis visual CV y comentarista inteligente por IA de partidas de esports | Análisis en tiempo real de la pantalla del juego, identificación de momentos clave; LLM genera textos de comentario |
|
||||
| 6 | Motor de algoritmo de recomendación de contenido humorístico personalizado | Perfil de intereses del usuario, emparejamiento y recomendación de contenido humorístico |
|
||||
| 7 | Software de corrección de afinación por IA y embellecimiento vocal para karaoke | Procesamiento de reducción de ruido y mejora de voz; algoritmo de corrección de afinación por IA |
|
||||
| 8 | Herramienta de extracción por IA y edición de tramas específicas de personajes en series y películas | Análisis del contenido del video, extracción de fragmentos relacionados con personajes; edición automática |
|
||||
| 9 | Sistema de generación automática de audiolibros con síntesis TTS multicolor | Asignación de personajes del texto, generación de voces personalizadas; adición de música de fondo y efectos de sonido |
|
||||
| 10 | Entrenador de revisión y juego de ajedrez y juegos de mesa con aprendizaje por refuerzo | Análisis de partidas, simulación de oponentes con IA; generación de sugerencias de revisión |
|
||||
|
||||
## 15. Servicios de comercio electrónico
|
||||
|
||||
Los escenarios de servicios de comercio electrónico se centran en la eficiencia operativa y la mejora de la conversión. Las aplicaciones centrales incluyen generación de contenido de productos, transmisión en vivo de ventas, servicio al cliente, análisis de precios, etc., ayudando a los comerciantes a lograr una operación inteligente.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Herramienta de producción masiva de páginas de detalles de productos AIGC con alta tasa de conversión | Ingreso de información del producto, LLM genera textos de puntos de venta y descripciones de escenarios; generación de imágenes de fondo |
|
||||
| 2 | Fábrica de generación de videos de prueba de vestir y exhibición de modelos virtuales con IA para moda | Procesamiento de fotos planas de ropa, generación de efectos de prueba de vestir en modelos virtuales; videos de exhibición desde múltiples ángulos |
|
||||
| 3 | Asistente de traducción y pulido localizado multilingüe con LLM para comercio electrónico transfronterizo | Traducción multilingüe de descripciones de productos, pulido de adaptación cultural; interfaces de publicación en múltiples plataformas |
|
||||
| 4 | Robot de análisis de sentimientos de clientes y respuesta inteligente basado en NLP | Análisis de sentimientos en conversaciones de consultas, generación automática de respuestas de consuelo; clasificación de reseñas positivas y negativas |
|
||||
| 5 | Sistema de transmisión en vivo con avatares digitales AIGC las 24 horas | Imagen digital + generación de guiones en tiempo real, invocación en tiempo real de información de productos; respuestas interactivas a comentarios |
|
||||
| 6 | Plugin de comparación de precios por IA y predicción de tendencias de productos similares de toda la web | Rastreo de precios en plataformas de comercio electrónico, visualización de comparación de precios; predicción de tendencias de precios |
|
||||
| 7 | Plataforma de selección inteligente por IA de fotos de reseñas de clientes y síntesis de videos cortos | Puntuación de calidad de fotos de reseñas de clientes, recomendación automática de contenido de calidad; síntesis con plantillas de videos cortos |
|
||||
| 8 | Análisis por voz en tiempo real de conversaciones de ventas y recomendación de guiones ganadores basado en LLM | Transcripción ASR de llamadas, detección de conformidad de guiones en tiempo real; recomendación de guiones |
|
||||
| 9 | Motor de análisis de tendencias de mercado por IA y predicción de productos exitosos | Recopilación y análisis de datos de redes sociales y comercio electrónico, LLM identifica tendencias populares; recomendaciones de selección de productos |
|
||||
| 10 | Sistema de agrupación por IA de perfiles de usuarios de tráfico privado y operación de precisión | Análisis de agrupación de datos de comportamiento de usuarios, generación de etiquetas de perfiles; activación de marketing automatizado |
|
||||
|
||||
## 16. Energía
|
||||
|
||||
Los escenarios del sector energético buscan lograr una gestión inteligente y la transición verde de la industria energética. Las aplicaciones típicas incluyen análisis de consumo eléctrico, detección de equipos, cálculo de emisiones de carbono, optimización de despacho, etc., promoviendo la operación eficiente de los sistemas energéticos.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Asesor de análisis del comportamiento de consumo eléctrico doméstico y estrategias de ahorro energético con IA | Recopilación de datos de medidores inteligentes, análisis de patrones de consumo; LLM genera recomendaciones de ahorro energético |
|
||||
| 2 | Sistema de reconocimiento visual CV por dron de defectos en paneles fotovoltaicos | Inspección con dron, análisis de imágenes termoinfrarrojas; detección y marcado de defectos |
|
||||
| 3 | Agente de predicción de tendencias de precios de mercado eléctrico al contado y estrategia automática de ganancias con IA | Recopilación de datos del mercado eléctrico, modelo de predicción de precios; generación y ejecución de estrategias de trading |
|
||||
| 4 | Sistema de evaluación de salud no destructiva por IA y alerta temprana de riesgo de fuga térmica de baterías de almacenamiento | Monitoreo de datos operativos de baterías, modelo de evaluación de salud; alertas de riesgo |
|
||||
| 5 | Asistente de cálculo automático de emisiones de carbono en toda la cadena empresarial y generación de informes ESG con IA | Recopilación de datos de consumo energético, cálculo de factores de emisión de carbono; generación automática de informes ESG |
|
||||
| 6 | Sistema de predicción de carga ante clima extremo y comando de despacho de emergencia de la red eléctrica con IA | Integración de datos meteorológicos, modelo de predicción de carga; generación de estrategias de despacho |
|
||||
| 7 | Guardián de reconocimiento por video por IA y alerta de comportamientos indebidos en gasolineras | Análisis de videovigilancia, detección de comportamientos indebidos (hablar por teléfono, fumar, etc.); notificaciones de alerta |
|
||||
| 8 | Sistema de monitoreo por ondas acústicas por IA y localización precisa de fugas en oleoductos y gasoductos de gran longitud | Recopilación de datos de sensores acústicos, modelo de detección de fugas; cálculo de algoritmos de localización |
|
||||
| 9 | Sistema de agregación de recursos de plantas virtuales y toma de decisiones de trading eléctrico por IA | Conexión de recursos distribuidos, optimización de despacho agregado; ejecución de estrategias de trading |
|
||||
| 10 | Seguimiento por IA de la ubicación de personal en minas y alerta de intrusión en zonas peligrosas | Localización UWB/Bluetooth, seguimiento de trayectoria del personal; vallas electrónicas en zonas peligrosas |
|
||||
|
||||
## 17. Audio y video
|
||||
|
||||
Los escenarios de audio y video se centran en la producción de contenido y el procesamiento de medios. Las aplicaciones comunes incluyen edición de video, síntesis de voz, generación de subtítulos, restauración de video, etc., mejorando la eficiencia y calidad de la producción de contenido audiovisual.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Herramienta de identificación por IA de fragmentos destacados y edición automática de videos cortos a partir de videos largos | Análisis del contenido del video, identificación de fotogramas clave; edición automática de fragmentos destacados |
|
||||
| 2 | Asistente de separación inteligente de ruido de fondo y mejora de voz por IA en video | Modelo de separación de audio, eliminación de ruido de fondo; procesamiento de mejora de voz |
|
||||
| 3 | Estación de trabajo de restauración 4K y colorización inteligente por IA de material audiovisual antiguo | Modelo de superresolución de video, restauración de calidad de material antiguo; colorización automática por IA |
|
||||
| 4 | Sistema de doblaje TTS de texto a voz de nivel realista y control emocional | Modelo TTS multicolor, generación con control emocional; exportación de audio |
|
||||
| 5 | Herramienta de reconocimiento automático ASR de voz de video y generación de subtítulos bilingües | Reconocimiento de voz para generar subtítulos, traducción a múltiples idiomas; superposición de subtítulos bilingües |
|
||||
| 6 | Motor de eliminación inteligente por IA de objetos innecesarios en la imagen del video | Seguimiento de objetivos en video, eliminación y reparación de objetos; procesamiento de consistencia entre fotogramas |
|
||||
| 7 | Compositor automático AIGC de música de fondo sin derechos de autor | Modelo de generación musical, control de estilo y emoción; detección de derechos de autor |
|
||||
| 8 | Software de clonación de timbre de voz por IA y conversión de voz para personas específicas | Entrenamiento de modelo de timbre con pocas muestras de voz; procesamiento de cambio de voz |
|
||||
| 9 | Plataforma de conversión de guiones a storyboards con un clic y generación de videos de previsualización dinámica por IA | Análisis de guiones para generar storyboards, IA genera videos de previsualización |
|
||||
| 10 | Asistente de transcripción inteligente por IA y extracción de tareas pendientes de grabaciones de reuniones | Separación y transcripción de voz en reuniones de múltiples participantes, LLM extrae tareas pendientes; marcado de marcas de tiempo |
|
||||
|
||||
## 18. Marketing con IA
|
||||
|
||||
Los escenarios de marketing con IA buscan mejorar la eficiencia del marketing y la producción creativa. Las aplicaciones centrales incluyen generación de textos, diseño de pósters, seguimiento de tendencias, análisis de la competencia, etc., ayudando a las empresas a lograr un marketing preciso y la difusión de marca.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Motor de redacción automática AIGC de textos virales para Xiaohongshu (RED) | Ingreso del tema, LLM genera textos de recomendación; optimización de emoji y etiquetas de temas |
|
||||
| 2 | Herramienta de diseño inteligente de pósters de marketing y adaptación a múltiples tamaños | Ingreso del texto, emparejamiento inteligente de plantillas de pósters y exportación en múltiples tamaños |
|
||||
| 3 | Plataforma de generación creativa AIGC de LOGO de marca y construcción del sistema de identidad visual (VI) | Ingreso de palabras clave de marca, generación creativa de LOGO; generación de normativas VI |
|
||||
| 4 | Asistente de seguimiento de tendencias populares por IA y generación creativa de marketing oportunista | Recopilación de datos de tendencias, LLM analiza ángulos de marketing; generación de propuestas creativas |
|
||||
| 5 | Monitor en tiempo real del ROI de publicidad y asistente de puja presupuestaria por IA | Integración con datos de plataformas publicitarias, modelo de análisis de rendimiento; optimización de estrategias de puja |
|
||||
| 6 | Analizador profundo de estrategias de marketing de la competencia y generador semanal de informes por IA | Recopilación y análisis de contenido de la competencia, extracción de estrategias; generación automática de informes semanales |
|
||||
| 7 | Diseño inteligente de palabras clave de motores de búsqueda y redacción masiva de artículos para generar tráfico | Análisis de palabras clave, generación masiva de artículos; sugerencias de optimización SEO |
|
||||
| 8 | Experto en redacción por IA de correos de marketing personalizados para cada usuario | Datos de perfiles de usuarios, generación de contenido personalizado; pruebas A/B |
|
||||
| 9 | Radar de monitoreo de reputación de marca de toda la web y alerta temprana de crisis de opinión pública por IA | Recopilación de datos de opinión pública de toda la web, análisis de sentimientos; notificaciones de alerta de crisis |
|
||||
| 10 | Asistente de generación creativa AIGC de guiones de videos cortos y guía de storyboards | Ingreso del tema, generación de guiones y storyboards; guía de sugerencias de filmación |
|
||||
|
||||
## 19. Inteligencia de datos
|
||||
|
||||
Los escenarios de inteligencia de datos se centran en el análisis de datos y la extracción de valor. Las aplicaciones típicas incluyen consultas en lenguaje natural, generación de visualizaciones, gobernanza de datos, construcción de grafos de conocimiento, etc., ayudando a las empresas a lograr un soporte para la toma de decisiones basada en datos.
|
||||
|
||||
| N.º | Nombre del escenario de aplicación | Referencia de implementación |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Motor de consulta en lenguaje natural basado en Text-to-SQL | Conversión de lenguaje natural a consultas SQL, visualización de resultados |
|
||||
| 2 | BI conversacional: generar gráficos de visualización con una frase | Descripción de necesidades de datos, generación automática de gráficos; soporte de cambio entre múltiples tipos de gráficos |
|
||||
| 3 | Herramienta de reconocimiento de tablas Excel a partir de capturas de pantalla con un clic | Carga de capturas de pantalla, VLM reconoce la estructura de la tabla y los datos; exportación a archivo Excel |
|
||||
| 4 | Herramienta de reconocimiento por IA de tablas a partir de imágenes y capturas de pantalla para Excel | OCR de imágenes para reconocer la estructura de la tabla, exportación de datos a Excel |
|
||||
| 5 | Construcción automatizada de grafos de conocimiento de datos heterogéneos multifuente | Conexión de múltiples fuentes de datos, extracción de entidades y relaciones; almacenamiento en base de datos de grafos |
|
||||
| 6 | Asistente de interpretación inteligente y análisis de tendencias de informes de datos | Carga de imágenes de informes de datos o ingreso de datos, VLM interpreta el contenido de los gráficos y analiza tendencias |
|
||||
| 7 | Asistente de interpretación inteligente de estructura de tablas de base de datos y generación de ejemplos de consultas | Ingreso de nombre de tabla o descripción de campos, LLM genera descripción de la tabla y sentencias SQL de ejemplo |
|
||||
| 8 | Alineación inteligente de datos maestros empresariales y eliminación de duplicados por IA | Emparejamiento de datos maestros multifuente, identificación de registros duplicados; configuración de reglas de fusión |
|
||||
| 9 | Herramienta de conversión inteligente de documentos de requisitos de datos a casos de prueba | Ingreso de descripción de requisitos de datos, LLM genera escenarios de prueba y casos de validación |
|
||||
| 10 | Asistente inteligente de preguntas y respuestas sobre definiciones de indicadores de datos | Construcción de base de conocimiento basada en documentos de definición de indicadores, LLM responde preguntas sobre definiciones de indicadores, lógica de cálculo, etc. |
|
||||
@@ -0,0 +1,496 @@
|
||||
---
|
||||
title: 'Usa Jobs to Be Done para encontrar lo que los usuarios realmente quieren lograr'
|
||||
description: 'Comprende que los usuarios no compran funciones, sino que "contratan" tu producto para completar un progreso en un escenario especifico.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>1.5 horas</strong>'
|
||||
</script>
|
||||
|
||||
# Usa Jobs to Be Done para encontrar lo que los usuarios realmente quieren lograr
|
||||
|
||||
<a id="top-jtbd"></a>
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['JTBD', 'Necesidades del usuario', 'Pensamiento de producto', 'Insight de necesidades']"
|
||||
coreOutput="1 frase JTBD que se parezca mas a una necesidad real"
|
||||
expectedOutput="Poder convertir una idea vaga en un escenario de usuario y una direccion MVP mas concretos"
|
||||
>
|
||||
|
||||
Muchas personas que empiezan a hacer productos cometen el error de centrar toda su atencion en "que funcionalidad voy a hacer". Ves que otros tienen clasificacion inteligente, y tu tambien quieres anadirla; ves que otros tienen resumen automatico, y tu tambien quieres integrarlo; ves que otros han hecho Agent, multimodal, workflows, y sientes que no puedes quedarte atras.
|
||||
|
||||
Pero en la realidad, los usuarios rara vez deciden usar un producto porque "el nombre de la funcion es genial". Lo que hacen es, en un momento concreto, querer avanzar en algo, y por ello "contratan" temporalmente una herramienta, un servicio, o incluso a una persona, para ayudarles a completar ese paso.
|
||||
|
||||
Esto es exactamente lo que el metodo **Jobs to Be Done (JTBD)** quiere recordarnos: **los usuarios no compran funciones en si, sino que contratan alguna solucion para ayudarles a completar un progreso.**
|
||||
|
||||
Este articulo te guiara desde cero para entender JTBD en un lenguaje lo mas claro posible, y convertirlo en una herramienta de analisis que puedas usar directamente al hacer aplicaciones de IA.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimo
|
||||
**Objetivo**: Despues de leer, sabras mejor como convertir una idea vaga en una necesidad con un escenario de usuario real, en lugar de tener solo un monton de nombres de funciones en la cabeza.
|
||||
|
||||
**Accion**: Escribe 1 idea vaga, encuentra 3 usuarios potenciales y preguntales "la ultima vez, como lo manejaste", y luego organizalo en 1 frase JTBD.
|
||||
|
||||
**Resultado**: Obtendras una hipotesis de necesidad mas clara, sabiendo que debes resolver primero en la primera version.
|
||||
|
||||
**Enlaces rapidos**: [Que es JTBD](#jtbd-what) · [Formula de una frase](#jtbd-formula) · [Como te ayuda la IA](#jtbd-ai)
|
||||
:::
|
||||
|
||||
## Aprenderas lo siguiente
|
||||
|
||||
1. Que es Jobs to Be Done, y por que esta mas cerca de las necesidades reales que el "brainstorming de funciones"
|
||||
2. Como distinguir entre "funciones que el usuario dice querer" y "lo que el usuario realmente quiere lograr"
|
||||
3. Como usar una plantilla simple para descomponer una idea vaga en escenario, disparador, obstaculo y criterio de exito
|
||||
4. Como usar JTBD en productos de IA, preguntas de entrevistas y organizacion de prompts
|
||||
|
||||
<a id="jtbd-what"></a>
|
||||
## [1. Que es Jobs to Be Done](#top-jtbd)
|
||||
|
||||
Jobs to Be Done se abrevia comunmente como **JTBD**. Su idea central esta relacionada con la expresion clasica promovida por el equipo de Clayton Christensen: **los usuarios "contrataran" un producto para completar una tarea.**
|
||||
|
||||
La "tarea" aqui no es una accion superficial de una lista de pendientes, sino un **progreso** que el usuario espera que ocurra en su estado. Por ejemplo:
|
||||
|
||||
- No es "quiero una herramienta de actas con IA", sino "quiero tener los puntos clave, las tareas pendientes y los responsables organizados en 10 minutos despues de la reunion, sin depender de la memoria para completar las notas"
|
||||
- No es "quiero una app de contabilidad", sino "quiero saber en que se me va el dinero, para no estar ansioso a fin de mes"
|
||||
- No es "quiero un optimizador de curriculum", sino "quiero enviar un curriculum decente con mas confianza, sin dudar cada vez de que lo he escrito mal"
|
||||
|
||||
Entonces, **JTBD no se centra en como se ve el producto, sino en por que el usuario lo necesita en este momento.**
|
||||
|
||||
Es por eso que muchos productos aparentemente diferentes en realidad compiten por el mismo job. El usuario quiere "no aburrirse en el camino al trabajo", y los objetos que puede contratar pueden ser videos cortos, podcasts, juegos, chat, o incluso echar una cabezadita. El usuario quiere "entender rapidamente un PDF muy largo", y los objetos que puede contratar pueden ser una herramienta de resumen con IA, un becario, un colega, leerlo a duras penas, o simplemente no leerlo.
|
||||
|
||||
Una vez que miras los problemas desde esta perspectiva, descubres que tu verdadero competidor muchas veces no es solo "otra app parecida a la tuya", sino **todas las soluciones alternativas aceptables para el usuario**.
|
||||
|
||||
## 2. En que se diferencia JTBD de los perfiles de usuario y las listas de funciones
|
||||
|
||||
Muchos principiantes, al hacer analisis de necesidades, primero escriben un perfil de usuario: 25 anos, mujer, ciudad de primer nivel, oficinista, le gustan las herramientas de eficiencia, dispuesta a probar productos nuevos. Esta informacion no se puede decir que sea completamente inutil, pero normalmente **no es suficiente para explicar por que una persona tomara accion en este momento.**
|
||||
|
||||
JTBD se preocupa mas por las siguientes preguntas:
|
||||
|
||||
- En que escenario decide buscar una solucion
|
||||
- Que es exactamente lo que le tiene bloqueado en ese momento
|
||||
- Que quiere llevar al siguiente nivel
|
||||
- Que metodo torpe esta usando actualmente para arreglarselas
|
||||
- Si las cosas se resuelven bien, que resultado le hara sentir que "valio la pena"
|
||||
|
||||
Es decir, **el perfil de usuario es mas como "quien es probablemente esta persona", mientras que JTBD es mas como "que quiere realmente lograr esta persona ahora".**
|
||||
|
||||
Asimismo, las listas de funciones tambien pueden desviar a uno. El usuario dice "quiero exportar a Word", "quiero reescritura con IA", "quiero entrada de voz"; todo esto son solo expresiones superficiales. JTBD seguira preguntando:
|
||||
|
||||
- Por que necesitas exportar a Word ahora, y no a PDF?
|
||||
- Quieres reescribir, es porque el estilo es malo, o porque necesitas adaptarlo a diferentes destinatarios?
|
||||
- Quieres entrada de voz, es porque te da pereza escribir, o porque frecuentemente estas caminando, conduciendo, o necesitas registrar justo despues de una reunion?
|
||||
|
||||
Muchas veces, **la funcion es solo una traduccion temporal del job**. Si solo recoges funciones, es facil hacer un producto donde "agregas lo que el usuario dice"; si puedes ver el job detras, tienes mas oportunidades de hacer una solucion verdaderamente comoda y competitiva.
|
||||
|
||||
## 3. Un ejemplo que hasta un principiante puede entender
|
||||
|
||||
Primero no te apresures a pensar en productos complejos de IA; empecemos con un ejemplo de la vida cotidiana.
|
||||
|
||||
Supongamos que alguien siempre llega tarde para desayunar antes de salir de casa por la manana, y a menudo compra un sandwich y un cafe en la entrada del metro. En la superficie, "compra" un desayuno; pero si lo miramos con JTBD, lo que realmente quiere lograr puede ser:
|
||||
|
||||
- Resolver una comida de la forma que menos esfuerzo mental requiera en una manana con prisa
|
||||
- Evitar llegar a la oficina muerto de hambre
|
||||
- No retrasar el ritmo de desplazamiento por desayunar
|
||||
|
||||
En este caso, el usuario no esta contratando "un sandwich de una marca fija", sino una solucion que le ayude a avanzar su manana sin problemas. Si la tienda de conveniencia de al lado es mas rapida, mas cercana y mas estable, probablemente cambiara inmediatamente su eleccion.
|
||||
|
||||
Llevando esta logica a productos de IA es aun mas evidente.
|
||||
|
||||
Por ejemplo, si quieres hacer una "herramienta de actas de reuniones con IA". Si te quedas solo en el nivel de funciones, facilmente empezaras a pensar:
|
||||
|
||||
- Deberia soportar la subida de audio?
|
||||
- Deberia integrar separacion de hablantes?
|
||||
- Deberia exportar a Markdown?
|
||||
- Deberia generar automaticamente tareas pendientes?
|
||||
|
||||
Nada de esto esta mal, pero no es suficiente. Si preguntas un nivel mas con JTBD, lo que el usuario realmente quiere lograr puede ser:
|
||||
|
||||
- Quiero tener los resultados de la discusion sincronizados con los que no asistieron en 10 minutos despues de la reunion
|
||||
- Quiero extraer limpiamente las tareas, responsables y fechas limite, sin que el equipo colabore de memoria
|
||||
- Quiero reducir el tiempo de organizacion repetitiva de contenido de reuniones, guardando energia para la toma de decisiones y el avance
|
||||
|
||||
Una vez que el job queda claro, muchas prioridades de funciones aparecen automaticamente. Lo mas importante en la primera version puede no ser "soportar 12 formatos de exportacion", sino:
|
||||
|
||||
- La estructura del acta debe ser suficientemente clara
|
||||
- La extraccion de tareas pendientes debe ser estable
|
||||
- Compartir el enlace debe ser facil
|
||||
- El resultado debe ser lo suficientemente confiable para reenviarlo directamente al equipo
|
||||
|
||||
Este es el valor de JTBD: **te ayuda a volver de "que capacidades quiero apilar" a "que progreso quiero ayudar al usuario a alcanzar".**
|
||||
|
||||
## 4. Una plantilla JTBD util
|
||||
|
||||
Si eres principiante, primero no intentes hacer JTBD muy academico. Con capturar los 5 elementos mas practicos es suficiente.
|
||||
|
||||
### 4.1 Escenario
|
||||
|
||||
En que momento y en que entorno el usuario piensa en este producto?
|
||||
|
||||
- Despues de una reunion
|
||||
- Cuando el jefe pide materiales de urgencia
|
||||
- Por la noche preparando el curriculum para enviar
|
||||
- A fin de mes descubriendo que el dinero no llega
|
||||
|
||||
**Una necesidad sin escenario normalmente no es lo suficientemente real.**
|
||||
|
||||
### 4.2 Disparador
|
||||
|
||||
Que le hace decidir buscar una solucion inmediatamente?
|
||||
|
||||
- Abrumado por un documento largo, sin saber por donde empezar
|
||||
- Tienes que entregar algo manana, y hoy descubres que el formato es un desastre
|
||||
- Tu jefe te acaba de preguntar por el progreso, y te das cuenta de que no lo tienes organizado
|
||||
- Quieres mantener un registro, pero escribir a mano, copiar y organizar es muy complicado
|
||||
|
||||
Los disparadores suelen venir con emocion. Esta emocion es importante, porque determina por que el usuario tomara accion en este momento.
|
||||
|
||||
### 4.3 El progreso que quiere lograr
|
||||
|
||||
No solo quiere "hacer una accion", sino a que nuevo estado quiere llevarse?
|
||||
|
||||
- De la confusion a la claridad
|
||||
- De la ansiedad a la tranquilidad
|
||||
- De la procrastinacion a la accion
|
||||
- De la ineficiencia a la fluidez
|
||||
- De no saber explicarse a poder entregar directamente
|
||||
|
||||
En este paso, la palabra "progreso" es clave. Porque lo que mucha gente realmente compra no es una herramienta, sino un **cambio de estado**.
|
||||
|
||||
### 4.4 Solucion alternativa actual
|
||||
|
||||
Sin tu producto, como lo hace ahora?
|
||||
|
||||
- Copiar y pegar a mano
|
||||
- Arreglarselas con Excel o notas
|
||||
- Pedir ayuda a un colega
|
||||
- Posponerlo y no hacerlo
|
||||
- Saltar entre varias herramientas
|
||||
|
||||
Quien sea la solucion alternativa, ese es tu verdadero entorno competitivo.
|
||||
|
||||
### 4.5 Criterio de exito
|
||||
|
||||
Como se sabe que el problema esta realmente resuelto?
|
||||
|
||||
- Obtener un resultado compartible en 10 minutos
|
||||
- Poder enviar a otros sin necesidad de grandes revisiones
|
||||
- No olvidar, equivocarse ni perderse cosas facilmente
|
||||
- Saber que hacer a continuacion desde el primer uso
|
||||
|
||||
Si ni siquiera puedes explicar "como juzga el usuario si valio la pena", entonces esta direccion probablemente aun no esta bien definida.
|
||||
|
||||
<a id="jtbd-formula"></a>
|
||||
## [5. Formula de una frase que puedes usar directamente](#top-jtbd)
|
||||
|
||||
Cuando quieras organizar una direccion de producto, puedes usar esta formula muy practica:
|
||||
|
||||
> Cuando __________, quiero __________, para __________.
|
||||
> Ahora solo puedo __________ para arreglarmelas con esto.
|
||||
|
||||
Por ejemplo:
|
||||
|
||||
> Cuando termino una reunion de proyecto con mucha informacion, quiero obtener rapidamente un acta con tareas, responsables y fechas limite, para poder sincronizar inmediatamente al equipo y avanzar en la ejecucion.
|
||||
> Ahora solo puedo arreglarmelas recordando, revisando el historial de chat y organizando manualmente.
|
||||
|
||||
Otro ejemplo:
|
||||
|
||||
> Cuando me preparo para enviar mi candidatura a un nuevo puesto, quiero reescribir rapidamente mis experiencias en una version mas adaptada al puesto, para poder enviar un curriculum decente con mas confianza.
|
||||
> Ahora solo puedo copiar repetidamente mi antiguo curriculum y modificar las formulaciones a mano, hasta que ya no estoy seguro de nada.
|
||||
|
||||
Si puedes escribir una frase con este nivel de claridad, el diseno de paginas, el diseno de prompts y la priorizacion de funciones seran mucho mas faciles.
|
||||
|
||||
## 6. Al hacer productos de IA, presta atencion a estos tres niveles de job
|
||||
|
||||
Muchos productos de IA parecen impresionantes en las demos, pero despues de lanzarse no retienen a los usuarios. La razon comun es que solo resuelven la accion superficial, sin resolver el job mas profundo.
|
||||
|
||||
Puedes dividir un job en tres niveles:
|
||||
|
||||
### 6.1 Nivel funcional
|
||||
|
||||
Cual es la tarea mas superficial?
|
||||
|
||||
- Resumir documentos
|
||||
- Reescribir textos
|
||||
- Extraer tareas pendientes
|
||||
- Generar imagenes
|
||||
|
||||
Este es el nivel que los usuarios expresan mas facilmente.
|
||||
|
||||
### 6.2 Nivel emocional
|
||||
|
||||
Que molestia quiere reducir el usuario, o que sensacion quiere obtener?
|
||||
|
||||
- No quiere sentirse tan agobiado
|
||||
- No quiere parecer poco profesional
|
||||
- No quiere empezar de cero cada vez
|
||||
- Quiere sentir mas control
|
||||
|
||||
Mucha disposicion a pagar esta fuertemente relacionada con el nivel emocional.
|
||||
|
||||
### 6.3 Nivel social
|
||||
|
||||
Como quiere que lo perciban los demas?
|
||||
|
||||
- Parecer mas confiable
|
||||
- Parecer mas organizado en el equipo
|
||||
- Parecer mas profesional ante los clientes
|
||||
- Saber expresarse mejor en redes sociales
|
||||
|
||||
Si solo haces el nivel funcional, el producto es facil de reemplazar; si tambien entiendes el nivel emocional y el social, sera mas facil encontrar un valor verdaderamente pegajoso.
|
||||
|
||||
## 7. Usa JTBD para filtrar direcciones de producto
|
||||
|
||||
A veces no es que ya tengas un producto, sino que tienes 3 a 5 ideas y no sabes cual hacer. Aqui JTBD es ideal para filtrar.
|
||||
|
||||
Puedes tomar cada idea y preguntarte 5 cosas:
|
||||
|
||||
1. El escenario correspondiente a esta idea es lo suficientemente concreto?
|
||||
2. El usuario ya esta usando algun metodo torpe para resolverlo?
|
||||
3. El dolor de este job es lo suficientemente fuerte, o lo suficientemente frecuente?
|
||||
4. Si lo hago bien, el usuario sentira claramente que "su estado mejoro"?
|
||||
5. Puedo hacer una primera version solo en torno al paso clave de este job, algo pequeno pero util?
|
||||
|
||||
Si despues de hablar de una direccion solo puedes decir "me parece interesante", pero no puedes explicar el disparador, la solucion alternativa y el criterio de exito, probablemente sea solo una inspiracion vaga, no una direccion madura.
|
||||
|
||||
## 8. Preguntas que puedes usar directamente para entrevistar usuarios
|
||||
|
||||
Mucha gente, al hacer investigacion, pregunta: "Que funciones quieres?" Este tipo de pregunta facilmente obtiene respuestas superficiales.
|
||||
|
||||
JTBD es mas adecuado para hacer este tipo de preguntas:
|
||||
|
||||
- Cuando fue la ultima vez que encontraste este problema?
|
||||
- Que estabas haciendo en ese momento, por que te bloqueaste?
|
||||
- Como lo resolviste al final?
|
||||
- En este proceso, cual fue la parte mas molesta, mas lenta o que menos confianza te dio?
|
||||
- Si hubiera una herramienta que te ayudara, que resultado te haria sentir que realmente es util?
|
||||
- Que metodos alternativos has probado? Por que no fueron lo suficientemente buenos?
|
||||
|
||||
Este tipo de preguntas tiene una ventaja: lleva la conversacion de vuelta a las experiencias reales, en lugar de quedarse en preferencias imaginadas.
|
||||
|
||||
## 9. Usa IA para ayudarte con el analisis JTBD
|
||||
|
||||
JTBD no fue inventado por la IA, pero la IA es muy adecuada para ayudarte a organizar y refinar JTBD.
|
||||
|
||||
Por ejemplo, si ya has recogido 5 a 10 comentarios de usuarios, puedes pasarlos al modelo y pedirle que los resuma siguiendo esta estructura:
|
||||
|
||||
```text
|
||||
Por favor actua como asistente de investigacion de producto.
|
||||
Te dare algunas citas textuales de usuarios. Por favor no des sugerencias de funciones primero,
|
||||
sino organiza primero siguiendo el marco de Jobs to Be Done:
|
||||
|
||||
1. En que escenario se encuentra el usuario
|
||||
2. Cual es el evento que detona su accion
|
||||
3. Cual es el progreso que realmente quiere lograr
|
||||
4. Cual es la solucion alternativa actual
|
||||
5. Cual es el criterio de exito que mas le importa
|
||||
6. Que palabras emocionales aparecen repetidamente en estos comentarios
|
||||
|
||||
Finalmente, organiza todo esto en 3 hipotesis JTBD que mas valga la pena verificar primero.
|
||||
```
|
||||
|
||||
Si ya tienes una idea, tambien puedes pedir a la IA que te ayude con la primera ronda de convergencia:
|
||||
|
||||
```text
|
||||
Quiero hacer [tu idea de producto].
|
||||
Por favor no me des una lista de funciones directamente, sino analiza usando el metodo Jobs to Be Done:
|
||||
|
||||
1. Que escenarios concretos podria servir este producto
|
||||
2. En cada escenario, cual es el job central que el usuario quiere completar
|
||||
3. Que soluciones alternativas existen actualmente
|
||||
4. Que job es mas adecuado como punto de partida para un MVP, y por que
|
||||
5. Escribe el job final recomendado como una frase JTBD clara
|
||||
```
|
||||
|
||||
La ventaja de hacer esto es que no seras arrastrado inmediatamente por la IA a "brainstormear 50 funciones", sino que primero aclararas la direccion.
|
||||
|
||||
## 10. Los 4 errores mas comunes de los principiantes
|
||||
|
||||
### 10.1 Escribir el job como un nombre de funcion
|
||||
|
||||
"Resumen con IA", "clasificacion inteligente", "generacion automatica" no son jobs, solo son posibles formas de implementacion.
|
||||
|
||||
### 10.2 Escribir un grupo demasiado amplio
|
||||
|
||||
"Todos los oficinistas", "todos los estudiantes", "todos los emprendedores" suelen ser demasiado amplios. Cuanto mas amplio, mas dificil es ver escenarios reales.
|
||||
|
||||
### 10.3 Solo escuchar lo que el usuario dice, sin observar lo que hace
|
||||
|
||||
El usuario describira lo que quiere, pero sus verdaderas prioridades suelen estar ocultas en como se arregla actualmente para resolver los problemas.
|
||||
|
||||
### 10.4 Querer hacer una plataforma completa desde el principio
|
||||
|
||||
La forma correcta de usar JTBD normalmente no es "voy a hacer una gran plataforma que haga de todo", sino primero enfocarse en el paso mas critico de un escenario y hacerlo excepcionalmente bien.
|
||||
|
||||
## 11. Resumen
|
||||
|
||||
Lo mas valioso de Jobs to Be Done no es darte un nuevo termino, sino ayudarte a cambiar tu angulo de observacion: **no te centres solo en las funciones del producto, sino en lo que el usuario quiere avanzar al siguiente paso.**
|
||||
|
||||
Cuando empieces a preguntarte repetidamente:
|
||||
|
||||
- En que escenario contrata el usuario este producto
|
||||
- Donde se ha quedado bloqueado exactamente
|
||||
- Que metodo esta usando para arreglarselas
|
||||
- Despues de resolver el problema, como cambiara su estado
|
||||
|
||||
Descubriras que muchas ideas originalmente vagas se aclaran de repente, y muchas funciones originalmente llamativas dejan de ser tan importantes.
|
||||
|
||||
Hacer productos, especialmente productos de IA, es facil caer en la trampa de obsesionarse con la demostracion de capacidades desde el principio. JTBD te ayuda a devolver la atencion a lo realmente importante: **por que te necesita el usuario, y que progreso le estas ayudando a completar.**
|
||||
|
||||
<a id="jtbd-ai"></a>
|
||||
## [12. Como usar la IA para practicar JTBD](#top-jtbd)
|
||||
|
||||
JTBD no fue inventado por la IA, pero la IA es muy adecuada para actuar como tu asistente de investigacion, asistente de organizacion y asistente de contraste dentro de este metodo. La clave es: **dejar que la IA te ayude a organizar y expandir, no que adivine por ti lo que piensan los usuarios.**
|
||||
|
||||
Puedes usarlo asi:
|
||||
|
||||
### 12.1 Dejar que la IA te ayude a reescribir ideas vagas como hipotesis JTBD
|
||||
|
||||
Cuando solo tienes una descripcion vaga en mente, como "quiero hacer una herramienta para ayudar a universitarios a encontrar practicas", primero puedes pedir a la IA que la descomponga en varios jobs posibles:
|
||||
|
||||
```text
|
||||
Tengo una idea vaga de producto: [tu idea]
|
||||
Por favor no me des una lista de funciones directamente, sino analiza usando el enfoque de Jobs to Be Done:
|
||||
1. A que escenarios concretos podria corresponder
|
||||
2. En cada escenario, cual es el progreso que el usuario realmente quiere lograr
|
||||
3. Cual podria ser la solucion alternativa actual
|
||||
4. Que job es mas adecuado para hacer primero un MVP
|
||||
Finalmente, escribe cada job como una frase JTBD clara.
|
||||
```
|
||||
|
||||
Incluso puedes escribir la entrada de forma muy basica:
|
||||
|
||||
```text
|
||||
Quiero hacer algo para ayudar a universitarios a encontrar practicas.
|
||||
No se muy bien que hacer exactamente, ayudame a pensar que es lo que los usuarios realmente quieren lograr.
|
||||
```
|
||||
|
||||
La IA podria dar un resultado util como este:
|
||||
|
||||
```text
|
||||
Posibles direcciones JTBD:
|
||||
|
||||
1. Cuando me preparo por primera vez para enviar candidaturas de practicas, quiero saber rapidamente que materiales debo preparar primero,
|
||||
para no estar posponiendo el envio por la confusion de informacion.
|
||||
|
||||
2. Cuando veo una oferta de practicas, quiero juzgar rapidamente si vale la pena aplicar,
|
||||
para no perder demasiado tiempo en puestos que no me convienen.
|
||||
|
||||
3. Cuando empiezo a enviar candidaturas, quiero adaptar mi curriculum existente a una version mas ajustada al puesto,
|
||||
para poder enviarlo mas rapido y mejorar mi tasa de aprobacion.
|
||||
```
|
||||
|
||||
El valor de este tipo de resultado es que descompone tu idea original muy general en varias direcciones mas cercanas a escenarios reales.
|
||||
|
||||
### 12.2 Dejar que la IA te ayude a organizar citas textuales de entrevistas
|
||||
|
||||
Si ya has hecho varias entrevistas con usuarios, puedes pasar las transcripciones a la IA y pedirle que extraiga los escenarios, disparadores, soluciones alternativas y criterios de exito que se repiten.
|
||||
|
||||
```text
|
||||
A continuacion estan las citas textuales de 5 usuarios.
|
||||
Por favor no des soluciones primero, sino organiza siguiendo el marco JTBD:
|
||||
1. En que escenario se encuentra el usuario
|
||||
2. Cual es el evento que detona su accion
|
||||
3. Cual es el progreso que realmente quiere lograr
|
||||
4. Cual es la solucion alternativa actual
|
||||
5. Cual es el criterio de exito que mas le importa
|
||||
6. Que informacion se repite entre multiples usuarios
|
||||
Finalmente, organiza en 3 hipotesis JTBD que mas valga la pena verificar primero.
|
||||
```
|
||||
|
||||
Una entrada simple de principiante tambien podria ser:
|
||||
|
||||
```text
|
||||
Pregunte a 3 personas, y mas o menos dijeron esto:
|
||||
|
||||
1. Cada vez que quiero enviar una practica tengo que rehacer el curriculum, es muy molesto.
|
||||
2. En realidad lo que mas miedo me da es no saber si lo he escrito bien.
|
||||
3. Ahora le pido a companeros de cursos superiores que me lo revisen, pero me da pena molestarles siempre.
|
||||
|
||||
Ayudame a organizar, que es lo que realmente quieren lograr.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Resultado organizado:
|
||||
|
||||
- Escenario comun: antes de enviar candidaturas de practicas, necesitan trabajar en el curriculum
|
||||
- Dificultad comun: no saben como modificarlo hasta que este "lo suficientemente bien"
|
||||
- Solucion alternativa actual: pedir a companeros de cursos superiores que lo revisen, modificarlo una y otra vez
|
||||
- Posible JTBD:
|
||||
Cuando me preparo para enviar candidaturas de practicas, quiero juzgar mas rapidamente si mi curriculum ya esta listo para enviar,
|
||||
para no quedarme atascado en "lo modifico una vez mas" y retrasar el envio indefinidamente.
|
||||
```
|
||||
|
||||
Este tipo de resultado es muy util porque te ayuda a extraer de citas textuales dispersas algo que se parece mas a una "necesidad".
|
||||
|
||||
### 12.3 Dejar que la IA haga una ronda ligera de investigacion en la red
|
||||
|
||||
Antes de empezar entrevistas a gran escala, puedes pedir a la IA que haga un barrido de informacion externa muy ligero, como:
|
||||
|
||||
- En foros o comunidades publicas, como se queja la gente de este problema
|
||||
- En el mercado, que nivel de problema resuelven principalmente los productos existentes
|
||||
- Cual es la solucion alternativa mas comun de los usuarios
|
||||
- En las resenas comunes, cuales son los puntos que mas satisfaccion y mas insatisfaccion generan
|
||||
|
||||
Esta investigacion no puede sustituir las entrevistas reales con usuarios, pero es ideal como calentamiento en la fase de Discover, ayudandote a construir primero un mapa de problemas.
|
||||
|
||||
Una entrada simple podria ser:
|
||||
|
||||
```text
|
||||
Por favor ayudame a buscar:
|
||||
"Cuales son los puntos de dolor mas comunes cuando los universitarios modifican su curriculum y envian candidaturas de practicas?"
|
||||
Prioriza lo que la gente dice en foros publicos, posts de experiencia y comunidades de busqueda de empleo.
|
||||
Organizalo en 5 problemas mas comunes.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Puntos de dolor comunes organizados:
|
||||
|
||||
1. No saber que poner en el curriculum, muy poca experiencia
|
||||
2. No saber como adaptarlo a diferentes puestos
|
||||
3. Modificar muchas versiones pero sin certeza de si es suficientemente bueno
|
||||
4. No encontrar a alguien fiable que lo revise
|
||||
5. El proceso de envio es complicado, facil de procrastinar
|
||||
```
|
||||
|
||||
Este tipo de resultado no debe tomarse como conclusion final, pero es ideal para decidir que tipo de problema priorizar en las entrevistas.
|
||||
|
||||
### 12.4 Dejar que la IA actue como "abogado del diablo"
|
||||
|
||||
Muchas veces nos encariñamos demasiado con nuestras propias ideas. Puedes pedir especificamente a la IA que asuma el rol de alguien critico, obligandote a explicar el problema mas claramente:
|
||||
|
||||
```text
|
||||
Por favor actua como un consultor de investigacion de producto muy estricto.
|
||||
A continuacion esta mi hipotesis JTBD: [tu hipotesis]
|
||||
Por favor critica desde los siguientes angulos:
|
||||
1. Este escenario es demasiado amplio?
|
||||
2. Este job esta escrito como una funcion en lugar de un progreso real?
|
||||
3. La solucion alternativa es demasiado debil?
|
||||
4. El criterio de exito no es lo suficientemente claro?
|
||||
5. Cual es el riesgo que mas necesita ser verificado en esta hipotesis?
|
||||
```
|
||||
|
||||
La ventaja de hacer esto es que descubriras mas rapidamente si estas mirando necesidades o solo estas mirando la solucion que te gusta.
|
||||
|
||||
## 📚 Tareas
|
||||
|
||||
Por favor completa las siguientes tareas basandote en el contenido anterior:
|
||||
|
||||
1. Elige una idea de producto que quieras hacer recientemente, y escribela claramente usando la formula JTBD
|
||||
2. Completa los 5 elementos para esta idea: escenario, disparador, progreso, solucion alternativa, criterio de exito
|
||||
3. Encuentra 3 usuarios potenciales, y al menos una vez logra preguntar "cuando fue la ultima vez que encontraste este problema"
|
||||
4. Pasa las citas textuales de las entrevistas a la IA, y organiza en 3 hipotesis JTBD que mas valga la pena verificar primero
|
||||
|
||||
## Lectura adicional
|
||||
|
||||
- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
|
||||
- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
|
||||
- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
|
||||
- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
|
||||
@@ -0,0 +1,589 @@
|
||||
---
|
||||
title: 'The Mom Test: Como validar necesidades a traves de entrevistas con usuarios'
|
||||
description: 'Aprende a evitar retroalimentacion educada, y haz entrevistas centradas en comportamientos reales, hechos concretos y problemas existentes.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aproximadamente <strong>1.5 horas</strong>'
|
||||
</script>
|
||||
|
||||
# The Mom Test: Como validar necesidades a traves de entrevistas con usuarios
|
||||
|
||||
<a id="top-mom"></a>
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Entrevistas con usuarios', 'Validacion de necesidades', 'Investigacion de usuarios', 'Investigacion de producto']"
|
||||
coreOutput="1 conjunto de preguntas de entrevista que obtienen informacion mas real"
|
||||
expectedOutput="Dejar de tomar la retroalimentacion educada como validacion, y poder juzgar direcciones con comportamientos reales"
|
||||
>
|
||||
|
||||
Muchas personas, la primera vez que hacen investigacion de producto, creen que lo mas importante es "hablar con alguien". Asi que van y preguntan a amigos, colegas e incluso familiares:
|
||||
|
||||
- Que te parece esta idea?
|
||||
- Si existiera un producto asi, lo usarias?
|
||||
- Esta funcion suena bastante bien, no?
|
||||
|
||||
La otra persona suele dar una retroalimentacion muy alentadora:
|
||||
|
||||
- Esta muy bien
|
||||
- Suena util
|
||||
- Creo que deberias probarlo
|
||||
|
||||
El problema es que estas respuestas normalmente no te ayudan a tomar decisiones. Son mas bien cortesia, apoyo, o una reaccion natural para no desanimarte en el momento. Crees haber obtenido "validacion de mercado", pero en realidad solo has recogido un monton de consuelos dificiles de usar para tomar decisiones.
|
||||
|
||||
El metodo The Mom Test fue creado precisamente para resolver este problema. Nos recuerda: **no es que los usuarios te esten mintiendo a proposito, sino que tu forma de hacer las preguntas lleva naturalmente a la otra persona hacia respuestas agradables pero inutiles.**
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info SOP minimo
|
||||
**Objetivo**: Despues de leer, sabras mejor como hablar con usuarios sin escuchar solo "suena bien", sino obtener informacion que realmente te ayude a juzgar la direccion.
|
||||
|
||||
**Accion**: Reescribe las 5 preguntas que ibas a hacer, priorizando "cuando fue la ultima vez que paso esto" y "como lo manejaste entonces".
|
||||
|
||||
**Resultado**: Te sera mas facil distinguir que son opiniones y que son verdaderas evidencias para tomar decisiones.
|
||||
|
||||
**Enlaces rapidos**: [Que es The Mom Test](#mom-what) · [Tres principios centrales](#mom-principles) · [Como te ayuda la IA](#mom-ai)
|
||||
:::
|
||||
|
||||
## Aprenderas lo siguiente
|
||||
|
||||
1. Que problema esta resolviendo exactamente The Mom Test, y por que muchas "investigaciones de usuarios" en realidad no investigan informacion real
|
||||
2. Los principios mas importantes de este metodo: preguntar menos opiniones y mas comportamientos; preguntar menos hipotesis y mas hechos
|
||||
3. Como transformar una pregunta que facilmente genera falsos positivos en una pregunta de entrevista mas valiosa
|
||||
4. Como usar The Mom Test junto con JTBD, validacion de necesidades y evaluacion de MVP
|
||||
|
||||
<a id="mom-what"></a>
|
||||
## [1. Que es exactamente The Mom Test](#top-mom)
|
||||
|
||||
The Mom Test proviene del libro homonimo de Rob Fitzpatrick. Su nombre suena como una broma, pero da muy en el clavo:
|
||||
|
||||
**Incluso tu madre tendria dificultades para decirte directamente "es una mala idea".**
|
||||
|
||||
La razon no es que no sea honesta, sino:
|
||||
|
||||
- No quiere lastimarte
|
||||
- Te alentara inconscientemente
|
||||
- Easily seguira tu forma de expresarte al responder
|
||||
|
||||
Y no solo tu madre; amigos, colegas, ex companeros de clase, e incluso muchos desconocidos, al enfrentarse a tu idea de producto, tambien suelen dar "retroalimentacion positiva" similar. Esto no significa que la necesidad sea real, solo significa que formulaste la pregunta de una forma que facilmente obtiene respuestas agradables.
|
||||
|
||||
Por lo tanto, el punto de The Mom Test nunca ha sido "no le preguntes a tu madre", sino:
|
||||
|
||||
**No formules la pregunta de forma que cualquiera te siga la corriente.**
|
||||
|
||||
Lo que este metodo realmente quiere ensenarte es como obtener informacion mas cercana a las necesidades reales a traves de la conversacion, en lugar de recoger un monton de comentarios que te hagan sentir bien.
|
||||
|
||||
## 2. Cual es el problema central que resuelve
|
||||
|
||||
The Mom Test resuelve principalmente una ilusion cognitiva muy comun:
|
||||
|
||||
**Tomar la retroalimentacion positiva por cortesia como una necesidad real.**
|
||||
|
||||
Por ejemplo, cuando preguntas:
|
||||
|
||||
- Que te parece la idea de esta App?
|
||||
- Si hiciera una herramienta con IA que te ayude a escribir el curriculum, la usarias?
|
||||
- Es valiosa esta funcion?
|
||||
|
||||
Estas preguntas tienen en comun:
|
||||
|
||||
- Todas preguntan "opiniones"
|
||||
- Todas tienen cierta insinuacion
|
||||
- Todas hablan de un futuro que aun no ha ocurrido
|
||||
|
||||
Las respuestas de las personas sobre "opiniones" y "hipotesis futuras" suelen ser inestables. Muchas personas sobreestiman su interes, su capacidad de ejecucion y su disposicion futura a pagar.
|
||||
|
||||
Por eso The Mom Test te recuerda:
|
||||
|
||||
- No confies demasiado en las evaluaciones de otros sobre tu idea
|
||||
- No confies demasiado en las predicciones de otros sobre su comportamiento futuro
|
||||
- Vuelve siempre a los comportamientos reales que el usuario ya ha tenido
|
||||
|
||||
Porque comparado con "la usarias?", "como manejaste esto la ultima vez?" suele estar mas cerca de la verdad.
|
||||
|
||||
<a id="mom-principles"></a>
|
||||
## [3. Los tres principios mas importantes](#top-mom)
|
||||
|
||||
Si solo quieres recordar lo mas importante, empieza con estos tres principios.
|
||||
|
||||
### 3.1 Habla menos de tu idea, y mas de las experiencias reales pasadas del usuario
|
||||
|
||||
Muchas entrevistas ineficaces empiezan presentando la propia solucion, hablando de lo emocionado que se esta y del producto que se planea hacer. El problema es que, una vez que hablas demasiado, la otra persona facilmente cambia a un estado de "apoyarte" y "alentarte".
|
||||
|
||||
En contraste, una mejor forma de hacerlo es centrarse en las experiencias de la otra persona:
|
||||
|
||||
- Cuando fue la ultima vez que encontraste este problema?
|
||||
- Que estabas haciendo en ese momento?
|
||||
- Como lo resolviste al final?
|
||||
- Cual fue el paso mas complicado?
|
||||
|
||||
Descubriras que este tipo de preguntas llevan la conversacion de vuelta a la realidad de forma mas natural, en lugar de quedarse en preferencias imaginadas.
|
||||
|
||||
### 3.2 Pregunta menos opiniones abstractas, y mas hechos concretos
|
||||
|
||||
"Me parece bien esta funcion", "suena bien", "parece util" son expresiones demasiado abstractas para guiar decisiones de producto.
|
||||
|
||||
Informacion mas valiosa suele verse asi:
|
||||
|
||||
- La semana pasada pase 2 horas peleando con esto
|
||||
- Ahora me arreglas con Excel y WeChat
|
||||
- El mes pasado ya gaste dinero en una herramienta similar
|
||||
- Lo que mas miedo me da es hacerlo mal, no hacerlo lento
|
||||
|
||||
Esta es la informacion que realmente te ayuda a juzgar la intensidad, frecuencia y posibilidad de pago de un problema.
|
||||
|
||||
### 3.3 Pregunta menos que solucion quiere el usuario, y observa mas como resuelve el problema ahora
|
||||
|
||||
Los usuarios son muy buenos describiendo sus frustraciones, pero no necesariamente disenando soluciones.
|
||||
|
||||
Si preguntas:
|
||||
|
||||
- Te gustaria que una IA te hiciera esto automaticamente?
|
||||
- Crees que anadir una funcion inteligente seria util?
|
||||
|
||||
Lo que obtienes suele es solo una actitud vaga hacia una solucion, no la necesidad en si.
|
||||
|
||||
Mejores preguntas son:
|
||||
|
||||
- Que metodo usas ahora para manejar este problema?
|
||||
- Por que elegiste esta forma?
|
||||
- En que falla?
|
||||
|
||||
Entender las soluciones alternativas existentes suele ser mas importante que preguntar directamente "que quieres".
|
||||
|
||||
## 4. Por que la gente siempre te da respuestas agradables pero inutiles
|
||||
|
||||
Si puedes entender esto, cometeras menos errores de juicio en las entrevistas.
|
||||
|
||||
### 4.1 Las personas son inconscientemente educadas
|
||||
|
||||
Especialmente cuando el interlocutor tiene una relacion contigo, le resulta dificil decir directamente:
|
||||
|
||||
- Esta direccion no suena muy viable
|
||||
- No la usaria en absoluto
|
||||
- Este problema no es tan importante para mi
|
||||
|
||||
Es mas probable que diga "esta muy bien", "se podria probar cuando haya oportunidad".
|
||||
|
||||
### 4.2 Las personas sobreestiman su yo futuro
|
||||
|
||||
Mucha gente cree sinceramente que en el futuro:
|
||||
|
||||
- Sera mas disciplinada
|
||||
- Estara mas dispuesta a aprender
|
||||
- Estara mas dispuesta a pagar
|
||||
- Estara mas dispuesta a probar herramientas nuevas
|
||||
|
||||
Por eso la frase "si existiera, probablemente la usaria" muchas veces no equivale a que realmente la usara en el futuro.
|
||||
|
||||
### 4.3 Tu forma de preguntar ya esta guiando la respuesta
|
||||
|
||||
Cuando preguntas:
|
||||
|
||||
- Te parece buena esta idea?
|
||||
- Esta funcion te resulta muy util?
|
||||
|
||||
En realidad ya has metido la "respuesta correcta" en la pregunta.
|
||||
|
||||
Es por eso que The Mom Test enfatiza tanto: **no conviertas la entrevista en una busqueda de validacion.**
|
||||
|
||||
## 5. Comparacion directa: que preguntas se desperdician facilmente y cuales son mas valiosas
|
||||
|
||||
Estas comparaciones son utiles para casi todos los principiantes.
|
||||
|
||||
| Preguntas que se desperdician facilmente | Preguntas mas valiosas |
|
||||
| --- | --- |
|
||||
| Que te parece esta idea? | Cuando fue la ultima vez que encontraste este problema? |
|
||||
| Usarias este producto si existiera? | Como estas manejando esto ahora? |
|
||||
| Estarias dispuesto a pagar por esta funcion? | Has gastado dinero en este problema alguna vez? En que? |
|
||||
| Crees que esta funcion es importante? | Cual es el paso mas molesto, lento o inseguro de este proceso? |
|
||||
| Te gustaria que una IA te hiciera esto automaticamente? | Por que aun no has encontrado una solucion mas comoda? |
|
||||
|
||||
Lo mas importante de esta tabla no son las frases concretas, sino la direccion detras:
|
||||
|
||||
- De opiniones hacia hechos
|
||||
- Del futuro hacia el pasado
|
||||
- De tu solucion hacia el problema del usuario
|
||||
|
||||
## 6. Un ritmo de entrevista que incluso un principiante puede usar inmediatamente
|
||||
|
||||
Si quieres ir a hablar con alguien ahora mismo, puedes seguir esta secuencia directamente.
|
||||
|
||||
### 6.1 Apertura: explica que estas aprendiendo, no vendiendo
|
||||
|
||||
Por ejemplo:
|
||||
|
||||
> Estoy investigando como la gente maneja este tipo de problemas, quiero entender la situacion real primero, no estoy aqui para vender nada.
|
||||
|
||||
Este tipo de expresion ayuda a la otra persona a liberarse de la carga de "tener que darte retroalimentacion positiva".
|
||||
|
||||
### 6.2 Empieza preguntando por la ultima experiencia real
|
||||
|
||||
Puedes empezar con este tipo de preguntas:
|
||||
|
||||
- Cuando fue la ultima vez que encontraste este problema?
|
||||
- Que paso en ese momento?
|
||||
- Cual fue tu primera reaccion, como lo manejaste?
|
||||
|
||||
Una vez que la conversacion entra en eventos concretos, la calidad de la informacion suele mejorar notablemente.
|
||||
|
||||
### 6.3 Profundiza preguntando sobre comportamientos, costos y soluciones alternativas
|
||||
|
||||
Sigue preguntando:
|
||||
|
||||
- Que metodo usas ahora para resolverlo?
|
||||
- Cual es la parte mas incomoda de este metodo?
|
||||
- Cuanto tiempo, dinero o esfuerzo has invertido en esto?
|
||||
- Has probado otros metodos? Por que no los seguiste usando?
|
||||
|
||||
### 6.4 Finalmente juzga la intensidad del dolor y la prioridad
|
||||
|
||||
No necesitas preguntar directamente "te duele?", puedes juzgarlo por los detalles:
|
||||
|
||||
- Lo encuentra frecuentemente?
|
||||
- Ya esta intentando compensar activamente?
|
||||
- Ya esta dispuesto a invertir costos en esto?
|
||||
- Cuando habla de esto, muestra emocion evidente?
|
||||
|
||||
Todo esto es mas util que una simple pregunta "es este tu punto de dolor?".
|
||||
|
||||
## 7. Un ejemplo mas completo
|
||||
|
||||
Supongamos que quieres hacer un producto de "IA que ayuda a universitarios a mejorar su curriculum".
|
||||
|
||||
### Forma incorrecta de preguntar
|
||||
|
||||
Vas y le preguntas a un companero:
|
||||
|
||||
> Quiero hacer una herramienta de optimizacion de curriculum con IA, que te parece?
|
||||
> Si pudiera modificar automaticamente el curriculum segun el puesto, la usarias?
|
||||
|
||||
En este caso, la otra persona probablemente dira:
|
||||
|
||||
- Suena bien
|
||||
- Creo que seria util
|
||||
- Si es gratis, la probara
|
||||
|
||||
Estas respuestas casi no te ayudan a juzgar si la necesidad es realmente fuerte.
|
||||
|
||||
### Forma mejor de preguntar
|
||||
|
||||
Podrias cambiar a:
|
||||
|
||||
> Cuando fue la ultima vez que modificaste tu curriculum?
|
||||
> Por que tuviste que modificarlo?
|
||||
> Como lo hiciste?
|
||||
> Cual fue el paso mas bloqueante?
|
||||
> Has pedido a alguien que te lo revise?
|
||||
> Has gastado dinero o mucho tiempo alguna vez en el tema del curriculum?
|
||||
|
||||
A traves de estas preguntas, la informacion que puedes obtener seria:
|
||||
|
||||
- Mucha gente no es que no sepa escribir, sino que no sabe como adaptarlo a diferentes puestos
|
||||
- Lo mas doloroso no es el formato, sino "no saber que experiencias vale la pena incluir"
|
||||
- Procrastinan, no por vagos, sino porque cada vez que modifican el curriculum es muy agotador
|
||||
- Ya estan usando consejos de companeros de cursos superiores, sitios de plantillas, herramientas de IA y revision de amigos para arreglarselas
|
||||
|
||||
En este punto, estas mucho mas cerca del problema real.
|
||||
|
||||
## 8. Como usar The Mom Test junto con JTBD
|
||||
|
||||
Si JTBD te ayuda a ver "que progreso quiere lograr el usuario", entonces The Mom Test te ensena mas bien:
|
||||
|
||||
**Como confirmar a traves de entrevistas si este job realmente existe.**
|
||||
|
||||
Puedes perfectamente conectar ambos:
|
||||
|
||||
1. Primero usa JTBD para hipotetizar un job
|
||||
2. Luego usa el estilo de The Mom Test para preguntar a los usuarios sobre su ultima experiencia real
|
||||
3. Mira si este job es realmente frecuente, real y digno de priorizar
|
||||
|
||||
Por ejemplo, tu hipotesis JTBD es:
|
||||
|
||||
> Cuando me preparo para enviar candidaturas de practicas, quiero adaptar rapidamente mi curriculum viejo a una version ajustada al puesto, para completar el envio lo antes posible.
|
||||
|
||||
Entonces puedes usar preguntas estilo The Mom Test para verificar:
|
||||
|
||||
- Cuando fue la ultima vez que enviaste una candidatura?
|
||||
- Como modificaste tu curriculum en ese momento?
|
||||
- Que seccion fue la mas dificil de escribir?
|
||||
- Despues de modificarlo, como juzgabas si era lo suficientemente bueno?
|
||||
|
||||
Asi, los metodos se conectan:
|
||||
|
||||
- JTBD te ayuda a definir la hipotesis de necesidad
|
||||
- The Mom Test te ayuda a verificar la hipotesis a traves de entrevistas
|
||||
|
||||
## 9. Los errores mas comunes de los principiantes al hacer entrevistas con usuarios
|
||||
|
||||
### 9.1 Convertir la entrevista en una presentacion de producto
|
||||
|
||||
Si hablas demasiado de tu propia idea, la otra persona facilmente empezara a apoyarte en lugar de contarte la situacion real.
|
||||
|
||||
### 9.2 Entrevistar solo a conocidos
|
||||
|
||||
Los conocidos pueden ser entrevistados, pero es mas probable que te alienten. Necesitas al menos mezclar con personas mas cercanas a los usuarios reales, en lugar de buscar solo a quienes te apoyan.
|
||||
|
||||
### 9.3 Persiguir preguntas sobre funciones demasiado pronto
|
||||
|
||||
Si aun no has aclarado el problema y empiezas a preguntar sobre botones, interfaces y detalles de funciones, probablemente estas entrando en la solucion demasiado pronto.
|
||||
|
||||
### 9.4 Tomar un "la usaria" como resultado de validacion
|
||||
|
||||
Las entrevistas pueden ayudarte a juzgar la direccion como maximo, no equivalen a una validacion completada. La verdadera validacion, al final, depende de si el usuario esta dispuesto a asumir costos reales, como tiempo, costos de cambio, comportamiento de prueba o incluso pago.
|
||||
|
||||
### 9.5 No organizar despues de la entrevista
|
||||
|
||||
Si dejas la informacion ahi, rapidamente se convertira en impresiones vagas. Es mejor organizar lo antes posible:
|
||||
|
||||
- Problemas que aparecen con alta frecuencia
|
||||
- Palabras emocionales en las citas textuales del usuario
|
||||
- Soluciones alternativas actuales
|
||||
- Costos ya incurridos
|
||||
- Tus propios nuevos juicios
|
||||
|
||||
## 10. Lista de preguntas que puedes copiar y usar directamente
|
||||
|
||||
Si quieres empezar rapidamente, aqui tienes un conjunto de preguntas suficientemente generales.
|
||||
|
||||
### Preguntas de apertura
|
||||
|
||||
- Cuando fue la ultima vez que encontraste este problema?
|
||||
- Que paso exactamente en ese momento?
|
||||
|
||||
### Preguntas sobre comportamiento
|
||||
|
||||
- Como lo manejaste en ese momento?
|
||||
- Por que elegiste esa forma?
|
||||
|
||||
### Preguntas sobre costos
|
||||
|
||||
- Cuanto tiempo o esfuerzo te suele llevar esto?
|
||||
- Has gastado dinero alguna vez para resolverlo?
|
||||
|
||||
### Preguntas sobre soluciones alternativas
|
||||
|
||||
- Has probado otras herramientas o metodos?
|
||||
- Por que no los seguiste usando?
|
||||
|
||||
### Preguntas de cierre
|
||||
|
||||
- Si volvieras a encontrar el mismo problema en el futuro, como deberia ser la solucion ideal?
|
||||
|
||||
Nota: esta pregunta de cierre puede hacerse, pero es mejor dejarla para el final. Porque primero necesitas obtener hechos, no deseos.
|
||||
|
||||
## 11. Resumen
|
||||
|
||||
La contribucion mas importante de The Mom Test no es darte un conjunto de tecnicas para "saber hablar mejor", sino ayudarte a establecer una forma mas lucida de juzgar:
|
||||
|
||||
- No confies demasiado rapido en los elogios de otros sobre tu idea
|
||||
- No tomes "si existiera, la usaria" como una necesidad real
|
||||
- No dejes que la entrevista se convierta en una busqueda de validacion
|
||||
|
||||
Las entrevistas verdaderamente valiosas deben volver siempre a estas cosas:
|
||||
|
||||
- La ultima experiencia real del usuario
|
||||
- Como lo maneja ahora
|
||||
- Que costos ya ha incurrido
|
||||
- En que areas se siente claramente incomodo
|
||||
|
||||
Cuando empieces a preguntar de esta manera, la informacion que obtengas a veces no sonara tan agradable, pero sera mas util.
|
||||
Y al hacer productos, **la verdad util siempre es mas importante que el elogio agradable.**
|
||||
|
||||
<a id="mom-ai"></a>
|
||||
## [12. Como usar la IA para ayudarte con las entrevistas de usuarios](#top-mom)
|
||||
|
||||
The Mom Test es esencialmente un metodo de "hablar con personas reales", por lo que la IA no puede sustituir las entrevistas reales. Pero la IA es muy adecuada para asistirte antes, durante y despues de las entrevistas, especialmente para reducir la barrera de entrada de los principiantes.
|
||||
|
||||
### 12.1 Dejar que la IA reescriba las preguntas "que se desperdician facilmente"
|
||||
|
||||
Muchas personas saben que no deberian preguntar "que te parece esta idea?", pero al abrir la boca vuelven a este tipo de frases. Puedes pasar primero a la IA las preguntas que has preparado, y pedirle que las reescriba:
|
||||
|
||||
```text
|
||||
Estas son las preguntas que quiero hacer en una entrevista con usuarios:
|
||||
[pega tus preguntas]
|
||||
|
||||
Por favor reescribelas usando los principios de The Mom Test:
|
||||
1. Elimina las preguntas de opinion
|
||||
2. Elimina las preguntas que hipotizan sobre el futuro
|
||||
3. Cambialas a preguntas que giren en torno a comportamientos reales pasados, soluciones alternativas existentes y costos ya incurridos
|
||||
4. Finalmente, organizalas en una lista de 8-10 preguntas listas para usar en entrevistas
|
||||
```
|
||||
|
||||
Una entrada muy basica tambien funciona:
|
||||
|
||||
```text
|
||||
Quiero preguntar a los usuarios:
|
||||
1. Que te parece si hago una herramienta de IA para modificar curriculums?
|
||||
2. La usarias?
|
||||
3. Estarias dispuesto a pagar?
|
||||
|
||||
Por favor ayudame a reescribirlas de una mejor manera.
|
||||
```
|
||||
|
||||
La IA podria dar un resultado util como este:
|
||||
|
||||
```text
|
||||
Preguntas reescritas:
|
||||
|
||||
1. Cuando fue la ultima vez que modificaste tu curriculum?
|
||||
2. Por que tuviste que modificarlo?
|
||||
3. Como lo hiciste?
|
||||
4. Cual paso te llevo mas tiempo?
|
||||
5. Has pedido a alguien que te lo revise?
|
||||
6. Has gastado dinero o mucho tiempo alguna vez en modificar tu curriculum?
|
||||
```
|
||||
|
||||
Este tipo de resultado es muy util porque transforma directamente tus preguntas "de opinion" en preguntas "de comportamiento real".
|
||||
|
||||
### 12.2 Dejar que la IA genere guiones de entrevista para diferentes perfiles
|
||||
|
||||
La misma direccion, para diferentes grupos de personas, tiene diferentes focos de entrevista. Por ejemplo, estudiantes, Recursos Humanos y trabajadores freelance tienen preocupaciones completamente diferentes. Puedes pedir a la IA que genere una version del guion para cada tipo de interlocutor:
|
||||
|
||||
- Para usuarios principiantes, enfocate en entender la ultima experiencia real
|
||||
- Para usuarios intensivos, enfocate en entender las soluciones alternativas y la intensidad del dolor
|
||||
- Para usuarios de pago, enfocate en entender si ya han incurrido costos por esto
|
||||
|
||||
Asi tendras mas ritmo en las conversaciones reales, en lugar de hacer las mismas preguntas a todo el mundo.
|
||||
|
||||
Por ejemplo, puedes ingresar directamente:
|
||||
|
||||
```text
|
||||
Voy a hablar con dos tipos de personas:
|
||||
1. Universitarios buscando su primera practica
|
||||
2. Companeros de cursos superiores que ya han revisado muchos curriculums para otros
|
||||
|
||||
Por favor dame un guion de entrevista para cada grupo, con 6 preguntas cada uno.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Para universitarios:
|
||||
1. Cuando fue la ultima vez que enviaste una candidatura de practica?
|
||||
2. Cual fue el paso mas bloqueante en ese momento?
|
||||
3. Como sabes si tu curriculum esta listo para enviar?
|
||||
...
|
||||
|
||||
Para companeros de cursos superiores:
|
||||
1. Cuando fue la ultima vez que revisaste el curriculum de alguien?
|
||||
2. Que problemas obvios ves con mas frecuencia?
|
||||
3. En que paso se atascan mas facilmente los estudiantes de primeros cursos?
|
||||
...
|
||||
```
|
||||
|
||||
Asi, no tienes que inventar preguntas desde cero, y la preparacion de entrevistas sera mucho mas facil.
|
||||
|
||||
### 12.3 Dejar que la IA organice las notas de entrevista
|
||||
|
||||
Despues de las entrevistas, el problema mas comun no es "falta de informacion", sino "informacion demasiado dispersa". La IA es muy adecuada para ayudarte a organizar conversaciones fragmentadas en notas estructuradas:
|
||||
|
||||
```text
|
||||
A continuacion estan las notas de mis entrevistas con 3 usuarios.
|
||||
Por favor organiza siguiendo la perspectiva de The Mom Test:
|
||||
1. Que contenido es hecho y que es solo opinion
|
||||
2. Cual fue el ultimo comportamiento real del usuario
|
||||
3. Cual es la solucion alternativa actual
|
||||
4. Cuales son los costos de tiempo, dinero o esfuerzo que el usuario ya ha incurrido
|
||||
5. Que problemas se mencionan repetidamente
|
||||
6. Que afirmaciones suenan positivas pero carecen de evidencia
|
||||
```
|
||||
|
||||
Este paso es especialmente valioso porque te ayuda a separar lo que "suena bien" de lo que "realmente puede sustentar una decision".
|
||||
|
||||
Una entrada simple podria ser:
|
||||
|
||||
```text
|
||||
Estas son mis notas despues de hablar con un usuario:
|
||||
|
||||
- Dijo que si hubiera una herramienta probablemente la probara
|
||||
- La semana pasada paso una noche entera modificando su curriculum
|
||||
- Ahora depende principalmente de amigos que le revisen
|
||||
- Dijo que lo mas dificil es no saber cuando esta "listo para enviar"
|
||||
|
||||
Por favor ayudame a separar que son opiniones y que son hechos.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Opiniones:
|
||||
- Si hubiera una herramienta probablemente la probara
|
||||
|
||||
Hechos:
|
||||
- La semana pasada paso una noche entera modificando su curriculum
|
||||
- La solucion alternativa actual es pedir a amigos que le revisen
|
||||
- El punto mas dificil es no saber cuando se puede considerar "listo para enviar"
|
||||
|
||||
Puntos clave para juzgar la necesidad:
|
||||
- Este problema acaba de ocurrir recientemente
|
||||
- El usuario ya ha invertido un costo de tiempo significativo
|
||||
- La solucion actual depende de otros, es inestable
|
||||
```
|
||||
|
||||
Este resultado puede mostrar muy intuitivamente a los principiantes: que frases se pueden usar para tomar decisiones y cuales solo se pueden escuchar.
|
||||
|
||||
### 12.4 Dejar que la IA haga una ronda ligera de busqueda en la web
|
||||
|
||||
Si aun no has empezado las entrevistas, primero puedes pedir a la IA que haga una investigacion externa muy ligera, como:
|
||||
|
||||
- En comunidades publicas, como se queja la gente recientemente de este problema
|
||||
- De que se quejan mas los usuarios de las herramientas existentes
|
||||
- Si los usuarios ya han gastado dinero en problemas similares
|
||||
- Que soluciones alternativas ya existen en el mercado
|
||||
|
||||
Este tipo de informacion no puede sustituir las entrevistas reales, pero te ayuda a entrar en contexto mas rapidamente, sabiendo por donde empezar a preguntar.
|
||||
|
||||
Por ejemplo, una entrada simple podria ser:
|
||||
|
||||
```text
|
||||
Por favor ayudame a buscar:
|
||||
"De que se quejan mas los universitarios al modificar su curriculum"
|
||||
Organizalo en 5 quejas mas comunes, escritas en lenguaje coloquial.
|
||||
```
|
||||
|
||||
La IA podria responder:
|
||||
|
||||
```text
|
||||
Quejas comunes:
|
||||
|
||||
1. No saber que poner exactamente en el curriculum
|
||||
2. Tener que modificarlo para cada puesto, es muy cansado
|
||||
3. Modificar muchas versiones y seguir sin seguridad de si esta bien
|
||||
4. Nadie puede darme retroalimentacion fiable
|
||||
5. Sentir siempre que no esta listo, por lo que sigo posponiendo
|
||||
```
|
||||
|
||||
El valor de este tipo de resultado es que te facilita encontrar un punto de entrada para las entrevistas.
|
||||
|
||||
### 12.5 Dejar que la IA actue como "coach de revision de entrevistas"
|
||||
|
||||
Tambien puedes pasar las notas de una entrevista recien terminada a la IA y pedirle que te haga criticas:
|
||||
|
||||
```text
|
||||
A continuacion estan las notas de una entrevista con un usuario.
|
||||
Por favor ayudame a revisar desde la perspectiva de The Mom Test:
|
||||
1. Que preguntas son demasiado parecidas a buscar validacion
|
||||
2. Que preguntas tienen una guia obvia
|
||||
3. Donde podria haber profundizado mas en los hechos
|
||||
4. Si pudieras repetirlo, como se podria preguntar mejor en esta conversacion
|
||||
```
|
||||
|
||||
Esto es especialmente util para principiantes, porque desarrollaras mas rapidamente una sensibilidad sobre "si realmente estoy recogiendo evidencia o solo recogiendo animos".
|
||||
|
||||
## 📚 Tareas
|
||||
|
||||
Por favor completa las siguientes tareas basandote en el contenido anterior:
|
||||
|
||||
1. Elige una direccion de producto que quieras hacer recientemente, y primero escribe 5 preguntas "que se desperdician facilmente" que hubieras hecho originalmente
|
||||
2. Reescribe estas 5 preguntas en un estilo mas acorde con The Mom Test
|
||||
3. Encuentra 3 usuarios potenciales, y al menos una vez logra preguntar "cuando fue la ultima vez que encontraste este problema"
|
||||
4. Despues de la entrevista, organiza 4 tipos de informacion: comportamientos reales, soluciones alternativas, costos incurridos, dificultades que se repiten
|
||||
|
||||
## Lectura adicional
|
||||
|
||||
- [The Mom Test sitio web oficial](https://momtestbook.com/)
|
||||
- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
|
||||
@@ -0,0 +1,605 @@
|
||||
---
|
||||
title: 'Construyendo un prototipo - Del analisis de negocio al prototipo multipagina'
|
||||
description: 'Experimenta el ciclo completo desde el analisis de negocio hasta la implementacion de un prototipo de producto multipagina.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Aproximadamente <strong>8 horas</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['es-es/stage-1/building-prototype'] ?? []
|
||||
</script>
|
||||
|
||||
# Construyendo un prototipo
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Analisis de negocio', 'Diseno de prototipo', 'Programacion asistida por IA', 'Aplicacion multipagina']" coreOutput="1 prototipo de espacio de trabajo de materiales de e-commerce" expectedOutput="Prototipo web interactivo">
|
||||
|
||||
En el capitulo anterior, aprendimos como <strong>encontrar buenas ideas</strong>: partiendo de las necesidades de los usuarios, encontrar direcciones por las que alguien este dispuesto a pagar. Pero encontrar la direccion es solo el primer paso; <strong>lo que realmente pone a prueba al product manager es: como convertir necesidades vagas en un producto util.</strong>
|
||||
|
||||
Este capitulo va a resolver un <strong>problema real</strong>: tu jefe te dice "usa IA para mejorar la eficiencia de publicar productos en plataformas de e-commerce" -- como lo conviertes en un <strong>prototipo de producto util</strong>?
|
||||
|
||||
A diferencia de hacer un juego de Snake o una calculadora, <strong>en negocios reales no puedes inventar funcionalidades de la nada</strong>:
|
||||
|
||||
1. <strong>Aclarar los puntos de dolor</strong>: hablar con el equipo de operaciones, extraer de la vaga "mejorar la eficiencia" los <strong>verdaderos puntos de dolor</strong>
|
||||
2. <strong>Elegir lo mas importante</strong>: de todos los problemas, resolver primero <strong>el mas doloroso</strong>, sin intentar hacer todo de una vez
|
||||
3. <strong>Validar rapidamente</strong>: usar el AI IDE para hacer primero un <strong>prototipo de una sola pagina</strong>, y una vez que funcione, expandirlo a multipagina
|
||||
4. <strong>Hacer algo util</strong>: entregar finalmente un <strong>espacio de trabajo de materiales de e-commerce que se pueda demostrar y operar</strong>
|
||||
|
||||
Aprenderemos la <strong>transicion de hacer juguetes a hacer aplicaciones</strong>, y a <strong>empatizar y pensar en las necesidades reales de los clientes</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Nota
|
||||
En este capitulo pueden aparecer terminos de negocio. Si no los entiendes, puedes preguntar a la IA para obtener una explicacion.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
|
||||
{ title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
|
||||
{ title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
|
||||
{ title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Definir los requisitos antes de escribir codigo
|
||||
|
||||
En los tutoriales anteriores, usamos AI IDE para generar facilmente el juego de Snake y otros juegos pequenos, pero estos solo pueden considerarse proyectos de juguete y no se pueden aplicar al trabajo y la vida cotidiana. Si queremos que las capacidades de IA sean realmente utiles para todos, deberiamos combinar la programacion Vibe Coding con escenarios de la vida real y del trabajo.
|
||||
|
||||
En el capitulo anterior aprendimos como encontrar <strong>buenas ideas por las que la gente este dispuesta a pagar</strong>, pero encontrar la direccion es solo el comienzo. Cuando realmente haces un producto, descubres que: <strong>saber "que hacer" y saber "como hacerlo" tienen una enorme brecha entre ellos.</strong>
|
||||
|
||||
Esta brecha es la <strong>concrecion de los requisitos</strong>.
|
||||
|
||||
Por ejemplo, en clase o en proyectos personales, a menudo empezamos con la funcion ejecutable mas simple:
|
||||
|
||||
- "Haz un tablero kanban, pon las tareas en una lista."
|
||||
- "Hazme una herramienta de dibujo."
|
||||
- "Hazme un software para recoger cuestionarios."
|
||||
|
||||
Estas a menudo son solo una herramienta, un modulo funcional, ni siquiera pueden considerarse un problema de negocio claro. Lo mas critico es que <strong>estas ideas a menudo son solo "tu crees que son utiles", no "los usuarios realmente las necesitan".</strong>
|
||||
|
||||
En proyectos empresariales o de startup, los product managers e ingenieros suelen partir de una proposicion de negocio mas grande. Por ejemplo, podemos suponer este escenario:
|
||||
|
||||
<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
|
||||
<div style="font-weight: bold; color: #303133; margin-bottom: 10px;">Escenario de negocio:</div>
|
||||
<div style="color: #606266; line-height: 1.6;">
|
||||
<p>Eres el product manager de operaciones de e-commerce de una tienda. Tu jefe te ha dado una proposition vaga pero con mucha presion:</p>
|
||||
<p style="font-style: italic; margin-top: 10px;">"Ahora todo el mundo en las cuentas oficiales esta usando IA para hacer imagenes y textos, parece muy facil. Ayudame con esto, para que seamos mas eficientes cuando subamos productos nuevos al e-commerce de TikTok."</p>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
En este momento puedes pensar: "Jefe, estas sonando otra vez!" Sin embargo, en el trabajo real, este tipo de decisiones vagas con una sola frase son muy comunes, incluso mas frecuentes que las veces que pides te con leche a la semana. Por lo tanto, para ser un buen profesional (y mas aun si eres el CEO de una nueva startup), debemos aprender a pasar de hacer herramientas para nosotros mismos a hacer prototipos de productos reales.
|
||||
|
||||
Como hemos aprendido AI IDE, si lo piensas bien, este requisito es bastante simple: solo tienes que darle un prompt a la IA basado en esto, pasarlo al Agent y ya esta, no?
|
||||
|
||||
```
|
||||
Por favor refierete a mi necesidad xxxx,
|
||||
ayudame a disenar un espacio de trabajo de materiales de e-commerce,
|
||||
que incluya funciones de generacion y gestion de materiales como descripciones de productos, imagenes y videos.
|
||||
```
|
||||
|
||||
Si emocionado conviertes directamente este requisito en un prototipo y se lo envias al jefe -- felicidades, tu bonificacion de este trimestre acaba de ser cancelada!
|
||||
|
||||
**Por que? Este es el punto de dolor central que vamos a resolver:**
|
||||
|
||||
Antes aprendimos AI IDE haciendo proyectos de juguete como el juego de Snake o una calculadora -- funcionalidades simples, tu sabes lo que quieres, y lo haces para ti mismo. Pero **los escenarios de negocio reales son completamente diferentes**:
|
||||
|
||||
- **Tu no eres el usuario**: el jefe quiere "mejorar la eficiencia", pero no sabes como trabaja exactamente el equipo de operaciones cada dia ni donde se atascan;
|
||||
- **La IA tampoco entiende el negocio**: si le das a la IA un requisito vago, solo puede adivinar basandose en conocimientos generales. Lo que produce puede parecer correcto, pero en realidad no se puede usar;
|
||||
- **Una buena idea no equivale a un buen producto**: crees que "anadir una funcion de generacion con IA" es genial, pero los usuarios puede que no lo necesiten, o que sea mas complicado de usar que antes.
|
||||
|
||||
**Por eso debemos aprender a "pasar de tener una idea a entender a los usuarios"** Solo cuando tu creatividad resuelve realmente los problemas de los demas, cuando preguntas, cuando profundizas en el entendimiento del negocio, puedes crear algo verdaderamente valioso. (Una buena idea puede ser incluso mas importante que una buena tecnologia).
|
||||
|
||||
### 1.1 De la imaginacion a la realidad: aprender a hacer preguntas sobre el negocio
|
||||
|
||||
::: info Primero aclaremos: que es un requisito? Que es un negocio?
|
||||
|
||||
Un **requisito** es lo que el usuario realmente quiere, los problemas que encuentra, lo que quiere resolver. Por ejemplo, "el jefe quiere que publique productos mas rapido", eso es un requisito.
|
||||
|
||||
Un **negocio** es lo que los usuarios hacen realmente cada dia, su forma de trabajar. Por ejemplo, lo que hace el equipo de operaciones de e-commerce cada dia: publicar productos, cambiar precios, hacer imagenes, ver datos... todo esto es negocio.
|
||||
|
||||
**Por que prestar atencion al negocio?**
|
||||
Porque si no entiendes el negocio, la herramienta que hagas puede ser "parece buena, pero nadie la usa". Solo entendiendo realmente como trabajan los usuarios cada dia y donde se atascan, puedes hacer algo que realmente les ayude.
|
||||
|
||||
:::
|
||||
|
||||
Desde la perspectiva mas simple, puedes empezar por preguntarte:
|
||||
|
||||
- Cuando el jefe dice "**mas eficiencia**", que significa exactamente? Quiere **hacerlo mas rapido**? O quiere **gastar menos**? O quiere **vender mas**?
|
||||
- Como se publican los productos ahora? **Donde esta el problema**?
|
||||
- Cuantos **productos nuevos** hay que hacer cada dia? Cuantas **imagenes** y cuanto **texto** por producto?
|
||||
- En el trabajo actual, **que es lo mas molesto**, **lo que menos quieres hacer**?
|
||||
|
||||
Pero estas son preguntas que suponemos; debemos preguntar directamente al equipo de operaciones de e-commerce de primera linea: "Cuales son sus dificultades y en que se enfocan?" A traves de la comunicacion, obtendremos respuestas mas precisas:
|
||||
|
||||
::: info Resultado de la entrevista real de negocio
|
||||
|
||||
Preguntamos a personas que hacen operaciones de e-commerce, y nos contaron estas frustraciones:
|
||||
|
||||
**1. Demasiadas cosas y muy dispersas**
|
||||
- Una persona tiene que gestionar varias tiendas, cada tienda tiene muchos productos que preparar;
|
||||
- Cada dia va de aqui para alla: **publicar productos nuevos**, **cambiar precios**, **hacer imagenes**, **ver datos**; una cosa no termina y ya hay que hacer otra.
|
||||
|
||||
**2. Hacer contenido no es hacerlo bien de una vez, sino ir probando**
|
||||
- Primero usan **las imagenes del fabricante**, **materiales usados antes** o **imagenes de referencia encontradas en internet** para **publicar** rapidamente el producto y probar;
|
||||
- Gastan un poco en promocion para **ver si alguien compra**;
|
||||
- Solo para los **productos que venden bien**, se toman el tiempo de hacer buenas imagenes, escribir descripciones detalladas y grabar videos.
|
||||
|
||||
:::
|
||||
Despues de entrevistar al equipo de negocio, sentimos entusiasmo, porque ahora realmente podemos hacer un prototipo perfecto que se ajuste al negocio! -- Nos equivocamos de nuevo. Si intentamos "satisfacer todas las demandas de una vez", el producto sera muy grande y dificil de implementar dentro del tiempo del curso. Por lo tanto, necesitamos organizar y priorizar aun mas, para encontrar el verdadero punto de dolor central.
|
||||
|
||||
### 1.2 De la divergencia a la convergencia: identificar el punto de dolor central y la funcionalidad del negocio
|
||||
|
||||
::: info Por que "converger"? Que es un "punto de dolor"?
|
||||
|
||||
**Hay muchos problemas, pero cual hacemos primero?**
|
||||
|
||||
Los usuarios pueden contarte un monton de problemas: A tambien es molesto, B tambien es molesto, C tambien... Pero si intentas resolver todos los problemas a la vez, probablemente no hagas bien ninguno. Por eso hay que **converger**: elegir de todos los problemas el **mas doloroso, el mas urgente y el mas resoluble** para empezar.
|
||||
|
||||
**Que es un punto de dolor?**
|
||||
Es el problema concreto que los usuarios **mas odian, en el que mas tiempo gastan y que mas quieren resolver**. No es "me parece util", sino algo de lo que los usuarios **se quejan todos los dias y que les duele cada vez que hacen**.
|
||||
|
||||
:::
|
||||
|
||||
A traves de la entrevista anterior, descubrimos que las operaciones encuentran muchos problemas: el ritmo interrumpido por promociones, tener que gestionar multiples tiendas, ir de publicar/cambiar precios/hacer imagenes/ver datos de un lado a otro...
|
||||
|
||||
Si intentamos "resolver todos estos problemas", terminaremos con una herramienta **grande y completa pero inutil**.
|
||||
|
||||
Vamos a clasificar estos problemas (puedes pedirle ayuda a la IA); aproximadamente hay tres categorias:
|
||||
|
||||
1. **Problemas de ritmo**: cuando publicar, cuando ajustar precios;
|
||||
2. **Problemas de eficiencia**: como gestionar bien multiples tiendas y multiples productos a la vez;
|
||||
3. **Problemas de contenido**: como hacer rapidamente imagenes y textos de productos.
|
||||
|
||||
Para nuestro curso, lo mas adecuado para resolver primero es la **categoria 3: el problema de hacer contenido**. Pero "hacer contenido rapidamente" sigue siendo algo abstracto, asi que preguntamos al equipo de negocio donde se atascan especificamente:
|
||||
|
||||
::: info El equipo de negocio dice: hay dos cosas mas dolorosas al hacer contenido
|
||||
|
||||
**Dolor 1: hacer imagenes y textos en lote es demasiado laborioso**
|
||||
- Los materiales estan por todas partes: en la nube, en el historial de WeChat, en el backend de la plataforma... **encontrarlos es muy dificil**;
|
||||
- Hay que publicar muchos productos a la vez, **no hay tiempo para hacerlos uno por uno con cuidado**, solo se puede hacer algo rapido;
|
||||
- Los requisitos no son altos, **con que se pueda ver y publicar**, no necesita ser muy elaborado.
|
||||
|
||||
**Dolor 2: las buenas soluciones no se pueden guardar y reutilizar**
|
||||
- Los titulos y layouts que funcionaron bien antes, **la proxima vez que se necesitan no se encuentran**;
|
||||
- Las soluciones estan dispersas en el historial de chat y en enlaces de productos anteriores;
|
||||
- Cuando se necesitan hay que **buscar un buen rato y copiar/pegar/modificar otro rato**;
|
||||
- Falta una herramienta para **guardar, gestionar y aplicar directamente**.
|
||||
|
||||
:::
|
||||
|
||||
Basandose en estos dos puntos de dolor, vamos a hacer una pequena herramienta: **ayudar al equipo de operaciones a hacer imagenes y textos en lote, y ademas poder guardar las buenas soluciones para usarlas directamente la proxima vez**.
|
||||
|
||||
Solo hace dos cosas (puedes pedirle a la IA que las refine, recuerda ir recortando funcionalidades segun el feedback del negocio):
|
||||
|
||||
::: info Funcionalidad 1: Generar en lote imagenes y textos de productos de e-commerce
|
||||
|
||||
**Para que sirve?**
|
||||
Le das al sistema informacion del producto, y automaticamente te genera imagenes y textos que se pueden usar para publicar en plataformas de e-commerce (como TikTok, Taobao).
|
||||
|
||||
**Entrada**
|
||||
| Tipo | Contenido |
|
||||
|------|------|
|
||||
| Informacion del producto | Nombre, categoria, marca, material, talla, color, etc. |
|
||||
| Imagenes del producto | Foto con fondo blanco o con escenario simple |
|
||||
| Imagenes de referencia | Capturas de productos que se vendieron bien antes o enlaces de referencia |
|
||||
| Forma de importar | Importar en lote via Excel, o rellenar directamente en la pagina |
|
||||
|
||||
**Salida (materiales de e-commerce generados)**
|
||||
- **Imagen principal del producto**: imagen de presentacion con puntos de venta en texto (la primera imagen que ve el usuario al desplazar)
|
||||
- **Titulo del producto**: combinacion de palabras clave que se pueden buscar
|
||||
- **Texto de puntos de venta**: 1-2 frases atractivas para los compradores
|
||||
- Todo es un producto final que **con pequenos ajustes se puede publicar**
|
||||
|
||||
**Resultado esperado**
|
||||
- Antes: cada producto habia que hacerlo desde cero, imagen y texto
|
||||
- Ahora: pasas un lote de productos al sistema, y despues de generar borradores solo eliges y ajustas
|
||||
|
||||
:::
|
||||
|
||||
::: info Funcionalidad 2: Guardar las buenas soluciones como plantillas
|
||||
|
||||
**Entrada**
|
||||
| Tipo | Contenido |
|
||||
|------|------|
|
||||
| Un conjunto completo | Imagen principal + titulo + texto |
|
||||
|
||||
**Salida**
|
||||
| Funcion | Descripcion |
|
||||
|------|------|
|
||||
| Aplicar | Al hacer un producto nuevo la proxima vez, generar automaticamente con la plantilla |
|
||||
| Modificar | Cambiar directamente el titulo y el texto |
|
||||
| Gestionar | Poner nombre, etiquetar (ej. "plantilla de bolsos de hombre", "titulo de promocion"), para facilitar la busqueda |
|
||||
|
||||
**Resultado esperado**
|
||||
1. Importar un producto nuevo
|
||||
2. Elegir: dejar que el sistema genere por defecto, o **usar mi plantilla guardada**
|
||||
3. El sistema aplica automaticamente el estilo de la plantilla, generando nuevas imagenes y textos
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
**Repasemos lo que acabamos de hacer:**
|
||||
|
||||
1. **Primero hicimos preguntas**: en lugar de empezar directamente a hacer, primero preguntamos al equipo de operaciones "que es lo que mas les molesta";
|
||||
2. **Encontramos los puntos de dolor**: descubrimos que lo mas doloroso es "hacer imagenes y textos es demasiado trabajoso" y "las buenas soluciones no se pueden guardar";
|
||||
3. **Convergimos el alcance**: no hacemos una plataforma grande y completa, solo hacemos dos funciones: "generar imagenes y textos en lote + guardar plantillas".
|
||||
|
||||
**Por que es importante hacer esto?**
|
||||
|
||||
Un error comun de los principiantes al hacer productos es: cuantas mas funcionalidades, mejor. Pero lo que los usuarios realmente necesitan es **que se resuelva el problema mas doloroso**. Mejor hacer una o dos funcionalidades que realmente ayuden al usuario que un monton que no funcionen bien.
|
||||
|
||||
**El nucleo del pensamiento de producto y negocio:**
|
||||
- No pienses "creo que el usuario necesita esto"
|
||||
- Ve y pregunta al usuario "que haces cada dia? Donde te duele mas?"
|
||||
- De todos los problemas, **converge** al mas doloroso y mas resoluble
|
||||
- Haz primero la **version minima usable**, y luego itera poco a poco
|
||||
|
||||
Esto es lo que debemos aclarar antes de escribir codigo. El codigo es solo una herramienta; **entender al usuario y encontrar el problema correcto** es el primer paso.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
|
||||
{ title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
|
||||
{ title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
|
||||
{ title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Producir un prototipo en 10 minutos: dejar que el AI IDE implemente la "funcionalidad central"
|
||||
|
||||
::: info Sobre el Plan de programacion
|
||||
Si sientes que tu IDE actual no es lo suficientemente inteligente, o que te quedas sin cuota muy rapido, puedes comprar un **plan de programacion**. Puedes prever este articulo de referencia sobre el uso de Claude para programar.
|
||||
:::
|
||||
|
||||
Pensar es bueno, pero no hay que sobre-pensar. Dejemos de lado el exceso de reflexion y intentemos hacer un prototipo empezando con una sola pagina.
|
||||
|
||||
### 2.1 Primer paso: dile a la IA en lenguaje llano que quieres
|
||||
|
||||
Al principio no busques el prompt perfecto; empieza con tu expresion mas natural. Como cuando le describes un requisito a un companero, dile a la IA en lenguaje llano lo que quieres hacer, y luego deja que la IA te ayude a optimizarlo en algo mas profesional.
|
||||
|
||||
#### 2.1.1 Empezar con una descripcion verbal (recomendado para principiantes)
|
||||
|
||||
Primero describe la idea con tus propias palabras, aunque sea rudimentario, no importa:
|
||||
|
||||
```
|
||||
Quiero hacer una herramienta que ayude a operaciones de e-commerce a generar automaticamente imagenes principales y textos de productos.
|
||||
Los de operaciones normalmente tienen que hacer imagenes y escribir textos uno por uno, lo cual es muy molesto.
|
||||
Mi idea es: suben la informacion del producto, el sistema genera un lote de borradores,
|
||||
y los de operaciones eligen los buenos, los ajustan un poco y ya los pueden usar.
|
||||
|
||||
Primero hagamos la version mas simple: una pagina, a la izquierda se rellena la informacion del producto,
|
||||
a la derecha se muestra el resultado generado. Que se puedan subir imagenes, rellenar texto,
|
||||
y despues de generar, mostrar la vista previa de la imagen principal y el texto.
|
||||
```
|
||||
|
||||
A continuacion, enviale este texto a la IA (como ChatGPT, Claude, etc.) y pidele que te ayude a expandirlo. La IA normalmente te ayudara a completar detalles que no habias considerado, organizar tu idea mas claramente, y finalmente generar un prompt adecuado para enviar al AI IDE.
|
||||
|
||||
Puedes decirle a la IA asi:
|
||||
```
|
||||
Ayudame a expandir la idea anterior, organizala en un documento de logica de negocio claro,
|
||||
y luego genera un prompt adecuado para enviar a un AI IDE (como Cursor, Trae),
|
||||
para generar el codigo de un prototipo de aplicacion de una sola pagina.
|
||||
```
|
||||
|
||||
La IA devolvera un conjunto de requisitos estructurados y el prompt correspondiente. Tu lo revisas, eliminas las funcionalidades innecesarias, confirmas que esta todo correcto, y luego lo usas para generar el codigo.
|
||||
|
||||
La ventaja de hacer esto es que lo que describes verbalmente es tu idea mas autentica, aunque puede faltar algunos detalles importantes. Cuando la IA te ayuda a expandir, puede preguntar cosas como "quieres soportar subida en lote?" que no habias pensado, ayudandote a validar mas. Puedes elegir conservar o eliminar funcionalidades poco practicas segun el feedback, y en iteraciones sucesivas determinar el prompt inicial para la IA.
|
||||
|
||||
#### 2.1.2 Saltarse la expansion: enviar directamente tu documento de negocio organizado a la IA
|
||||
|
||||
Si ya has organizado el documento de logica de negocio en capitulos anteriores (por ejemplo, una descripcion de requisitos en lenguaje llano), puedes usar directamente el siguiente formato para enviarlo al AI IDE, ahorrando el paso intermedio de la expansion. Adecuado cuando los requisitos ya estan claros y quieres empezar a escribir codigo directamente:
|
||||
|
||||
```
|
||||
Ayudame a implementar una aplicacion de una sola pagina basandote en la logica de negocio, para validar la funcionalidad central.
|
||||
|
||||
La logica de negocio es la siguiente:
|
||||
1. Ayudar a operaciones a generar en lote la primera version de borradores de imagenes y textos:
|
||||
- **Entrada (soporta subida directa e importacion en lote de materiales):**
|
||||
- Informacion basica del producto: nombre, categoria, marca, material, talla, color, publico objetivo, etc.;
|
||||
- Imagenes del producto: foto con fondo blanco / foto con escenario simple;
|
||||
- Cada generacion soporta subir capturas de productos exitosos anteriores o enlaces de referencia;
|
||||
- Soporta importar en lote via Excel, o rellenar/subir online en la pagina.
|
||||
- Soporta especificar en la pagina si guardar los materiales en la biblioteca, para facilitar el proximo uso
|
||||
- **Salida (contenido que se puede publicar directamente o con pequenos cambios):**
|
||||
- Para cada producto, un borrador de imagen principal "presentable, con puntos de venta basicos";
|
||||
- Un titulo "con estructura razonable y palabras clave centrales" + 1-2 frases de puntos de venta.
|
||||
- **Cambio esperado en la forma de uso:**
|
||||
Pasar de empezar cada lote desde cero a pasar un lote de productos al sistema y usar los borradores generados para filtrar y ajustar.
|
||||
|
||||
Primero hagamos la primera funcionalidad; la segunda (biblioteca de plantillas) la anadiremos despues.
|
||||
```
|
||||
|
||||
#### 2.1.3 El enfoque del programador (avanzado): dejar que la IA escriba "el prompt del prompt"
|
||||
|
||||
Si quieres controlar mas finamente el proceso de generacion de codigo, primero puedes pedirle a la IA (como ChatGPT) que genere un prompt especifico para el AI IDE basandose en tus requisitos:
|
||||
|
||||
```
|
||||
Basandote en la siguiente idea, ayudame a escribir un prompt para enviar a un coding Agent que generara codigo,
|
||||
necesito usar este prompt para generar codigo.
|
||||
|
||||
[Pega aqui tu descripcion de la logica de negocio]
|
||||
|
||||
Requisitos:
|
||||
1. El prompt debe incluir una descripcion clara del layout de la pagina
|
||||
2. Definir claramente la estructura de datos y la logica de interaccion
|
||||
3. Especificar el stack tecnologico (ej. React + Tailwind)
|
||||
4. Listar los puntos de funcionalidad central a implementar
|
||||
```
|
||||
|
||||
Normalmente la IA generara un prompt estructurado como el siguiente:
|
||||
|
||||
|
||||
Puedes modificar ligeramente este prompt y luego enviarlo al AI IDE para generar codigo.
|
||||
|
||||
### 2.2 Segundo paso: dejar que el AI IDE genere codigo directamente
|
||||
|
||||
#### 2.2.1 Preparacion: conocer las operaciones basicas del AI IDE
|
||||
|
||||
Si aun no estas familiarizado con el uso basico del AI IDE (como Cursor, Trae, Windsurf, etc.), te recomendamos primero ver el [tutorial basico de IDE](/es-es/appendix/2-development-tools/ide-basics/) en el apendice, para entender como:
|
||||
- Crear un nuevo proyecto
|
||||
- Conversar con el AI Agent
|
||||
- Entender el proceso de generacion de codigo de la IA
|
||||
|
||||
#### 2.2.2 Empezar a generar codigo
|
||||
|
||||
Ya tienes el prompt inicial; usemos el primer estilo de prompt como ejemplo para que la IA nos ayude a generar codigo. Primero crea una ventana y la carpeta correspondiente, abre la carpeta (inicializa un nuevo proyecto en la direccion de carpeta que prefieras):
|
||||
|
||||
|
||||
|
||||
En la barra lateral, elige el modelo que prefieras (se recomiendan gemini, gpt, glm, kimi, minimax, etc.), e introduce el prompt obtenido en el primer paso:
|
||||
|
||||
|
||||
Despues de hacer clic en generar, veremos la etapa familiar: la IA planificara la estructura de directorios del proyecto, los archivos necesarios y dara el contenido inicial de cada archivo.
|
||||
|
||||
::: warning Nota especial: la IA puede detenerse esperando tu confirmacion
|
||||
Durante el proceso de generacion, el AI Agent frecuentemente **se detendra esperando tu input o confirmacion**, por ejemplo:
|
||||
- Preguntandote si quieres continuar al siguiente paso
|
||||
- Pidiendote que presiones Enter para confirmar una operacion
|
||||
- Preguntandote sobre alguna eleccion tecnica
|
||||
|
||||
**Si ves que la IA no avanza, primero revisa la interfaz de chat para ver si esta esperando tu respuesta.** Muchos principiantes creen que la IA esta pensando, cuando en realidad ya se detuvo esperandote. Responde activamente o presiona Enter, y la IA continuara trabajando.
|
||||
:::
|
||||
|
||||
Tambien recuerda presionar Enter para confirmar la informacion (de lo contrario se quedara esperando; algunos AI IDE no tienen este problema):
|
||||
|
||||
|
||||
Si te encuentras con la siguiente situacion, significa que ya se ha iniciado un servicio local; necesitas hacer clic para saltar, de lo contrario te quedaras en esta pantalla (si despues de generar el codigo no aparece nada, necesitas decir activamente "ayudame a iniciar este proyecto"):
|
||||
|
||||
|
||||
::: info Explicacion del escenario
|
||||
**Explicacion del escenario**: usaste `npm create vite@latest` para crear un proyecto React + TypeScript (easy-vibe-web). Una vez completada la creacion, la computadora automaticamente "ejecutara" esta pagina web, para que puedas ver el efecto inmediatamente.
|
||||
|
||||
**Servicio local**: se puede entender como que tu computadora ha abierto temporalmente una ventana de muestra de pagina web, que solo se ejecuta en tu computadora; los demas no pueden acceder.
|
||||
|
||||
**localhost (direccion local)**: `localhost` significa "esta computadora misma". Cuando el navegador accede a esta direccion, en realidad esta accediendo a la pagina web que se esta ejecutando en tu computadora.
|
||||
|
||||
**Puerto**: el puerto se puede entender como un numero que se usa para distinguir diferentes servicios de paginas web que se ejecutan en la misma computadora. Este proyecto usa el 5174.
|
||||
|
||||
**Enlace de acceso `http://localhost:5174/`**: esta direccion significa "acceder a la pagina web con numero 5174 en esta computadora". Abriendo este enlace en el navegador podras ver el efecto.
|
||||
|
||||
**Explicacion de este escenario**: el sistema originalmente queria usar el puerto 5173, pero ese numero ya estaba en uso, asi que cambio automaticamente al 5174. Esto es normal.
|
||||
|
||||
**Instrucciones de operacion**: abre el navegador, introduce `http://localhost:5174/` en la barra de direcciones y presiona Enter para ver la pagina del proyecto actual.
|
||||
:::
|
||||
|
||||
Despues de confirmar todo, espera un momento a que el agente termine de ejecutarse, y podemos obtener el siguiente resultado:
|
||||
|
||||
|
||||
Podemos ver que ya hay una vista preliminar de las funcionalidades, pero la pagina frontend se ve muy fea. En este momento podemos intentar hablar directamente con la IA para optimizar la visualizacion de la interfaz:
|
||||
|
||||
|
||||
Despues de optimizar, podemos obtener una interfaz mas bonita:
|
||||
|
||||
|
||||
Puedes modificar las funcionalidades de la pagina web segun tus necesidades; puedes adjuntar capturas de pantalla y preguntar libremente, por ejemplo: "Todavia no necesito la funcion de importacion en lote, ayudame a quitarla", "Hay demasiadas cosas que rellenar a la izquierda, ayudame a dejar solo xxxxx". Incluso puedes referenciar otros sitios web maduros; por ejemplo, aqui podemos referirnos directamente a un producto de diseno de Google (puedes pegar una captura de pantalla de un sitio web maduro que te guste):
|
||||
|
||||
|
||||
Finalmente podemos obtener:
|
||||
|
||||
|
||||
### 2.3 Que hacer cuando hay errores
|
||||
|
||||
En la practica, encontrar errores es inevitable; es un fenomeno normal y no significa que hayas hecho algo mal. No necesitas entender el error; solo pasa "lo que ves" completamente a la IA.
|
||||
|
||||
Solo hay tres formas comunes de manejarlos:
|
||||
|
||||
- **Forma 1: Error en la pagina o terminal**
|
||||
Cuando la pagina se pone roja, queda en blanco, o aparecen un monton de letras rojas en la terminal, simplemente haz una captura de pantalla o copia toda la informacion del error y enviasela a la IA para que te ayude a repararlo.
|
||||
|
||||
- **Forma 2: La funcionalidad no esta bien pero no hay error**
|
||||
Por ejemplo, el boton no responde, los datos no se muestran, los estilos estan desordenados. Describe en lenguaje llano "que esta pasando ahora + lo que tu querias", y si es necesario, anade una captura de pantalla.
|
||||
|
||||
- **Forma 3: No estas seguro de si hay algun problema**
|
||||
Puedes preguntar directamente a la IA: "Ayudame a revisar si esta funcionalidad tiene algun problema obvio, si necesita ajustes."
|
||||
|
||||
#### 2.3.1 Preguntas frecuentes de principiantes
|
||||
|
||||
- **P: No se donde esta la informacion del error?**
|
||||
- R: Generalmente, mira todas las "letras rojas". En la terminal, la consola o la pagina, busca las indicaciones en rojo, selecciona todo y copialo para la IA.
|
||||
|
||||
- **P: Que hago si la IA lo arregla pero sigue dando el mismo error?**
|
||||
- R: Esto es comun. Sigue haciendo capturas de pantalla o copiando la ultima informacion del error y enviasela, para que lo repare aun mas basandose en la ultima modificacion.
|
||||
|
||||
- **P: Necesito entender completamente el plan de reparacion de la IA?**
|
||||
- R: No necesitas entenderlo todo de una vez. Puedes centrarte en uno o dos puntos cada vez; con el tiempo, iras entendiendo cada vez mas codigo, como cuando acumulas vocabulario en ingles.
|
||||
|
||||
- **P: Despues de muchas modificaciones, el problema sigue sin resolverse?**
|
||||
- R: Puedes intentar:
|
||||
- Usar la funcion de "rollback de version" del IDE, encontrar el boton de deshacer en el chat del agente, volver a una version que funcionaba y empezar de nuevo;
|
||||
- Cambiar de modelo o ajustar el prompt, describiendo el fenomeno y la informacion del error de forma mas especifica;
|
||||
- Empaquetar "codigo actual + log de errores + comportamiento esperado" y enviarlo todo de una vez a la IA, para que reestructure completamente la parte problematica.
|
||||
|
||||
## 3. Expandir de aplicacion de una sola pagina a multipagina
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
|
||||
{ title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
|
||||
{ title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
|
||||
{ title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Cuando la logica de la funcionalidad central esta basicamente generada, podemos generar el resto del contenido. Por ejemplo, en este punto, si hacemos clic en configuracion o en algunos botones, no hacen nada.
|
||||
|
||||
Puedes pedirle a la IA que revise segun los requisitos del prompt de negocio y genere las partes que faltan, o pedirle directamente que complete las paginas no implementadas. Tambien puedes especificar una pagina para que la IA la complete, hasta que las paginas se puedan hacer clic y las funcionalidades puedan interactuar normalmente:
|
||||
|
||||
|
||||
Despues de esperar un momento, podemos ver que el programa ya ha completado multiples paginas y funcionalidades interactivas basandose en lo anterior:
|
||||
|
||||
|
||||
|
||||
|
||||
En este punto solo necesitas hacer clic manualmente en cada funcion y boton que te interese, asegurandote de que la interaccion sea normal. Si hay funcionalidades que no se pueden interactuar, puedes comunicarte con la IA para que te ayude a repararlas.
|
||||
|
||||
## 4. Hacer que el prototipo "parezca profesional"
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
|
||||
{ title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
|
||||
{ title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
|
||||
{ title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Despues de tener la estructura multipagina, el ultimo paso es hacer que el prototipo pase de "funcional" a "comodo de usar y profesional". Para ello, necesitamos experimentar todo el flujo (flujo de usuario) y hacer que la IA repare las partes que no funcionan, para que podamos simular un nuevo usuario recorriendo todo el flujo desde cero cada vez que actualizamos, obteniendo el resultado esperado.
|
||||
|
||||
Recordemos los requisitos iniciales:
|
||||
|
||||
```
|
||||
1. Ayudar a operaciones a generar en lote la primera version de borradores de imagenes y textos:
|
||||
- **Entrada (soporta subida directa e importacion en lote de materiales):**
|
||||
- Informacion basica del producto: nombre, categoria, marca, material, talla, color, publico objetivo, etc.;
|
||||
- Imagenes del producto: foto con fondo blanco / foto con escenario simple;
|
||||
- Cada generacion soporta subir capturas de productos exitosos anteriores o enlaces de referencia;
|
||||
- Soporta importar en lote via Excel, o rellenar/subir online en la pagina.
|
||||
- Soporta especificar en la pagina si guardar los materiales en la biblioteca, para facilitar el proximo uso
|
||||
- **Salida (contenido que se puede publicar directamente o con pequenos cambios):**
|
||||
- Para cada producto, un borrador de imagen principal "presentable, con puntos de venta basicos";
|
||||
- Un titulo "con estructura razonable y palabras clave centrales" + 1-2 frases de puntos de venta.
|
||||
- **Cambio esperado en la forma de uso:**
|
||||
Pasar de empezar cada lote desde cero a pasar un lote de productos al sistema y usar los borradores generados para filtrar y ajustar.
|
||||
|
||||
2. Guardar las buenas soluciones como una biblioteca de plantillas reutilizables:
|
||||
- **Que se puede guardar?**
|
||||
- Cualquier salida que las operaciones consideren "buena" se puede guardar con un clic:
|
||||
- Puede ser la combinacion completa de "imagen principal + titulo + puntos de venta";
|
||||
- O solo una parte, como una estructura de titulo o un texto de puntos de venta.
|
||||
- **Que se puede hacer despues de guardar?**
|
||||
- **Reutilizar:**
|
||||
- Usar esta entrada guardada para generar un nuevo lote de imagenes y textos con los parametros de nuevos productos;
|
||||
- O sobre el mismo producto, generar multiples variantes basadas en la plantilla para hacer tests A/B.
|
||||
- **Editar:**
|
||||
- Modificar directamente el titulo / texto de puntos de venta;
|
||||
- Si se soporta edicion de imagen, se pueden ajustar elementos como texto y pegatinas en la imagen principal.
|
||||
- **Gestionar:**
|
||||
- Poner nombre a las entradas guardadas, etiquetar (ej. "plantilla de imagen principal de bolsos de hombre", "estructura de titulo de promocion"), soportar clasificacion por tienda para facilitar la busqueda posterior.
|
||||
- **Como usarlo la proxima vez que se publique un producto nuevo?**
|
||||
- Despues de importar productos nuevos, las operaciones pueden elegir:
|
||||
- Usar la logica por defecto del sistema, o
|
||||
- Especificar "usar una de mis plantillas guardadas para generar";
|
||||
- El sistema basandose en los datos del nuevo producto, aplica automaticamente la estructura y el estilo de la plantilla, generando nuevos borradores de imagen principal + titulo + puntos de venta.
|
||||
```
|
||||
|
||||
Si cada vez que pruebas necesitas crear datos nuevos, esto lleva mucho tiempo. En este caso, normalmente usamos algo llamado "datos de prueba". Podemos comunicarnos con la IA de la siguiente manera, para que genere en la interfaz una entrada rapida de datos de prueba que nos permita verificar que todas las funcionalidades funcionan correctamente:
|
||||
|
||||
```
|
||||
Necesito probar el proceso de uso del usuario, asegurandome de que pueda completarse totalmente. Por favor genera una entrada de datos de prueba basandote en los siguientes requisitos, para que pueda hacer clic y probar rapidamente si todo el flujo funciona normalmente:
|
||||
1. Ayudar a operaciones a generar en lote la primera version de borradores de imagenes y textos:
|
||||
- **Entrada (soporta subida directa e importacion en lote de materiales):**
|
||||
- Informacion basica del producto: nombre, categoria, marca, material, talla, color, publico objetivo, etc.;
|
||||
- Imagenes del producto: foto con fondo blanco / foto con escenario simple;
|
||||
- Cada generacion soporta subir capturas de productos exitosos anteriores o enlaces de referencia;
|
||||
- Soporta importar en lote via Excel, o rellenar/subir online en la pagina.
|
||||
- Soporta especificar en la pagina si guardar los materiales en la biblioteca, para facilitar el proximo uso
|
||||
- **Salida (contenido que se puede publicar directamente o con pequenos cambios):**
|
||||
- Para cada producto, un borrador de imagen principal "presentable, con puntos de venta basicos";
|
||||
- Un titulo "con estructura razonable y palabras clave centrales" + 1-2 frases de puntos de venta.
|
||||
- **Cambio esperado en la forma de uso:**
|
||||
Pasar de empezar cada lote desde cero a pasar un lote de productos al sistema y usar los borradores generados para filtrar y ajustar.
|
||||
```
|
||||
|
||||
Es facil obtener resultados (si crees que un dato es muy poco, puedes pedirle a la IA que genere multiples casos de prueba):
|
||||
|
||||
|
||||
Despues de hacer clic, obtenemos el resultado:
|
||||
|
||||
|
||||
En este punto lo que obtenemos directamente es el resultado, no hay un "proceso de generacion simulado". Si queremos simular un proceso de generacion real, podemos hablar directamente con la IA: "Por favor simula un proceso de generacion real, que me des el resultado despues de un rato al hacer clic."
|
||||
|
||||
|
||||
Despues de verificar la funcionalidad de generacion, tambien debemos asegurarnos de que la funcionalidad de la biblioteca de plantillas funciona correctamente. En la tarjeta de generacion de la pagina podemos ver que la funcion de guardado de plantillas no se ha implementado; necesitamos tener una conversacion mas profunda con la IA: "Por favor ayudame a asegurarme de que el requisito [pega aqui el contenido del punto 2 de arriba] funciona correctamente, que se pueda hacer clic en un resultado para guardar la plantilla correspondiente, y que al abrirlo se puedan ver los parametros de generacion"
|
||||
|
||||
La generacion a menudo no se consigue de una sola vez; frecuentemente hay que hacer capturas de pantalla para corregir:
|
||||
|
||||
|
||||
Finalmente obtenemos el resultado esperado:
|
||||
|
||||
|
||||
Ademas de experimentar manualmente el flujo de requisitos, tambien puedes pedirle a la IA que haga directamente una verificacion de requisitos, por ejemplo:
|
||||
|
||||
- "Por favor compara con mis requisitos originales, revisa si la aplicacion actual ya cubre todas las funcionalidades centrales."
|
||||
- "Ayudame a hacer una lista de funcionalidades, indicando cuales ya estan completadas, cuales aun no estan implementadas o tienen una experiencia insuficiente."
|
||||
|
||||
La IA generalmente generara un checklist, y puedes pensar si necesitas seguir mejorando basandote en los resultados. Despues de iteraciones repetidas, puedes obtener un resultado de prototipo bastante completo.
|
||||
|
||||
## 5. Asignacion: replica tu propio espacio de trabajo de e-commerce de TikTok
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Mision de desafio: replica el espacio de trabajo de materiales de e-commerce</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Referenciando los prompts y el contenido de esta leccion, completa un ciclo cerrado:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Practica de ciclo cerrado completo</strong>
|
||||
<ul>
|
||||
<li>Generacion de prompts a partir del analisis de negocio -> generacion de prototipo de una pagina -> generacion de prototipo multipagina</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Compartir resultados</strong>
|
||||
<ul>
|
||||
<li>Haz capturas de pantalla de tu programa y compartelas con todos</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Pregunta de reflexion</strong>
|
||||
<ul>
|
||||
<li>Para la proxima seccion "integrar capacidades de LLM y generacion de texto a imagen", piensa con antelacion: como podrias integrar capacidades como "IA que escribe textos / genera imagenes / genera scripts" en tu espacio de trabajo?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Proximo paso
|
||||
|
||||
En la siguiente seccion, construiremos sobre este espacio de trabajo de produccion de contenido e integraremos capacidades especificas de IA (texto a texto, imagen a texto, texto a imagen), por ejemplo:
|
||||
|
||||
- Generar automaticamente un primer borrador de texto y multiples opciones de titulos para una tarea de contenido
|
||||
- Generar automaticamente un borrador de imagen de acompanamiento basandose en la descripcion de la tarea (texto a imagen)
|
||||
- Clasificar y resumir automaticamente las tareas de contenido historicas, ayudandote a planificar los temas de la proxima campana
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Sigue aprendiendo"
|
||||
description="Se recomienda seguir el orden 'integrar capacidades de IA -> ciclo completo de proyecto -> ingenieria de diseno'."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'Practica de proyecto completo - De Demo a prototipo de nivel de producto'
|
||||
description: 'Sal de la fase de Demo, aprende a mejorar los enlaces del producto, construye datos de simulacion realistas, e itera rapidamente con retroalimentacion.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Aproximadamente <strong>3 dias</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['es-es/stage-1/complete-project-practice'] ?? []
|
||||
</script>
|
||||
|
||||
# Practica de proyecto completo
|
||||
|
||||
## Resumen del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Pensamiento de producto', 'Datos de simulacion', 'Mejora de interaccion', 'LocalStorage']" coreOutput="1 prototipo de producto IA con funcionalidad completa" expectedOutput="Aplicacion web con flujo completo y datos realistas">
|
||||
|
||||
En el capitulo anterior integramos capacidades de IA y el Demo ya funciona, pero aun esta <strong>lejos</strong> de ser un verdadero "producto": al actualizar la pagina los <strong>datos desaparecen</strong>, un error causa <strong>pantalla en blanco</strong>, la lista solo tiene "dato de prueba 1, dato de prueba 2", y si el usuario hace clic en el lugar equivocado <strong>no puede deshacer</strong>...
|
||||
|
||||
Este capitulo va a <strong>llenar todos estos huecos</strong>: vamos a <strong>completar el flujo completo del producto</strong>, usar IA para generar <strong>datos de negocio realistas</strong> en lugar de datos falsos, anadir <strong>manejo de errores y retroalimentacion al usuario</strong>, y finalmente pulir un prototipo completo que <strong>se pueda mostrar a otros</strong>.
|
||||
|
||||
Este es el <strong>ultimo capitulo</strong> de la etapa inicial. Despues de completar este paso, habras logrado la transformacion de "no saber programar en absoluto" a "<strong>poder crear independientemente un prototipo de producto IA</strong>".
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
|
||||
{ title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
|
||||
{ title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
|
||||
{ title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Rechaza el "Happy Path": completa el flujo central
|
||||
|
||||
Muchos principiantes que hacen prototipos suelen limitarse al "Happy Path" (el camino ideal): el usuario hace clic -> la API responde con exito -> se muestra el resultado.
|
||||
Pero en el mundo real, las cosas rara vez son tan simples. Para que tu prototipo parezca un producto real, necesitas considerar los siguientes eslabones "invisibles".
|
||||
|
||||
### 1.1 Anadir "espera" y "retroalimentacion"
|
||||
|
||||
Cuando el usuario hace clic en "generar texto", la IA suele tardar varios segundos en responder. Si la interfaz no muestra ninguna reaccion, el usuario pensara que el programa se ha roto.
|
||||
**Necesitas que tu AI IDE te ayude a anadir estados de Loading:**
|
||||
|
||||
> Ejemplo de prompt:
|
||||
> "Cuando haga clic en el boton de generar, cambialo a 'Generando...' y desactivalo, y al mismo tiempo muestra una animacion de carga en el area derecha. Solo restaura el estado normal despues de que la API devuelva el resultado."
|
||||
|
||||
### 1.2 Manejar "fallos" y "excepciones"
|
||||
|
||||
La API Key puede caducar, la red puede desconectarse.
|
||||
**Necesitas que tu AI IDE te ayude a manejar los errores:**
|
||||
|
||||
> Ejemplo de prompt:
|
||||
> "Si la peticion a la API falla, no muestres el error directamente en la consola. En su lugar, muestra una notificacion roja (Toast) en la parte superior de la pagina que diga 'Generacion fallida, por favor intenta de nuevo mas tarde', y permite que el usuario vuelva a hacer clic en generar."
|
||||
|
||||
### 1.3 Persistencia del historial de conversacion
|
||||
|
||||
En el proceso de interaccion con la IA, necesitamos guardar el contenido de las conversaciones para que el usuario pueda revisar el historial y continuar intercambios anteriores. En esta etapa aun no introducimos una base de datos; puedes elegir entre las siguientes soluciones ligeras:
|
||||
|
||||
**Opciones de almacenamiento:**
|
||||
|
||||
| Opcion | Escenario aplicable | Caracteristicas |
|
||||
| ---------------- | -------------------------------- | ------------------------------------ |
|
||||
| **LocalStorage** | Proyecto puramente frontend, datos del usuario guardados en el navegador | Implementacion simple, no se pierde al actualizar, no se sincroniza entre dispositivos |
|
||||
| **Archivo JSON** | Prototipo local, datos almacenados en formato archivo | Estructura clara, facil de depurar, editable manualmente |
|
||||
| **Archivo TXT** | Solucion mas simple, registro rapido de contenido de texto | Formato libre, buena compatibilidad |
|
||||
|
||||
**Ejemplo de contenido de conversacion:**
|
||||
El historial de conversacion guardado suele incluir el siguiente contenido:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"role": "user",
|
||||
"content": "Ayudame a generar un texto de venta para unos auriculares Bluetooth en TikTok",
|
||||
"timestamp": "2026-01-20 10:30:00"
|
||||
},
|
||||
{
|
||||
"role": "assistant",
|
||||
"content": "[Texto recomendacion de auriculares Bluetooth]\n\n🎧 Adios al retraso, experiencia de escucha inmersiva\n\n chicas! Estos auriculares Bluetooth son increibles\n\n 40dB de cancelacion activa de ruido, entra instantaneamente al mundo de la musica\n 30 horas de bateria super larga, una semana de viaje sin cargar\n llamadas claras como en persona, incluso en el metro ruidoso\n diseno semi-in-ear, comodos de usar durante horas\n\n Oferta por tiempo limitado, haz clic en el enlace de abajo para conseguirlos!",
|
||||
"timestamp": "2026-01-20 10:30:05"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**Prompt de implementacion:**
|
||||
|
||||
> "Por favor ayudame a implementar la funcion de guardado del historial de conversacion. Soporta guardar los registros de conversacion entre el usuario y la IA como un archivo JSON (o usando LocalStorage). Cada vez que se entra a la pagina, carga automaticamente el historial de conversacion, y permite ver y eliminar registros individuales."
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
|
||||
{ title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
|
||||
{ title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
|
||||
{ title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Inyectar el alma: datos realistas simulados (Mock Data)
|
||||
|
||||
Una pagina vacia no puede convencer a nadie. Imagina que le muestras a alguien un "espacio de trabajo de materiales de e-commerce", y el historial esta completamente vacio, o solo tiene una linea "test / test / test".
|
||||
Para lograr el mejor efecto de demostracion, necesitamos "falsificar" algunos datos realistas que hagan que tu prototipo parezca un producto real que ha estado operando durante medio ano.
|
||||
|
||||
### 2.1 Deja que la IA te ayude a disenar la estructura de datos
|
||||
|
||||
No necesitamos pensar por nosotros mismos como deberia llamarse cada campo (por ejemplo, si debe ser `name` o `title`); esto se lo podemos dejar completamente a la IA.
|
||||
|
||||
Solo necesitas decirle a la IA tu **escenario de negocio**:
|
||||
|
||||
> **Ejemplo de prompt:**
|
||||
> "Estoy haciendo un prototipo de un **espacio de trabajo de materiales de e-commerce para TikTok**.
|
||||
> Por favor ayudame a disenar una estructura de datos JSON para describir una 'tarea de producto'.
|
||||
> Esta tarea deberia incluir: informacion basica del producto (nombre, categoria), materiales de entrada (enlaces de imagenes), y resultados generados por IA (titulo, texto, imagen de poster).
|
||||
> Por favor dame directamente un ejemplo JSON."
|
||||
|
||||
La IA automaticamente concebira campos como `productName`, `generatedContent` basandose en tu descripcion.
|
||||
|
||||
### 2.2 Deja que la IA produzca en lote datos "realistas"
|
||||
|
||||
Con la estructura de datos lista, el siguiente paso es hacer que la IA te ayude a "rellenar los huecos" y generar un conjunto de datos que parezcan reales.
|
||||
|
||||
**Tecnicas de prompt:**
|
||||
No puedes simplemente decirle a la IA "generame datos"; necesitas, como si le asignaras una tarea a un pasante, decirle el **contexto de negocio** y los **requisitos de contenido**:
|
||||
|
||||
- **Contexto de negocio**: dile a la IA que hacemos "e-commerce para TikTok", asi que los titulos de productos deben ser llamativos (por ejemplo "el arma secreta para verse mas delgado/a", "imprescindible para estudiantes"), y los textos deben ser coloquiales.
|
||||
- **Requisitos de imagen**: para que el prototipo se vea bien, las imagenes no deben ser marcadores de posicion en blanco y negro; es mejor usar imagenes aleatorias coloridas de paisajes u objetos reales.
|
||||
|
||||
> **Ejemplo de prompt:**
|
||||
> "Basandote en la estructura disenada anteriormente, generame 10 datos de simulacion realistas.
|
||||
> (Nota: no necesariamente en formato JSON. Si estas escribiendo frontend, puedes hacer que genere directamente un array JavaScript; si usas Python, puedes hacer que genere una List.)
|
||||
>
|
||||
> **Requisitos del escenario de negocio**:
|
||||
>
|
||||
> 1. Supongamos que esta es una tienda departamental general, con productos en las categorias de 'moda femenina', 'tecnologia' y 'cosmetica'.
|
||||
> 2. **Los titulos y textos generados deben ser muy 'estilo TikTok'**: por ejemplo, los titulos deben incluir emojis (, ), y los textos deben usar un tono como 'increible', 'probado y comprobado'.
|
||||
> 3. **Campo de imagen**: usa uniformemente el formato `https://picsum.photos/seed/{random_id}/300/400`, asegurando que cada imagen sea diferente."
|
||||
|
||||
**Ejemplo de Mock Data generado:**
|
||||
|
||||
```javascript
|
||||
export const mockProductTasks = [
|
||||
{
|
||||
id: 'task_001',
|
||||
name: 'Vestido retro floral frances de verano',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Moda femenina',
|
||||
features: ['cintura ajustada', 'efecto adelgazante', 'elegante'],
|
||||
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: ' Quien se lo ponga se vera genial! Este vestido floral frances es realmente increible ',
|
||||
generatedCopy:
|
||||
' Chicas! Este vestido realmente estiliza muchisimo! El diseno de cintura ajustada es increible, te da forma al instante. La tela es muy transpirable, no sofoca en verano. Primera opcion para citas y paseos!',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-20T10:00:00Z'
|
||||
},
|
||||
{
|
||||
id: 'task_002',
|
||||
name: 'Auriculares Bluetooth Pro con cancelacion de ruido superpotente',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Tecnologia',
|
||||
features: ['cancelacion de ruido', 'bateria extralarga', 'baja latencia'],
|
||||
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: ' Finalmente los encontre! La cancelacion de ruido de estos auriculares es brutal! ',
|
||||
generatedCopy:
|
||||
'Ponetelos y el mundo se silencia al instante. Calidad de sonido increible, escuchar musica es como estar en vivo. La bateria tambien es impresionante, una carga dura una semana! Imprescindible para estudiantes!',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-21T14:30:00Z'
|
||||
}
|
||||
// ... mas datos
|
||||
]
|
||||
```
|
||||
|
||||
### 2.3 (Avanzado) Usar LocalStorage para implementar "falsas operaciones CRUD"
|
||||
|
||||
Si deseas que los "datos de simulacion" generados no solo se puedan ver, sino que tambien se puedan eliminar y modificar, e incluso que las tareas recien generadas persistan despues de actualizar la pagina, puedes combinarlo con `LocalStorage`.
|
||||
|
||||
> **Ejemplo de prompt:**
|
||||
> "Por favor ayudame a implementar una funcion de almacenamiento de datos.
|
||||
>
|
||||
> 1. Lee primero los datos desde `localStorage`.
|
||||
> 2. Si `localStorage` esta vacio, inicializa con los datos Mock generados anteriormente y guardalos en `localStorage`.
|
||||
> 3. Al mismo tiempo ayudame a escribir las funciones `addProductTask` y `deleteProductTask`, que deben sincronizar los cambios con `localStorage` en cada operacion."
|
||||
|
||||
Con este paso, tu prototipo tendra "memoria", y la experiencia del usuario sera practicamente identica a la de un producto real.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
|
||||
{ title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
|
||||
{ title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
|
||||
{ title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Recopilar retroalimentacion e iterar rapidamente
|
||||
|
||||
No se pueden hacer buenos productos a puerta cerrada. Ahora tu prototipo ya tiene "funcionalidad central" + "flujo completo" + "datos de demostracion"; es hora de mostrarselo a otros.
|
||||
|
||||
### 3.1 Con quien probar? Como probar?
|
||||
|
||||
- **Busca amigos/colegas**: no necesitan entender de tecnologia, solo necesitan intentar usarlo.
|
||||
- **Observa en lugar de guiar**: no digas "haz clic aqui", sino mira adonde hacen clic ellos. Si no encuentran un boton, es que el diseno tiene un problema.
|
||||
- **Metodo "Wizard of Oz"**: si tu IA aun no esta bien conectada, puedes modificar manualmente los datos en segundo plano (o en la base de datos) para simular la respuesta de la IA, verificando primero si el usuario realmente necesita esta funcionalidad.
|
||||
|
||||
### 3.2 Ante bugs y criticas
|
||||
|
||||
- **Estilos desordenados**: pueden desordenarse en diferentes tamanos de pantalla.
|
||||
- **Accion**: haz una captura de pantalla y enviala al AI IDE -> "En este ancho de pantalla esta desordenado, ayudame a arreglarlo."
|
||||
- **Operacion incomoda**: "Este flujo es demasiado complicado".
|
||||
- **Accion**: dile la sugerencia al AI IDE -> "El usuario cree que subir primero y luego generar es muy lento, se puede cambiar a generacion con un solo clic?"
|
||||
- **Nuevas necesidades**: "Si tuviera esta funcionalidad seria genial".
|
||||
- **Accion**: evalua si es esencial; si lo es, haz que la IA implemente rapidamente una version simplificada.
|
||||
|
||||
**Recuerda: en esta etapa, la IA es tu mejor asistente de modificaciones. Tu solo necesitas encargarte de descubrir los problemas; las modificaciones de codigo dejaselas a ella.**
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
|
||||
{ title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
|
||||
{ title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
|
||||
{ title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 4. Proyecto final de la etapa: completa tu "proyecto de graduacion"
|
||||
|
||||
Felicidades! Has completado todo el proceso desde los "requisitos" hasta el "prototipo" y despues la "integracion de IA". Ahora es el momento de mostrar tu resultado final.
|
||||
|
||||
**Este proyecto final no se limita al "espacio de trabajo de materiales de e-commerce".** Necesitas combinar tus propios intereses o experiencia profesional para crear un prototipo de producto IA unico.
|
||||
|
||||
### Seleccion de tema y requisitos
|
||||
|
||||
Necesitas elegir el escenario mas cercano de la **[referencia de escenarios por categoria de industria](../appendix-industry-scenarios/index.md)**, o concebir un escenario completamente nuevo basandote en tus propias ideas.
|
||||
|
||||
**El proyecto debe utilizar de manera integral todo lo aprendido en las lecciones anteriores:**
|
||||
|
||||
1. **Construccion del prototipo**: usa tecnologia frontend para construir una interfaz bonita y facil de usar.
|
||||
2. **Control de requisitos**: no busques algo exhaustivo, pero si que la funcionalidad central forme un ciclo logico cerrado.
|
||||
3. **Integracion de API**: integra modelos de IA reales (LLM/VLM, etc.), dotando a la aplicacion de verdadera inteligencia.
|
||||
4. **Implementar una aplicacion funcional**: no solo paginas estaticas, sino una aplicacion dinamica con flujo de datos y retroalimentacion interactiva.
|
||||
|
||||
### Entregables
|
||||
|
||||
Al final necesitas entregar los dos siguientes elementos:
|
||||
|
||||
1. **Una aplicacion de prototipo completa**: desplegada en linea o ejecutable localmente, con un flujo de uso completo.
|
||||
2. **Un video de demostracion de 30 segundos**: graba un video presentando brevemente el escenario de tu aplicacion y demostrando la operacion real de la funcionalidad central.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Lista de verificacion del desafio final</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Esta es la ultima batalla del Stage 1. Por favor revisa tu proyecto segun la siguiente lista:
|
||||
</p>
|
||||
|
||||
<div style="font-weight: bold; margin-bottom: 10px;">Autoverificacion de funcionalidad central</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Escenario claro</strong>: has seleccionado una industria o escenario de aplicacion concreto</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Ciclo logico cerrado</strong>: el flujo central funciona, no solo el Happy Path</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Impulsado por IA</strong>: se ha llamado realmente a la API de un modelo grande, no respuestas predefinidas</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Experiencia completa</strong>: incluye Loading, manejo de errores y datos de simulacion</label></li>
|
||||
</ul>
|
||||
|
||||
<div style="font-weight: bold; margin: 20px 0 10px;">Preparacion de entregables</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Aplicacion de prototipo</strong>: el codigo esta completo y puede ejecutarse</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Video de demostracion</strong>: unos 30 segundos, mostrando claramente los puntos destacados centrales</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Proximo paso
|
||||
|
||||
Despues de completar el proyecto final, ya tienes la capacidad de "desarrollar independientemente un prototipo de aplicacion IA".
|
||||
En el siguiente Stage 2, profundizaremos en el desarrollo fullstack mas complejo, aprendiendo como convertir este prototipo en una aplicacion de nivel comercial que realmente pueda ponerse en linea, con base de datos y sistema de usuarios.
|
||||
|
||||
Nos vemos en la siguiente etapa!
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Sigue avanzando"
|
||||
description="Felicidades por completar el Stage 1. Estos capitulos pueden ayudarte a entrar en el desarrollo de ingenieria."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
title: 'Encontrar buenas ideas - De las necesidades de los usuarios a quienes estan dispuestos a pagar'
|
||||
description: 'Aprende a descubrir oportunidades a partir de dolores cotidianos, evaluar si alguien pagara y convertir una idea en un concepto de producto ejecutable.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Aprox. <strong>3 horas</strong>'
|
||||
</script>
|
||||
|
||||
# Principiante 2: Encontrar buenas ideas
|
||||
|
||||
## Introduccion del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Descubrimiento de necesidades', 'Pensamiento de producto', 'Analisis de usuarios', 'Modelo de negocio']" coreOutput="3 conceptos de producto validados" expectedOutput="Una direccion de emprendimiento/producto ejecutable">
|
||||
|
||||
Ya aprendiste a construir con un AI IDE, pero la pregunta mas importante es: <strong>que construir?</strong>
|
||||
|
||||
Mucha gente empieza con "hagamos una herramienta de IA" o "montemos una plataforma social" y termina con algo que nadie usa. El motivo mas comun es simple: <strong>no habia una necesidad real</strong>.
|
||||
|
||||
Incluso si el producto resuelve algo, todavia queda la parte dificil: <strong>que el usuario pague</strong>.
|
||||
|
||||
En este capitulo, a traves de un caso y un conjunto de marcos practicos, aprenderas un metodo para encontrar ideas y convertirlas en conceptos validables.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Step 1', description: 'Definir criterios' },
|
||||
{ title: 'Step 2', description: 'Encontrar dolores cotidianos' },
|
||||
{ title: 'Step 3', description: 'Segmentar audiencias' },
|
||||
{ title: 'Step 4', description: 'Profundizar escenarios' },
|
||||
{ title: 'Step 5', description: 'Validar si es real' },
|
||||
{ title: 'Step 6', description: 'Pulir el concepto' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Step 1: Definir criterios (cuando paga la gente?)
|
||||
|
||||
Un error tipico es evaluar ideas por "me gusta" o "suena bien". Lo que buscamos es <strong>voluntad de pago</strong>.
|
||||
|
||||
Usa este checklist:
|
||||
|
||||
1. Dolor fuerte: frecuente, caro, riesgoso o estresante.
|
||||
2. Usuario claro: puedes describir quien es en una frase.
|
||||
3. Escenario concreto: cuando y donde ocurre el problema.
|
||||
4. Alternativas malas: hoy se resuelve con friccion o con soluciones incompletas.
|
||||
5. Beneficio medible: ahorra tiempo/dinero, reduce riesgo o aumenta ingresos.
|
||||
|
||||
::: warning Importante
|
||||
No preguntes "Usarias esto?" Esa pregunta produce falsos positivos.
|
||||
Pregunta por comportamiento real: "Como lo resuelves hoy?", "Cuantas veces te paso esta semana?", "Cuanto te costo en tiempo o dinero?"
|
||||
:::
|
||||
|
||||
## Step 2: Encontrar dolores cotidianos
|
||||
|
||||
Las mejores ideas vienen de problemas repetidos.
|
||||
|
||||
Fuentes practicas:
|
||||
|
||||
- Tu trabajo: reportes, coordinacion, aprobaciones, QA, despliegues.
|
||||
- Tu vida: salud, finanzas, estudio, viajes, familia.
|
||||
- Nichos: industria con regulacion, facturacion, soporte, operaciones.
|
||||
|
||||
Ejercicio rapido:
|
||||
|
||||
1. Escribe 20 molestias reales que hayas visto en el ultimo mes.
|
||||
2. Elige 5 que ocurran semanalmente.
|
||||
3. Para cada una, anota quien lo sufre y que alternativa usa hoy.
|
||||
|
||||
## Step 3: Segmentar audiencias (horizontal)
|
||||
|
||||
Un mismo problema tiene distinta voluntad de pago segun la persona.
|
||||
|
||||
Ejemplo: "organizar archivos" no paga casi nadie; pero "organizar documentos para auditoria" lo paga una empresa.
|
||||
|
||||
Hazlo asi:
|
||||
|
||||
1. Lista 3-5 grupos posibles de usuarios.
|
||||
2. Para cada grupo, define: objetivo, contexto, restricciones, presupuesto.
|
||||
3. Elige 1 grupo donde el dolor sea mas caro o mas urgente.
|
||||
|
||||
## Step 4: Profundizar escenarios (vertical)
|
||||
|
||||
No disenes "una app". Disena <strong>un flujo</strong> que resuelva un escenario completo.
|
||||
|
||||
Plantilla:
|
||||
|
||||
- Disparador: que pasa para que el usuario necesite la solucion?
|
||||
- Pasos actuales: que hace hoy (y que le molesta)?
|
||||
- Momento de valor: en que minuto entiende que le ahorraste algo?
|
||||
- Resultado: que cambia al final?
|
||||
|
||||
## Step 5: Validar si es real (antes de construir)
|
||||
|
||||
Objetivo: validar 2 cosas.
|
||||
|
||||
1. Existe el problema (frecuencia e impacto).
|
||||
2. Existe voluntad de pago o al menos una accion fuerte (dejar email, reservar, prepagar).
|
||||
|
||||
Metodos de bajo costo:
|
||||
|
||||
- 10 entrevistas con usuarios objetivo (30 min cada una).
|
||||
- Landing simple con propuesta de valor y CTA (lista de espera / reserva).
|
||||
- Demo clickable o prototipo y medir conversion.
|
||||
- Pre-venta o deposito (la validacion mas honesta).
|
||||
|
||||
## Step 6: Pulir el concepto con IA
|
||||
|
||||
Aqui la IA ayuda a convertir una intuicion en un concepto ejecutable.
|
||||
|
||||
Prompt para copiar:
|
||||
|
||||
```text
|
||||
Actua como consultor de producto. Quiero refinar una idea.
|
||||
1) Usuario objetivo:
|
||||
2) Dolor principal:
|
||||
3) Escenario concreto (cuando/donde):
|
||||
4) Solucion actual y por que es mala:
|
||||
5) Propuesta de valor en una frase:
|
||||
6) MVP en 7 dias:
|
||||
7) Riesgos/objeciones:
|
||||
8) Plan de validacion y metricas:
|
||||
Devuelveme: (a) concepto pulido, (b) alcance del MVP, (c) plan de validacion en 7 dias.
|
||||
```
|
||||
|
||||
## Salida esperada: 3 conceptos de producto
|
||||
|
||||
Al final, deberias tener 3 conceptos, cada uno con:
|
||||
|
||||
- Usuario objetivo claro
|
||||
- Problema concreto
|
||||
- Propuesta de valor en una frase
|
||||
- MVP (1-2 semanas)
|
||||
- Experimento de validacion y metricas
|
||||
|
||||
<RelatedArticlesSection />
|
||||
|
||||
@@ -0,0 +1,808 @@
|
||||
---
|
||||
title: 'Anadiendo capacidades de IA al prototipo - Integracion de APIs de texto e imagen'
|
||||
description: 'Integra capacidades reales de IA en tu prototipo web: comprende los conceptos centrales de API, aprende a encontrar API Keys y ejemplos oficiales.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'aprox. <strong>1 dia</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['zh-cn/stage-1/integrating-ai-capabilities'] ?? []
|
||||
</script>
|
||||
|
||||
# Nivel inicial 4: Incorporar capacidades de IA al prototipo
|
||||
|
||||
## Introduccion del capitulo
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['API', 'Modelo de texto', 'Generacion de imagenes', 'Integracion de prototipo']" coreOutput="Conectar el prototipo con 1 modelo de texto + 1 modelo de imagen opcional" expectedOutput="Un prototipo de IA que puede llamar APIs reales">
|
||||
|
||||
En los capitulos anteriores completamos el flujo completo desde <strong>encontrar una buena idea</strong> hasta <strong>crear un prototipo de producto</strong>. Pero por ahora el prototipo sigue siendo solo una "carcasa": al hacer clic en los botones no se genera contenido real y los datos de la pagina estan escritos de forma fija.
|
||||
|
||||
Recuerda lo que enfatizamos en el primer capitulo: <strong>queremos crear "productos por los que alguien estaria dispuesto a pagar", no "prototipos que solo parecen decentes".</strong> El valor real viene de que el producto pueda <strong>resolver problemas reales</strong>, y para lograrlo el prototipo debe <strong>funcionar de verdad</strong>.
|
||||
|
||||
Este capitulo hara que el prototipo <strong>"cobre vida"</strong>: conectaremos <strong>capacidades reales de IA</strong>, desde obtener una API Key hasta leer la documentacion oficial y pedir al AI IDE que integre la interfaz en el codigo. Usaremos el <strong>modelo de texto DeepSeek</strong> como ejemplo para aprender como hacer que una aplicacion <strong>llame de verdad a un modelo grande para generar contenido</strong>; si te interesa, tambien puedes hacer de forma opcional la <strong>integracion de generacion de imagenes</strong>.
|
||||
|
||||
Al terminar este capitulo, tu prototipo <strong>dejara de ser una demo estatica</strong> y se convertira en <strong>una aplicacion capaz de llamar capacidades reales de IA y resolver problemas reales</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Bases de API', description: 'Comprender conceptos clave y normas de seguridad' },
|
||||
{ title: 'Conectar texto', description: 'Practica de generacion de texto con DeepSeek' },
|
||||
{ title: 'Conectar imagenes', description: 'Comprension y generacion de imagenes con VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 1. Conceptos basicos de API
|
||||
|
||||
Como mencionamos antes, nuestro objetivo es "conectar capacidades de IA" para que el prototipo deje de ser una demo estatica y se convierta en una herramienta capaz de llamar servicios reales de IA. La clave para lograrlo es entender y usar APIs.
|
||||
|
||||
API es un concepto abstracto importante en informatica. Podemos entenderlo de forma simple asi: **envias una pregunta en el formato que la otra parte exige, y la otra parte devuelve un resultado en un formato acordado**.
|
||||
|
||||
- **Lo que envias**: normalmente incluye una "clave (API Key)" y "lo que quieres generar"
|
||||
- **Lo que recibes**: si todo sale bien, devuelve el resultado; si falla, indica la causa, por ejemplo "clave incorrecta", "saldo insuficiente" o "parametro mal escrito"
|
||||
|
||||
En concreto, necesitas dominar estos elementos centrales:
|
||||
|
||||
1. **API Key**: tu "pase de acceso" y tambien la "llave de tu cartera". Si otra persona la obtiene, puede llamar la API en tu nombre y generar costes.
|
||||
2. **Endpoint (ruta de interfaz)**: la ruta concreta de una solicitud API, que indica al servidor que funcion quieres usar. La direccion completa suele componerse de "URL base + endpoint". Por ejemplo:
|
||||
- Generacion de texto: URL base (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = URL completa `https://api.service.com/v1/chat/completions`
|
||||
- Generacion de imagenes: URL base (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = URL completa `https://api.service.com/v1/images/generations`
|
||||
3. **Llamada/solicitud**: el proceso de enviar una tarea a un servicio de IA y obtener el resultado.
|
||||
4. **Contenido de la solicitud**: el contenido concreto que envias a la IA, por ejemplo el tema del articulo que quieres que escriba o la descripcion de la imagen que quieres generar.
|
||||
5. **Resultado de respuesta**: lo que la IA devuelve tras procesar la solicitud, por ejemplo un articulo o una imagen generada.
|
||||
6. **Manejo de errores**: saber diagnosticar y resolver problemas como API Key incorrecta o demasiadas solicitudes.
|
||||
|
||||
::: info ℹ️ Que es una API
|
||||
Para una explicacion mas profunda de API, consulta el apendice: [Introduccion a API](/es-es/appendix/4-server-and-backend/api-intro).
|
||||
|
||||
::: warning 🔐 **Notas de seguridad sobre API**
|
||||
La API Key es tu "pase de acceso" para solicitar servicios de IA. Es una cadena secreta usada para autenticacion y facturacion.
|
||||
|
||||
Como la API Key esta directamente vinculada a tu cuenta y costes, presta especial atencion:
|
||||
|
||||
- Nunca la **compartas en chats grupales, subas capturas a internet** ni la publiques en foros abiertos.
|
||||
- **No la hardcodees en el codigo** ni la subas a un repositorio Git, especialmente si es publico.
|
||||
- Si sospechas que la clave se filtro, **reemplazala de inmediato**.
|
||||
|
||||
En los siguientes pasos **pegaremos directamente la API KEY en el AI IDE para practicar**. **No hagas esto en un proyecto formal.** Aqui lo hacemos solo porque es un ejercicio. Cuando tengas mas soltura, puedes pedir a la IA que genere un archivo de configuracion y poner la API KEY alli.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Bases de API', description: 'Comprender conceptos clave y normas de seguridad' },
|
||||
{ title: 'Conectar texto', description: 'Practica de generacion de texto con DeepSeek' },
|
||||
{ title: 'Conectar imagenes', description: 'Comprension y generacion de imagenes con VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 2. Conectar una API de generacion de texto: DeepSeek
|
||||
|
||||
Aunque API implica estos conceptos tecnicos, en la etapa de prototipado la operacion real puede ser muy simple y eficiente. La idea central es:
|
||||
|
||||
> **Encontrar el ejemplo oficial, obtener la API Key y pedir al AI IDE que la conecte al boton.**
|
||||
|
||||
Cuando entiendas estos conceptos, veras que conectar un modelo de texto o un modelo de imagen sigue esencialmente el mismo flujo: cuando el usuario hace clic en un boton, el frontend organiza la entrada y envia una solicitud; cuando la interfaz devuelve el resultado, lo muestra en la pagina. A continuacion lo comprobaremos con una practica real.
|
||||
|
||||
En `1.2 Crear un prototipo con tus manos`, ya construiste un prototipo interactivo. Ahora vamos a convertir las funciones que "parecen IA" en capacidades realmente utilizables: **cuando el usuario haga clic en un boton, el prototipo enviara una solicitud a un servicio externo de IA y mostrara el texto devuelto.**
|
||||
|
||||
::: info ℹ️ Ampliacion conceptual
|
||||
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos de lenguaje grandes (LLM)](/es-es/appendix/8-artificial-intelligence/llm-principles).
|
||||
::: details Saber mas: que es DeepSeek
|
||||
|
||||
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, que opera bajo la marca DeepSeek, es una **empresa china de inteligencia artificial dedicada al desarrollo de modelos de lenguaje grandes (LLMs)**. DeepSeek tiene sede en Hangzhou, Zhejiang, y pertenece al fondo cuantitativo chino High-Flyer, que tambien la financia. Fue fundada en julio de 2023 por Liang Wenfeng, cofundador de High-Flyer, quien tambien es CEO de ambas companias. En enero de 2025 lanzo su chatbot homonimo y el modelo DeepSeek-R1.
|
||||
|
||||
Veamos como se compara DeepSeek con otros modelos lideres en el benchmark GPQA. Cabe destacar que DeepSeek es un modelo open source, es decir, cualquiera puede descargarlo desde internet, mientras que otros modelos comunes como Grok, Google Gemini y ChatGPT son cerrados. Como se puede observar, DeepSeek ya se acerca bastante al primer grupo de modelos.
|
||||
|
||||
|
||||
|
||||
GPQA significa "Graduate-Level Google-Proof Q&A Benchmark". Es un benchmark de nivel posgrado para tareas de preguntas y respuestas cientificas. A continuacion va una explicacion mas detallada.
|
||||
|
||||
GPQA contiene 448 preguntas de opcion multiple que cubren subcampos de biologia, fisica y quimica, como mecanica cuantica, quimica organica y biologia molecular. Las preguntas fueron redactadas por 61 expertos con doctorado o en proceso de doctorado y pasaron por un proceso estricto de verificacion.
|
||||
:::
|
||||
|
||||
Con estos 3 pasos puedes integrar rapidamente una API de generacion con modelo grande:
|
||||
|
||||
1. **Crear una API Key en la plataforma de DeepSeek**
|
||||
2. **Encontrar el ejemplo de generacion de texto en la documentacion de DeepSeek** (normalmente hay codigo listo para copiar)
|
||||
3. **Abrir el AI IDE, pegar la API Key + el ejemplo oficial** y decirle a la IA que funcion debe implementar:
|
||||
> Ayudame a conectar esta API del modelo grande para soportar la tarea de generacion de copy en esta aplicacion
|
||||
|
||||
A continuacion haremos una demostracion. Puedes seguir el flujo completo paso a paso. Primero registra una cuenta en [DeepSeek](https://platform.deepseek.com/usage), crea una API Key y recarga una pequena cantidad para verificar la llamada.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Haz clic en "API KEYS" y busca "create new API key" en la parte inferior de la pantalla. Al final obtendras una API key parecida a `sk-8573341c39fc44315aadc071c53rh7d2`.
|
||||
|
||||
|
||||
|
||||
Una vez obtenida la clave, ya tienes permiso para llamar al modelo.
|
||||
|
||||
En este punto puedes leer directamente la documentacion de [API](https://api-docs.deepseek.com/), que normalmente ofrece ejemplos de llamada con curl o Python.
|
||||
|
||||
|
||||
|
||||
Despues de encontrar el ejemplo, puedes copiar el contenido de la documentacion y la clave en el cuadro de dialogo del AI IDE, y pedirle que integre el modelo grande en el prototipo que ya desarrollaste.
|
||||
|
||||
|
||||
|
||||
Puedes usar como referencia este prompt:
|
||||
|
||||
```
|
||||
Toma como referencia este metodo de llamada y ayudame a soportar una funcion de generacion de copy. Debe poder generar copy de ecommerce para Douyin/TikTok a partir de la informacion del producto al hacer clic, con varios estilos.
|
||||
|
||||
Material de referencia:
|
||||
api key：sk-8573341c39aefa1efe
|
||||
Referencia de solicitud API:
|
||||
curl \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
|
||||
-d '{
|
||||
"model": "deepseek-chat",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
Tras un rato de generacion de codigo por parte de la IA, normalmente obtendremos facilmente un boton de generacion de copy para probar. Si no encuentras la entrada, puedes pedir al AI IDE que te indique desde que pagina se accede; si aun asi no la encuentras, puedes pedirle que refactorice y mejore directamente segun tu idea hasta obtener el resultado final de generacion de copy.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Puede que aqui te preguntes: como se si realmente esta llamando al modelo grande y no solo usando respuestas fijas integradas? Puedes introducir un copy personalizado y pedir al modelo que genere el resultado segun el analisis personalizado que acabas de especificar.
|
||||
|
||||
Si ves que cada resultado es diferente y logicamente coherente, puedes considerar que la API ya se esta llamando correctamente. Tambien puedes revisar en la [plataforma de gestion de uso de API](https://platform.deepseek.com/usage) si la llamada fue exitosa, aunque puede tardar unos minutos en aparecer.
|
||||
|
||||
## Mas opciones de modelos de generacion de texto
|
||||
|
||||
Ademas de DeepSeek, tambien puedes probar otros modelos de lenguaje grandes. Como la mayoria ofrece **interfaces compatibles con OpenAI**, cambiar de modelo es muy sencillo: solo necesitas sustituir la API Key, la URL base y el nombre del modelo.
|
||||
|
||||
### Integracion de MiniMax
|
||||
|
||||
::: details Saber mas: que es MiniMax
|
||||
|
||||
**MiniMax** es una empresa china de inteligencia artificial dedicada a la investigacion y desarrollo de tecnologias de inteligencia artificial general. MiniMax lanzo su propia serie de modelos de lenguaje grandes MiniMax-M2.7, que ha mostrado buen rendimiento en varios benchmarks y ofrece una relacion coste-rendimiento muy alta.
|
||||
|
||||
**Principales caracteristicas de la serie MiniMax-M2.7:**
|
||||
|
||||
- **Contexto ultralargo**: soporta una ventana de contexto de 204,800 tokens, adecuada para documentos largos y conversaciones de multiples turnos.
|
||||
- **Alta relacion coste-rendimiento**: precio muy competitivo.
|
||||
- **Interfaz compatible con OpenAI**: se puede llamar directamente con el OpenAI SDK sin aprender un nuevo formato de API.
|
||||
- **Dos modelos disponibles**:
|
||||
- `MiniMax-M2.7`: modelo insignia, adecuado para tareas complejas.
|
||||
- `MiniMax-M2.7-highspeed`: version de alta velocidad, con rendimiento similar pero mas rapida.
|
||||
:::
|
||||
|
||||
La forma de integrarlo es igual que DeepSeek y solo requiere tres pasos:
|
||||
|
||||
1. Ir a la [plataforma abierta de MiniMax](https://platform.minimax.io/), registrar una cuenta y crear una API Key.
|
||||
2. Encontrar un ejemplo de llamada en la documentacion de MiniMax.
|
||||
3. Pegar la API Key + el ejemplo en el AI IDE.
|
||||
|
||||
Como MiniMax ofrece una interfaz compatible con OpenAI, puedes copiar directamente el siguiente ejemplo curl junto con tu API Key y enviarlo al AI IDE para integrarlo:
|
||||
|
||||
```bash
|
||||
curl https://api.minimax.io/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${MINIMAX_API_KEY}" \
|
||||
-d '{
|
||||
"model": "MiniMax-M2.7",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
::: tip ✅ Consejo
|
||||
El formato de API de MiniMax es casi identico al de DeepSeek, ya que ambos son compatibles con OpenAI. Si ya integraste DeepSeek correctamente, cambiar a MiniMax solo requiere modificar tres lugares:
|
||||
1. **URL base**: cambiarla a `https://api.minimax.io/v1`
|
||||
2. **API Key**: usar la API Key de MiniMax
|
||||
3. **Nombre del modelo**: cambiarlo a `MiniMax-M2.7` o `MiniMax-M2.7-highspeed`
|
||||
|
||||
Para mas informacion, consulta la [documentacion de la interfaz compatible con OpenAI de MiniMax](https://platform.minimax.io/docs/api-reference/text-openai-api).
|
||||
:::
|
||||
|
||||
# 3. Conectar una API de imagen a texto: Qwen3 VL
|
||||
|
||||
::: info ℹ️ Ampliacion conceptual
|
||||
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos vision-lenguaje (VLM)](/es-es/appendix/8-artificial-intelligence/multimodal-models).
|
||||
|
||||
::: details Saber mas: que es Qwen3 VL
|
||||
|
||||
**Qwen3 VL** es la version mas reciente de la serie de modelos multimodales vision-lenguaje lanzada por el equipo Tongyi Qianwen de Alibaba Cloud. VL significa "Vision-Language", es decir, modelo vision-lenguaje. Puede entender el contenido de una imagen, generar descripciones textuales a partir de imagenes, responder preguntas sobre imagenes y extraer informacion visual.
|
||||
|
||||
|
||||
|
||||
|
||||
**Las principales capacidades de Qwen3 VL incluyen:**
|
||||
|
||||
- **Comprension de imagenes**: identifica objetos, escenas, personas, texto y otros contenidos dentro de una imagen.
|
||||
- **Preguntas y respuestas visuales**: responde con precision preguntas del usuario sobre una imagen.
|
||||
- **Descripcion de imagenes**: genera descripciones textuales detalladas o concisas.
|
||||
- **Comprension de multiples imagenes**: permite procesar varias imagenes a la vez para compararlas.
|
||||
- **Extraccion de texto**: extrae texto de imagenes mediante capacidades OCR.
|
||||
|
||||
**Por que elegir Qwen3 VL?**
|
||||
|
||||
Comparado con la generacion anterior, Qwen3 VL mejora de forma notable la precision de comprension de imagenes y soporta tareas de analisis visual mas largas y complejas. Tiene buen rendimiento en comprension de chino, costes de API relativamente bajos y una buena relacion coste-rendimiento. Ademas, su ventana de contexto es mayor y puede manejar tareas de razonamiento visual mas complejas.
|
||||
|
||||
**Escenarios de uso tipicos:**
|
||||
|
||||
- Ecommerce: generar automaticamente titulos, descripciones y puntos de venta a partir de imagenes de producto.
|
||||
- Creacion de contenido: generar copy o sugerencias visuales a partir de imagenes de material.
|
||||
- Oficina: extraer contenido de imagenes y reconocer informes automaticamente.
|
||||
- Educacion: analizar automaticamente preguntas en imagenes y extraer puntos de conocimiento.
|
||||
|
||||
:::
|
||||
|
||||
En la seccion anterior explicamos como conectar una API de generacion de texto. Pero en nuestros escenarios anteriores aparece un problema: subimos una imagen, y si usamos solo un modelo de lenguaje, no puede entender bien el contenido visual, por lo que el resultado generado puede desviarse bastante.
|
||||
|
||||
Queremos un modelo que nos ayude a convertir una imagen en descripcion textual. Para eso necesitamos un modelo vision-lenguaje (VLM). En este caso, usaremos un VLM para generar descripciones de puntos de venta del producto y mejorar la experiencia de usuario.
|
||||
|
||||
Para simplificar, usaremos la API ofrecida por la [plataforma cloud SiliconFlow](https://cloud.siliconflow.cn/me) para conectar una API de imagen a texto.
|
||||
|
||||
::: details Saber mas: que es SiliconFlow
|
||||
**SiliconFlow** es una conocida plataforma china de agregacion de modelos de IA que ofrece servicios API para multiples modelos de lenguaje grandes y modelos vision-lenguaje populares.
|
||||
|
||||
**Caracteristicas de la plataforma:**
|
||||
|
||||
- **Soporte multimodelo**: integra multiples modelos de IA populares, incluidos modelos open source como DeepSeek, Qwen y la serie Llama.
|
||||
- **Optimizacion tecnica**: optimiza la inferencia de modelos open source y ofrece servicios API de baja latencia y alta concurrencia.
|
||||
- **Compatibilidad de interfaz**: ofrece APIs compatibles con el formato OpenAI, facilitando la integracion en aplicaciones existentes.
|
||||
- **Pago bajo demanda**: permite facturacion por volumen de llamadas.
|
||||
|
||||
SiliconFlow esta relativamente maduro en servicios de inferencia para modelos open source y es una opcion comun para usar modelos chinos open source de IA.
|
||||
:::
|
||||
|
||||
Al entrar en la pagina principal de SiliconFlow, veras muchos modelos disponibles. Busca el filtro en la esquina superior izquierda, abrelo y selecciona la etiqueta de vision. Alli veras muchos modelos de imagen a texto, por ejemplo GLM-4.6V de Zhipu o Qwen3-VL.
|
||||
|
||||
|
||||
|
||||
Puedes elegir cualquiera para probar. Aqui usaremos `Qwen/Qwen3-VL-8B-Instruct` como ejemplo.
|
||||
|
||||
|
||||
|
||||
Entra en la [plataforma SiliconFlow](https://cloud.siliconflow.cn/me/account/ak), haz clic en "Crear nueva API Key" dentro de la seccion de claves API y crea una nueva API Key.
|
||||
|
||||
Puedes usar directamente el siguiente codigo como referencia y enviarlo junto con la API Key generada al AI IDE para integrar la funcion.
|
||||
|
||||
::: details Codigo de referencia de imagen a texto
|
||||
|
||||
```python
|
||||
from openai import OpenAI
|
||||
from typing import Dict, Any, List
|
||||
import base64
|
||||
import os
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
|
||||
MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
|
||||
|
||||
def encode_image(image_path: str) -> str:
|
||||
with open(image_path, "rb") as image_file:
|
||||
return base64.b64encode(image_file.read()).decode('utf-8')
|
||||
|
||||
def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL_NAME,
|
||||
messages=messages,
|
||||
max_tokens=512,
|
||||
temperature=0.7,
|
||||
top_p=0.7,
|
||||
frequency_penalty=0.5,
|
||||
stream=False,
|
||||
n=1
|
||||
)
|
||||
return response.choices[0].message.content
|
||||
|
||||
def caption_image(image_path: str) -> str:
|
||||
base64_image = encode_image(image_path)
|
||||
messages = [
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Please describe this image in detail."
|
||||
},
|
||||
{
|
||||
"type": "image_url",
|
||||
"image_url": {
|
||||
"url": f"data:image/jpeg;base64,{base64_image}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
client = OpenAI(
|
||||
api_key=SILICONFLOW_API_KEY,
|
||||
base_url=SILICONFLOW_BASE_URL
|
||||
)
|
||||
|
||||
return get_vlm_completion(client, messages)
|
||||
|
||||
image_path = "images.jpg"
|
||||
caption = caption_image(image_path)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
En este escenario, probamos directamente pedir al AI IDE que implemente una funcion para generar automaticamente texto de puntos de venta ecommerce y palabras clave a partir de una imagen subida, como se muestra a continuacion:
|
||||
|
||||
```
|
||||
Basandote en la siguiente API de imagen a texto, ayudanos a implementar una funcion que genere automaticamente texto de puntos de venta ecommerce y palabras clave a partir de imagenes subidas.
|
||||
|
||||
<Codigo omitido aqui; debes pegar por tu cuenta la clave y el codigo de referencia>
|
||||
```
|
||||
|
||||
Finalmente se obtiene el resultado generado:
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Bases de API', description: 'Comprender conceptos clave y normas de seguridad' },
|
||||
{ title: 'Conectar texto', description: 'Practica de generacion de texto con DeepSeek' },
|
||||
{ title: 'Conectar imagenes', description: 'Comprension y generacion de imagenes con VLM' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 4. Conectar una API de generacion de imagenes: Seedream
|
||||
|
||||
En las secciones anteriores trabajamos principalmente con tareas relacionadas con texto. Ahora intentaremos conectar capacidades de generacion de imagenes, para soportar generar imagenes desde descripciones de texto o modificar imagenes existentes.
|
||||
|
||||
::: info ℹ️ Ampliacion conceptual
|
||||
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a la generacion de imagenes](/es-es/appendix/8-artificial-intelligence/image-generation).
|
||||
|
||||
::: details Saber mas: que es [Seedream](https://seed.bytedance.com/en/seedream4_5)
|
||||
|
||||
|
||||
|
||||
> Tal vez ya conozcas Nano Banana, desarrollado por Google, pero no conviene pasar por alto Seedream. Seedream 4.5 es una nueva generacion de modelo de creacion de imagenes desarrollada por ByteDance. Integra generacion y edicion de imagenes en una arquitectura unificada, lo que le permite manejar de forma flexible tareas multimodales complejas, como generacion basada en conocimiento, razonamiento complejo y consistencia con referencias. Ademas, su velocidad de inferencia es mucho mayor que la generacion anterior y puede generar imagenes HD impresionantes con resolucion de hasta 4K.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
**Capacidades principales:**
|
||||
|
||||
- **Texto a imagen**: genera imagenes a partir de descripciones textuales y soporta varios estilos, como realista, cartoon, tinta china o cyberpunk.
|
||||
- **Transferencia de estilo**: convierte una imagen a un estilo artistico especificado.
|
||||
- **Variantes de imagen**: genera nuevas imagenes de estilo similar basadas en una referencia.
|
||||
- **Mejora de resolucion**: aumenta claridad y detalles.
|
||||
- **Edicion de imagenes**: edita y modifica imagenes existentes mediante instrucciones en lenguaje natural.
|
||||
|
||||
**Por que elegir Seedream?**
|
||||
|
||||
- **Red estable en China**: acceso rapido y baja latencia dentro de China.
|
||||
- **Buenos resultados**: rendimiento estable y fiable en ecommerce y escenarios de material visual.
|
||||
- **Optimizacion para chino**: comprende mejor prompts en chino, adecuado para usuarios locales.
|
||||
- **Rapidez**: alta eficiencia de generacion y tiempos de respuesta cortos.
|
||||
- **Calidad estable**: genera imagenes HD de hasta 4K.
|
||||
|
||||
**Escenarios de uso tipicos:**
|
||||
|
||||
- Ecommerce: generar imagen principal, imagenes para pagina de detalle y posters promocionales.
|
||||
- Redes sociales: generar avatar, stickers e imagenes de apoyo.
|
||||
- Diseno: producir rapidamente conceptos, materiales y fondos.
|
||||
- Marketing: crear anuncios, banners de campana y posters festivos.
|
||||
|
||||
**Combinacion con Qwen3 VL:**
|
||||
|
||||
Estas dos APIs pueden encadenarse: primero usar Qwen3 VL para analizar una imagen de referencia y entender su contenido; luego usar Seedream para generar una nueva imagen basandose en el prompt derivado del analisis.
|
||||
:::
|
||||
|
||||
Muchos "posters de IA / imagenes principales de IA / personajes de IA" que ves en Douyin, Bilibili o YouTube usan esencialmente las tecnologias explicadas en esta seccion. Lo que necesitas hacer es sencillo: convertir la entrada del usuario en una frase, solicitar la API de imagenes y mostrar la imagen devuelta. El modelo usado aqui se llama modelo de generacion/edicion de imagenes.
|
||||
|
||||
Mostraremos paso a paso como integrar la API de Seedream en tu proyecto, con ayuda del AI IDE.
|
||||
|
||||
Tras [visitar la pagina inicial](https://www.volcengine.com/experience/ark?launch=seedream), haz clic en iniciar sesion.
|
||||
|
||||
|
||||
|
||||
Despues de iniciar sesion, busca la opcion de recarga en la esquina superior derecha.
|
||||
|
||||
|
||||
|
||||
Para recargar se requiere verificacion de identidad real.
|
||||
|
||||
|
||||
|
||||
Tras completar la verificacion, puedes [recargar 1 yuan para pruebas](https://console.volcengine.com/finance/fund/recharge).
|
||||
|
||||
Vuelve a la [pantalla inicial](https://www.volcengine.com/experience/ark?launch=seedream) y haz clic en acceso API.
|
||||
|
||||
|
||||
|
||||
Primero crea una API key y luego haz clic en la opcion de seleccion.
|
||||
|
||||
|
||||
|
||||
Esto te llevara al paso 2. Alli debes confirmar que el servicio llamado es Seedream 4.5 y copiar el ejemplo de llamada proporcionado. La captura es antigua, por eso la version del modelo aun aparece como 4.0.
|
||||
|
||||
|
||||
|
||||
Despues de preparar la API Key y el ejemplo de llamada, puedes pegarlos directamente en el AI IDE para que genere una demo de interaccion frontend o integre la capacidad en el prototipo existente. Observa que en la pagina puedes elegir entre texto a imagen o generar una sola imagen a partir de varias imagenes; debes seleccionar el codigo de referencia segun tu necesidad actual.
|
||||
|
||||
::: warning ⚠️ Nota importante
|
||||
El ejemplo por defecto aqui es relativamente complejo. Recuerda desactivar **"agregar marca de agua"** y **"respuesta en streaming"** para evitar marcas de agua y posibles fallos de solicitud.
|
||||
:::
|
||||
|
||||
Como luego usaremos el modo de generacion con imagenes de referencia, primero entramos en la funcion de generar una sola imagen a partir de varias imagenes. El codigo de referencia copiado es:
|
||||
|
||||
```
|
||||
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer xxxxxxx" \
|
||||
-d '{
|
||||
"model": "doubao-seedream-4-5-251128",
|
||||
"prompt": "Sustituye la ropa de la imagen 1 por la ropa de la imagen 2",
|
||||
"image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
|
||||
"sequential_image_generation": "disabled",
|
||||
"response_format": "url",
|
||||
"size": "2K",
|
||||
"stream": false,
|
||||
"watermark": true
|
||||
}'
|
||||
```
|
||||
|
||||
Con el codigo de referencia de imagenes, pedimos al AI IDE que soporte funciones de imagen comunes en ecommerce:
|
||||
|
||||
```
|
||||
Basandote en la siguiente API, ayudame a implementar en este proyecto funciones comunes de ecommerce, por ejemplo generacion de posters o generacion de imagen principal para ecommerce en Douyin/TikTok.
|
||||
|
||||
<Pega aqui la API KEY y el codigo de edicion de imagenes>
|
||||
```
|
||||
|
||||
El resultado implementado queda asi:
|
||||
|
||||
|
||||
|
||||
Vale la pena notar que la generacion de imagenes suele encontrarse con problemas raros. Te recomendamos pedir al AI IDE que muestre el mensaje de error completo para poder copiarlo y corregirlo; de lo contrario, puede repetir "generacion fallida" sin decir por que. Por ejemplo, puedes decir:
|
||||
|
||||
```
|
||||
No muestres solo "fallo la generacion de imagen". Muestra siempre la razon completa del fallo, por ejemplo imagenes no compatibles, error de solicitud, timeout, etc.
|
||||
```
|
||||
|
||||
A veces los cambios no se aplican en la pagina despues de actualizar. Si ves que la pagina sigue mostrando errores una y otra vez tras modificarla, tambien puedes probar a decir directamente al AI IDE: reinicia este proyecto.
|
||||
|
||||
En ecommerce, tal vez queramos que la ropa subida por el usuario se pruebe automaticamente sobre una persona, o generar automaticamente imagenes de venta y posters atractivos para un producto. Aqui probamos un prompt que le pide generar un poster ecommerce:
|
||||
|
||||
|
||||
|
||||
Puedes usar APIs de texto a imagen o imagen a imagen para implementar distintas funciones segun el escenario de negocio que imagines.
|
||||
|
||||
## Mas opciones de servicios de imagen
|
||||
|
||||
A continuacion se ofrecen otras opciones. Te recomendamos primero hacer funcionar la generacion de imagenes con Qwen y luego sustituirla por los siguientes servicios segun resultado y coste, de acuerdo con tu experiencia real.
|
||||
|
||||
### Integracion de Recraft
|
||||
|
||||
Si tu prototipo se orienta mas a "produccion de diseno", por ejemplo generar ilustraciones de estilo de marca, posters de marketing o materiales vectoriales, Recraft suele ser mas comodo. El modo de integracion es identico al de la seccion anterior: **obtener la Key + encontrar el ejemplo oficial + pedir al AI IDE que lleve el ejemplo a tu boton/pagina**.
|
||||
|
||||
::: details Saber mas: que es Recraft
|
||||
|
||||
> Recraft es una herramienta de IA para disenadores, ilustradores y profesionales de marketing. Fue fundada en Estados Unidos en 2022 y tiene sede en Londres. Ayuda a generar e iterar efectos visuales, como imagenes, arte vectorial y graficos 3D, con ventajas como salidas de alta calidad, posicionamiento preciso de elementos y diseno consistente con la marca. Cuenta con la confianza de mas de 3 millones de usuarios en 200 paises y regiones, incluidos Ogilvy y Netflix, y ya ha creado mas de 350 millones de imagenes. Su equipo busca convertirla en una herramienta imprescindible para disenadores, permitiendo que los creadores controlen sus flujos de trabajo asistidos por IA.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
Primero, todavia necesitamos encontrar la [entrada de API](https://www.recraft.ai/profile/api) para obtener una API Key.
|
||||
|
||||
Como aqui no hay cuota gratuita, necesitamos recargar 1,000 creditos. El sitio soporta Alipay y WeChat Pay, asi que es facil obtener esos creditos. Nota: no recargues mas de lo necesario.
|
||||
|
||||
|
||||
|
||||
Despues seguimos el mismo metodo: ir a la documentacion oficial y encontrar el ejemplo de solicitud correspondiente:
|
||||
|
||||
- <https://www.recraft.ai/docs/api-reference/getting-started>
|
||||
- <https://www.recraft.ai/docs/api-reference/usage>
|
||||
- <https://www.recraft.ai/docs/api-reference/guides>
|
||||
|
||||
:::
|
||||
|
||||
### Integracion de Qwen Image / Qwen Image Edit
|
||||
|
||||
Si quieres conectar un servicio de generacion de imagenes de una forma mas simple, puedes considerar Qwen Image. La idea no cambia: tratarlo como una "API de generacion de imagenes" y conectarlo al boton de tu prototipo.
|
||||
|
||||
::: details Saber mas: que son Qwen Image / Qwen Image Edit
|
||||
|
||||
**Qwen Image** es una serie de modelos de generacion de imagenes lanzada por el equipo Tongyi de Alibaba Cloud. Incluye principalmente dos modelos:
|
||||
|
||||
**1. Qwen Image: modelo de texto a imagen (Text-to-Image)**
|
||||
|
||||
Genera imagenes completamente nuevas a partir de descripciones textuales. Introduces un prompt, el modelo entiende tu intencion y genera una imagen acorde a la descripcion.
|
||||
|
||||
|
||||
|
||||
**Capacidades principales:**
|
||||
|
||||
- **Texto a imagen**: genera imagenes a partir de descripciones textuales y soporta varios estilos, como realista, cartoon, tinta china o cyberpunk.
|
||||
- **Transferencia de estilo**: convierte una imagen a un estilo artistico especificado.
|
||||
- **Variantes de imagen**: genera nuevas imagenes de estilo similar basadas en una referencia.
|
||||
- **Mejora de resolucion**: aumenta claridad y detalles.
|
||||
|
||||
**2. Qwen Image Edit: modelo de imagen a imagen (Image-to-Image)**
|
||||
|
||||
Edita y modifica imagenes existentes. Mediante instrucciones en lenguaje natural, el modelo entiende tu intencion de edicion y genera el resultado.
|
||||
|
||||
**Capacidades principales:**
|
||||
|
||||
- **Reemplazo local**: sustituye un objeto o una persona en la imagen, por ejemplo "cambia el fondo por la playa".
|
||||
- **Eliminacion de elementos**: elimina elementos no deseados de la imagen.
|
||||
- **Cambio de estilo**: anade filtros o efectos artisticos.
|
||||
- **Expansion de imagen**: extiende los bordes de una imagen y genera nuevo contenido.
|
||||
- **Retoque inteligente**: embellece automaticamente, ajusta luz y sombras y repara imperfecciones.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Por que elegir la serie Qwen Image?**
|
||||
|
||||
- **Optimizacion para chino**: comprende mejor prompts en chino, adecuado para usuarios locales.
|
||||
- **Bajo coste**: mas asequible que muchos competidores internacionales.
|
||||
- **Rapidez**: alta eficiencia de generacion y respuesta corta.
|
||||
- **Calidad estable**: rendimiento fiable en ecommerce y escenarios de material visual.
|
||||
- **Variedad de estilos**: soporta varios estilos artisticos y efectos creativos.
|
||||
|
||||
**Escenarios de uso tipicos:**
|
||||
|
||||
- Ecommerce: generar imagen principal, imagenes de detalle y posters promocionales.
|
||||
- Redes sociales: generar avatar, stickers e imagenes de apoyo.
|
||||
- Diseno: producir rapidamente conceptos, materiales y fondos.
|
||||
- Marketing: crear anuncios, banners de campana y posters festivos.
|
||||
:::
|
||||
|
||||
Consulta el sitio oficial de [SiliconFlow](https://siliconflow.cn/). En la parte izquierda hay una seccion "Playground", donde puedes probar distintos modelos sin hacer llamadas API. En la parte superior de la pagina hay un boton "Filters"; al hacer clic puedes filtrar la lista de modelos de la derecha.
|
||||
|
||||
Si eliges "Image", veras solo los modelos de texto a imagen soportados actualmente. En este caso usaremos Qwen/Qwen-Image.
|
||||
|
||||
|
||||
|
||||
Tras completar la configuracion, necesitamos consultar la documentacion correspondiente de API de generacion de imagenes. En la documentacion oficial puedes encontrar una seccion marcada como "API Reference". Haz clic alli, navega a la [seccion de API de generacion de imagenes](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) y busca el ejemplo de solicitud correspondiente.
|
||||
|
||||
Puedes enviar el siguiente ejemplo de solicitud junto con la API KEY al AI IDE para implementar la funcion de generacion de imagenes.
|
||||
|
||||
```bash
|
||||
curl --request POST \
|
||||
--url https://api.siliconflow.cn/v1/images/generations \
|
||||
--header 'Authorization: Bearer <token>' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data '
|
||||
{
|
||||
"model": "Qwen/Qwen-Image-Edit-2509",
|
||||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||||
}
|
||||
'
|
||||
```
|
||||
|
||||
El modelo aqui puede ser Qwen/Qwen-Image o Qwen/Qwen-Image-Edit-2509.
|
||||
|
||||
::: details Codigo de referencia para edicion de imagenes
|
||||
|
||||
Copia el siguiente codigo y la key, y envialos juntos al AI IDE:
|
||||
|
||||
```python
|
||||
import requests
|
||||
import os
|
||||
from typing import Dict, Any, Optional
|
||||
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
|
||||
QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
|
||||
|
||||
def generate_image_edit(
|
||||
prompt: str,
|
||||
image: Optional[str] = None,
|
||||
image2: Optional[str] = None,
|
||||
image3: Optional[str] = None,
|
||||
negative_prompt: Optional[str] = None,
|
||||
cfg: Optional[float] = 4.0,
|
||||
seed: Optional[int] = None
|
||||
) -> Optional[Dict[str, Any]]:
|
||||
payload: Dict[str, Any] = {
|
||||
"model": QWEN_IMAGE_EDIT_MODEL,
|
||||
"prompt": prompt,
|
||||
}
|
||||
if image:
|
||||
payload["image"] = image
|
||||
if image2:
|
||||
payload["image2"] = image2
|
||||
if image3:
|
||||
payload["image3"] = image3
|
||||
if negative_prompt:
|
||||
payload["negative_prompt"] = negative_prompt
|
||||
if cfg is not None:
|
||||
payload["cfg"] = cfg
|
||||
if seed is not None:
|
||||
payload["seed"] = seed
|
||||
|
||||
headers: Dict[str, str] = {
|
||||
"Authorization": f"Bearer {SILICONFLOW_API_KEY}",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
|
||||
response.raise_for_status()
|
||||
return response.json()
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error generating image: {e}")
|
||||
return None
|
||||
|
||||
def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
|
||||
try:
|
||||
response = requests.get(image_url)
|
||||
response.raise_for_status()
|
||||
os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
|
||||
with open(output_path, "wb") as f:
|
||||
f.write(response.content)
|
||||
print(f"Image saved successfully to: {output_path}")
|
||||
return True
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error downloading image: {e}")
|
||||
return False
|
||||
except Exception as e:
|
||||
print(f"Error saving image: {e}")
|
||||
return False
|
||||
|
||||
prompt: str = "Convierte el cielo en un atardecer, con luna y estrellas, estilo onirico"
|
||||
negative_prompt: str = "borroso, baja calidad, deformado"
|
||||
image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
|
||||
image2_url: Optional[str] = None
|
||||
image3_url: Optional[str] = None
|
||||
|
||||
cfg: float = 4.0
|
||||
seed: int = 12345
|
||||
output_path: str = "edited_image.png"
|
||||
|
||||
print(f"Generating edited image with prompt: {prompt}")
|
||||
print(f"Input image: {image_url}")
|
||||
print(f"CFG: {cfg}, Seed: {seed}")
|
||||
print("-" * 50)
|
||||
|
||||
result = generate_image_edit(
|
||||
prompt=prompt,
|
||||
image=image_url,
|
||||
image2=image2_url,
|
||||
image3=image3_url,
|
||||
negative_prompt=negative_prompt,
|
||||
cfg=cfg,
|
||||
seed=seed
|
||||
)
|
||||
|
||||
if result and "images" in result:
|
||||
images = result["images"]
|
||||
if images and len(images) > 0:
|
||||
image_url_result = images[0]["url"]
|
||||
print(f"Image edit generated successfully. URL: {image_url_result}")
|
||||
success = save_image_from_url(image_url_result, output_path)
|
||||
if success:
|
||||
print(f"Image saved to: {output_path}")
|
||||
else:
|
||||
print("Failed to save image to local file")
|
||||
else:
|
||||
print("No images found in response")
|
||||
else:
|
||||
print("Image generation failed")
|
||||
if result:
|
||||
print(f"Response: {result}")
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# Apendice: como encontrar modelos de IA "mas fuertes actualmente"
|
||||
|
||||
Los modelos de texto, tambien llamados con frecuencia "modelos de lenguaje grandes", evolucionan muy rapido. Siempre necesitamos asegurarnos de usar uno de los modelos con mejor rendimiento. Con los dos sitios siguientes puedes ver facilmente que modelos son mas usados y mejor valorados actualmente.
|
||||
|
||||
En general, estos sitios pueden entenderse como **"arenas de modelos"**: ponen juntas las salidas de dos modelos y votas por la que prefieres. Un modelo con mas votos suele significar que mas personas lo consideran "mas util".
|
||||
|
||||
Ademas, a veces puedes ver modelos anonimos misteriosos ("Unknown Model") en estas arenas. Normalmente significa que alguien ha incluido discretamente un "modelo interno de prueba" para evaluacion ciega, y tal vez tengas la oportunidad de experimentar capacidades mas fuertes antes de tiempo.
|
||||
|
||||
## LMArena
|
||||
|
||||
Sitio web: <https://lmarena.ai/>
|
||||
|
||||
LMArena es mas adecuado para juzgar "que respuesta de modelo prefiere la mayoria". Cuantos mas votos y mayor puntuacion, normalmente mas estable es en escenarios reales.
|
||||
|
||||
Una forma simple de usarlo:
|
||||
|
||||
1. Mira directamente el ranking (Leaderboard)
|
||||
2. Elige primero el area que necesitas, por ejemplo conversacion general, programacion o vision
|
||||
3. Dentro del Top 3, elige el que puedas usar: accesible, coste aceptable y latencia aceptable
|
||||
|
||||
|
||||
|
||||
## Artificial Analysis
|
||||
|
||||
Sitio web: <https://artificialanalysis.ai/>
|
||||
|
||||
Artificial Analysis es mas adecuado para comparar "calidad / precio / velocidad" en una misma tabla. Puedes tratarlo como una tabla de parametros para seleccionar modelos.
|
||||
|
||||
Uso habitual:
|
||||
|
||||
1. Encuentra la categoria de modelo que te interesa, por ejemplo texto o generacion de imagenes
|
||||
2. Revisa calidad (Quality) + precio (Price) + latencia/throughput (Latency/Throughput)
|
||||
3. Elige el modelo cuya relacion global coste-rendimiento encaje mejor con tu producto
|
||||
|
||||
::: tip ✅ Recomendacion
|
||||
No discutas "cual es mas fuerte" solo por intuicion. Un metodo mas fiable es probar 2 o 3 modelos con el mismo conjunto de entradas y luego decidir combinando ranking y precio.
|
||||
:::
|
||||
|
||||
## Resumen
|
||||
|
||||
Al integrar distintos servicios de IA, no hace falta imaginar las APIs como algo demasiado complejo. Si dominas los siguientes conceptos centrales, podras manejar la mayoria de escenarios:
|
||||
|
||||
**La esencia de una API es ser un puente de comunicacion**. Hace algo muy simple: envia tu solicitud y trae de vuelta la respuesta del modelo. No necesitas preocuparte por lo que ocurre detras; solo debes organizar correctamente el formato de la solicitud.
|
||||
|
||||
**Un SDK es una capa de encapsulacion sobre la API**. Si la API es una interfaz raw, el SDK es una caja de herramientas lista para usar: se encarga de detalles tediosos como firma de solicitudes, manejo de errores y validacion de parametros. En el desarrollo diario, priorizar SDK frente a llamadas API directas ahorra muchos problemas.
|
||||
|
||||
**Al leer documentacion, basta con fijarse en tres cosas**: direccion del servicio (endpoint), credencial de identidad (API key) y como rellenar los parametros de llamada. Si entiendes estas tres cosas, hacer funcionar la llamada es cuestion de tiempo.
|
||||
|
||||
El resto del trabajo lo completaran el IDE y las herramientas modernas de desarrollo. Concetrate en tu logica de negocio y deja las llamadas de bajo nivel a SDKs y toolchains maduros.
|
||||
|
||||
# 5. 📚 Tarea: integra tu primera capacidad de IA
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 Reto: integrar capacidades de IA en tu workspace</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Toma como referencia los prompts y contenidos de esta leccion y completa un ciclo cerrado:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Practica de ciclo completo</strong>
|
||||
<ul>
|
||||
<li>Elige e integra un servicio de IA (LLM / texto a imagen / imagen a imagen) → implementa interaccion frontend-backend → integralo en tu prototipo</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Compartir resultados</strong>
|
||||
<ul>
|
||||
<li>Captura la pagina de tu funcion y compartela con los demas</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Pregunta de reflexion</strong>
|
||||
<ul>
|
||||
<li>Reserva espacio mental para la siguiente seccion, "practica de proyecto completo": piensa de antemano como combinar estas capacidades de IA y que funcion interesante quieres crear.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Siguiente paso
|
||||
|
||||
En la siguiente seccion conectaremos estas capacidades de IA dispersas y las combinaremos con un escenario de negocio real para construir un producto completo:
|
||||
|
||||
- Conectar planificacion de contenido, publicacion de productos, analisis de datos y otros pasos en un flujo de negocio completo
|
||||
- Integrar las capacidades de IA aprendidas en esta leccion, como generacion de copy con LLM, texto a imagen y edicion de imagenes, en nodos reales del negocio
|
||||
- Implementar un "workspace de IA para ecommerce" realmente utilizable, no una demo aislada
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Articulos relacionados"
|
||||
description="Ruta recomendada para pasar de capacidades de IA puntuales a un flujo completo de producto."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,275 @@
|
||||
---
|
||||
title: 'De la idea al producto de IA - Ruta de aprendizaje de Easy-Vibe'
|
||||
description: 'Ruta de aprendizaje completa de programación con IA: de cero al desarrollo fullstack. Domina Vibe Coding, Claude Code, Cursor y otras herramientas AI IDE, aprende pensamiento de producto, desarrollo fullstack e integración de capacidades de IA.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['es-es/stage-1/learning-map'] ?? []
|
||||
</script>
|
||||
|
||||
# De la idea al producto de IA
|
||||
|
||||
::: info Agradecimiento especial
|
||||
¡Un agradecimiento especial a los estudiantes de la **Universidad de Tsinghua, Campus de Shenzhen** por sus pruebas, retroalimentación y apoyo a este curso! Sus opiniones y contribuciones han hecho que este curso sea mejor. [👉 Ver lista completa de contribuyentes](https://github.com/datawhlechina/easy-vibe#-contributing--contributors)
|
||||
:::
|
||||
|
||||
Antes, crear software tenía una barrera muy alta: necesitabas saber programar, entender algoritmos y tener años de experiencia en proyectos.
|
||||
Ahora es diferente. Mientras tengas una idea, la IA puede ayudarte a escribir código.
|
||||
|
||||
Este es un cambio enorme: **los lenguajes de programación se están convirtiendo en lenguaje natural**.
|
||||
|
||||
La aparición de los modelos de lenguaje grande (LLM) ha hecho que el desarrollo ya no sea "exclusivo de los gurús técnicos", sino una herramienta que todos pueden utilizar. Antes, lo más difícil era "cómo escribir código"; ahora, lo más difícil es "**qué quieres hacer**".
|
||||
|
||||
> **¿Qué es Vibe Coding?**
|
||||
> En pocas palabras, es "programar hablando". Vibe coding significa que puedes depender únicamente de conversar con la IA, en lugar de escribir código directamente, para completar proyectos de programación.
|
||||
|
||||
Por supuesto, hacer que la IA escriba código es solo el primer paso. Para crear un producto realmente funcional, aún te enfrentarás a estas preguntas:
|
||||
- ¿Cómo hacer que la IA escriba código limpio y mantenible?
|
||||
- ¿Cómo unir código disperso en una aplicación funcional?
|
||||
- ¿Cómo poner la aplicación realmente en línea y que la gente la use?
|
||||
- ¿Cómo integrar capacidades de IA como generación de texto y reconocimiento de imágenes en tu producto?
|
||||
|
||||
Estas preguntas encontrarán respuesta en este curso.
|
||||
|
||||
No importa si eres estudiante, profesor, médico, trabajador o cualquier persona sin conocimientos técnicos, no necesitas aprender a programar durante años; en dos semanas podrás crear un prototipo de producto funcional y demostrable.
|
||||
|
||||
| Tu perfil | Lo que este curso puede hacer por ti |
|
||||
|---------|-------------|
|
||||
| Estudiante | Tareas, competiciones, emprendimiento; haz tus propios proyectos sin depender de nadie |
|
||||
| Profesional | Automatiza trabajos repetitivos, mejora tu eficiencia e incluso desarrolla un negocio secundario |
|
||||
| Product Manager / Diseñador | Tus ideas ya no se quedan en papel; puedes crear demos rápidamente para tu jefe/clientes |
|
||||
| Emprendedor / PyME | Valida ideas a bajo costo; puedes crear un MVP sin gastar miles en outsourcing |
|
||||
| Profesor / Educador | Crea herramientas didácticas, presentaciones y evaluaciones automatizadas, mejorando la eficiencia educativa |
|
||||
| Médico / Abogado / Profesional | Automatiza procesos profesionales y crea tus propias herramientas de eficiencia |
|
||||
| Cualquier persona | Usa IA para resolver problemas específicos de tu vida/trabajo, haciendo lo imposible posible |
|
||||
|
||||
En la era de la IA, la capacidad de ejecución y las ideas siempre son más importantes que la tecnología.
|
||||
|
||||
## Ruta de crecimiento: de "saber usar IA" a "saber crear productos de IA"
|
||||
|
||||
<div class="stage-intro">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎮</div>
|
||||
<h3>Introducción</h3>
|
||||
<p class="stage-role">Experimenta la programación con IA</p>
|
||||
<div class="stage-tags">
|
||||
<span>Mini juego Snake</span>
|
||||
<span>Inicio desde cero</span>
|
||||
<span>Primera experiencia de Vibecoding</span>
|
||||
<span>Generación en minutos</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-grid">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🛠️</div>
|
||||
<h3>Primera Etapa</h3>
|
||||
<p class="stage-role">Product Manager / Operaciones</p>
|
||||
<div class="stage-tags">
|
||||
<span>AI IDE (Cursor/Claude)</span>
|
||||
<span>Descomposición de requisitos y prototipo</span>
|
||||
<span>Integración de capacidades de IA</span>
|
||||
<span>Desarrollo de Demo completo</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Segunda Etapa</h3>
|
||||
<p class="stage-role">Desarrollador junior/intermedio / Desarrollador independiente</p>
|
||||
<div class="stage-tags">
|
||||
<span>De Figma a código</span>
|
||||
<span>Base de datos Supabase</span>
|
||||
<span>Integración de pago Stripe</span>
|
||||
<span>Base de conocimientos Dify</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Tercera Etapa</h3>
|
||||
<p class="stage-role">Desarrollador senior / Arquitecto</p>
|
||||
<div class="stage-tags">
|
||||
<span>Web/Mini-programas/Multiplataforma</span>
|
||||
<span>Herramientas avanzadas MCP</span>
|
||||
<span>RAG y LangGraph</span>
|
||||
<span>Mentalidad de ingeniero senior</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stage-intro {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: var(--vp-c-bg-mute);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stage-role {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stage-tags span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-card:hover .stage-tags span {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
A través de esta ruta de aprendizaje completa, obtendrás:
|
||||
|
||||
- **Capacidad de desarrollo Vibe Coding:** Domina la mentalidad de vibecoding y las herramientas de codificación con IA, multiplicando tu eficiencia de desarrollo. Ya no necesitas memorizar sintaxis, sino aprender a guiar la IA para generar código de alta calidad.
|
||||
- **Habilidades de desarrollo fullstack:** Desde el diseño UI hasta la implementación frontend, desde el diseño de base de datos hasta el desarrollo de API, desde el desarrollo local hasta el despliegue en la nube, domina la pila tecnológica completa de aplicaciones web modernas.
|
||||
- **Integración de capacidades de IA:** Aprende a llamar a diversas APIs multimodales de IA, integrando capacidades de IA como texto, imagen y voz en tus aplicaciones, y construyendo productos inteligentes a través de tecnologías como RAG.
|
||||
- **Pensamiento de producto y capacidad operativa:** Desde la investigación de usuarios hasta la descomposición de requisitos, desde el diseño de MVP hasta la iteración del producto, desde la integración de pagos hasta la gestión de usuarios, formando un ciclo completo de desarrollo y operación de productos.
|
||||
|
||||
# ¿Qué podrás hacer al terminar?
|
||||
|
||||
## Primera Etapa: Crea tu primer prototipo de producto
|
||||
|
||||
Esta etapa es adecuada para personas que no tienen ninguna base de programación, o que solo saben un poco pero no se sienten seguras. No necesitas aprender mucha teoría primero; en su lugar, sigue los pasos directamente y aprende a usar herramientas de IA para escribir código mientras lo haces.
|
||||
|
||||
**Al terminar podrás**:
|
||||
- Completar independientemente una aplicación web con herramientas de programación con IA
|
||||
- Convertir ideas de producto en prototipos clicables e interactivos
|
||||
- Añadir funcionalidades de IA al prototipo (como generación de imágenes desde texto, chat inteligente)
|
||||
- Saber cómo diagnosticar y resolver errores cuando aparezcan
|
||||
|
||||
En pocas palabras, podrás crear algo "que funcione y que puedas demostrar a otros".
|
||||
|
||||
Podemos primero experimentar la programación con IA a través de juegos pequeños, y luego aprender a usar herramientas de programación con IA para ayudarte a escribir código y corregir errores. Luego, comenzando con páginas simples, crearemos gradualmente una aplicación multipágina interactiva, y añadiremos funcionalidades de IA como generación de imágenes desde texto y chat inteligente. Finalmente, completarás independientemente un proyecto completo, permitiendo que tus ideas tengan una posibilidad real de materializarse.
|
||||
|
||||
# ¿Por qué usar un enfoque basado en proyectos para entrenar?
|
||||
|
||||
> **Desafíos del mundo real**
|
||||
>
|
||||
> La razón es bastante simple: según el estado actual de la mayoría de los estudiantes, al entrar directamente al mundo laboral, muy probablemente tendrán dificultades bajo los "golpes de la realidad" de proyectos reales y jefes/clientes. Los escenarios más comunes en el mundo real son:
|
||||
|
||||
> Tu mentor/jefe: Queremos hacer un xxx, el objetivo es alcanzar el efecto yyy.
|
||||
>
|
||||
> ¿Documentación? ¿Frameworks existentes? ¿Especificaciones detalladas de requisitos? Muchas veces no existen.
|
||||
|
||||
Muchas tareas en el trabajo real consisten esencialmente en resolver problemas nunca antes vistos en un entorno de alta incertidumbre: los requisitos son vagos, los límites cambian, nadie te da la respuesta correcta, y necesitas investigar por tu cuenta, hacer experimentos, construir prototipos e iterar constantemente, para finalmente entregar una solución que "funcione, sea usable y pueda ponerse en producción".
|
||||
|
||||
Lo que este curso quiere hacer es darte una "simulación de golpes de la realidad" en un entorno relativamente seguro:
|
||||
|
||||
- A través de tareas de proyecto con cierta dificultad, obligarte a practicar la descomposición de problemas, el diseño de soluciones y la búsqueda independiente de información
|
||||
- A través de andamios y código no tan "simplificados", enseñarte a leer, entender y modificar una base de código mediana o grande
|
||||
- A través del ciclo completo de la idea al despliegue, hacerte experimentar el proceso completo de un producto real de 0 a 1
|
||||
|
||||
A corto plazo, este entrenamiento es bastante exigente; pero a largo plazo, mejorará enormemente tu competitividad en la búsqueda de empleo y el desarrollo profesional: podrás soportar más presión, encontrar puntos de avance en entornos inciertos y tener más capacidad para convertir la IA en productos realmente implementados, en lugar de quedarte en la etapa de "jugar con demos".
|
||||
|
||||
# El arte de preguntar: una habilidad esencial en la era de la IA
|
||||
|
||||
En la era de la IA, preguntar también es una "habilidad fundamental". Con el mismo código y el mismo error, **cómo preguntas casi determina qué tipo de respuesta puede dar la IA**: ¿generalidades o pasos concretos y aplicables?
|
||||
|
||||
**Desarrolla buenos hábitos:** Considera "preguntar a la IA" como parte de tu flujo de desarrollo diario: cuando no entiendas algo o estés atascado, pregunta inmediatamente.
|
||||
|
||||
## ¿Por qué es una habilidad esencial?
|
||||
|
||||
- **Rara vez hay documentación completa en la realidad:** La mayoría de las veces te enfrentas a requisitos poco claros, código a medio hacer, mensajes de error dispersos
|
||||
- **La IA es tu tutor y colega personal:** Quien sabe preguntar puede convertirlo en "programación en pareja de alta calidad"
|
||||
- **Tu límite superior lo determina la comunicación:** Cuanta más información clave puedas proporcionar y mejor puedas limitar el formato de salida, más utilizable será la respuesta
|
||||
|
||||
**Error común:** Preguntar solo "¿por qué da error?" generalmente solo genera conjeturas. Completar el contexto te dará soluciones accionables.
|
||||
|
||||
## Cómo "alimentar" información a la IA: captura de pantalla vs copiar y pegar
|
||||
|
||||
Ambos métodos funcionan, pero tienen usos diferentes:
|
||||
|
||||
| Método | Escenario aplicable | Requisito clave |
|
||||
| ------------ | ----------------------------------------- | ----------------------------------------- |
|
||||
| **Copiar y pegar** | Stack trace de errores, logs, código, configuración, respuestas de API | Intenta ser completo, no copies solo una línea clave |
|
||||
| **Captura de pantalla** | Problemas de layout UI, anomalías de interacción, no encuentras botones en la interfaz de herramientas | Captura completa + anota las áreas clave, preferiblemente con una breve descripción textual |
|
||||
|
||||
::: danger ⚠️ Requisito previo importante
|
||||
**No todos los modelos de IA soportan entrada de imágenes.** La comunicación por capturas de pantalla requiere que la IA tenga capacidades multimodales (es decir, poder entender y analizar imágenes). Actualmente, las IA que soportan entrada de imágenes incluyen: Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google), y algunos modelos nacionales como Tongyi Qianwen, Wenxin Yiyan, etc.
|
||||
|
||||
**Si la IA que usas no soporta entrada de imágenes**, las capturas de pantalla no podrán ser reconocidas; en ese caso, usa el método de copiar y pegar texto para comunicarte.
|
||||
:::
|
||||
|
||||
## Técnicas de prompt para que la IA "explique bien"
|
||||
|
||||
Si no solo quieres la respuesta, sino "aprender" la respuesta. Usar instrucciones como las siguientes puede mejorar significativamente la calidad de las explicaciones:
|
||||
|
||||
> **Ejemplo de pregunta de aprendizaje**
|
||||
>
|
||||
> - "Por favor, primero explica este concepto en 5 frases, y luego hazme algunas preguntas para verificar que lo he entendido correctamente."
|
||||
> - "Por favor, explica detalladamente este mensaje de error, no entiendo por qué da error."
|
||||
|
||||
# He insistido mucho pero aún no lo logro, quiero rendirme
|
||||
|
||||
Puede que tu método de perseverancia no sea el correcto. No luches solo en la oscuridad; puedes venir a hablar con los autores y asistentes: explica honestamente los métodos que ya has probado, los puntos específicos donde estás atascado y tu estado mental actual. Muchas veces, con solo un pequeño ajuste de dirección o completar un conocimiento clave, podrás seguir avanzando.
|
||||
|
||||
# Creo que algunos diseños del tutorial no son razonables
|
||||
|
||||
Siempre eres bienvenido a contactar a los autores, crear un issue o dar retroalimentación directamente en el grupo o en clase. Esperamos mucho trabajar contigo para mejorar este tutorial: qué no está claro, qué tiene mala experiencia de usuario, qué te hizo perder tiempo, todo se puede señalar honestamente. La retroalimentación más real y específica es la que más ayuda a los futuros estudiantes a evitar errores.
|
||||
|
||||
# Referencia
|
||||
|
||||
- [Universidad de Nanjing, Departamento de Ciencias de la Computación y Tecnología, Curso de Fundamentos de Sistemas Informáticos](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Qué aprender a continuación"
|
||||
description="Continúa avanzando siguiendo la ruta de 'de saber usar IA a saber crear productos'."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
Reference in New Issue
Block a user