DEV Community

Aref
Aref

Posted on

Animalette, nature's palettes, reimagined.

#devchallenge #googleaichallenge #ai #gemini

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

Animalette is your window into the original design source: mother nature. Choose your animal or species and you'll get not just the color palette of that animal but also a suggested mockup using the same color palette. Save your palettes into your personal library, copy hex codes and more.

Demo

CloudRun App: https://animalette-988799610421.us-west1.run.app/
Demo: https://share.cleanshot.com/jNHYKK0P

How I Used Google AI Studio

This is a multimodal approach to Google AI capabilities, including Image Generation (Imagen and NanoBanana), Search, And Generative AI. User can choose an animal from existing library or search for a new one, Generative AI and Search provides a profile palette of that animal and the possibility to get a mockup design leveraging the color palette.

Multimodal Features

  1. Parallel Text-to-Image and Text-to-Structured-Data Generation What I built: When a user provides the name of an animal (text input), the application makes two simultaneous API calls to different Gemini model endpoints: Text-to-Image: It sends a carefully crafted descriptive prompt to the imagen-4.0-generate-001 model to generate a high-quality, photorealistic image of the animal. This provides immediate visual context. Text-to-Structured-Data (JSON): Concurrently, it sends a more analytical prompt to the gemini-2.5-flash model. This prompt specifically requests a color palette analysis and, by defining a strict responseSchema, forces the model to return its findings as a clean, predictable JSON object. This object contains arrays of primary and secondary colors, each with a name, hex code, and a description of where it's found on the animal. Why it enhances the UX: Efficiency: Running these requests in parallel significantly reduces perceived latency. The user receives a complete, rich dataset (both image and data) in the time it takes the longest single request to complete. Contextual Richness: This approach instantly connects the abstract (color data) with the concrete (the animal's image). Users can immediately see the "Vibrant Orange" in the clownfish's stripes or the "Deep Indigo" in a peacock's feather, making the palette more meaningful and memorable. It answers not just "what colors?" but also "why these colors?".
  2. AI-Generated Output as Creative Input for a Second AI Task What I built: The "Palette in Action" feature is a prime example of a chained AI workflow. First, we get the JSON color palette from Gemini as described above. Then, the application uses this structured data to dynamically construct a new, highly specific prompt. This prompt instructs imagen-4.0-generate-001 to design a modern website UI mockup, explicitly commanding it to use the exact hex codes from the generated palette. Why it enhances the UX: Bridges Inspiration and Application: This is the most powerful feature for our target audience of designers and creatives. It takes the generated palette—which is still somewhat abstract—and immediately demonstrates its practical potential in a real-world context. It answers the user's next logical question: "This is a beautiful palette, but what can I do with it?" Sparks Creativity: By providing a tangible design concept, it kickstarts the user's own creative process. It's a powerful tool for overcoming "creative block" and makes the entire experience feel more valuable and complete.
  3. Generative UI and Visualizations What I built: Beyond static images, the application uses the generated color data to create dynamic, on-the-fly visualizations: The "Blend" gradient is a simple but effective way to see how the colors interact. The "Creative Canvas" component generates a unique, abstract piece of art using the palette. It algorithmically creates layered, flowing shapes filled with the palette's colors, ensuring a different artistic result every time. Why it enhances the UX: Aesthetic Delight: These features add a layer of polish and "magic" to the experience. They make the application feel more interactive and visually engaging than a simple swatch display. Emotional Connection: The "Creative Canvas" in particular provides a more emotional, artistic interpretation of the color data, appealing directly to the creative sensibilities of the user base.

https://share.cleanshot.com/SF8QTRtV

Submission: @aref_vc (Twitter)

Top comments (0)