how to build INTERACTIVE websites

Why do some SaaS websites just look better than others? Why does this UI look so sharp, so crisp? What does this linear website, this cursor website, and this website that I created all have in common? They all have interactive UI right on their homepage. It's not a screenshot, it's not an image, but real text rendering, divs and components. And lucky for you, I'm going to teach you how you can do it too using Framer's agents. It's actually much simpler than you think. I'm going to show you how you can create something like this. Right on your homepage. First, we're gonna use this Sync Styles skill that I created that will instruct your Claude Code or Codex or whatever local agent that you're using to use the same exact color styles, text styles that exist in your codebase and import them into your Framer project. Then we're gonna use this Create Mock skill that will create or update this dashboard component based on a screenshot or a specific page that you'll reference in your local repo. And finally, I'm gonna teach you how you can use custom skills in Framer to create 3D interactive shapes and entirely new sections based off of screenshots for inspiration while using your existing design system. All right, let's talk about the project setup that you're going to use to be able to remix this exact component that I'm just showing you right here. Now, this full component and all of its core pieces are free for you to remix. You can do that by clicking on this Remix Template button and then clicking Copy. So before we actually get started with any sort of skill work, it's probably important to have some general understanding of how this component actually works behind the scenes so and you can be able to better instruct your agents on how to update it. This component is made up of 4 core pieces: the sidebar, the window bar, the mock header, and then the mock content component. It also has a, obviously, a mobile version of that component. And you're going to be able to edit the sidebar, for example, right here. And every tab has a different variant. And this is going to be something that you can manually edit or have your agents edit for you automatically. The mock content component, for example, has broken up all these different pieces so you can also edit as well. But the place you will actually want to make edits to the page is not here. You don't want to make edits here. What you really want to do is make edits right here. So any change— this is called a primary component, and any changes you make here cascade onto other components over here. Now there's only one exception to this rule, which is this mobile variant. Those are specific overrides that you do want to make. So these are the only exceptions to that rule. And again, your agents are going to be able to do this automatically, but again, it's, it's just important to try to get some base level understanding of how this component actually works before starting to spend some tokens, basically. All right, let's talk about the Sync Style skill, which is meant to basically turn something like this— the colors, the typography, the icons— and get them imported into your Framer project. So By default, Framer skills are gonna live in the settings and then in the skills tab right here. The Sync Style skill specifically is actually meant to be run in your local repo with like Claude Code or Codex while your Framer project is connected to it. The first thing that you wanna do is obviously have your local repo installed in your machine. And then once you have that set up, it's actually pretty easy what you'll do next. If you just type in Framer Claude Code, for example, and then you can literally like copy this prompt. It'll install everything that you need to actually connect with the project. And then you can actually just give it like literally this URL right here and then say like connect to this project. Boom. And then that should get you started so that your local agents are talking to your Framer project specifically. The next thing that we want to do is actually get the Sync Styles skill loaded into our local repo so our agent can then invoke this skill, use it, and do some things for us automatically. You can do this by literally either copying this command or copying this prompt and then pasting it into your local agent just like this. And that's going to copy this skill into your specific repo or wherever you want this skill to be installed. Once that's installed, the next thing that you can do is actually just /syncstyles, and then you can like start to give it instructions with this URL here, and then boom, you know, it'll start doing some magic. Now I've already run this. Basically the outcome of this skill was that some colors were automatically updated, some color styles were automatically created. There's a whole bunch of things that were changed that this skill was able to automate for us, and some colors were automatically updated. It was not perfect, but it was a great start and it saved us a lot of work. In turn, this right from this. So we got obviously some new typography here, we got some new colors, and then our core, you know, mock dashboard remained kind of unchanged for the most part. Yeah, that's kind of what the Sync Style skill does for you. It automates a lot of work. And now we're going to be talking about the Mock skill. I'm going to be using the Create Mock skill to actually get this page onto my mock UI component on my Framer site. Now, because I already have some styles that were synced in my local repo, I can actually just screenshot this. And then in my Framer project, I can forward slash create mock, update the mock UI component to show this homepage, add an item on the sidebar, and Create a new page default. Boom! And let's see how this skill actually works. Believe it or not, I've run this skill only a couple times. It's a work in progress. I think it's going to be very well though because of all the things that we've done so far. Nice, it looks like it's already updated this item. Beautiful. Added the active state here. Wow, look at that! I am I'm genuinely impressed. This did a really, really nice job and it's also interactive. Oh my goodness, that is so cool. Now obviously there's some things that could be improved. Like for example, this is not the official QuickBooks logo or the Xero logo, but when those icons are available, it does tend to go grab them, which I think is super cool. It seems like these are clickable as well. These are interactive. That— I mean, this is the reference, this is what I did. Now there's some things obviously I think it could have done better, which is the rounding. Seems like there's more of a rounding value here, but overall not a, not a bad first pass. Have you ever wondered how Linear does these 3D interactive shapes? Well, I'm about to teach you a skill that allows you to basically remix this and create your own 3D interactive shapes using your existing design system and color values. And so as you can see here, it's both in light mode and dark mode. And these are actually shapes that you can edit. You can like click on this and change the rounding, for example, so it's sharper, so it's more round. You could change the distance. These are actually div elements that are created by agents that you could edit yourself. And so I'm gonna show you a skill that I basically created that will help you remix different designs just like this. And if you go to settings in the skills, it's gonna be called the New Section skill. And basically all it's really saying is use existing text styles, use existing colors, reuse existing components, and that's basically it. If you duplicated the template, you should have this as well. I'm going to show you how it works on a blank project. Let's go to the demo file here that we've been working with, and let's go ahead and create a new section. So the first thing that I'm going to do is I'm going to take a screenshot of this And then I'm going to give it to my agent here. And I'm also going to give this blog post to the agent as well that basically outlines how to create these 3D interactive shapes. Framer has put this together. It's awesome. And I'm going to link that here. And then I'm also going to just forward slash new section, create a 3D interactive section based on the screenshot for inspiration. And again, it's going to use all the existing color styles. And components that we already used. Wow, it did a pretty solid job and it's making it responsive too, which I love. It's probably still going to need a little bit of love and a little bit of a human touch. Go ahead and preview this. Okay. Okay. We got some interesting interactions here. Yeah, you can go wild with the skill though. You can take inspiration from anywhere. You can go to mobbin.com, for example, And it's a library that you could basically see all sorts of different layouts and styles and typography, take a screenshot or just copy and paste it and instruct an agent to basically use your existing design system that you have already defined here in your Framer project. It's pretty sick. And special shout out to Framer for making videos like this even possible. If you like videos like this, click on subscribe and let me know in the comments what sort of videos you want to see next. God bless you and Batman out.