{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/blog/teaching-vibe-coding-to-designers",
    "result": {"data":{"markdownRemark":{"html":"<p>At Crossfill, I taught vibe coding to UI/UX designers who didn’t come from engineering backgrounds.</p>\n<p>At first, they were nervous.\nNot because they weren’t smart.\nBecause they assumed code was a locked door and they didn’t have the key.</p>\n<p>That was the first thing I tried to change.</p>\n<p>I told them:</p>\n<p><strong><em>You don’t need to become an engineer to use code as a design tool.</em></strong></p>\n<p>The goal was never “turn designers into developers.”\nThe goal was to help them prototype ideas faster, communicate better with engineers, and feel more ownership from idea to implementation.</p>\n<hr>\n<h3>What I mean by vibe coding</h3>\n<p>To me, vibe coding is:</p>\n<ul>\n<li>using AI and lightweight coding tools to quickly explore ideas</li>\n<li>focusing on product behavior and UX flow before polishing every detail</li>\n<li>iterating in short loops: prompt, test, refine, repeat</li>\n</ul>\n<p>It is not about writing “perfect architecture” on day one.\nIt is about creating momentum.</p>\n<hr>\n<h3>How I taught it</h3>\n<p>I kept the process simple and practical.</p>\n<h4>1. Start from behavior, not syntax</h4>\n<p>I asked designers to describe:</p>\n<ul>\n<li>what the user is trying to do</li>\n<li>what should happen after each interaction</li>\n<li>what edge cases should feel like</li>\n</ul>\n<p>Once that was clear, code became a translation layer, not a scary mystery.</p>\n<h4>2. Build tiny, visible wins</h4>\n<p>Instead of “build a whole app,” we did:</p>\n<ul>\n<li>one interactive card</li>\n<li>one state transition</li>\n<li>one filtered list</li>\n</ul>\n<p>Small wins built confidence quickly.</p>\n<h4>3. Use prompts like product specs</h4>\n<p>I encouraged prompts that included:</p>\n<ul>\n<li>target user</li>\n<li>intent</li>\n<li>constraints</li>\n<li>expected output</li>\n</ul>\n<p>Better prompt quality gave better outputs and better learning.</p>\n<h4>4. Review together like a product critique</h4>\n<p>We didn’t review only visuals.\nWe reviewed:</p>\n<ul>\n<li>UX flow</li>\n<li>readability</li>\n<li>fallback states</li>\n<li>performance assumptions</li>\n</ul>\n<p>That made the collaboration with engineering much smoother later.</p>\n<hr>\n<h3>What changed</h3>\n<p>After a few weeks, the difference was obvious.</p>\n<ul>\n<li>Designers moved faster from concept to testable prototype.</li>\n<li>Hand-off quality improved because behavior was clearer.</li>\n<li>Conversations between design and engineering got more specific and less abstract.</li>\n<li>Designers became more confident in technical discussions.</li>\n</ul>\n<p>The biggest shift was not technical.\nIt was psychological.</p>\n<p>They stopped saying:\n“I can’t do this because I’m not technical.”</p>\n<p>And started saying:\n“Let me prototype this first, then we can refine it together.”</p>\n<hr>\n<h3>Lessons for teams</h3>\n<p>If you want non-technical teammates to learn vibe coding:</p>\n<ul>\n<li>teach workflow, not jargon</li>\n<li>reward practical output, not perfect code</li>\n<li>make collaboration the goal, not role replacement</li>\n<li>keep the loop short and visible</li>\n</ul>\n<p>Most people can learn way more than they think when the environment feels safe.</p>\n<p>And that was the real win at Crossfill.</p>\n<p>It wasn’t just about shipping faster.\nIt was about building a team where more people felt empowered to create.</p>","frontmatter":{"title":"How I Taught Vibe Coding To Non-Technical Designers","description":"What worked when I taught vibe coding at Crossfill","date":"2026-01-18T00:00:00.000Z","slug":"/blog/teaching-vibe-coding-to-designers","tags":["Culture","Product","AI"]}}},"pageContext":{}},
    "staticQueryHashes": ["2009693873","2077189868","3303540520","3505212370","3825832676"]}