I can't code and I'm not a designer. But I managed to create this cool, interactive website with Figma's new prompt-to-code tool. Lessons learned from my explorations in "vibe designing" 👇

To start: Make is Figma's new AI-powered design tool. You chat with an LLM (Claude Sonnet 4), and it writes code and then renders designs for you. It does a lot more than websites - but that's what I tested. It's available to all users on paid plans. Now for the learnings ⬇️

Opening with a reference design REALLY helps. I went back-and-forth with the LLM about what constitutes "cool" vs. "cringe" until realizing I could attach a Figma file or photo. Browse the community if you don't have your own! I ended up using this restaurant flyer.

I kickstarted the design with text prompts. Once you get going, you can also edit specific components in the traditional Figma interface using "point and edit." You can make some changes directly (e.g. size of text, color) and also prompt changes that point to a component.

Speaking of prompting, I was surprised by how many cool interactions I could create by just asking for them. Everything you see - the emojis popping out, the cards flipping up, the words that appear when you hover - was prompted. I had a good dialogue going with the LLM!

The most interesting part was when I wanted to make a photo album, but my images kept getting deleted. I realized that Figma Make doesn't have a backend database. The LLM walked me through how to upload my photos to Imgur and then edit the required file in the codebase. When I was confused, it updated the interface to provide even clearer directions 😂

What I'd love to see in the future: 1) A fun way to inspire your design aesthetic (e.g. "Tinder for designs" where you reveal preferences via swiping). 2) More drag-and-drop editing. It would be great to be able to move things this way instead of by prompting! 3) An easier way to gauge if your design will work for both desktop and mobile + make changes if needed. 4) Condensing past history once your chat gets beyond a certain length so it doesn't get too slow.

And finally, the sci-fi dream: 5) Integrating other generative models so that you can add more dynamic or even interactive features. Like this pixel version of me made with @krea_ai, animated with @LumaLabsAI, and voiced by @elevenlabsio. Imagine if you could chat with her!

I'm excited to dive more into "vibe designing" over the next few months. As someone who can't use traditional design products, I'm pumped for tools that help more people make cool (and functional) things. Reach out if you're working on something here - DM or [email protected] 👋

@figma Can she code or is it just Claude???

@figma It’s Claude