Vibe Coding: My AI-Powered Journey to Build a Figma Plugin That Actually Works
When manual design workflows meet AI-assisted development – a real-world experiment in efficiency
"Vibe coding" – it sounds like something you'd do at 2 AM with lo-fi beats playing in the background. But for me, it became the unexpected solution to one of our product studio's most tedious problems: transferring typography styles across multiple branded client files.
Picture this: You've got a beautiful design system called "Eve" that works perfectly for internal projects. Now you need to adapt dozens of screens for a client's brand guidelines. Every text style, every heading, every button label needs to be manually hunted down and replaced. Screen by screen. Click by click. It's the kind of repetitive task that makes designers question their life choices.
That's when I remembered Figma's custom plugin ecosystem and thought: "What if I could code my way out of this?" The catch? I'm not a seasoned developer. But I had curiosity, constraints, and access to AI tools that promised to democratise coding.
Setting the Ground Rules
Before diving in, I established two non-negotiable constraints that would make this experiment more interesting:
Constraint #1: Only free, browser-based AI tools. No premium subscriptions, no local development environments, no safety nets.
Constraint #2: Zero traditional design work. Everything had to emerge from text-based prompts. I wanted to see how far pure conversation with AI could take someone with minimal coding experience.
These limitations weren't just about being cheap – they were about testing whether AI has truly lowered the barrier to entry for practical development work.
ChatGPT and the Duality of Promise and Frustration
I started where most people do: ChatGPT. My first prompt was refreshingly simple: "What's involved and how do I create my first Figma plugin?"
The response was genuinely impressive. Clear, structured steps covering everything from software requirements to file architecture. It felt like having a patient coding mentor who never got tired of explaining basics.
Encouraged, I did what I call a "brain dump" – wrote a short essay describing exactly what I wanted the plugin to do and how designers would use it. I fed this back to ChatGPT asking it to convert my scattered thoughts into proper technical requirements.
The magic happened when I fed those refined requirements back in. ChatGPT generated the complete plugin files, and it worked. First try. I was genuinely shocked.
But then I got greedy and started iterating.
This is where ChatGPT revealed its Jekyll and Hyde personality. Simple requests would return completely broken code. I'd ask for a text label on a button, and suddenly the entire header would vanish while the button teleported to a random location. It was like the AI developed selective amnesia about everything it had just built.
The pattern became frustratingly predictable: ChatGPT would create something functional, then systematically destroy it with each iteration. After numerous attempts to salvage the codebase, I was ready for a change.
Claude Enters with a Steady Hand
When I asked ChatGPT for alternatives, Claude.ai topped the list. Starting fresh felt daunting, but the difference was immediately apparent.
Claude didn't just follow instructions – it followed them precisely. No random additions, no mysterious deletions, no creative reinterpretations of simple requests. When I asked for a feature, I got that feature.
Even better, Claude provided clear summaries of every change: "I've added X functionality, which will improve Y workflow by doing Z." These weren't just polite updates – they were genuinely useful for understanding what was happening under the hood.
The code quality was consistently clean, with errors being the exception rather than the rule. For someone learning through AI assistance, this reliability was invaluable.
The only roadblock? The free version's chat length limits meant constantly starting new conversations, which interrupted the development flow. Eventually, I upgraded to the paid version – not because I hit a technical wall, but because I wanted to see the project through to completion.
What Actually Worked and the Meta-Learning Behind It
The most valuable insight wasn't about any specific AI tool – it was about communication strategy. The breakthrough came from treating AI collaboration as a two-step translation process:
- Brain dump in natural language: Write exactly what you want in your own words, as messily as necessary
- AI-assisted requirement translation: Ask the AI to convert your thoughts into technical specifications suitable for code generation
This approach eliminated the guesswork about how to structure technical requests. Instead of struggling to write the "perfect" prompt, I could focus on clearly expressing the problem, then let AI handle the technical translation.
Tools Matter but the Approach Matters More
ChatGPT excelled at: Research, requirement gathering, and initial code generation. When it worked, it was genuinely impressive.
ChatGPT struggled with: Maintaining context across iterations, producing consistently functional code, and making targeted changes without breaking existing functionality.
Claude.ai excelled at: Following precise instructions, maintaining code quality, providing clear change summaries, and reliable incremental development.
Claude.ai struggled with: Limited conversation length in the free tier, which interrupted complex development workflows.
What This Means for Creative Work Beyond the Plugin
This experiment revealed something bigger than just plugin development. We're at an inflection point where domain expertise matters more than technical implementation skills. Understanding the problem deeply – knowing exactly what designers need, why current workflows fail, and how solutions should feel – became more valuable than knowing syntax.
The plugin I built isn't just a tool; it's proof that the barrier between "having an idea" and "shipping a solution" has dropped dramatically. For product studios, agencies, and creative professionals, this democratisation of development opens up entirely new possibilities for custom tooling.
The bottom line? Vibe coding isn't just about coding to music (though lo-fi beats definitely helped). It's about approaching development with curiosity over expertise, constraints over complexity, and clear communication over technical jargon.
The next time you find yourself doing something manually that could be automated, remember: you might be just a few well-crafted prompts away from building your own solution. The question isn't whether you can code – it's whether you can clearly articulate the problem you're trying to solve.
Now if you'll excuse me, I have some typography styles that aren't going to update themselves. Actually, wait – we have a plugin for that now!
Download now for free, Fusion’s Select by Style - Figma Plugin from the Figma Community section.
