Bringing the design to life with AI
This project was meaningful to me. It was also an
experiment to turn my design into a real product using AI tools.
After finishing the design in Figma, I connected Cursor to
Figma via MCP so it could read the design directly. Then I explained the site's
purpose, how it should function, and the scroll-based interactions, using Grok
4.6 as the model in Cursor to translate that into code.
I found it worked better to build the website section
by section. This way, I didn't ask AI to do everything at once. I began with
the hero section. I wanted the photo frame to slide onto the screen. Then,
it should pause, as if a photo was being taken, before flipping to show the
back of the postcard.
I continued building the rest of the website in the
same way, step by step. Then I explained the postcard creation flow and
added the design.
Most of the time, Grok was close to my ideas. It
didn’t always get things right, though. Sometimes, I had to point out what
was missing or needed changing. Other times, I struggled to explain what I
wanted. That’s where Claude came in. I could share my goals and ask how to
frame them as prompts. This helped me turn my ideas into clearer
instructions for AI.
I set up Resend to handle sending emails, and verified my
own domain so emails wouldn't land in spam. With Grok's help, I got the whole
email flow working, including showing the postcard images right inside the
email.
Since Cardfolio is still a test project, I haven't bought
a dedicated domain for
it yet, so emails currently go out from my personal site's domain instead. Don't
be surprised if you see it!
It took me several days, but turning an idea from
Figma into a working product was exciting. Without today’s AI tools, this
project might have taken months or stayed at the prototype stage. Instead, I
could build it in around 1–2 weeks and share it with you.
What AI helped me with
- Keeping the same visual language across components and pages, since it
worked from the design style I uploaded and could suggest and build within
it.
- Making the website responsive without designing every screen myself. It
adapted layouts on its own, and I only fine-tuned where needed.
- Seeing my design as a real product almost immediately, which made it much
faster to spot issues and fix them directly.
- Most importantly, turning what could've taken a small team months into
something I built on my own in 1-2 weeks.