12 Beyond Vibe Coding

App Prototyping Studio

Mick McQuaid
mcq@utexas.edu

University of Texas at Austin

20 Aug 2026

Week TWELVE

Jenny Wen, Don’t Trust the Process

  • The lines between product manager, designer, and engineer are blurring.
  • You can’t obsessively adhere to the double diamond process (four steps, the first two focusing on the problem, the second two focusing on the solution)
  • At one point, she says to throw away what you know.
  • Can you throw away something you don’t have?
  • No! You have to understand something first, then trust that it is imbued in your work without focusing on it.
  • Acting teacher says don’t do yesterday’s rehearsal!
  • Golf pro says you only have room for one swing thought!
  • Both are variations on a theme.

What you can do in the real world

  • You can’t do every technique you learn in every job.
  • You have to develop an intuition for what you need in a particular job.
  • Pick your battles based on what matters and what you can win.
  • You learn techniques in order and over the course of a project, but you don’t get to use them that way.
  • You need to learn the strengths and weaknesses of the techniques to know which fits where.
  • And, you need to learn about the perspectives of product managers and engineers.
  • We’ll talk a bit about engineers in this class and that means talking about code.

Designers and Code

https://youtu.be/HcLz3ikw-n0?si=MVPkFz-53AHIc7p4 is a discussion with Kyle Zantos about design tools using Claude, Cursor, and more. I urge you to watch it.

  • The lines between product manager, designer, and engineer are blurring.
  • Many designers will soon transition to be designer / builders, designer / engineers, or design engineers.
  • You’ll likely use AI tools like Claude Code, Cursor, and more in your work.
  • These tools won’t likely replace Figma, at least for a while, but will augment it
  • One thing especially caught my eye in this video, shown in the next frame.

Kyle Zantos Screenshot

Kyle Zantos recommends …

Coding with Cursor

  • I suggest you take advantage of Cursor’s free year for students on the Pro tier. (You have to supply your ID to get it. Visit https://cursor.com/students)
  • Yet, I’m going to delete my Cursor Pro account after this class. Why do I suggest you do something I won’t do??
  • The free year is not for faculty and I get good results from Claude Code, which has a free tier for faculty but doesn’t have a free year for students. (You can get Claude EDU for free, but it’s not the same.)
  • I’m going to demo both Cursor and Claude Code now, so you get an idea of what they’re about.

iPhone app on Cursor

\(\langle\) Pause to look at actual iPhone app on an iPhone \(\rangle\)

Notes on the iPhone app

  • I only prompted it with a couple of sentences.
  • Then it asked me a couple of questions.
  • Then it delivered the first cut of the app.
  • I made a couple of suggestions and it modified the app.
  • I had to delve into Xcode a tiny bit because it made some mistakes, but I didn’t do anything that a beginner couldn’t do.

Next app on Cursor

  • According to Ryo Lu, the head designer of Cursor, it doesn’t replace Figma but makes the tool easier for Figma users who may not know how to code.
  • It allows you to tweak a design but first you have to tell Cursor in natural language what you want to design, then open it in Cursor’s browser and click the CSS Inspector.
  • Also, it can’t be an Xcode app, so I had to redo the Tip Calculator / Bill Splitter in React. (Does anyone here know React?)

Cursor display with CSS inspector in Design mode

Using shadow instead of border with Cursor

I instructed Cursor to look at https://jakub.kr/work/shadows and to use that in the Tip Calculator

Claude Code + Figma

  • When I enable it in Figma, it gives me a URL for the current Figma prototype that I can plug into a model.
  • The model then implements the prototype in code, in this case a simple JavaScript / CSS / HTML page, but it will also work with React, Vue, and some other frameworks.
  • The result is a standalone web app.
  • Here’s an example with a simple Figma exercise from this class.

Figma example, followed by Claude Code example

\(\langle\) Pause to look at Figma, followed by browser \(\rangle\)

Preceding example

  • Required a bit of back and forth with Claude.
  • Didn’t initially use right timing, so I told it twice to fix the timing. The second time I told it to, it did.
  • Kept an extraneous part of the frame until I told it once to remove it.
  • Note that it did use the correct colors and geometry.
  • It did not do the dissolve of the plus sign to the minus sign.
  • It added a hover state for the sign that I didn’t ask for.
  • There is always a tradeoff between the time it takes to interact with the model to get it right and the time it would take to code it manually.
  • Of course, an engineer may not be available to code right when you want.

Meagan Choi, design lead at Anthropic

https://youtu.be/1-x-QzNjFHQ?si=rnSDiik-qsmVKYmf is an interview by Peter Yang with a designer who spends an equal amount of time in Figma and Claude Code

https://www.youtube.com/live/x2LGggL6BNI?si=XdtCgCdQCntszDIo is an intro by Meagan Choi into her experience as a designer for Claude Code (more of a basic intro than the above video)

But first … Vibe Coding

Specifically, Beyond Vibe Coding

Just the beginning …

  • Osmani2025ch1-3.pdf is now in Canvas > Files > booksPapers
  • Just the first three chapters
  • Osmani posits a spectrum from vibe coding to agentic engineering
  • You created some prompts to vibe code a bill splitter / tip calculator in our last class
  • How did Claude do with those?

Takeaways

  • You need to vibe code or perform agentic engineering
  • There is a skill associated with it—you can’t just expect out of the box success
  • Claude (and probably ChatGPT and maybe Gemini) is getting vastly better at this than it was a couple of months ago
  • You can’t do it well for free or even close to free
  • You need a premium account (200USD/mo) for the best integration with Xcode, and probably the best integration with other developer tools
  • Therefore students and inexperienced designers are at a disadvantage compared to experienced designers whose companies pay for their accounts

More Takeaways

  • Short prompts yield vague results
  • Some development knowledge greatly improves your prompts
  • You need to be a good debugger rather than a good developer
  • Vibe coding is an iterative process—you have to be ready to hold a conversation with the AI to get what you want
  • There are plenty of vibe coding “tools” on the market that all use the same two models, Claude or ChatGPT (maybe Gemini but I’m not sure)
  • Connecting Figma and Claude in a two-way street works best as of March 2026

END

References

Colophon

This slideshow was produced using quarto

Fonts are Fira Sans, Fira Sans Light, and Victor Mono Nerd Font

Math is set in Fira Math via MathJax 4