Practica el Diseño de interfaces con ChatGPT y Codepen.io

Clase 8 de 13 • Curso de ChatGPT para Product Designers: Diseño asistido por AI

Resumen

En este Playground podrás experimentar con el resultado del Prompt: “Crea el HTML y CSS del punto 1 Header: Logotipo de la fundación
Menú de navegación (Inicio, Acerca de nosotros, Adopción, Donación, Contacto)” que ChatGPT le proporcionó al profesor Daniel Torres Burriel.

¡También puedes practicar copiando y pegando el HTML y CSS con tus resultados para hacer tus propios experimentos!.

Tania Sosa

student•

¡Hola Platzinauta!

En este Playground podrás experimentar con código resultado del Prompt:

Crea el HTML y CSS del punto 1 Header: Logotipo de la fundación Menú de navegación (Inicio, Acerca de nosotros, Adopción, Donación, Contacto)

Proporcionado por ChatGPT al profesor Daniel Torres Burriel.

¡También puedes practicar copiando y pegando el HTML y CSS para visualizar tus resultados y hacer tus propios experimentos!.

Nunca pares de aprender 💚

Patricio Sánchez Fernández

student•

Excelente...

Lilian Zamora

student•

Este es el esqueleto de una página para donar muñecas Barbie 💚 Fui ajustando los códigos resultantes para poder cambiar el color, texto y la manera en que se muestran algunas secciones, como el carrousel para las opciones de muñecas.

Eduardo Monzón

student•

Buena herramienta.

Luciana Cisneros

student•

Raquel Palis

student•

Vladyslav Kuchmenko

student•

Por mucho que lo he intentado lo unico que me da es un template muy basico y no consigo que se algo interesante el tema del contenido es otra cosa pero para generar una landing sirve mas que nada para meter el texto y poco mas el tema de estilos pues no mucho

Juan Ortega

student•

Lo que me ha servido a mi es ser extremadamente detallado y usar GPT como una herramienta paso a paso, es decir no pedirle la pagina o el template de manera inmediata sino empezar a contextualizar y dar pistas.

Con base en los ejercicios que hemos visto este fue mi ruta con GPT a nivel de prompts:

Hola GPT, me gustaria que me contestaras y te pusieras en la posición de un diseñador de productos digitales
Me gustaria que describieras una "protopersona" de un joven genero fluido con autismo, resaltando sus gustos, temores y motivaciones
Esta bien, sin embargo al ser genero fluido tal ves su nombre suene un poco masculino, podrias hacerlo mas neutro
Elegiste el mismo nombre, por favor elige un nombre sin genero y dale un apellido a nuestra protopersona
Me parece interesante sin embargo me gustaria que su perfil fuera más descrito como alguien con fuertes habilidades manuales
Me podrias presentar esta información en una tabla?
Perfecto, teniendo en cuenta que eres un diseñador de productos digitales me gustaria que crearamos un "happy path" para un app donde nuestra protopersona se presente y comparta sus gustos
Podrias crearlo en una tabla
entiendo, me gustaria crear un publico objetivo para esta app. Que tal si empezamos a crear este publico
Que opinas de trabajar con este publico objetivo? me gustaria saber cuales son los retos
Conoces alguna empresa de tecnologia que este trabajando en solucionar los retos que trae el autismo?
Podrias hacer un bench mark muy resumido con los puntos positivos y negativos de cada una de esas empresas?
Chat recuerdas el happy path del que estabamos hablando?
Me gustaria que me sugirieras colores para el Ui de nuestra app
Creo que podemos usar el amarillo suave, podrias crear una paleta de colores Ui del 0 al 900 de 11 pasos paso de luz intermedio en el valor 50 y que este amarillo no se vaya a mezclar con el color semantico "advertencia", presentalo en una tabla que contenga las siguiente informacion:
1. Color
2. Valor Ui
3. Codigo HEX
4. Token de valor para frontend

Tatiana Nieto

student•

La IA genera buen código base, que luego se debe pulir manualmente, pero es un buen punto de partida.

Paulina Ramírez Rosas

student•

Fernando Sánchez Mejía

student•

¿Entonces con esta herramienta podemos darnos una previsualización de como se veria el codigo que nos genero ChatGPT?

Kevin Alzate Bedoya

student•

Mi resultado

Fernando Sánchez Mejía

student•

Sí, estoy familiarizado con CodePen.io. CodePen es una plataforma en línea que permite a los desarrolladores web y diseñadores crear, compartir y colaborar en proyectos de desarrollo web front-end. Proporciona un entorno de desarrollo en línea donde puedes escribir código HTML, CSS y JavaScript en un editor en vivo y ver los resultados en tiempo real en una ventana de vista previa.

Algunas de las características clave de CodePen incluyen:

1. Editor en tiempo real: Puedes escribir y editar código HTML, CSS y JavaScript en un entorno en línea y ver los cambios aplicados instantáneamente en la vista previa.

2. Colecciones y proyectos: Puedes organizar tus proyectos en colecciones y compartirlos públicamente o de forma privada.

3. Comunidad y colaboración: CodePen tiene una comunidad activa de desarrolladores y diseñadores que pueden comentar y colaborar en proyectos compartidos.

4. Preprocesadores y bibliotecas: Puedes utilizar preprocesadores de CSS como Sass o LESS, e incluir bibliotecas y frameworks de JavaScript como React, Vue.js y otros.

5. Exportación de código: Puedes exportar tu código o proyectos completos para usarlos en tu propio entorno de desarrollo.

CodePen es ampliamente utilizado para crear demos, prototipos, ejemplos interactivos y pequeños proyectos web. También es una herramienta valiosa para aprender y enseñar programación web, ya que puedes ver cómo se comporta el código en tiempo real. Tanto principiantes como profesionales utilizan CodePen como una herramienta útil en su caja de herramientas de desarrollo web.

EDER YEIS GONZALEZ MONTOYA

student•

He aqui un breve ejercicio que hice de una aplicación para manejo de gastos e ingreso personales. Es breve pero me sirve para entender como podemos ser mas productivo y me permite entender mas el UX aplicado con ayudas de IA. Super experiencia.