Google Labs Makeathon
AI-powered brand and Tailwind config generation
Visual and Interaction Design
October 2024 (24 Hour Sprint)
Figma, Google Gemini API Next.JS, Tailwind CSS, Vercel
Elissa Martial (Co-designer)
Cole Gawin (Developer)
Olivia Lai (Developer)
I participated in the Google Labs Creative Makeathon, a joint effort by USC organization Spark SC and Google Labs to explore how young creators leverage AI in their process, from ideation to execution.
My team and I built a brand styling sandbox that makes visual design quick and accessible to all. It’s powered by Gemini AI, interpreting natural language descriptors like “fun” and “corporate” into a kit with typographic combinations, colors, and even UI components to demonstrate the brand in action.
Creatives on AI
Creatives' outlook on modern AI tools have evolved from optimism to skepticism over the years. While some are optimistic about its ability to disrupt creative processes, its also raised ethical questions regarding data privacy and its poential to render some roles obsolete by automating its responsibilities.
As creatives ourselves—artists, animators, UXers, game designers, developers—we're certainly in tune with our opinions on AI. Generally, we're optimistic about AI's potential to automate tedious tasks.
I'm a big fan of remove.bg — here are a few assets I've masked out with AI tools!
Creatives don't want AI to do their work.
Many concepts for AI-driven tools involve generating concepts and artwork in high fidelity, from 0 → 1. Truly useful AI tools are ones that empower designers to iterate, build, and test quickly—not to make decisions for them.
Many problematic AI-driven creative tools generate detailed visuals, often at the expense of the designer's vision. As an illustrator, I don't want AI to complete or compose my work, but rather offer options I can try and iterate through.
Empowering designers to create fast, fail fast.
Solution Ideation
I pitched a tone-defined brand kit generation idea based on my experiences at Cisco. In early stages of product development, my team was tasked with setting the tone for the visual identity of new products—we iterated screens in high fidelity, which then underwent first impressions testing.
These tests revealed that customers were characterizing the visual identity of the screens. Brighter colors read more playful, and varying degrees of playfulness influenced their trust in the product.
Sandbox Branding
We challenged ourselves to insert branding to our brand sandbox (meta, right?). Because our tool was meant to generate a brand kit, we wanted to make sure our visual identity wouldn't conflict with the output.
My co-designer, Elissa, worked on the logo/colors, while I set the tone for type and CTAs!
Building off Elissa's logo, I created cards that incorporated the individual geometric shapes for continuity.
The beauty's in the details — I worked on a loader animation to make generation time feel better.
Get Messy.
Generate styles and components in seconds. Export Tailwind configs and styles with a single click!
JUMP RIGHT IN
Mess with the radar graph to manipulate the tone conveyed by the generated brand kit.
GRANULAR CONTROL
Manual design token editing affords user control and allows for clean up post generation.
PSST... SCROLL IN THE BOX!
Speedy cross-functional product development is no easy feat.
In the spirit of the makeathon theme, we leaned into AI during our own ideation process. We used LLMs to give us idea suggestions, and we used the Google Gemini API to process the inputs the user submits and determine fonts, colors, and other styling elements based on those.
We communicated frequently and synchronously to discuss what was feasible. Elissa and I made use of Figma community Tailwind libraries to speed up our workflow and streamline front-end work, allowing for 1:1 translations of our components to development. While this was far from the first time I had worked cross-functionally, this was certainly the most hectic and fast-paced.
Due to the timeline, the implemented UI doesn't look exactly as we designed it—we made compromises to keep pace, and still produced a product true to our intended brand!
Thank you Elissa, Olivia, and Cole for their efforts! Such a grind, but we did it :)
