My first experiment on Bolt.new: How I designed an interactive makeup game with AI? 💄[Eng-Spn]

Hey Hive folks, I'm participating in @forkyishere's challenge:

Why should you try to learn more about AI?

I love trying new things, especially the crazy ideas @forkyishere comes up with, so come on guys, join me!

I'm here @forykw, now it's time to show off my AI skills!

I accepted the challenge! I chose the second option (Bolt.new) for my test.

I have an idea for what I want the AI ​​to design. I chose the second option @forykw gave us, but I wanted to do it as well as possible, and since we have the option to use AI here, I asked Gemini to help me out.

I love beauty and personal care, so I wanted to design a simple and fun game prototype: a daily makeup system where you customize your character and compete for the best style award. A jury of girls evaluates your color combinations and awards you points. Whoever gets the highest score wins the Best Makeup prize! ✨**

This was the prompt I gave to the Gemini tool to generate a prompt to place in Bolt New so that the AI ​​would have a better chance of understanding my request:

"Design an interactive browser game about makeup. It must include a central avatar, a palette of various cosmetics (lipsticks, eyeshadows, blush) that are applied in real time, and a voting system where a virtual jury evaluates the daily look by awarding points. Include a scoreboard to determine the winner of the Best Makeup."

This was the prompt Gemini AI gave me:

Plaintext

Create an interactive and intuitive web-based makeup game called "Makeup Challenge".

Game Features:

1. MAIN MAKEUP SCREEN:

• A stylized female face model/avatar in the center.

• A side menu or bottom panel with interactive makeup tools:

• Lipsticks (different shades of red, pink, nude, and shimmer).

• Eyeshadows (vibrant and neutral color palette).

• Blush.

• Eyelashes/Eyeliner.

• Clicking on an option or color applies it to the avatar in real time.

2. EVALUATION AND POINTS SYSTEM:

• A "Post Look of the Day" button.

• Pressing it opens a results screen where a virtual jury of 3 virtual girls evaluates the makeup and awards hearts or points (from 0 to 100 points total).

• A celebratory message appears if you get a high score.

3. LEADERBOARD / DAILY SCORE:

• A global leaderboard where points earned each day are accumulated.

• If the score exceeds 200 accumulated points, a "Best Makeup Winner" badge is displayed.

4. DESIGN AND STYLE:

• Modern, elegant, and feminine interface (pastel, pink, gold, and white tones).

• Responsive and user-friendly browser design.

And so I did

She asked me to register, and once I was registered, she gave me some tokens with which I would begin my great programming adventure. Hehehe

I waited about 10 minutes and it gave me this

I'm trying out the game I asked the AI ​​to create, wow, this is fascinating, thanks @forykw!

And I applied foundation, lipstick, blush, eyeshadow, and eyeliner, using some options and their respective colors that she provided, and look how beautiful and well-made-up my character turned out!

Another style I was able to give my character from the different options the game gave me.

I give my character a name and submit it to the judges for their evaluation and score.

And look! My judges loved my makeup 100/100! Wow! hehehe my own game

He gave me my unique public link for the game.

I now have my URL a web link. I'm saving it so I have the link to play again whenever I want, and even so others can try it too. Give it a try and let me know what you think of my first game made with AI from:

Bolt New

You can try the game I made with this link. https://makeup-challenge-web-wvz4.bolt.host

Thanks guys for joining me on this adventure! I hope you'll give it a try and participate in the initiative. I'm inviting @arribaeltelon @militadigital01 @zoe01 @lazzvi @yusmelys

Screenshots taken from the website Bolt New
Separator by @eve66
I used Google Translate

Saludos chicos de Hive, estoy participando en el reto de @forkyishere:

¿Por qué deberías intentar aprender más sobre IA?

Me encanta probar cosas nuevas y sobre todo las locuras que se le ocurren a @forykw así que vamos chicos, acompáñenme.

Estoy aquí @forykw ahora llegó la hora de demostrar todo mi poder IA

Acepté el reto! Elegí la segunda opción (Bolt.new) para hacer mi prueba.

