Transcripciones
1. Fundamentos de la creación de prototipos con Figma Make, ChatGPT y Lovable: ¿Hay futuro para los gerentes de
producto que no
pueden trabajar con IA? Honestamente, no. Acabamos de entrar en una era
completamente nueva de PM con IA, una raza diferente
que se mueve más rápido, que es más inteligente y
convierte las ideas en prototipos
en solo unas horas Si quieres destacar, si
quieres seguir siendo relevante, y si quieres liderar, necesitas ese conjunto de habilidades. Creé este curso justo
después de que dos directores en dos
empresas diferentes me dijeran que mis prototipos de IA
parecen trabajo de agencia Y todo esto se hizo en un día sin desarrolladores
y sin esperar. Eso me dio el coraje de
compartir con ustedes todo lo que he
aprendido. Este curso no es teoría. Esto no son marcos de reciclaje, y definitivamente no es
algo que
encuentres en un libro. Esto es real. Esto es práctico. Y es el borde que separa a los mejores
PM de todos los demás. Y lo hice para ti.
Para que puedas convertirte en el tipo de
gerente de producto que los equipos quieren, las startups necesitan y
las demandas futuras.
2. Crear tus patrones de GPT y UX: Bien. Bienvenidos
a esta conferencia. El primero de construir
un prototipo con herramientas de IA. ¿Y cuál es el mejor
lugar para comenzar? Por supuesto, es una ventana de búsqueda de
Google. Entonces, para que podamos comenzar,
necesitamos ponernos en forma a HantPT para
proporcionarnos buenas indicaciones para
Lovable o Y no hay
manera más fácil de hacerlo que descargar primero
Lovable Prompting Bible Aquí está. Se puede ver
que hay mucho que hacer. Pero con Control A, Control C, luego ir a ChatGPT es lo primero
que debes hacer Ahora, a continuación vamos
a crear un GPT
en Cha GPT . Esto
está bajo Explorar. Después creamos lo llamaremos Figma y floreceremos ambos
prototipos GPT Lo que puedes hacer es
subir archivos para crear el conocimiento
para el GPT Pero creo que podemos
saltarnos eso y crearlo. Sólo a mí por esta
cosa y luego a salvo. Esperaremos un par de segundos, GPT, y ahora vamos a empezar a entrenar
a nuestro GPT Lo primero que
vamos a decir es que eres un experto experimentado en UX que
es competente y ha leído los libros más
sofisticados para software ¿Lo tienes? Me da una lista
de libros destacados de UX. Necesitas
pensarlo mientras estás hablando con un niño y educado en el modo Speed de
lucha. Entonces lo contamos ahora, obtenemos tres buenas prácticas
cada una y dame buenas y largas
explicaciones detalladas de ellas. Espera un poquito. Dile a esta tienda esto
en tu conocimiento. Bien, entonces tenemos que pensar lo que vamos a
pedir, qué tipo de producto. Y para este
ejercicio, podemos hacer una herramienta de observabilidad rápida
basada en herramientas de trazas Datadog y Grafana
y Entonces lo que le vamos
a decir al GPT es analizar Datadog Grafana, trazas de
Dina, patrones UX, buscar formas y aislar mejores patrones UX, navegación, característica, descubribilidad Experimentar y formularlo en observabilidad UX biblia Sea extremadamente detallado
ya que está explicando estos dos pregraduados distraídos en UX con buena
comprensión de UX, pero la
capacidad de atención limitada que puede derivar
fácilmente son
recordamos recordar la parte
fácilmente a la deriva, porque así es como vamos a tratar a lavaba Y estos son ayudantes fantásticos
para la construcción de prototipos. Simplemente se distraen muy
fácilmente, y necesitas darles
suficiente cantidad de
detalles antes de detalles antes que empiecen a entender
lo que están haciendo Entonces esto es exactamente lo
que estamos diciendo aquí. Veamos qué va a venir el
GPT. Y aquí está nuestra Biblia UX. Nos dice exactamente qué debe
hacer
una solución de observabilidad en términos de experiencia de usuario, por lo que puede ser mezquino Esa es una buena solución de
observabilidad por parte de los usuarios que la utilizan. Esperemos a que
termine el GPT, y luego otra vez, vamos a decir que almacene los datos en su conocimiento Voy a desplazarme lentamente, para que puedas detener el video y ver qué
se le ocurre al GPT Estoy leyendo en tiempo real,
y el sonido bastante decente para Lovable y para
Figma hacen para hacer un buen prototipado así que
esperemos a que Ver, alucinarlo aquí. Al ser parte del
campo de observabilidad, esto es oro. Bien, ahora decimos tipo
en tu conocimiento. Ahí vamos. Entonces vamos a
la Biblia incitante Lovable Vamos a decirle al GPT Esta es
la incita
a la Lovable Guárdelo en su conocimiento
y siempre adhiérase a estas mejores prácticas
cuando se le pida que cree un prompt para
Lovable Dev o Figma Make. Porque no sé del mismo tipo de
Biblia para Figma Make, voy a volver a pedir al GPT que pase por foros
y artículos, etcétera Y crearlo por su cuenta. Ahí vamos. Es un documento
largo. Pero solo puedes hacer clic. Y debe hacerse
en un par de segundos. Ahora, lo que te vamos a
pedir es que investigues
leerlo y otras formas para expertos que han dado buenos consejos para Figma Make y cómo crear
los mejores prompts para Crea el mismo estilo
de incitar a la Biblia como la adorable que tienes en tu conocimiento.
Bien, así que vamos a indicarlo. Va a pensar
por un tiempo y deletrear la Biblia incitante
para Figma Make tomará solo
un poco de tiempo generar el
documento grande y almacenarlo, y luego vamos a ser
casi buenos para ir. Todo bien. Ahora esto está terminado. Oficialmente tienes ambas biblias
de punteo
almacenadas en tu GPT. Este es tu pequeño monstruo
para construirte pantalones, y necesitas tratarlo
con cuidado y nutrirlo Así que cada vez que leas un libro o tengas un buen artículo, solo ven aquí y dale tu GPT un poco de amor
y algunos artículos más, para que pueda volverse aún más inteligente Bien, ahora, una vez
que hayamos terminado con esto, podemos comenzar a construir nuestro primero. Esto es lo más
estratégico. Entonces solo para recapitular, lo que
hicimos fue, creamos un GPT, le
dijimos que fuera a buscar los mejores patrones de UX y
conocimientos y buenas prácticas Entonces le hemos agregado la Biblia de
incitación amorosa. Le hemos pedido que cree
la Biblia incitadora Figma, del mismo estilo, le pedimos que
la almacene todo Entonces elegimos el campo del que vamos a estar
creando productos. Entonces actualmente esto va
a ser observabilidad, pero tal vez esto pueda ser
algunas herramientas de negocio A lo mejor esta puede ser una aplicación para escuchar
música. A lo mejor esto puede ser algo para crear sitios web personales
para diferentes personas. Necesitas encontrar
lo mejor que son. E incita al GPT a
analizar estos sitios web, obtener las mejores prácticas
y mejores patrones, almacenarlo en su
conocimiento, para que sepa qué ver y cómo
construir el prompt, así que en realidad
es bueno Cuando todo está en
el conocimiento ahora, podemos comenzar con la construcción de
nuestro primer prompt. Entonces para comenzar,
voy a reunir un par de
enlaces y un montón de capturas de pantalla
para cosas que me gustan. Lo que vamos a estar creando es una app para monitorear naves espaciales Entonces lo que voy
a hacer es buscar las mejores aplicaciones de búsqueda que existen
y alimentar al GPT con ella Bien, así que encontré un par
de artículos que están
hablando de misiones de naves espaciales y monitorear diferentes Entonces he puesto sus
enlaces aquí primero. Entonces he puesto
diferentes artículos y las imágenes en él para monitoreo de
naves espaciales como Ds en Grafana,
esto en datos Dub, este software de control espacial para estas personas, más
software de naves espaciales, aún
más software de naves espaciales Todos estos están aquí. Este no lo es.
También se agrega. Y ahora viene el prompt, que es el siguiente, estás construyendo un primer prompt Figma
Make Necesita ser detallado
y dar tanto que un pregraduado estadounidense pueda
seguir adelante sin
distraerse Lo que estamos construyendo
es un prototipo para una herramienta de monitoreo de naves espaciales en el tema de Gufan realmente importante elegir un equipo
y decirle al GPT Es necesario analizar Grafana, su estructura, su UX, su UI en detalle y decirle a IgMA hacer cómo
crear el prototipo El prototipo tendrá
esencialmente tres pantallas, una para visión general, otra para análisis operativo y otra para análisis de lanzamiento
y aterrizaje. Asegúrate de dar una cantidad
excesiva de detalles, para que no incurra ningún error Y aquí hay un tip que
quiero mostrarte al 100%. Cuando estés haciendo esto,
asegúrate de hacer una investigación profunda. Actualmente, lo he puesto
en el pensamiento. Lo vamos a poner para aún más como pensamiento extendido. Ahora vamos a
crear nuestro primer prompt, que es súper estratégico
y sin él, como te dije al principio, tu prototipo puede
irse tan mal. Entonces este es el
que necesitas hacer. A veces toma
varias carreras donde le pides a ChatGPT que lo
cree, luego leerlo Después vuelve a imprimirlo y
leerlo nuevamente y editarlo, para que finalmente tengas
lo que necesitas. Entonces veamos qué se le
ocurre. Todo bien. Y ahora después de
pensar un poco, nuevamente, si tienes la opción aquí no solo de usar el pensamiento
extendido, sino de hacer un análisis profundo, puedes hacerlo con seguridad, y
va a ser mejor. Pero ahora tenemos
lo que necesitamos, y este es nuestro primer prompt,
contenido, tareas,
lineamientos, todo.
3. Perfecciona la Biblia para los prototipos de FigmaMake: Los criterios de éxito están en blanco, así que esto tiene que estar seguro, pero en
y lo que voy a hacer, y si quieres, puedes
hacerlo como una milla extra también. Puedes copiar esto desde aquí, iniciar un gráfico normal
de Chan GPT, da clic aquí, di Deep
Research y contarlo Haga una investigación profunda,
asegúrese de que esto cumpla con los más altos estándares de UX e IA, lo que incita a ser
Mmeic Verifique sus conocimientos para
asegurarse de que se adhieran a criterios de
éxito
que abarcarán fácil detección y un
uso excesivo de funciones Pega el tanque grande, y va a hacer una investigación profunda y
profunda para esto. ¿Está buscando un Figma Make prompt
detallado? Sí, una exotida completa. Sí. Diseño de fema simulado. No. Y reinicie la investigación,
le llevará un poco. Pero el aviso
será aún mejor. Entonces esperemos la investigación. Una vez realizada la investigación, una vez hecho el prompt, vamos a ir y aplicarlo de
hecho. Mira qué
va a hacer Figma Make con ello. Y claro, entonces
pruébalo y adorable, mira cuál
va a ser la diferencia Pero solo espera un poco, y luego vamos a ir
a nuestra próxima conferencia donde vamos a darle
vida a
este aviso y hacerlo realidad. Esta será su
primera pantalla para nuestra perfecta herramienta de monitoreo de aeronaves satelitales y naves espaciales Estén atentos. Nos vemos
en la próxima conferencia.
4. La mentalidad de prototipado de PM: ¿Se puede obtener un
prototipo sólido
de la IA sin
darle el contexto adecuado? Exactamente. Se puede. En esta conferencia,
vamos a centrarnos en la
pieza más importante del proceso. Y esto está construyendo su prompt de prototipo
principal. El que creará
el primer visual,
el que actúa como
base para
todo lo que sigue, tu golpe más estratégico lo largo de todo el proceso de
creación. Este es su resumen.
Si lo estropea, su prototipo estará por
todas partes
y se irá a la deriva cada vez más
con cada siguiente mensaje. Te mostraré cómo usar Cha
GPT como un asistente inteligente, cómo darle los ingredientes
adecuados y cómo asegurarse de que
se comporte más como
un pensador senior de UX
que como un adolescente distraído un pensador senior de UX
que como un Vamos a configurar tu prototipo
para el éxito. Vamos a por tu edificio.
Nos vemos por dentro.
5. La estrategia básica de "elementos visuales y lógica": sincronización de instrucciones e imágenes con IA.: Bien, ahora, después
de la investigación profunda, tenemos nuestro prompt maestro. Este es el santo grial. Nosotros solo lo llevamos, oop, hasta el fondo,
lo copiamos, y ahí vamos En el lado izquierdo,
esto es adorable. En el lado derecho,
esto es figma make. Veamos qué va
a pasar cuando pongamos en el master prompt y un
par de capturas de pantalla. Entonces pongamos el gran
prompt en ambos lugares, y luego adjuntemos las capturas de pantalla. Hemos coincidido en que lo que estamos haciendo es hacer un prototipo de
grafana Así que he reunido cinco buenas
capturas de pantalla de Grafana. Tan adorables y Figma hacen. Vamos a poder entender,
Oh, vamos a tener que
hacer esto uno por uno. Bien, uno, dos, tres. Bien, ahí está nuestra
primera diferencia. Aquí puedes sumar hasta tres, aquí puedes sumar hasta cinco. Entonces, ¿estás listo para
ver nuestra primera pantalla? De nuevo, tengo las capturas de pantalla más importantes y
representativas, el enorme master prompt, tres ,
dos, uno,
vamos. Y vamos. Veamos qué pasa
después de que se haga esto. Ambos sistemas están funcionando.
Diseña iteraciones de lovable En el lado derecho,
Figmme escribiendo el código. Veamos quién lo hace primero. A ver quién lo hace
mejor. Ahí vamos. Lovable fue primero.
Esperemos a que Figma haga ahora Y ahora el momento de la verdad. Veamos qué pasa con Figma apenas un par
de segundos más. Ahí vamos. Yo diría que
esto es bastante similar. Ahora, cuando
lo miramos por ambos lados, realmente
se siente bastante similar. Te proporciona un tablero de instrumentos. Expandamos vamos a
expandirnos y verlo todo. Sí, esta es una persona adorable. Y este es el de Figma. Yo diría que de alguna manera el figma uno se parece un
poco más a grafana, pero así están bastante apagados, y no hay absolutamente
nada Probemos un par de gambas, solo para que sintamos cómo van
las cosas. A ver. Vamos a traer de nuevo a Chan chi PT. Ve a nuestro
generador de prompt y dile, quiero un prompt que haga aplicable
el prototipo, similar al
framework de escenas de Pana Asegúrate de que me des un frente figma adorable
que se pondrá razonable Tirar menús, todos
mis pueblos y cartas. Veamos con qué va a venir Cha GPT
. Asegúrate de enriquecer
el aviso pidiendo al que haga que
el tipo
manifestante de polo sea más divertido Ahora, justo mientras esperamos, quiero echar un vistazo a una de estas capturas de pantalla
que más me gusta, para poder mostrarte cómo
imagen significa 1,000 palabras. Veamos cuál
escogeremos . Siempre es la última. Bien, copiemos esto publicado
en ambos lugares aquí adorables. Y vamos a conseguir el de la
misión espacial real de Grafana, este, publicado aquí, publicado aquí.
Creo que me perdí uno. Bien. Y nos olvidamos
de alimentar adorables Aquí tienes, adorable. Y ahora vamos a por este Brant,
que es inti Vamos, él GPT.
Páginas, cuadros de mando. Ir pronto adorable. Vamos a preguntar a Figma mic. Ahora bien, debería darnos
una cantidad suficiente de clicabilidad alrededor de
los prototipos Veamos cómo
veta el pensamiento. Y ahora, sólo para hacer un resumen, aquí tenemos el estado del espacio,
la comunicación, el sistema térmico, el control de altitud. Tenemos biografías y
series de tiempo al igual que Igufan ha tenido la idea de todas
las diferentes
maquetas y ha proporcionado sistema de
energía y monitoreo
térmico, un buen tablero de instrumentos
para dicho Aquí, es más bien lo mismo, pero tuve la
extraña sensación de
que realmente quería solo
imitar al negro Y, de nuevo, es común la energía térmica
para la salud. Esencialmente, sabe
lo que visualiza, pero hay algunas desviaciones Esto se
inspiró mucho más en Grafana y esto es similar a pesar de que
este tipo
de diseño de vidrio líquido no es mi favorito, pero vamos a
incitarlo un poco más, y va a proporcionar una visualización
mucho mejor Estoy casi seguro de que con este aviso,
va a suceder. Si no, sólo vamos
a incitarlo un poco más, ver qué pasa después. Bien, Volvo está listo. Y nuevamente, revisando
lo último, ahí vamos. Tener estos, pero realmente
no se siente clicable. No se puede hacer clic en nada, y
no puedo elegir
nada interesante Veamos qué hará Figo. Da otro aviso
mientras esperas. Dame una selección,
desplegable, filtro en la parte superior. Eso me dará la posibilidad de
elegir entre los cuatro nombres de
naves espaciales También haga que el filtro interactivo y pueda
filtrar los paneles de abajo,
haga que la batería, el SOC, generación
P y las
otras cajas en la parte superior, pueda hacer clic y que conduzca a redefinir los dashboards ficticio ver si Figma hizo algo, o sigue pensando Ahí vamos.
Incluso hay una guía prototipo. Todo se ve
bien. A lo mejor es Oh, mira, es clicable,
y va a algún lado Las cosas de la derecha
son movibles. Interesante. Lo mató. Tiene algún tipo de servicio
en la parte superior. Vamos a revertir. Bien. Ahora aquí, como tenemos todos
estos, todos son clicables. Cuando hago clic en,
tengo otro tablero,
lo cual es increíble. Dame un botón de retroceso que sea de
estilo vidrio líquido en el medio, extremo
inferior del cante para que pueda
ir a la pantalla anterior. Tendremos más convincente que
ver con el prototipo Figma
make Por lo general, estoy muy
contento con figma make. Hoy, creo que
lo confundo con el último prompt. Ahí vamos, y cuando haga clic, va a estar bien
si presiono un botón de retroceso. Ahí está. El
pequeño botón de retroceso. Fantástico. Entonces terminamos con
lo adorable para esta sesión Creo que esta vez, ha brindado una
muy buena experiencia. Ahora, centrémonos en la elaboración de Figma y
veamos qué pasa ahí, si va
a salir de coma Bien, ahora es blanco.
A mí me gusta más cuando es blanco. Arregle todo mejor. Sigue la navegación lateral de Kafana de la que te voy a dar
una captura de pantalla Y luego hago una pausa en la misma navegación lateral
promptna. O podemos hacer otra cosa. Juega perro krafana.com, ábrelo. Navegación lateral abierta.
Hagamos esto. Daremos esto en el primer
menú del espacio aéreo izquierdo. Y este tablero debería ser él. Por último, siga el panorama general de la
grafana y el estilo. Entonces se pela y navega
como captura de pantalla de grafana, dos. Ahora, vamos a darle otro. Hagamos granadas. Sí. Bien. Eso va a hacer. No imitar el texto
y las medidas. Tú solo estilizas. Veamos cómo va ahora.
Debería ser mucho mejor. A veces se necesita un
poco más convincente. Un poco de un reinicio
contundente. Y ahí tienes.
Esto es más parecido. Se Finger Make realmente le gustan más capturas de pantalla y
diciéndole qué hacer. Y una vez más, ya ves, al hacer clic, tiene
el pequeño botón de retroceso. Te proporciona
exactamente
visualizaciones de estilo Grafana Todos estos están aquí. Esto es maravilloso. Entonces
con esto en la mano, tenemos nuestra primera página, y podemos seguir adelante con ella. En nuestra próxima conferencia,
vamos a ver cuál elegir. Cuál es mejor,
aunque,
oye, estas son ambas herramientas fenomenales, herramientas
fenomenales , y tener el buen conocimiento de prototipar es increíble Pero ahí vamos.
Hemos cubierto uno basado. Ten tu pantalla principal.
Tienes tu prototipo principal. Ahora vamos a ver si
vamos a usar Figma make all over bow en
nuestras próximas sesiones, y ¿cuál es la diferencia Cuáles son las similitudes
y cómo seguir adelante. Nos vemos en la próxima conferencia.
6. Elaboración de su propuesta principal y resumen del método.: Bonito. Esa fue la parte
más importante de todo el proceso de construcción. Ya sabes esculpir tu primer prompt con
precisión y no conjeturas Has visto cómo
combinar elementos visuales, enlaces y lógica para guiar a Cha GPT a hacer
exactamente lo que necesitas Y recuerden, la basura
en equivale a basura fuera. Un gran prototipo
se destaca con una IA inteligente y bien alimentada en la próxima conferencia, convertiremos ese prompt
en pantallas reales usando visuales
audaces e
instrucciones inteligentes. Vamos.
7. Figma vs. Lovable: el enfrentamiento: Ahora tienes mucho más control, y estoy seguro que lo puedes sentir. Al combinar elementos visuales e instrucciones
detalladas, estás dirigiendo la IA como un director creativo y
no solo un escritor rápido Este enfoque
le ayuda a generar flujo, mantener la consistencia
y obtener pantallas que se sientan como
el mismo producto. A continuación, hablaremos sobre
qué herramienta usar, ya sea Figma mak o adorable y cuáles son las
diferencias y Así que estén atentos y nos
vemos dentro.
8. La comparación definitiva en la práctica: Y volvemos a la
pantalla de figma adorable, adorable en el lado derecho,
Figma hacer Ahora bien, esta conferencia se
trata de elegir una herramienta. Y realmente estoy aquí
para decirte que independientemente de
cuál vas a elegir vas a
elegir la correcta. Estas dos son ambas fantásticas herramientas de prototipado
Air, y tienen mucho en común, pero también hay
bastantes diferencias Entonces incluso ahora, cuando
miras la pantalla, puedes ver que a la izquierda, Figma make se ve un
poco más estructurado, un poco más
como profesional con un diseño que
estaba incrustado en ella Está limpio y seguro que es
compatible con Figma. Sí, una vez más, puede
necesitar algo de convencimiento, como viste, de que teníamos que hacer uno o dos prompts de
prototipo más Pero al final, el resultado
es realmente, realmente impresionante. Es un poco más lento. Se necesita un poco más de
tiempo para resolver las cosas. Pero cuando se da cuenta de las cosas, se
puede ver que es
realmente fácil de usar. Y para mí, y en el futuro, Figma probablemente
va a ser mi elección para continuar el
curso, pero adorable Ahí vamos. Aquí es amable Ovable es increíble
porque tiene una mente propia. Es extremadamente rápido
porque se basa en patrones de
diseño que son realmente ampliamente aplicables y
son emocionales. Son como, los
patrones de diseño de lo propio. Adorable siempre tiene lo
suyo, que está muy cerca de lo
que le pides. Pero aún así, es
realmente adecuado para tus ideas visuales y rápidas de IA. Nuevamente, es emocional, y
te proporciona resultados
realmente, muy rápidos que están tan cerca de lo que pides y a veces extremadamente
profesionales. Ambos están funcionando
fantásticamente bien. Ma cha GPT, como viste, pero nunca debes olvidar que adorable tiene esta fantástica Biblia
incitante que necesitas
obtener y alimentar a tu GPT, así que sabe cómo Y lo mejor aún
es que la
Biblia que incita a partir de
obras adorables tanto para adorables, para Figma hacen Por último, el
conocimiento UX detrás de todo. Ya viste que cuando
empezamos a enseñar nuestro GPT, le
proporcionamos
diferentes enlaces
y con diferentes capturas de pantalla,
no solo relacionadas
con la incitación de IA, sino para una buena UX en general Y te dejaré con esto. Siempre necesitas impulsar
tu GPT con cosas como el libro amado de Silicon Valley Product
Group que tiene realmente enormes cantidades de
conocimiento en torno a UX y cómo
construir productos que a tus usuarios
les encantarán o cualquier otra cosa que
esté ahí fuera que te guste, que te guste, la teoría de ello Simplemente obtenga capturas
de pantalla de estos libros, obtenga citas de estos libros y aliméntelo a su GPT Después, la elección
de las herramientas es fácil porque FigmomCN todo adorable, mezclado con cha GPT, y los artículos correctos y el conocimiento
correcto son la santísima trinidad de
la creación de
prototipos de IA de este
período realmente interesante de la civilización humana, que es la parte IA de la historia
que Entonces, a partir de hoy, a partir de esta conferencia, vamos a utilizar Figma
make para continuar nuestra experiencia de prototipado
y nuestro viaje de prototipado Estén atentos donde hacemos que este
prototipo de nave espacial sea aún mejor Nos vemos en la próxima conferencia.
9. ¿Quién gana y qué se debe utilizar?: ¿Alguna vez ha construido un
prototipo a partir de una herramienta de IA? Ese tipo de obras, pero en realidad no se siente bien. Eso sucede cuando trabajas solo
con textos o solo visuales. En esta conferencia,
vamos a combinar ambas. Aprenderás a pedir herramientas de
IA pantalla por pantalla usando capturas de
pantalla e instrucciones detalladas
para obtener exactamente lo que
necesitas sin dejar que la IA se desvíe. Aquí es donde tu prototipo comienza a hacerse real. Vamos.
10. Creación de prototipos de AU integrales con Figma Make: Alguna vez has estado tan atascado
y enredado en tu prototipo que la IA construye pantallas extrañas y siempre las ata mal, y necesitas revertir, reelaborar tantas veces que finalmente
te rindes Esto generalmente significa que se construyó primero la pantalla
en lugar de fluir primero. Y en esta conferencia,
usaremos herramientas para mapear los recorridos
reales de los usuarios para que su
prototipo pueda seguirlos. Aprenderás a
construir
un flujo a la vez y cómo conectar pantallas en función de interacciones
reales y no adivinar qué debe hacer
el usuario Este paso es el puente entre la
estrategia y la ejecución. Así que vamos a conseguir que
construyas, nos vemos dentro
11. Crear flujos de usuarios para ayudarte a construir un prototipo completo: Bienvenido a lo siguiente
que vamos a hacer con
nuestra cosa fantástica hacer nuestra cosa fantástica hacer prototipo de la herramienta de
observabilidad de naves espaciales Ahora bien, a pesar de
que tenemos algunas gráficas y tenemos algunas interacciones
con los botones, queremos sacarle aún
más. No queremos que
sea tan estática y queremos que sea
interactiva y de hecho nos
proporcione muchos más detalles sobre esta nave espacial y cómo la
vamos a observar Consigue esto con un grano de
sal, y piénsalo. Hay todos los demás
prototipos que vas a hacer
donde los usuarios pueden interactuar de una manera diferente con el producto que
estás construyendo. Necesitan saber estratégicamente y saber
técnicamente lo que
sucederá cuando un usuario
haga clic aquí o allá, dónde va
a ser dirigido y cuál será su viaje
de usuario Entonces, para hoy, vamos a tener tres viajes diferentes alrededor haciendo clic bajo los diferentes recursos
como
la batería de
energía térmica común de Health. Adicionalmente, vamos a pedir un par de botones en estas gráficas que nos
van a mostrar predicciones para los
diferentes recursos. Finalmente, haremos que se
pueda hacer clic en
la línea de tiempo del evento para que podamos ver más detalles de los eventos No obstante, aunque tengamos
esta vaga idea en nuestra cabeza, lo que podemos hacer para que podamos
aliviarnos y podamos tener una buena visual está aquí en
Mirror, podemos iniciar una tabla Hay un muy bonito tablero
listo para usar, que se llama plantilla de
sitio web. Este, que es el diagrama de flujo del
sitio web y el encuadre de alambre del sitio web Para ello, voy a utilizar
el diagrama de flujo del sitio web. Vamos a
usarlo pre llenado. Y ahora vamos a
mantenerlo súper simple. Va a eliminar algunas cosas
solo para que lo mantengamos fácil. Estos no los necesitamos. Bien. Ahí vamos,
no los necesitamos. Sólo necesitamos la primera pantalla. Entonces nuestra primera pantalla es
como en sentarme aquí, sólo
voy a copiarla. Aquí vamos. Ponlo aquí. Y dijimos que vamos a tener tres
conexiones distintas. Uno está aquí. Vamos a darle
un poco de color para que sea más visible y
darle algo de peso. Ahí vamos. Que color es el
mejor, este. Entonces este va a ir aquí, éste va a ir aquí, y éste va aquí. Vamos. Aquí, cuando hacemos clic, podemos poner algo de texto, que sea más fácil para nosotros. Cuando un usuario hace
clic en una tarjeta anterior, debería poder ver
un subconjunto de paneles y alertas relacionadas con la salud
común, el poder y la energía ¿Qué era y térmica? Y más. Ahora, estamos aquí,
y sabemos que actualmente el prototipo está
abriendo este dashboard. Sin embargo, solo tenemos cosas
aleatorias en él, y queremos
hacerlo más procesable y proporcionar datos reales
que sean útiles para la gente Entonces no vamos a
volver a ser adorables, vamos a Chenept Vamos a ir con nuestro amigo,
el prototipo de producto adorable.
Le voy a preguntar algo. Vamos a pedirle que
me dé métricas y
visualizaciones factibles con umbrales o naves espaciales que indiquen ¿Cuál era el
otro? Salud general, energía de energía y termo,
poder, energía y termo, serán utilizados para
un prototipo de observabilidad en
Figma hacen
que me den un aviso gris, tal como
lo hicimos antes o
un como
lo hicimos antes o estudiante de UX de pregrado El gráfico construido a partir de
estos va a mostrar en una vista incrustada un cajón cuando se hace clic en una determinada tarjeta
en la parte superior del diseño Veamos qué
va a pasar. Mientras estamos
esperando el aviso, podemos hacer algo aún mejor. Como decíamos, las imágenes
valen 1.000 palabras, por lo que queremos ver
el tipo de gráfico. Entonces veamos que podemos
hacer lo siguiente. Podemos ver
tablero de cajón, imágenes, y por el bien de ello,
podemos simplemente buscar algo que nos
guste de estos. Yo diría que esto
es lo suficientemente bueno. Y es tan sencillo
como hacer esto. Vamos a copiarlo.
Vamos a volver aquí. Pero a ver qué aviso tenemos. Copiar y pegar para solicitar. Pero en figma M, y esperarlo. Entonces esto va a abrir
de todos estos aquí. Aquí, hay un truco
que quiero mostrarles,
y vamos a deshacernos de
las pantallas a partir de ahora, solo para que podamos despejar
espacio para nuestro texto. Cuando agregues las pantallas más tarde, va a quedar
mejor si quieres. Pero en los eventos, lo
que quieres ver cuando se abre un evento y cuando está relacionado con un recurso térmico general de salud
o energía, esencialmente
necesitas vincular la misma vista interior y abrir
un cajón cuando haces clic en. Estoy listo con este aviso. Podemos seguir adelante y verificar
que cada tarjeta de
estas necesita ser clicable Y cuando haces clic en la
tarjeta y en tu interior aparece, pero cuando haces clic en el
evento, aparece un cajón. Estos dos estarán
vinculados entre sí. Y este es ese
tipo de relación que quiero mostrarte aquí y el hecho de que necesitas
hacer este
árbol de viajes de usuario para que puedas tener éxito los mejores lugares para hacerlo visualmente aquí en Mirror. Con eso en mente, ahora podemos volver nuevo a nuestro
prototipo e incitar, ver qué va a pasar. Una vez que esto suceda,
podemos ir y tratar construir los eventos poco pronto. Entonces consigo lo que tenía anteriormente. Veo que la línea de tiempo de eventos
es el encabezado de la tarjeta, así que definitivamente necesito pedirle a CHANGPT que cree vistas de
ideas para la pestaña de eventos y
asegúrese de
que siempre ponga el nombre correcto
en el widget de línea de tiempo de eventos Después publicamos el prompt inicial. Digámoslo de nuevo cuando se
abra un evento y esté relacionado con una
de las tres tarjetas de arriba, debería vincularse a un cajón. Necesitamos darle a HAGPT la esencia detrás
del viaje de uso Cuando un usuario hace clic en un evento, debe abrir un tablero. Debería ser un
dashboard predefinido por ahora, uno el M, para que pueda
tener buenas visualizaciones Debería proporcionar algunos
KPI para estos eventos, y luego,
vamos a vincularlo de nuevo
a las vistas de insights para
las cuatro tarjetas anteriores Entonces veamos qué
va a pasar ahora. Conseguir esto, pegarlo para charlar GPT, para tener un baile muy bueno, agradable y largo tanto por salud general como por batería, que podamos tener todos estos enlaces Así que voy a tomar
el prompt anterior porque este va a
ser el prompt de vinculación, y voy a dejar
el hecho de que Figma make necesita crear estas
vistas internas dentro de la puñalada del evento Después, vamos
a hacer la vinculación. Entonces, ¿estás listo? Hacemos clic en él y Chad GPT nos
da el prompt. Ver lo que Figma hace está
haciendo durante ese tiempo. Sigue funcionando. Entonces veamos cómo va a ir esto después de
que termine el prompt.
12. Construye un prototipo completo conectando los flujos de usuarios: Bien, ahora Figma
Make está pensando. Y lo que tenemos que
hacer aquí ahora es llevarnos este baile de graduación chan GPT que
hemos hecho anteriormente Entonces, los KPI dentro
de las cuatro cartas principales o las vistas de insights son similares a lo que vamos
a construir para eventos posteriores Nuestra mezcla aquí es para las cuatro
mejores tarjetas para térmica, salud, batería, etcétera Se puede hacer clic y abrir
una vista interior que
veremos más adelante enlace a las
líneas de tiempo de eventos a la Ahora, Figma Make está casi terminado, y una vez hecho, vamos a
incitarlo con los Otra vez, piénsalo como un árbol. Vamos a vincular partes de las vistas interiores desde
las tarjetas en
la parte superior a
partes a la línea de
tiempo de eventos para que podamos
tener un evento cuando se alcance
un cierto umbral desde
la vista interior Ahí vamos. Ahora cuando hacemos clic en
él, oh, hay un error. Dale un segundo. Inténtalo de nuevo. Cuando hacemos clic en él. Ahí estamos. Estas son las vistas interiores. Pero una vez más, no
muestran los mismos KPI que queremos Entonces lo que vamos a hacer
es preguntar a Figma
Make para asegurarnos las diferentes vistas se adhieran a los mismos KPI que le hemos
proporcionado anteriormente Estamos pegando big prompt de Chan GPT con todas las Lambdas, todos los umbrales, y empieza a
funcionar Ver, todos los
diferentes KPI que
podemos vincular a un evento cuando se alcanza
cierto umbral Y es fácil de entender, ¿verdad? Si una nave espacial se sobrecalienta
o pierde batería, debería
haber un
evento diciéndonos, Oye, puede
que baje o oye,
algo malo puede pasar Bien, Figma Make está terminando ahora, sólo un poquito más Más descalzo que se
va a arreglar. A lo mejor un poco más de tiempo. Pero ahora cuando esté
terminado, verás que los mismos KPI
que teníamos en
ChatGPT estarán en los dashboards para
la vista de insights dashboards para
la vista Bien, terminándolo
ahora. Casi ahí. Y ya está hecho. Vamos a darle un clic. Y lo tienen. Podemos ver
los KPI que queríamos Podemos ver la línea de tiempo
del evento dentro del panel de información y estamos listos para conectarlos. Una cosa que realmente me molesta es esta situación de
rastreo terrestre Yo quería tener un mapa con
una pequeña maqueta adentro, así que no es esa
ventanita negra Quiero ver la
nave espacial y hacia dónde va dentro de ese widget, por lo que es mucho más accionable Y podemos ver su posición. Así que haz mapa de situación de Ground
Track con una pequeña maqueta de avión
y muestra su posición Y otra vez, vamos a
incitarlo como humano. Es muy agradable que una vez que tengas un buen prompt inicial, entonces puedas comenzar a
platicar con Figma de una manera legible por humanos Y dentro del milagro del tiempo, ahora
debería
proporcionarnos una imagen mucho mejor, y veremos nuestro avión en un pequeño mapa en
este widget en 21. Ahí vamos. Aquí está nuestro pequeño avión
y a dónde puede ir, donde ha sido mucho
mejor, tan agradable visualmente. Ahora, lo último
que tenemos que hacer es comenzar
a construir
nuestra pestaña de eventos. Y cuando estamos haciendo
esto, queremos el cajón. Sí, ya hemos
construido el prompt para el cajón y lo que
tiene que hacer con ChatGPT Nuevamente, copiamos el prompt, y se lo entregamos a Figma
Make para que pueda hacer clicables
los eventos y abriendo un cajón
de izquierda a derecha Necesitan abrir los pequeños cajones
predefinidos que podemos vincular a
las cuatro tarjetas superiores cuando se supera un umbral. Entonces veamos qué
sucede cuando Figma Make termine de trabajar
en estos cajones, y este será el
último paso antes de vincular ambos y
tener un viaje de uso real Figma Make está finalizando un pequeño error que
tenemos que corregir Bien, veamos
ahora qué pasó con nuestra línea de tiempo de eventos,
y ¿se puede hacer clic en ellos Se puede hacer clic, pero no
parecen clicables. Ver el cajón se abre
solo un poquito. Tenía muchas ganas quiero que se
vean más clicables, y esto es lo que
voy a incitar a Figma. Quiero que los eventos aparezcan clicables siendo
resaltados en azul como hipervínculos y
también el cajón para abrir más al
trato de la izquierda, la mitad de la página Y nuevamente, a través
de la magia de fgnomc entendiendo a los humanos, podremos ver si
es capaz de hacer eso simplemente incitándolo
con Veamos cómo va. Nuestro aviso primario es sólido, y siento que Figma
Make ahora entiende lo que está haciendo y hacia dónde
vamos con esto A ver. Figma
Make está finalizando Y si, ahí vamos. Son azules.
Aparecen clicables, y el cajón se abre
a la mitad de la pantalla con todos
los KPI que queríamos Este es un gran resultado. Nos
vemos en la próxima conferencia.
13. ¡Felicidades!¡La lograste! ¡A continuación, vamos a darlo todo!: Así es como mantienes
tu prototipo basado en el comportamiento real del usuario. Ahora tienes un plan de trabajo para lo que tus usuarios
realmente experimentan, y eso hace que cada pantalla que
construyas a continuación sea más fácil, rápida y más enfocada En la próxima conferencia, la
pondremos todo junto y pasaremos del blank
a un prototipo en funcionamiento. Vamos a construirlo. Nos vemos por dentro.
14. Construye tu marca, estrategia y master prompt: Alguna vez se preguntaron
cómo es realmente pasar de cero a trabajar prototipo
en horas, no días. Bueno, ya está. En esta conferencia, te
llevaré a través del proceso completo de combinar tu prompt inicial
con tus visuales y prompts
adicionales a tus flujos
y todas las herramientas de IA, la Santísima Trinidad, Pigmmic
Lovable Verás cómo todo lo que
hemos hablado realmente se
junta paso a paso. Esto es lo que
sucede la magia. Vamos.
15. Cómo pasar del 0 al 1 para tu sitio web personal con Lovable: De nuevo, estamos en la
pantalla de Lovable y el prototipo de la nave espacial AK de
control de misión Pero hoy, no vamos
a estar hablando de ello. Vamos a hacer
algo totalmente diferente para que podamos explorar
no solo Figma Make, sino también podemos explorar
adorables Lo que vamos a hacer hoy
es construir tu propio sitio web, construir tu marca y construir
tu presencia en línea. Esto es extremadamente
importante porque cada gran profesional emictalmente
tiene su propio Y ahora de principio a fin, tengamos una experiencia completa de Lovable y todo lo que hayamos aprendido en las conferencias
anteriores Oh, sin más preámbulos, como decíamos, no
vamos a estar haciendo eso. Vamos a ir a Dashboard y comenzar
algo totalmente diferente. Pero como hemos aprendido,
primero, tenemos que planificar. Y es por eso que he planeado. Ahora Miro. Tengo
este mapa mental de cómo debería
verse el sitio web de alguien y lo que quería tener. Este es el árbol de experiencias, el árbol de viajes del usuario del que
hemos estado hablando. Se simplifica porque
al final del día, no
hay tantas
cosas que puedas hacer en un gerente de
producto o página de
un gerente de
producto o consultor de producto. Entonces aquí está. Primero, tenemos una página de préstamo con mi figura favorita de
palo, imágenes, un logotipo y un nombre, que entra en tres
capítulos principales en el sitio web. Uno son los botones de llamada a la
acción, que son los primeros,
los servicios que son segundos y los contactos
que son terceros. Bajo botones de acción,
tenemos LinkedIn, medium y Substack
donde la gente puede verme y
seguirme en LinkedIn Pueden leer mis
artículos en medio y suscribirse tanto a
medio como a Subpack, dependiendo de su preferencia En los servicios, aquí
es donde se gana el dinero. Si pensamos en qué servicios,
digamos, yo brindo, esto es contratar ayudas
para empresas, ayudarles a contratar los mejores BMs, ayudas de
capacitación tanto para
empresas como para personas Bueno, estamos en este curso de
capacitación, así que te estoy brindando
este servicio. Y finalmente, confeccionando CVs para aspirantes a
gerentes de producto para que puedan golpear y lograr su
primer o Bajo contacto, dos
cosas centemente o cualquier planificador de reuniones que
quieras usar y un correo electrónico,
para gente te pueda enviar Entonces con esto, tengo una idea general de lo que debería hacer
mi sitio web, que es lo primero.
Es realmente importante. Pero entonces, aparte de
lo que debería hacer, necesitamos saber
cómo debería quedar. Y estaba pensando,
debería preparar un par de enlaces antes de la
gente que me gusta, etcétera Pero esto sería súper
sesgado y súper subjetivo. Entonces lo que pensé hacer
y lo que vamos a hacer ahora es súper improvisación,
junto con ChatGPT Entonces vamos a ChatGPT. Lo queremos contar, lo he
puesto a pensar, así que me da mejores respuestas. Y ahora pensemos
estratégicamente. El propósito principal de este
sitio web es la comercialización. No es gestión de productos. Entonces, si pensamos en los
componentes de dicho sitio web, mejor lugar para buscar
es alguien que sea un gran comercializador y tenga
su sitio web personal, alguien que sea un
gran gerente de producto
y tenga un sitio web propio
y un sitio web,
un sitio web personal que
es extremadamente influyente Entonces esto es con lo que voy a incitar
a ChatGPT. Así que dame tres sitios web. Uno para el famoso Market Make que tiene más
tráfico de visitantes. Tres sitios web personales personales. De las personas, una para
agricultores comercializadora, otra para el famoso gerente de producto o
consultor de gestión de productos, y una persona súper influyente en YouTube que tiene una profesión
bien considerada Quiero que estos sitios web
sean más altos en tráfico e influencia entre
su grupo objetivo y sean ampliamente reconocidos Ahí vamos. Tres personas. Nos incitó, a ver a dónde lleva. Veamos ahora a dónde
va a ir. Tiene un buen
patrón de pensamiento, y veamos. Aquí vamos. Estas son
las tres personas, Neil Patel, Product Manager,
Marty Keegan Andy Torsa Ali Abdaal. Si no has visto los podcasts de Lee,
son realmente buenos. Bien. Tenemos esos tres. Déjame ver si los enlaces
funcionan. Sí, lo hacen Un VPG está funcionando. Vamos a ver.
Bien. Bueno. Asombroso. Entonces ahora sabemos aproximadamente cómo va a quedar
nuestro sitio web
y qué va a hacer. Entonces ahora voy a
hacer una cosa más. Voy a conseguir esto. Quiero hacer una captura de pantalla, solo para tratar de ahorrarme algo de trabajo. Voy a
volver a ir a Chan GPT. Oh, díselo, por favor explique
la estructura de un sitio web y redacción que
luego usaremos o
bomba adorable. Ahí vamos. Fantástico. GPT
explicó exactamente lo que teníamos en el Mockup Ahora bien, lo que vamos a GPT
es reparar Lovable prompt, como estás hablando con
un preegresado de
una preparatoria que es
algo hábil en UX, pero es sumamente Asegúrate de que siga el punto Adorable Dev
Prompting Es extremadamente detallado, y el resultado es un sitio web perfecto de marca
propia. Un consultor de gestión de productos. Utilice esta estructura de sitio web. Copiamos la
estructura del sitio web como ejemplos para el posicionamiento y
la forma en que se ve, utilizamos una mezcla de los
siguientes sitios web. Dijimos Nopatel SPGF la figura del palo morfoba cada uno
desde los siguientes enlaces, y voy a Estas son cosas que
he hecho yo mismo, más o menos con la ayuda, por
supuesto, de algún GPT Pero esencialmente, estas son las figuras de palo
que me encanta usar. Son parte de mi marca, y me gustan lo suficiente como para, para ponerlos en mi sitio web. Voy a poner aquí una investigación
profunda como
lo hacemos para que pueda tener una
investigación más profunda y una mejor marca. Y ahora veamos qué magia va a pasar. Oh, una cosa más. Asegúrate de usar los colores de las
figuras de palo para el sitio web. Bien. Bueno,
veamos qué pasa entonces. Bien, antes de empezar, ¿cuáles son los apodos que se
deben usar y
el logo? Todo bien. Entonces el nombre es Seal
becerro y F. Se puede generar un logo que
consiste en las iniciales, VK ¿Quieres un tono y la sensación? Usa el tono y la sensación de los
tres sitios web que he ted, es decir, voy a ser
extremadamente directiva, así que no piensa
en otra cosa. Debería escribir un aviso, asumiendo que el sitio se
construirá en Webflow framer o código, el sitio se construirá en punto
adorable Dv Cualquier eslogan de línea de
trama específica que
desee bajo su nombre, genere el eslogan y déjese inspirar por set,
Godin, morado, Bien. ¿Pensamos que somos buenos?
Eso va a ser interesante. Veamos ahora donde finalmente
va a comenzar la investigación . Genial. Dice, De donde
va a conseguirlo, el color de mis temas
con las figuras de palo, generar el eslogan,
generar el logo. Vamos. Veamos cómo
va. Fantástico. Ahora por fin, después de 13 minutos
de pensar y salsas de hojalata, tenemos el prompt Lovable Lo he leído, y es muy, muy bueno,
igual que anoche. Oh, tenemos un plan de auto. Tiempo de hacerlo realidad es lo que dice
un GPT. Vamos a Lovable Le damos el prompt, pero también
agregaría varias
capturas de pantalla, porque la imagen es de 1,000 palabras. Vamos a componer un conjunto
rápido de imágenes. Puedes hacer esto en
No, de inmediato Nuro. Yo sólo me llevaré los
que más me gusten. Uy. Entonces nos vamos. Voy a componer una imagen
de todas estas para ver
si va a volar solo para que no superemos
el límite de tres imágenes. Creo que tenemos un buen
subconjunto de imágenes de higo palo. Espacio de tablones? Bien.
Las imágenes están listas. Lovable está aquí. Oh, así que vamos a conseguir dos imágenes. Vamos a hacer Aileen. Y por último, S VPG. Bien. Ahora cuando tengamos las
tres capturas de pantalla, el prompt, veamos
qué va a pasar. Lovable empieza a trabajar ahora. Y una vez hecho, tendremos ojalá un sitio web personal
realmente bueno para mí con figuras de palo
y una buena funcionalidad, todo en un solo lugar.
Veamos cómo va. A. Es un poco impactante, una vez que Lovobo derramó Y, oh, Dios mío, vi esto y estaba
como, Este es el final. Este es el final del curso. Lovo no está haciendo lo que
yo le pido que haga. Pero cuando nos desplazamos hacia abajo, vemos que en realidad hizo que un sitio web decente siguiera mi trabajo. Dice Linked en boletín
de medios. Dice apoyo a la contratación, capacitación y taller, coaching de carrera
civil. Proporciona cosas muy,
muy buenas. Reserve una llamada con mi integración de calendario
directamente en él. Envíeme un correo electrónico. Voy a
revisar esto más tarde. Pero el
sitio web general es fantástico. Tenemos son estas cosas, lo cual es extremadamente feo. Ahora, lo que vamos
a hacer es volver a ChatGPT y decirle Hagamos tres sitios web personales con landing pages fenomenales campo de juego es la gestión de
productos,
mercadotecnia y consultoría. Pero con un
poco más de incitación, estoy seguro de que va a
terminar esta hermosa página web Veamos qué te
proporcionará ChatGPT. ¿Cuáles son esos tres sitios web
personales que tienen landing
pages fenomenales según ChatGPT? Bien. Y con la
magia del tiempo, tenemos a nuestros contendientes. El primero, el No. Segundo. Y nuevamente, esta
es mi preferencia personal. Realmente depende cómo quisieras verte
simplemente. Este fue mejor. Oh, Lenny. Ahí está Lenny Fantástico. Quiero inspirarme en
Lenny como siempre lo hago Si no sigues a Lenny, ya
sabes qué hacer. Bien. Entonces
le diremos a Lovable que haga la landing page con nombre similar y la mezcla de
esas dos capturas de Este es uno y seguro que me gusta
April Dun fold. Puedes usar algunas de esas figuras **** en lugar
de la que creaste. Yo en capturas de pantalla, también. Lo que voy a hacer es volver a Miro,
descargarlos uno por uno. Bien. Hecho. Veamos si esto
va a ser mejor, y esperemos que sea mejor. Esto es un poco mejor, pero el texto es simplemente robado. Y V aún mejor, me siento. Volvamos al NGPT. Usemos nuestro prototipado
uno, y se lo diré. Quiero un pronto amable, pero afinar solo
la landing page
para que un
sitio web personal sea similar
a las capturas de pantalla y genere la figura de palo en lugar
del humano en la imagen Se necesita usar
los asistentes y figuras de palo, similar a las capturas de pantalla, voy a dar necesidades simples pero la gente
quiere desplazarse hacia abajo. Bien, intentemos
esto una vez más. Esta vez primero estamos
pasando por la mascota Chachi, estas, y esa Oh, una cosa más.
Asegúrate de cumplir con la Biblia en tu
conocimiento y ser súper detallado mientras te lo estás explicando a un graduado de
preescolar con una comprensión
limitada de UX que es súper fácilmente indistractb Bien, hagamos esto
una vez más. Bien. Tenemos el prompt. Ahí vamos. Vamos a copiarlo. Vamos a copiarlo y a
ver qué pasa. Bien, mucho mejor. Ahora, tal vez podamos
simplemente hacer esto, editar espaciado. No, esto está bien, pero acolchado. Bien, intentemos otra cosa, N. Eliminemos los
espacios blancos vacíos de King por encima y por debajo de
la landing page más delgados Por lo que los botones de posicionamiento, preocupación
y estrategia están casi tocando la
parte superior de la página. Confirmar.
16. Errores y cosas que hay que tener en cuenta al afinar los prototipos y convertirlos en productos: Bien, ahora es el momento
de algo gracioso. Salimos en el
punto donde teníamos esto con tanto ritmo
en la parte superior y en la parte inferior, era
difícil desplazarnos Te voy a contar un secreto oculto. Intenté cuando terminé
la conferencia editarlo, y estaba como, conseguir herramientas
visuales y viendo que
no hay nada que pueda hacer. Ver, cuando hago clic
en él, no puedo borrar los espacios vacíos detrás. Escribe todo lo que pude, y luego accidentalmente,
me desplazé hacia adentro, y vi que
estaba en 90% Zoom Entonces, esencialmente, esto se verá como esto en lugar de lo que les
mostré anteriormente. Entonces más de la
historia es que hay muchas partes móviles,
así que cuídalo. Veamos qué podemos hacer ahora. A lo mejor podemos agregar algo de relleno. No, no podemos. Esto no estuvo bien. Así que vamos a descartarlo.
Siento que podemos dejarlo así por el
momento, un intento más. Y veamos
algo diferente. Hacer esto más grande
y hacer que la fuente sea más grande es lo
que queremos hacer. Increíble. Bien, esto se ve fantástico ahora. Lo que tenemos que hacer ahora es simplemente cambiar el texto,
hacer estos botones. Este es el color incorrecto para que
podamos obtener las ediciones visuales y comenzar a hacer esto una por una para que podamos tener indicaciones
más específicas Haz este botón
con el estilo rosa de todos los demás botones
y coloca el cursor sobre él Bien, ahora es rosa, pero aún así hazlo
igual que mediano. Vamos
a llamarlo así de distancia. Ediciones visuales, hacen que sea el mismo estilo que el botón
detrás del medio Veamos cómo
va a reaccionar. No, esto no es lo que queríamos, así que vamos a ver
revertir el último cambio, hacerlo rosa oscuro una vez de Dv Bien. Me enteré de cómo funcionaba botón se ve más
clicable y como un botón Haz que parezca lo contrario
de trabajar con botón de media. Entonces hay algo de contraste. Entonces voy a empezar a
incitarlo para esta cosa. Las historias de posicionamiento
necesitan ser botones, y hay que llamarlas. Ayudarte ahí con esto. Contacto, necesitan enlazar a las partes respectivas de la página según
l. Bien, me gusta. Entonces estas cosas
deberían cambiar ahora. Esto me gusta
más que lo que hay aquí. Así que haz aprender cómo funciona. Mismo estilo que los botones. Te ayudo servicio y frontag para que podamos
tener algo de consistencia Sí. Bien, súper agradable. Quiero que el pergamino
vea como ayudo audaz. Bien. Bonito. Ahora podemos cambiar el texto, cavar esto, ir a Chat
GPT, y contarlo. Este es el encabezado
de mi sitio web. Hazlo más influyente, más
corto y punchier. Y el hecho de que se trate de consultoría
de gestión de productos. Haga clic en
Consultoría de gestión de productos de Word. Eso me gusta. Vamos a cambiarlo. Haga clic en Consultoría de
gestión de productos de Word. Bien. Incluso puedes llamarlo hacer clic en Gestión de
productos Worth. Haga clic en Worth
la gestión de productos está bien. Latas para ser más cortas y afiladas. De nuevo, puedes hacer lo
que quieras con la redacción. Es sumamente importante. Pero se puede hacer, como hicimos nosotros para los adorables, prototipos, GPT Sólo tienes que seguir adelante y enseñarlo. Conocimientos de mercadotecnia,
enséñale cómo hacer que estas frases golpeen bien. Convierto productos complejos I
en posicionamiento que vende. Te ayudo a convertir productos complejos
en un posicionamiento sencillo. Ayudo a fundadores y
líderes a
convertir complejos en posicionamiento que vende.
Bien, usemos esto. Y nuevamente, esto es principalmente
para fines de prueba, por lo que estará bien. Entonces podemos bajar.
Estos son nois No me gusta el hecho de que no
sean cliqueables. Así que haz aclarar la posición y comunicar botones
que abran pop ups con texto y luego generar un
buen texto emergente que proporcione detalles alrededor
del subtítulo y encabezado La idea es que
cuando haga clic como usuario, obtenga más información
sobre cómo le ayudo. Veamos cómo
va. Aquí vamos. Fantástico. Haz que los
iconos aparezcan rosados como en d in y los medios abajo
para que podamos tener consistencia Los iconos de color rosa. Hazlos de color rosa oscuro cuando el
usuario se cierne sobre ellos justo cuando el cursor sobre el icono medio funciona para
ser aún más puntual No, nada. Vamos a
intentarlo una vez más. Haz que aparezcan en el estilo de captura de pantalla
cuando se cierne sobre ella A veces las pequeñas cosas
requieren mucho chasquido. Bien, hice algo.
Sí, lo hace más oscuro, no del mismo color, pero si
lo
incité varias veces más, va a pasar,
intentemos hacer
cosas
más importantes antes seguir
incitándolo si queremos Entonces ahora quiero
agregar los enlaces para mi medio y mi
newsletter detrás los botones y el siguiente
enlace al botón del medio. Entonces cuando hago clic, se abre en una nueva humedad. Pongamos estoy ahí y pongamos el siguiente enlace detrás del botón del boletín
donde se abre. Yo tabulo, Substack en mi sub-pila o simplemente en esta
por el bien de tiempo Veamos cómo va.
Bien. A ver. ¿Se abre? Sí.
Carta de noticias. Obras. Servicios.
Ahora, te pediría que cuando haga clic en contratar
apoyo capacitaciones y talleres y CV y carrera abra un bonito pop up con texto
adicional que
explique cómo lo hago Bien, agradable y hasta cambiar el estilo de la
manera que yo quería. Así que cuando haga clic, vaya
a ponerse en contacto. Cuando hago clic, va a ponerse en contacto y cuando hago clic,
va a ponerse en contacto. Te diré, cada vez que
alguien haga clic en Get in Touch, siempre
debe
abrir reservar una llamada enlace
galantemente **** en
Calle lejos Reservar llamada A ver. Entonces solo
tendremos que arreglar los botones de abajo.
Eso estaría bien. Y a lo mejor estos
botones estarán hechos. Este va a ser un nuevo sitio web
escalonado. Bien, ya está hecho. A
ver. Reserve un co. Fantástico. Esto es algo bueno. Ahora, haz los botones y
envíame un correo electrónico de manera directa,
luce como los
botones de trabajo conmigo con estilo y pasa el cursor En realidad empiezan a gustarles estos aquí que tienen un estilo diferente
porque adelantan. En realidad te están
redirigiendo. Entonces estoy bien con eso. Haz que el botón de correo electrónico
sea tan grande como el botón de libro. Vaya, por fin. Todo bien. Bien, bien, bien. Bonito. Siento que con esto, estamos muy bien para ir, mira
como te ayudo Servicios. Reserva una llamada que estamos bien. Así es como
esencialmente usas adorables
para hacer tu propio sitio Y cuando presionas Publicar,
puedes agregar tu URL y publicarla.
Esto es fantástico. Muchas gracias por estar conmigo durante esas
diversas conferencias. Estoy absolutamente
seguro de que lo
matarás con
prototipos de IA a partir de ahora, y que entiendes
bastante bien cómo la relación entre el adorable Figmamk de
Chan GPT está haciendo
la relación entre el adorable Figmamk de
Chan GPT y lo bien
que puedes comunicarte con estas tres herramientas para generar increíbles tanto Nos vemos en la próxima conferencia.
17. ¡FELICITACIONES!TENES DESBLOQUEADO UNA APALANCAMIENTO INFINITA. ¡CONSTRUYE EL FUTURO!: Y así, lo construyes
un prototipo que funcione
usando IA en poco tiempo. Este es el nuevo estándar. Ahora ya sabe cómo resumizar la
IA, estructurar los flujos de usuarios y convertir rápidamente las ideas en productos tangibles y
comprobables Ya sea que se esté
preparando para un lanzamiento, apoyando el diseño o
validando una idea, este flujo de trabajo le brinda una ventaja No solo estás usando herramientas. Estás usando la estrategia. Feliz creación de prototipos, y hasta
pronto. Increíble trabajo.
Vasil Kaftandzhiev, null
