The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
I had never written code before... and here I am, sharing my very first AI-built project ✨
I'm just beginning my vibe coding journey, and this interactive photo gallery became my first experiment.
Inspired by my own experience as a mom, I created a gesture-controlled gallery dedicated to a baby's first year. Users can navigate through monthly memories, open photo cards, watch short videos, and read little messages from a mom about those precious moments.
✨ Built in 2–3 days
✨ Tools: Claude, MediaPipe, and Figma Make
✨ My first vibe coding project
Was it easy? Not at all. There were failed ideas, broken prototypes, and plenty of learning along the way 😅 But every attempt brought more confidence and a better understanding of how AI can help turn ideas into reality.
The project isn't perfect, but seeing it work almost exactly as I imagined felt incredibly rewarding 💛
Feel free to test it out and share your thoughts, feedback, and suggestions! https://memorable-first-year.figma.site
#VibeCoding #UXDesign #ProductDesign #FigmaMake #MediaPipe
This is so nice to see someone fulfilling their dream - the first coding experience! Congrats, Anastasiia! 😍 🚀
Thanks❤️
This is absolutely incredible! Going from zero coding experience to building a gesture-controlled interactive gallery with MediaPipe in just a couple of days is mind-blowing. AI truly is a superpower for creators. Major congratulations! 🪄✨
Thanks!) I’m truly excited✨
This is pure inspiration 🚀🌿
Thanks🥰
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Figma Make isn't just a prototyping tool. I used it to ship a Claude-powered design system generator.
Most designers treat Figma Make as a quick vibe-coding sketchpad. I wanted to show it's something deeper — a full vibe-coding platform that integrates with external APIs.
The connection nobody writes about
There are three ways Claude connects to Figma today. Figma MCP — Claude reads and writes Figma files via MCP server. Figma's built-in AI — Figma calls its own models internally. And mine — a React app inside Figma Make that calls Claude API directly from the browser. Claude responds to the code, not to Figma. Figma Make is the hosting.
The new pipeline
Old approach: get brandbook and references from client → generate moodboard → align → write prompts for UI Kit. Separate steps, human in the center every time.
My approach: collapse all of that into one step. Run an AI analysis and output structured data — input for machines, not a result for humans.
We don't ask AI how the brand looks. We run an MRI on it and get structured data that machines use to build code.
What gets generated
11 files, all consistent with each other because they share one analysis. For Figma specifically:
tokens.json — W3C DTCG 3-tier format (primitive → semantic → component), imports directly into Figma Variables via Tokens Studio or Figma Make prompt
design-system.css — all tokens as CSS custom properties, ready to import
starter.tsx — paste into Figma Make, full design system renders instantly
figma-make.md — session context, paste once and the AI knows the entire design system
Add a content plan on top — generate a full design in one run with minimal token spend.
The entire tool was built and shipped inside Figma Make. No external hosting. No separate codebase.
#ConfigMakeathon #FigmaMake #DesignSystem #VibeCoding #ClaudeAPI #BuildInPublic
tNot gonna lie, I opened this out of curiosity and left with more questions than answers 😅 But that's usually a good sign. Really interesting exploration of what design workflows might look like in the AI era. And by the way, this link doesn't work figma-make.md
📖 Public Diary — A page from someone's heart.
For the Omma Buildathon, I created an interactive emotional storytelling experience where people can anonymously share thoughts, dreams, memories, gratitude, and life lessons.
I wanted to explore how a simple digital space could encourage reflection and human connection through stories rather than likes and followers. Built in Omma using interactive elements, custom design, and Omma-generated assets.
#Omma #Spline #Buildathon #WebDesign #InteractiveDesign #CreativeCoding #UXDesign #Storytelling
This intuitive, empathetic and thoughtful. I want to use this.
I found an old concept website I designed for BoomBox back in 2021.
At the time, I was working on a Late 2011 MacBook Pro that could barely survive Figma prototyping 😅
Every interaction lagged.
Every animation stuttered.
Every prototype felt like a small battle between me and my laptop.
Looking back, I can see a hundred things I'd improve today.
But I can also see something else:
I was already experimenting with bold typography, motion, and creating an experience rather than just arranging screens.
Sometimes it's fun to revisit old work.
Not to judge how far you still have to go, but to remember how far you've already come.
Curious:
What's the oldest project you're still proud of?
woow, cool work!🔥
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?