NeuroNest - AI Design Process
NeouroScience Learning Platform concept using AI-powered Design Process and comparing latest AI Design tools and their results.
Objective 🎯
NeuroScience Learning Platform concept using AI Design Process
AI Tools compared: Figma Make, Lovable, Google Stitch, Readdy.ai, ChatGPT 5
Tools: Figma (Design System & Tokens, Final Design, Microinteractions)
Duration: 5 days
Deliverables: Design System, Student Dashboard (Desktop+Mobile), Landing Page
Intro
People are creating amazing designs using lovable and other latest Generative AI platforms, I decided to do a deep dive on how capable the latest tools really are, and if they can achieve precisely what we expect from them. To test this, I put the latest & greatest to this test, for a NeuroScience learning platform and the objective use-case is simple:
You’ve joined NeuroNest, a neuroscience learning app designed for high school and college students (ages 15–22). The platform offers interactive lessons, gamified progress, and 3D brain visualizations. Define the visual identity and design system that will scale across this learning ecosystem while ensuring it's fun, intuitive, and accessible to Gen Z learners.
The focus on Design System makes it even more challenging, as design systems is not something AI performs best at, even if the end result is very good. Nevertheless, let's begin:
Let The Process Begin…
Research
Starting out with reading and going through relevant Design Systems: Spotify Encore & Duolingo Style.
Resources utilized:
https://spotify.design/article/can-i-get-an-encore-spotifys-design-system-three-years-on
https://www.figma.com/blog/creating-coherence-how-spotifys-design-system-goes-beyond-platforms/
https://www.btng.studio/insights/how-spotify-leverages-design-systems
https://developer.spotify.com/documentation/design
https://design.duolingo.com/writing/brand-narrative#principles
In summary, a full-fledged design system is one that:
Offers design assets, documentation, and code.
Cultivates on the other systems.
Is actively managed and controlled by a committed team.
Has a coherent interface that engineers can work with.
AI Tools
As the second step in the process, I explored the latest generative AI options for designing:
Google Stich, Readdy.ai, Lovable, ChatGPT 5, Figma Make
I used ChatGPT to enhance the input prompt to use in all these platforms. Below is the final input prompt used:
Design "NeuroNest" — neuroscience learning app for Gen Z (15–22). Theme: playful, modern, trustworthy. Core features: interactive lessons, gamified progress, immersive 3D brain visualizations. Mood: vibrant, high-contrast colours, bold sans-serif typography, smooth micro-animations, immersive UI. Visual Style & Metaphors: - Gradient blobs + soft glassmorphism panels for depth and modernity. - Subtle neuron and synapse illustrations in backgrounds. - 3D abstract shapes (spheres, waveforms) inspired by brain activity visuals. - Neon-accented outlines (electric blue, magenta, lime) for hover and active states. - Layered UI with frosted glass overlays to focus content. UI Kit: - deep purple + teal, electric blue, all WCAG contrast compliant. - Typography: modern sans-serif, with clear heading/body/caption hierarchy. Components: 1. Buttons — rounded corners, soft shadows, neon glow on hover (default, hover, disabled). 2. Text inputs — labels, placeholders, clear error/success states, subtle glassmorphism background. 3. Tags/badges — semantic colour-coded with small icon accents. 4. Lesson/quiz cards — title, short description, dynamic progress bar with % and animated fill. 5. Multi-step progress tracker OR sidebar nav — brain-themed icons, active/inactive states, hover glow. Student Dashboard (Desktop + Mobile Responsive): - Header: “Hi [Name], here’s your daily goal” + circular progress ring. - Section: Ongoing lessons — card grid with progress bars. - Widget: streak counter / badges / “Brain fact of the day” in floating glassmorphism widget. - Button to 3D brain viewer — prominent neon-accented CTA. - Navigation: bottom nav (mobile), left sidebar (desktop) — thumb-friendly icons.
Below are the AI-generated results from each tool:
Readdy.ai
Google Stitch
Google Stitch's result was disappointing to say the least.
ChatGPT 5
Lovable
Figma Make (Variation 1)
Figma Make seemed to get the prompt intention the best, so I decided to rerun it to see the type of result we can get with the same prompt.
Figma Make (Variation 2)
This was the most satisfactory result so far out of all, but none of these can be imported as Figma designs into Figma, not even Figma Make's results, so that was not an option, but I was looking to speedrun the process of brainstorming inspiration on how to layout the dashboard rather than to get the final design, and I succeeded in getting a very good idea of how I can lay things out on the dashboard.
Real-life platform referred for inspiration:
Udemy
But, left unsatisfied by the visual design of the generated results, I decided to go to the trustworthy, old & gold for design inspiration, Dribbble.
And this is where I found the designs which carry the "wow" factor both in the visual hierarchy and aesthetics.
Moodboard
The last one struck with me precisely as this was the closest of how I was imagining the design to be, modern, high quality but not reinventing the wheel in terms of UX. I decided to go with the Glassmorphic design for our NeuroScience platform as it'd also be a great opportunity to test out Figma's Glass effect capabilities.
Wireframing
So after going through the generated results and design inspirations from Dribbble, I decided to bring out the image that's been forming as a concept in the back of my head. Below is the rough wireframe I sketched out in Figma in a few mins:
Designing the Design System
Similar to the Design inspiration I finalized, I decided to go with a very unique, modern and futuristic look utilizing the glassmorphic design language with vibrant accents making it look high quality, modern, techy and engaging for the targeted GenZ. Even though the design is not very high contrast, the 4.5 : 1 ratio for text is maintained for accessibility.
And for the Typography research I again sought the help of ChatGPT, so instead of going through the list of all my favorite fonts, I shortlisted few that were suggested: Satoshi, Outfit, Urbanist.
After finalizing the font and basic colors, started with designing the token system, everything including the paddings, corner radii, spacings are according to an 8 point grid system.
After this, I designed the atomic and molecular components. And using them, the complex components like lesson cards etc. with all applicable states for buttons and other interactive components. The badges, etc used for the design visuals were also generated using ChatGPT.
High Fidelity UI
After creating the components it was time to build the high fidelity dashboard for the Gen Z students, which includes:
Welcome message with name
Fact of the day
Daily Goal
Ongoing Lessons with progress
Motivational / Gamification Widget
Access to 3D Brain Viewer
Navigation (Header Nav for Desktop & Bottom Tab Bar for Mobile)
And time for the reveal…
The Final Result
Developer Hand-off summary video (Design System):
https://www.loom.com/share/9b7fda022efc4375afe9dc1ce836d113?sid=99696bd5-dfde-4137-a9eb-00870a2115f8
Conclusion & Learnings
In conclusion we can say that Generative AI has come very far in very short time in current times and it's astonishing what it's already capable of. As this process proved, the biggest assistance AI provided in the process was reducing the time it requires to brainstorm the initial concept and figuring out the layout of things, which usually is one of the most time consuming process. But before that, you have to have the problem statements well-defined for the generative AI to come up with a solution. But the design process itself still remains mostly manual and time consuming and the AI is yet to reach prompt-level editing within existing Figma design.
Now, about the task, I adopted an atomic design approach: defining tokens for colors, typography and spacing, building simple atomic & molecular components, then assembling into complex components. From here, as per scaling requirements we can progressively expand component libraries with variants and responsive rules, create flexible templates for different feature sets (lessons, gamification, community), and integrate clear documentation in Figma and a coded component library for seamless designer–developer collaboration. We can refine further based on user feedback and update the library across the ecosystem.
Thank You for reading the Case Study
Although the design process was largely assisted by AI, the whole process journey was hand-typed as-is without any addition or help from ChatGPT.
Thanks again if you read this far.
