← Blog

Vibe Coding: Give it a try by creating a Kanban board

ux for ai training

As a UX designer with a decade of experience in strategy, research, and wireframing, I was intrigued when Greg Nudelman challenged us in the UX for AI training to try Vibe Coding the “hard” way. Instead of relying on tools like Claude and letting it do everything, he recommends diving straight into code and setting up VSCode and Python to have full control.

To ease into this new approach, I chose a familiar project: building a Kanban board from scratch.

The Goal

  • Understand how to use the Plan — Code — Test — Debug — Iterate principle.
  • Prototype quickly without overthinking.
  • Learn by doing — no tutorials, just trial and error.

The Process: Vibing My Way Through

1. HTML/CSS: The Foundation

I started with basic HTML and CSS for the Kanban columns — no frameworks, no build tools, just a text editor and a browser. Using CSS variables for a lightweight design system made it easy to tweak colors and spacing on the fly.

Lesson: Even simple CSS can create a polished UI. Tokens like --color-primary made experimenting with themes effortless.

Kanban board HTML/CSS foundation
Kanban board styling

2. JavaScript: Adding Interactivity

The LLM suggested adding a form for new tasks and using SortableJS for drag-and-drop. My first attempt accidentally made the column headings draggable (oops!). Describing the bug to the LLM gave me a working solution to integrate.

Lesson: Small bugs are just opportunities to understand the code better.

Drag-and-drop working
Drag-and-drop iteration

3. Dark Mode Toggle

I wanted a dark mode toggle, but my first attempt broke the layout. After fixing invisible text in dark mode, it worked. Now the button toggles between Dark Mode and Light Mode.

Dark mode toggle

4. Flask as the Backend

I used Flask, a lightweight Python web framework, to serve my HTML files and handle routing. This allowed me to dynamically render templates for the Kanban board and other pages, making the prototype feel more like a real application.

Lesson: Flask provided a simple yet powerful way to manage the backend, and it was easy to set up and run locally.

Flask backend running locally

What I Learned About Vibe Coding — and Some Open Questions

  • It’s okay to break things. The goal isn’t perfection; it’s learning and iterating.
  • Implementing a small design system teaches more than theory. Switching to CSS variables was simple and made it easy to tweak the entire UI with one change.
  • But will this distract me from my strengths? I learned a lot about tech, but my focus is strategy. Will this hands-on coding help or sidetrack me?
  • What’s the future of Figma? There have always been UX designers who code, but with Vibe Coding, everyone can prototype quickly. Will Figma still have a place for specific cases? I’m not sure yet.

Now, I’m applying this approach to a Health App Legal & Guardrail Assistant — a tool to help product teams check compliance with regulations like the EU AI Act or GDPR. The Kanban board was just the warm-up.