Overview
IdeaSynth 💡 is a micro-app that blends design intuition with AI creativity.
It’s a one-screen web tool that turns simple prompts into “sideways ideas” , playful, unexpected associations that push creative thinking.
Built using Figma Make → React → Vite → Tailwind → Vercel, IdeaSynth reimagines brainstorming as something visual, interactive, and delightful.
My Role
Product Designer & Front-End Creator
Concept ideation and visual design in Figma
Generated front-end structure using Figma Make
Implemented UI and logic in VS Code (React + TypeScript)
Styled and prototyped with TailwindCSS
Deployed on Vercel for a fully responsive live demo
The Challenge
Translating Figma Make code exports required structural clean-up — learning how auto layout translates to React components.
Improved understanding of component responsiveness and how Tailwind handles cross-device sizing.
Experimented with creating gradients and hover animations that felt “alive” yet minimal.
Strengthened ability to think both as a designer and a front-end problem solver.
Workflow
Concept & Sketch: Defined the intent, an AI companion for creative sparks.
Design & Structure: Built the layout and component system in Figma.
Code Integration: Used Figma Make to convert visuals into React, refined with custom logic.
Deploy & Test: Published on Vercel and optimized for responsive performance.
UI Design Decisions
I wanted IdeaSynth to feel light, focused, and a little bit magical, like a digital notepad that sparks ideas instead of just listing them.
Layout: A simple vertical flow that keeps focus on the idea box and button. Lots of breathing room, no clutter, no distraction.
Typography: Stuck with Inter for everything — clean, flexible, and confident. It lets the ideas shine, not the interface.
Color & Mood: A soft off-white base with a gradient accent that hints at creativity. The button glow adds that subtle “AI spark” feeling.
Motion: Tiny hover animations make interactions feel alive without being flashy.
AI Logic
IdeaSynth interprets single words and returns reimagined phrases, like a human brainstorming partner with a twist.
If the user enters “notebook,” IdeaSynth might return “analog idea keeper” or “paper memory vault.”
It uses a random selection mechanism now, but the structure is ready for future API integrations (like GPT-4 or HuggingFace) to enable real-time idea synthesis.
Outcome
A functional, aesthetic AI idea generator that redefines creativity through simplicity.
It’s fast, intuitive, and shows how design and AI can collaborate to enhance imagination — not replace it.
Next Steps
Integrate AI models (GPT or HuggingFace) for real contextual idea remixing
Add “Save & Share” functionality for generated ideas
Introduce sound or micro-motion feedback during idea synthesis
Explore multi-theme modes (Creative / Calm / Chaos)
Key Takeaway
IdeaSynth is a small experiment with a big purpose — showing how AI can become a design partner in idea exploration, not just an automation engine.
