Building an AI-Powered Portfolio: A Conversation with Raksha
Lucas
Community Manager
We sat down with product designer Raksha to discuss how she built a stunning, interactive portfolio using Figma, MagicPath, and Cursor — without writing a single line of code from scratch.
Building an AI-Powered Portfolio with Raksha
Video Timestamps
Jump to any section of the conversation
Meet the Creator
Raksha is a product designer based in India with a background in animation and branding. Like many designers, she had deep experience crafting interfaces in Figma but had never implemented code herself.
"I've primarily been design-centric," Raksha explained. "I've never actually implemented code or gotten into that side of things. But I wanted to test my capabilities. We have so many tools now, and I wanted to see what's going on in the market."
The Project: An Interactive "Chat" Portfolio
Raksha's goal was to solve a common problem with designer portfolios: the "wall of text." Case studies are often long and dense, making it difficult for recruiters or clients to quickly get the information they need.
Instead of forcing visitors to read through lengthy case studies, Raksha integrated a functional AI chat interface directly into her portfolio.
How the chat portfolio works:
- -Suggestion pills — quick-start questions for visitors who don't know what to ask
- -Trained persona — the AI is trained on Raksha's personality, professional history, and project details
- -Contextual awareness — visitors can drag and drop project cards to ask specific questions about them
"I wanted to give people the option to quickly get an overview of these case studies and kind of 'interview' me... without really having to talk to me or read a lot of text."
— Raksha
The Tech Stack & Workflow
What makes this project truly impressive is the workflow Raksha established. By leveraging a suite of modern AI tools, she moved from design to deployment seamlessly.
Figma
Design and iteration. Raksha started with wireframes and refined the UI until it was pixel-perfect.
MagicPath
Converting Figma designs into clean, responsive frontend code — including responsive mobile layouts from a single prompt.
Cursor
AI-powered code editor used to integrate the OpenAI API and handle the chat backend logic.
Vercel
Automated deployment directly from the GitHub repository — push code and it's live.
The process began in Figma, where she iterated on the design multiple times. Once satisfied, she moved to MagicPath.
"I took the design into MagicPath and started to translate my designs made in Figma into code," she noted. A key highlight was MagicPath's ability to handle responsive design effortlessly. "I created a component... and within one prompt it was able to create a responsive mobile version for me."
Deployment Made Simple
For the backend logic and AI integration, Raksha used Cursor. She connected her OpenAI API key to power the chat interface, training the model on her own professional background.
"If you connect your GitHub to Cursor, it will push all the code into your GitHub... Once you do that, you connect your Vercel to your GitHub and then it deploys. You don't have to open GitHub again."
The Future of Design: "Implementation Buddies"
Reflecting on her experience, Raksha shared some insightful thoughts on the role of AI in the creative process. She doesn't see AI replacing designers, but rather augmenting their ability to build.
"I don't think that AI tools can fully design. But I think they're like really cool buddies that can help you implement. I look at it as an implementation-first process."
— Raksha
She emphasized that tools like MagicPath act as a bridge, allowing designers to maintain creative control — "Taste comes with design" — while removing the technical barriers to implementation. The design stays yours. The code writes itself.
Ready to build your own magic?
Join the MagicPath community and start turning your designs into production-ready code today.