So, the other day I was putting together a short talk about UX and its role in the delivery pipeline. Nothing fancy – just wanted to highlight how good tooling can speed up development, especially when UX is heavily considered from the very beginning.
Now, I wanted to make the slides feel a bit more fun, interactive, and on-brand for what I like to do. And then it hit me – why not just use Figma? After all, it’s a tool I already know inside out, it allows total design freedom, and (bonus!) it supports slide presentations pretty decently. So I went ahead and built my slides right in Figma.
They were partly about using Figma designs and Dev Mode features to speed up software development. Which is when I had the second “oh wait a second” moment: if I’m trying to convince people that Figma can help build faster, wouldn’t the best way be to… actually do it?
So, I took my own medicine.
Copy-Paste Is a Feature
It turns out converting Figma slides to a proper design file is ridiculously simple: just copy-paste. Done. Step one, completed in seconds.
Of course, the slides were built with fixed width and height, which made sense for presentation but not for responsive web. So I had to readjust them a little – loosen up the rigid sizing, make them stretch and breathe more like a proper webpage.
Then I flipped on Dev Mode and pulled in some code generation plugins. I played with Figma to Code and AutoHTML, and I also peeked at FireJet, but passed on it since it’s a paid tool.
And just like that, I had some rough layout code in my hands.
Hello Svelte, My (Less Complicated) Friend
Here’s the thing: we’ve been slowly warming up to Svelte, but haven’t yet figured out how to really bring it into our UX pipeline. We’re used to React, and for React we already have things nailed down. Svelte? Not so much.
But that was the perfect excuse to run another experiment.
I used Windsurf’s AI agent to spin up a fresh Svelte project with Tailwind CSS. The agent handled it surprisingly well – with just a few commands and a bit of back and forth, I had a clean, Tailwind-enabled Svelte setup ready to go.
One major reason for picking Svelte in this case: it’s closer to vanilla HTML, which works much better with auto-generated code. React tends to lean heavily on component libraries, which adds extra complexity when converting from design. I think React + Tailwind could’ve worked too, but Svelte just felt lighter and faster for this one-off case.
AI, Fix My CSS Please
Once I had the layout in code form, I noticed some weird bits. Figma’s code generation didn’t handle everything perfectly – no surprise there.
- Images were missing (just placeholders), so I had to swap them manually.
- One slide had a half-transparent background image layered with a gradient – the generated CSS tried to apply them separately and broke the layout.
But Windsurf’s AI agent stepped in and sorted it out. After that, things looked exactly how I wanted.
I added some super basic navigation – just “next” and “back” buttons to flip through the slides – with a bit of help from the agent again. It wasn’t a big part of the project, but enough to make the whole thing feel functional.
And with that, I was done.
From Slides to Page in Less Than an Hour
Once I got past the initial tooling fiddling (about 30 minutes), it took no more than 15 minutes to get the whole thing into a working state. And that’s without any prior setup or templates. With a bit more practice, I could probably get it done even faster.
And while I didn’t use the resulting webpage in the talk directly, I did reference the experience as a real-life example of how effective this workflow can be.
Key Takeaways
- AI-assisted design-to-code workflows are getting really fast. With tools like Windsurf and Figma’s Dev Mode, you can go from design to working prototype faster than ever.
- Design with code generation in mind. The biggest issues weren’t with the tools – they were with the design choices I made. Layouts with complex effects or rigid dimensions were harder to convert.
- Free tools are good enough – for now. I avoided paid solutions, and still got something workable. But I suspect premium tools will become more worthwhile as this workflow matures.
- Great for full-stack devs. If you don’t usually work with Figma or front-end tools, this kind of setup lowers the barrier quite a bit. Especially with AI helping you through the rough patches.
And hey, I got to prove my own point while preparing the slides to prove that point. Can’t ask for more than that.