Ten designers met on a Friday, none of them had built a Figma plugin before, and 48 hours later they shipped Swap Wizard and won first place out of 150 teams at the Into Design Systems Hackathon. Three of them, Christoph Hellmuth (NordVPN), Raquel Pereira (Nokia) and Casandra Sandu (Trackunit), broke down the full vibe coding workflow on stage at the AI Conference for Designers 2026. This is the playbook.
TL;DR
- A team of 10 designers shipped a working Figma plugin in 48 hours with no prior plugin-development experience
- Their first move was not to open Cursor, it was to define Must Have, Nice to Have and Out of Scope before writing a single prompt
- The cost gap between a vague and a precise prompt for the same task was 500x ($9 vs almost nothing)
- They used four Cursor modes for distinct jobs: Plan, Agent, Ask, Debug
- AI skills, not one-off prompts, did the heavy lifting and stack like Legos for domain expertise
- After the hackathon Christoph released a free Figma Plugin Developer Skill that loads the Figma API into your AI agent's context once and saves tokens on every prompt
- They merged 28 pull requests in 48 hours, refactored 4,000 lines of single-file code after launch and built the marketing landing page in under an hour with Lovable
Who built Swap Wizard?
Swap Wizard was built by a team of 10 designers across multiple time zones during the Into Design Systems Hackathon. The three speakers who presented the work at the AI Conference for Designers 2026:
| Speaker | Role | Company |
|---|---|---|
| Christoph Hellmuth | Lead Product Designer, Design Systems | NordVPN |
| Raquel Pereira | Lead UX Designer, Design System | Nokia |
| Casandra Sandu | Design System Specialist | Trackunit |
None of them had built a Figma plugin before. None of them knew each other before the weekend. They won first place out of 150 teams.
What is Swap Wizard?
Swap Wizard is a free Figma plugin that swaps components between libraries when component names do not match. It scans your selection or page, fetches a new library via the Figma REST API, runs AI matching, suggests swaps and reattaches detached components by reading hidden metadata in the Figma API.
The detached-component support came from an accidental discovery. The team only noticed the detachedInfo property on Friday afternoon while reading the Figma API documentation. As Raquel put it on stage:
"That's the magic of actually reading the documentation. We wouldn't even have known to prompt Cursor to do it, because in our heads it was not possible."
Why did the team not start with prompting?
This is the part most teams skip and pay for in debugging hours later.
With AI available and the deadline ticking, the temptation is to open Cursor and start prompting immediately. The team did the opposite. They spent the first few hours of the 48-hour window doing two things:
- Defining scope by sorting every feature into Must Have, Nice to Have or Out of Scope
- Reading the Figma plugin documentation to find constraints they could not engineer around
The technical research uncovered a critical constraint: the Figma API does not allow browsing external libraries from inside a plugin UI. Catching that early saved hours of prompting AI to build something the platform does not support. They built two workarounds: a sample-component picker, and a library URL plus personal access token field.
Raquel's framing was sharp: the first prompt you write should not be code. It should be a scope decision.
How much does vibe coding actually cost?
The team showed two prompts side by side on stage.
| Prompt quality | Time | Cost | Output |
|---|---|---|---|
| Vague | 2 minutes | $9 | Low precision |
| Precise with right model | Seconds | Almost nothing | Accurate |
The same task, 500x cheaper when the prompt was clear. For designers new to vibe coding, this is the lesson that does not land until you watch a credit balance drop in real time.
The framework Raquel offered:
- Clarity: be specific about what you want
- Context: include your tech stack, goals and constraints
- Constraints: tell the AI what to avoid
Missing any of these forces the AI to guess, and guessing is what burns tokens.
Her meta-prompt move: if you are not confident in your prompting, use one AI to write the prompt for another AI. Read the structured output from the first to learn what a good prompt looks like.
What are the four Cursor modes and when to use each?
Casandra walked through Cursor's mode system on stage. Picking the right mode for the job saves tokens and produces better output.
| Cursor mode | Use it for | Why |
|---|---|---|
| Plan | Scoping an idea before coding | Cheapest place to discover what you don't know |
| Agent | Building when you know what you want | Reads files, writes code, executes tasks |
| Ask | Learning, validating decisions | Explanation, not code generation |
| Debug | Finding root causes of bugs | Generates hypotheses, adds logs, narrows down |
Casandra's rule of thumb: use Plan mode early to spend cheap tokens on questions. Save the expensive tokens for Agent mode when you actually know what you are building.
When the team hit a bug they could not diagnose (some components in a dropdown were showing their properties instead of the component name), Casandra switched to Debug mode and only provided a single screenshot. Debug mode generated hypotheses, added temporary logs and narrowed the root cause without burning tokens on trial-and-error fixes.
How do you debug when AI keeps introducing new bugs?
Christoph called this vibe debugging, and he opened with a description every vibe coder will recognise:
"In the first hour you are polite, everything is going well, you talk to the AI, say please and thank you. Then first bugs get introduced and 10 hours later you are still working on the same feature, in the loop, telling the AI please fix it, it introduces a new bug, you tell it please fix that, and after 10 hours you are really, really frustrated and getting rude with the AI."
His four rules to break the loop:
- Commit working code before every change. Roll back in seconds if something breaks catastrophically.
- Go step by step. Build one feature, test it, commit. Do not stack five features on an unverified change.
- Give the AI more context, not more prompts. A screenshot, the actual error message, console logs. Each piece reduces the AI's guessing budget.
- Ask for debug logs. Have the AI add temporary logging, then copy the output back to it. The single highest-leverage move when stuck.
The mindset shift that landed for me: identifying the bug is 80% of the work. Designers are already good at the first 80%. The AI can do the fix if you hand it the diagnosis.
What is an AI skill and why is it more than a prompt?
A prompt is a one-time instruction. A skill is a structured, repeatable capability for an AI agent.
Christoph defined a skill as three components:
| Component | What it does |
|---|---|
| Trigger | When should this skill execute? |
| Instruction | What should it do, step by step? |
| Tools | Code snippets the AI can run instead of generating fresh ones every time |
Skills are modular, plug-and-play and stackable. You can combine an accessibility skill with a Figma plugin skill to get an agent that handles both. A good skill turns a generalist AI into a domain expert for one task.
How to install an AI skill
- Download the skill file (usually
.mdor text) - Find the skills directory for your IDE (Cursor, Claude Code, Codex)
- Drop the file into that directory
- Call it with
/skill-nameinside your AI agent
Security warning before installing any skill
Christoph added a warning more people need to hear. Skills are powerful, and a malicious skill could include prompt injection, leak API keys or modify your Git history. Always read a skill by hand before installing it. For extra safety, paste the file into Claude and ask for a security review.
His trust hierarchy: skills from Anthropic and well-known sources are safer than random ones from social media. Trust, but verify.
The free Figma Plugin Developer Skill
After the hackathon, Christoph released a free Figma Plugin Developer Skill on GitHub. It loads everything an AI agent needs to build a Figma plugin correctly from the first prompt:
- Plugin architecture best practices
- Clear references for the Figma API
- Manifest JSON structure
- Performance optimizations
The effect: instead of the AI constantly re-querying the Figma API and burning tokens on every prompt, the skill loads once. Every prompt about your plugin is more accurate and cheaper from then on.
If you are building a Figma plugin, installing this skill is the highest-leverage first step you can take. Read it through once before installing.
The refactor nobody talks about
After 48 hours the team had a working prototype. They also had 4,000 lines of HTML and JavaScript in a single file that only the AI could understand.
This is the part of vibe coding that does not show up in demos. They knew they could not release the plugin in that state. Any new feature would risk breaking everything, and they could not debug it confidently. So after the hackathon they took time to refactor.
The refactor itself was also done with AI. Using the Figma Plugin skill and best practices, they untangled the single-file mess into a proper file structure with clean architecture. Same plugin, dramatically more maintainable, much easier to add features without breaking the rest.
The lesson: a working prototype is not a finished product. Vibe coding gets you to the prototype fast. The refactor is where you pay back the debt the speed created.
How they built a landing page in under an hour with Lovable
Once Swap Wizard worked, the team wanted to launch it properly. They built the landing page with Lovable in under an hour.
The trick: they did not start from scratch. They took the existing CSS and HTML from the plugin UI and fed it to Lovable as a style guide. Lovable used the plugin's visual language as a brand book and generated a coherent landing page in the same style. About ten prompts later, they had a published page.
Two extras Lovable offered that the team used:
- An email signup form
- An optional database backend through Supabase
Both worked from a few extra prompts.
The principle: once you have built a UI, you already own a small brand system. Reuse it everywhere. Landing pages, slides, marketing material.
Publishing to the Figma Community: what designers skip
Christoph closed with the publishing step that gets ignored most often. When you publish a plugin in Figma, you get one shot to set up discoverability.
| Step | What to do |
|---|---|
| Pick the right category | Filtering happens here |
| Add real keywords | Search terms designers actually type, not buzzwords |
| Fill in the data security section | Enterprise customers cannot install without it |
| Test the install flow | Use a clean Figma account to verify |
If you are shipping a plugin to the Figma Community, treat the publishing form as part of the product, not paperwork at the end.
The line that summed up the whole session
"Every minute you spend planning before prompting will save you an hour of debugging." Raquel Pereira, Nokia
The team's win was not about being better at AI. It was about being disciplined with the cheap part of the work (planning, scoping, research) so that the expensive part (token usage, debugging loops, refactoring) stayed manageable.
Key takeaways for designers shipping with AI
If you want to apply the Swap Wizard playbook to your own AI build, here are the moves to copy this week:
- Spend the first 10% of any AI build budget on scoping. The Must Have, Nice to Have, Out of Scope frame is portable to any project
- Use Plan mode first in Cursor, it is the cheapest place to discover what you do not know
- Commit before every meaningful change, vibe coding without rollback is a slow-motion crash
- Always provide a screenshot or log when reporting a bug to AI, "identifying the bug is 80% of the work" reframes your whole debugging mindset
- Install Christoph's Figma Plugin skill before starting any plugin
- Read every skill before installing it, then ask another AI to review it for safety
- Reuse your plugin UI as a brand book for landing pages and marketing material
Frequently asked questions
Can designers build a Figma plugin without coding experience?
Yes. The Swap Wizard team had no prior plugin-development experience and shipped a working plugin in 48 hours. The combination of Cursor's mode system (Plan, Agent, Ask, Debug), AI skills and discipline around scope makes plugin development accessible to designers.
What is vibe coding?
Vibe coding is the practice of building software primarily through natural-language prompts to an AI agent, with the human acting as architect and reviewer rather than typing every line. It works well for prototypes and becomes reliable when paired with scope-first planning, the right tool modes and reusable AI skills.
What is the difference between Cursor's Plan mode and Agent mode?
Plan mode asks clarifying questions and produces a structured plan before any code is written. Agent mode reads files, modifies code and executes tasks. Use Plan first to spend cheap tokens on scoping questions, then switch to Agent when you know exactly what you are building.
What is an AI skill in Claude or Cursor?
An AI skill is a markdown file with a name, description and instructions that an AI agent loads automatically when relevant. Skills are reusable, can include code snippets and references and stack with other skills. They turn a general-purpose AI into a domain expert for a specific task.
How much does vibe coding cost?
It depends entirely on prompt quality. A vague prompt cost the Swap Wizard team $9 over 2 minutes. A precise prompt with the right model cost almost nothing in seconds. The same task, 500x cheaper. Tokens are real money. Clear, specific prompts protect your budget.
Which AI tools work best for building a Figma plugin?
Cursor for the plugin code (paired with Christoph Hellmuth's free Figma Plugin Developer Skill). Claude for UI generation and prompt refinement. Lovable for the marketing landing page. Each tool has a specific sweet spot in the workflow.
Is there a free template for building Figma plugins with AI?
Yes. Christoph Hellmuth released a free Figma Plugin Developer Skill on GitHub after the hackathon. It loads the Figma API, plugin architecture and best practices into your AI agent's context once, saving tokens and preventing common bugs from the first prompt.
How do you avoid the AI loop when debugging?
Apply vibe debugging: commit before every change, go step by step, give the AI more context (screenshots, error messages, logs) instead of more prompts, and ask the AI to add debug logs that you then copy back to it. Identifying the bug is 80% of the work; the AI can do the fix.
Watch their full session
The complete session, including the live Swap Wizard demo and the architectural walkthrough, is on YouTube:
The full recording with FigJam board, resources and Q&A is part of the AI Conference for Designers 2026 Recordings, alongside sessions from WhatsApp, Atlassian, Miro, Figma, Adobe and top design teams shipping AI features today.