DesignSpark — Never Stare at a Blank Figma Canvas Again ✨

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

DesignSpark is an AI-powered UI/UX design challenge generator that I built for a friend who is learning UI/UX design.
One of the biggest problems she faces isn't knowing how to design.
It's knowing what to design.
Sometimes you open Figma, create a new blank frame, and then spend more time thinking:
"Okay... but what should I actually make?"

That's where DesignSpark comes in.
Instead of generating a complete UI, DesignSpark gives you a realistic design problem to solve yourself.
You choose:

• 🎯 A design category
• 📊 A difficulty level And DesignSpark generates a structured design challenge containing things like:
• A realistic problem
• Target users
• User scenario
• Design objective
• Design task
• Constraints
• Edge cases
• Things to think about
• Suggested number of screens For example: Category: Healthcare Difficulty: Intermediate

Challenge:
Design a medication management experience
for elderly users who take multiple medications
throughout the day.

Target User:
Adults aged 60+ managing daily medication.

Constraints:
• The experience should be easy to understand.
• Consider accessibility and readability.
• Handle missed medication scenarios.

Edge Cases:
• A user forgets a dose.
• Medication schedule changes.
• Multiple medications have overlapping times.

The important part is that DesignSpark doesn't design the solution for you.
It gives you the problem.
You bring the creativity. We bring the challenge. ✨

Demo

Live Demo:DesignSpark
Demo Video:VideoDemo

Code

GitHub:Github Repo

How I Built It

The core stack is:
Frontend

• React
• TypeScript
• Vite
• Tailwind CSS
• React Router
• Lucide React
• Framer Motion Backend
• Node.js
• Express.js
• Zod
• CORS
• dotenv AI The most important part of DesignSpark is Gemma 4. I use the open-weight Gemma 4 model through Google's API to generate the design challenges. The architecture looks like this: DesignSpark │ ▼ React + TypeScript │ │ category │ difficulty ▼ Express.js Backend │ ▼ Challenge Prompt │ ▼ Gemma 4 │ ▼ Structured Challenge │ ▼ React Challenge UI

I deliberately kept the AI on the backend rather than calling it directly from the frontend so that the API key isn't exposed to the client.
The backend also validates the user's category and difficulty before sending the request to the model.
The AI's role
I wanted to avoid building another tool where AI simply creates a UI and the human watches.
Instead, Gemma acts more like a design challenge mentor.
The prompt tells the model:

• Don't generate HTML/CSS.
• Don't generate code.
• Don't create a wireframe.
• Don't specify the exact UI layout.
• Don't solve the design problem.
• Give the designer enough context to solve it creatively. This means the AI provides the starting point, while the human still does the actual design work.

Why Does Open Innovation Matter?

For DesignSpark, open innovation is important because the goal isn't just to use AI — it's to use AI in a way that keeps the human creative process at the center.
A closed AI system could generate a complete interface for the user.
But that's not what I wanted.
I'm building DesignSpark for someone who is trying to learn design.
If the AI creates the entire solution, she doesn't get to practice the skills she's trying to develop.
Using an open-weight model like Gemma lets me build an AI-assisted workflow where the model provides structured challenges while the designer remains responsible for the creative decisions.
It also gives developers more freedom to experiment with how AI is integrated into applications rather than treating AI as a black-box feature.
For DesignSpark, open innovation makes it possible to explore a different question:
What if AI didn't replace the creative process, but helped people start it?

That's the idea behind DesignSpark.

My Agent Session

I used an AI coding agent during development to help structure the Express backend, integrate the Gemma 4 API, and improve the project architecture.

Prize Categories

• Gemma — Gemma 4 is the core AI model powering DesignSpark's design challenge generation.
• Render — The DesignSpark is deployed on Render .