Practical AI: Building a Framer Component with Cursor
Inspiration
I was listening to the Dive Club podcast and one of the guests, Tommy Smith, shared his portfolio. It had a table of contents that highlighted where you were on the page as you scrolled. Simple, but it felt really intentional. I wanted that.
You can actually see it in action right now. It's that floating navigation in the bottom left corner of this page is the component.
Why I Made It
I've been spending a lot of time on design Twitter lately and honestly it's been messing with my head a little. It's a bubble, I know that, but the conversation about AI replacing designers is constant and it's hard to ignore. What started as background noise has turned into something I think about pretty much every day.
I'm not anxious about it though. I'm trying to use it as fuel. The industry is moving fast and I don't want to be the person who watched it happen from the sidelines. There wasn't one specific moment that pushed me to act. It was more like I'd spent so much time reading articles, watching videos, and scrolling through threads about AI and design that I eventually got sick of consuming and needed to actually try something.
So I started small. Something I could actually tackle at night after my day job. A component I could build, use immediately, and learn from.
How I Made It
I used Cursor with Claude as the agent. I was pretty specific from the start — I told it the output needed to be a Framer component and that I wanted to control things like spacing and timing directly from Framer's property panel without touching code every time.
Being upfront about those requirements made a big difference. The first output was already close to usable.
Challenges
Scroll behavior was the main headache. Early versions were interfering with how the page scrolled — things firing at the wrong time, conflicting with Framer's own scroll handling.
What actually helped was just describing what I wanted in plain language. Instead of trying to fix specific lines of code I'd say something like "my desired behavior is..." and let the agent figure out the implementation. That approach worked way better than I expected.
Getting the animation feel right took some work too. I used easing.dev to find the right bezier curves and gave those values directly to the agent. Having something concrete to point at instead of saying "make it smoother" got it dialed in pretty quickly.