Tengo una idea para lo que quiero que la IA me diseñe, elegí la segunda opción que nos da @forykw pero quería hacerlo lo mejor posible y como aquí nos dan la posibilidad de usar IA le dije a Géminis que me echara una mano.

Me encantan los temas de estética y cuidado personal, quise diseñar un prototipo de juego sencillo y divertido: un sistema de maquillaje diario donde personalizas a tu personaje y compites por el reconocimiento al mejor estilo. Un jurado de chicas evalúa tu combinación de colores y te otorga puntos. ¡Quien logre la puntuación más alta se lleva el premio al Mejor Maquillaje! ✨

Este fue el prompt que le di a la herramienta de Géminis para que me diera un prompt para colocar en Bolt New y poder realizar el juego con mayor probabilidad de que la IA me entendiera lo que le pedía :

"Diseña un juego interactivo en navegador sobre maquillaje. Debe incluir un avatar central, una paleta de cosméticos variados (labiales, sombras, rubor) que se apliquen en tiempo real, y un sistema de votación donde un jurado virtual evalúe el look diario dando puntos. Incluye un marcador de puntos acumulados para declarar a la ganadora del Mejor Maquillaje."

Este fue el Prompt que me dio Géminis IA:

Plaintext

Crea un juego web interactivo e intuitivo de maquillaje llamado "Makeup Challenge".

Características del juego:

1. PANTALLA PRINCIPAL DE MAQUILLAJE:

• Un modelo/avatar de rostro femenino estilizado en el centro.
• Un menú lateral o panel inferior con herramientas de maquillaje interactivas:
  • Labiales (diferentes tonos de rojo, rosa, nude, con brillo).
  • Sombras de ojos (paleta de colores vibrantes y neutros).
  • Rubor / Colorete.
  • Pestañas/Delineador.
• Al hacer clic en una opción o color, este se aplica en tiempo real sobre el avatar.**

2. SISTEMA DE EVALUACIÓN Y PUNTOS:

• Un botón de "Publicar Look del Día".
• Al presionarlo, aparece una pantalla de resultados donde un jurado virtual de 3 chicas virtuales evalúa el maquillaje y le otorgan corazones o puntos (de 0 a 100 puntos en total).
• Muestra un mensaje festivo si consigues una puntuación alta.

3. TABLA DE CLASIFICACIÓN / PUNTUACIÓN DIARIA:

• Un marcador global donde se acumulan los puntos obtenidos cada día.
• Si la puntuación supera los 200 puntos acumulados, muestra una insignia de "Ganadora del Mejor Maquillaje".

4. DISEÑO Y ESTILO:

• Interfaz moderna, elegante y femenina (tonos pastel, rosa, dorado y blanco).
• Diseño receptivo y fácil de usar en navegador.

Y así lo hice

Me pidió registrarme, una vez registrada me dio unos tokens con los cuales empezaría mi gran aventura de programadora. jejjee

Esperé mas o menos 10 minutos y me dio esto

Estoy probando el juego que le pedí a la IA guaooo esto es fascinante gracias @forykw

Y le coloqué base, labial, rubor, sombra, delineado con algunas opciones con sus respectivos colores que me facilitó y miren como quedó mi personaje de hermosa y muy bien maquillada:

Otro estilo que pude darle a mi personaje de las diferentes opciones que me dio el juego

Le coloco el nombre a mi personaje y le doy a enviar al jurado para que lo califiquen y me den el puntaje

Y miren a mi jurado le gustó mi maquillaje 100/100 guaooo jejjeje mi propio juego

Me dio mi enlace público único para el juego.

Ya tengo mi URL un enlace web. Lo guardo y tengo el enlace para volver a jugar cuando quiera e incluso para que otros también lo prueben. Anímate a probarlo y me dices que tal me quedó mi primer juego realizado gracias a la IA de:

Bolt New

Con este enlace puedes probar el juego que realicé https://makeup-challenge-web-wvz4.bolt.host

Gracias chicos por acompañarme en esta aventura, espero te animes a probarlo y participar en la iniciativa. Invito a @arribaeltelon @militadigital01 @zoe01 @lazzvi @yusmelys

Capturas de pantalla tomadas del sitio web Bolt New
Separador por @eve66
Usé el Traductor de Google