Subscribe
Share
Share
Embed
Get a seat at the table and build the design career you want. This podcast is for designers looking to break in, level up, and take control of their careers—whether you're freelancing, climbing the corporate ladder, or just trying to get noticed. Every two weeks, we dive into career fundamentals, design best practices, and the hottest topics in the design community.
You can say, for example, I'm about to present this these three concepts, run a UX audit as if you were the VP of the nursing group, and then give me feedback on some of the UX that I I presented. It does actually a a decent job actually. So like
Nick:No. I don't use it. I use your I just thought your your example of the, you know, Nielsen group was was funny. You know, because there there's a debate on on how
Tyler:We are officially live.
Nick:We are officially live exactly. I mean, this is just an experiment.
Tyler:And last episode, you nicely teased that or revealed, should I say, that you have never, as much as you are that expert design engineer and using AI in in part of your process, you have never vibe coded a thing.
Nick:Yep.
Tyler:Not once. True. Ever? Ever.
Nick:Yes. I'm very honest here and vulnerable.
Tyler:Oh, okay.
Nick:I'm just watching while while they're throwing tomatoes at me.
Tyler:Can I can I ask why?
Nick:I'm stubborn. I think I I'm better and faster on my own.
Tyler:Okay. Fair. Okay. So I'll I'll tell you what vibe coding what the use of vibe coding, at least how I've used it. I wanna know Mhmm.
Tyler:If I can maybe sell you or maybe you can sell I mean, you'll be doing it.
Nick:Yeah. Okay. I'm not not going to be stubborn and going to say, yeah. Yeah. Oh, sure.
Nick:Whatever. And then do nothing with your advice. Like, if you have prompting advice or anything, results or examples. Yeah. I'm going to listen and try it out and see what happens.
Tyler:Perfect. So I work obviously in house on a product, like in on a fintech product. So the context there is that there is a system in play. There's a design system. There is a code base.
Tyler:We are we are not going from zero to one. We are essentially just shipping new features on a monthly or a bimonthly cadence. And part of that process is coming up with we have a road map. We have a couple ideas that were kind of here, which is basically fed by sales and what we're seeing in the market or gaps that our customers are kind of seeing or giving feedback on. So part of a typical designer's process is to do some discovery, do some wireframes, do some high fidelity design, and then pop potato over to the engineering team.
Tyler:One part of my process that I completely removed was the wireframe part. I was like, the vibe coding became the term, which I know you you love that term.
Nick:Oh, yes. With a big passion.
Tyler:I well, I find wireframes slow and monotonous, especially I'm at a new company where they use fig fig jam, which I think that's more for facilitation, but that's another subject. It's just slow for me to create wireframes versus me to kinda spit out four or five different ideas using Clot or ChatGPT to have, like, a reference of, like, here's what this might look like that I can generate in, like, five minutes versus, like, an hour or or half or an hour and a half, what I would typically use to create that wireframe to create one. And then I would have to create a variation. So that has completely replaced my wireframing process because I have a vibe coated thing, and the next thing in line is high fidelity.
Nick:Right.
Tyler:Would that at all be useful for you? Just like, are you doing is wireframing part of your process? Would that be useful at all?
Nick:Well, I'm I'm not wireframing also, maybe because of the same reasons what you mentioned. Okay. But maybe before we go into that step, you know, in this episode mostly being about prompting, you say you can come up with a few ideas in five minutes.
Tyler:Yes. Like,
Nick:what does that look like? Because there are so many different things to consider, like one shotting versus multi shots and plan mode. Like, there's so many keywords thrown around us. And I imagine that's confusing for people who are aware that they need to do more AI stuff, just to call it, you know Yep. Give it a silly name, AI stuff.
Nick:But they do not really know where to start. You know, what model should I use, what plan for the model, what should like, how can someone start their prompting adventure and get to your level of having four or five ideas in five minutes?
Tyler:Yeah. That's a good question. So I think the prompt is the the core of it. Right? So the the prompt is essentially what you're typing in and feeding to the LLM to kinda generate you a thing.
Tyler:Yeah. Yeah. And as the saying goes, slop in, slop out. The prompt that you're crafting has to be super detailed and has to have some of the context. So I don't think it really matters which prompting or vibe coding tool you use.
Tyler:I think if you use ChatGPT or Claude, Claude probably the best for anything code related. If I find a suggestion, go with Claude. Just the output is better. And then how it does edits is a lot better too. Instead of rewriting the entire page, it isolates the code that needs to be updated, and then you get to your preview a bit faster.
Tyler:But I digress. What's really important, what I do is I give it all the information that I need. And that could be a PRD that your PM has written. It could be any of the research that you have written. It could be screenshots of the current application so that it had and that I would say is the prompt.
Tyler:So it's like the business logic, how the app looks like, any research or context that it needs. And then you can that is kind of like the first layer of, like, here's the context, and now you get into what you'd like to build. And what I like to do yeah. Go ahead.
Nick:So you're you're adding it sounds like you're adding a lot of attachments. Like, you're not just writing everything out. Like, we are a fintech company. Like, you have, like, documents, PDFs, transcripts, like Exactly. Sorts of images that you can just drag into the prompt field.
Tyler:Exactly.
Nick:Do you hit send in any way, or do you just make this one massive prompt and see
Tyler:what happens? At a low level, here's what I do. I go, here's an attachment. Wait for my next prompt. So I don't and then it basically goes, okay.
Tyler:I'm ready. And then I go, here's another attachment. Wait for my next prompt. And I'll keep doing it until I think I have it has all the context needed to execute on what my my final direction might be. So it's like, maybe it's I would segment into two parts, context upfront, and then what I'd like to do in the next.
Tyler:Quick tip for me or a thing that I like to use, I like to use voice to text. So whether that's using ChatGPT's audio feature or WhisperFlow, which WhisperFlow just essentially allows you to kinda speak to your computer, and then it'll it goes voice to text.
Nick:I think it's great, WhisperFlow. I have it looking at its logo in my Mac taskbar right now. Online too.
Tyler:Like, you talk faster than you type. This is essentially what you'd be and then even even if you're going ah and ums, it doesn't matter. It understands.
Nick:Yeah. True. True. It's it's very interesting. What I noticed within my own workflow is that I use it for prompting where formatting doesn't really matter.
Tyler:Mhmm.
Nick:But I'm not using it for a WhatsApp message or an email because, you know, it's it's trying, but in my experience, it's not really formatting the way I want it to or how how I would format myself with lists and paragraphs and line breaks. Then I end up frustrated and, you know, redoing my email anyway. So for prompting, yes. Small copy changes in Figma, also yes, but not for large text, personally.
Tyler:Yeah. I think you can. Mhmm. Whisper flow specifically, you can add some settings where you basically if you talk and say, I want bullet points for these three lines, it'll do it for you. I haven't gotten there, but I that's how it was sold to me.
Tyler:So apparently, you
Nick:can. It's a, yeah, a Nick skill issue perhaps or me being too stubborn in how I want to format in in a nicely written important email to a client. Mhmm. But I used a lot for prompting and, you know, more, like, behind closed door text, you know, for a change or a prompt or, you know, something that isn't client facing. Anyway Yeah.
Nick:Back to prompting. So context and then step what what was step two again? Yeah. The context you want to
Tyler:Yeah. So I think context number one, and that can just be you dumping files or pacing copying, pasting things. You can get more complex in terms of, like you can actually connect JatGPT to your Confluence or Notion space so it already has that without actually pasting it in. So, like, off the rip, it has all the context that's needed, and then you can just kinda prompt. But, essentially, being as detailed as possible.
Tyler:So instead of saying, build me a feature a login feature, your prompt might be, build me a login feature for fintech clients that is flexible enough to enable SSO connect logging in with social media, Google, Gmail account, Gmail, etcetera. Make sure they include the failure states, etcetera, etcetera. Like, the more detail you get, the more accurate the the result will be.
Nick:Yeah. Yeah. Yeah. That makes sense because we have all the context in our brain. Like, we've been with a client or with a company for, you know, a year or maybe more, you know, and all those meetings, the briefings, and you thinking about work while commuting or walking your dog or whatever.
Nick:Mhmm. That's all in your brain, but a new chat window where you are going to put in a prompt, it starts from scratch. You know, it's sure it it has memory to you know, today, and you can have projects and skills and all that stuff. But it's, you know, it has an improved starting point, but mostly, like, it's like you're talking to someone who've who's never heard of your situation before.
Tyler:Exactly. And then the benefit is that actually if you my ChatGPT, like, is essentially is a brain dump of me because it has the memory feature. So, essentially, I use specific logins for the different types of work that I do. So it knows I work on these types of projects, so it already has vaguely some of that some of that context as well. Mhmm.
Tyler:Yeah. Yeah. It's core memory feature or whatever they call it.
Nick:Yeah. Yes. Very useful. You know, I I I had a new chat recently talking about some topic, you know, brainstorming and asking a few questions. And then at some point, I got a reply, like, just like in this and this and this scenario where you already did such and so.
Nick:Oh, yeah. That's true. You know, it remembers, and I think that's very useful. Like, it came up with things I already had forgotten. But so far, we are prompting in the same way, more or less.
Nick:Mhmm. One thing to keep in mind, I think, related to what you're saying for anyone who's going to try this out is that in my experience, any LLM, it really wants to get to a solution. Like, it's Yeah. Even if you do not ask for it, it's going to do the thing. Like, if you're talking about a prototype and you feel like you're just, you know, brainstorming and discussing, it's already making changes while you're like, no.
Nick:No. No. No. I'm still figuring this out. You know?
Nick:So like a kindergarten teacher, sometimes it's what it feels like, I'm you know, the first prompt I'm going to be like, well, do not make any changes yet. Yes. Let's brainstorm. You know? And then it goes into this mode of not an official mode, but, you know, it it's going into a mindset of asking questions back Mhmm.
Nick:Before going into solution. So you really have to put up the guardrails.
Tyler:Yes. Yeah. It it does wanna get to spit out something. So, yeah, that's why, like, I mentioned earlier, I'm like, wait for my next prompt, or let's talk about this first before touching any code is is super important. Or else you're just gonna be waiting until it finishes its task or what it thought the task was.
Nick:Yeah. Yeah. That's annoying. Okay. So at some point, it has its context.
Nick:It knows what you want, and then you're going to ask it to like, do you give it a number? You know, create five ideas here, or is it more open ended? Like, how does that work for you?
Tyler:There's different ways you can do it. So you can get all the way till your it has the context. And then from there, you say, okay. Create me a solution. And then what I can do is open up a separate tab and then take that solution, paste in the code, whether it's in Claude, say, taking this as a reference, create me another variation that has this kind of experience, and then it'll generate something.
Tyler:And I'll do it. I'll open up several different tabs with different solutions, and I'll compare whether that's just myself or, like, I'll I'll grab another designer or I'll I'll book a meeting and then show him with the engineering and product team. Like, here are a couple different ideas. What are what do we think? What are the pros pros and cons of each?
Tyler:And then we have a thing we can we can we can reference versus, like, creating a wireframe, which would take a bunch of time. I can basically show a thing, get quick validation, and then so I can get to my next step, which is, like, the Mhmm. The Figma high high fidelity step.
Nick:Yeah. So so zooming out, like, looking at the steps, it's you know, regardless of the way to get there, it's there's a challenge. Like, you want something doesn't work Mhmm. On the product or you have this great new idea. There's something you want to build on top of the product, but you're not really sure yet how, like, what it should look like.
Nick:So you're in the the going wide phase, like, you're thinking about a bunch of ideas. Feedback is required to see if it's possible from a dev standpoint or if you even want it to go this way from a stakeholder standpoint. If five ideas, for example, one has potential, you take that one idea, you're going to go into high fidelity mode, Figma mode. You're going to create the edge cases, mobile, desktop, etcetera. You know?
Nick:So five coding and prompting is just a way to get those first the first batch of ideas ready for someone to review.
Tyler:Exactly. And, like, there's some additional layers that you can do before you even you present it to your design collaborators or the engineering team. You can say, for example, I'm about to present this these three concepts. Run a UX audit as if you were the VP of the Nielsen group, and then give me feedback on some of the UX that I presented. It does actually a a decent job, actually.
Tyler:So, like No.
Nick:I know. You to I use your discernment. Thought your I I just thought your your example of the, you know, Nielsen Group was was funny, you know, because there there is a debate on on how, you know, how relevant they are today. Sure. Yeah.
Nick:But that's beside the point. I'm curious about that output. Like, do you, you know okay. You have all those tabs. You have five or ideas.
Nick:Mhmm. I imagine you do a little validation run on your own. Like, you you and your designer eye, your design experience and knowledge, you're going to look at those ideas individually. Like, does this even make sense? Yes or no?
Tyler:Yeah. Exactly. So that I'll I'll Yeah. Like, I'm not presenting five videos. I might present two just to reduce that cognitive load there from, like, the presentees.
Tyler:Yeah. And then and then I'll have my my two that I'll present, and I'll I'm taking the the AI's feedback with a grain of salt. Like, at the end, like, I'm the one doing the decisions, but I'm leaning on it for a bit of that feedback.
Nick:And so okay. So let's say you have five ideas, two of them have potential in your, you know, designer's eye. Are they like, is there anything in between the that tab and how you present it? And if there's anything in between that you still have to do, is that then a follow-up prompt, or, like, what are the steps to go from that first generation generated thing to here's what it looks like, mister stakeholder?
Tyler:Yeah. So, like, caveat there, when I'm vibe coding a thing, it is not just a screen. I'm generally creating a flow. So it's not just here's what this new here's what this new setting panel looks like. It's here's the feature, and it has these different steps.
Tyler:So the benefit of kind of vibrating or prompting my way to this solution is that I'm testing out the flow as I kinda click through and then testing out. If I'm with those two options, I'm kind of clicking through and seeing how they both kind of feel. So I have a better sense of how it would kind of click through versus, like, wireframing or Yeah. Or doing a a Figma prototype, which is limited, and it doesn't actually follow logic. The VibeCoder thing, you can add a database to it with Supabase.
Tyler:You can add some of those logic pieces. It has more of that feel. But next step would be I can essentially, I can create a slide deck, but I'm I'm basically just presenting and running a mini usability study with my internal team and is asking questions. Hey. What do we think about these two things?
Tyler:I can actually share, if it's Cloud Code, the artifact with my team and having them kind of play with it async if they need to.
Nick:Yeah.
Tyler:Not everything has to get done in that that thirty or or an hour an that hour meeting so they get a feel for it too. The engineering team could see like, oh, this actually, we can do something with this because our code base says, this infrastructure. We can actually do something through and here's what I would tweak to make it to reduce the scope so we can quickly get it out the door.
Nick:Yeah. Alright. So this I really you know, listening to you, the super base, you know, database connection really stood out to me. So it's not just prompting. Like, there's a bit of a setup required if you're going to do this professionally.
Tyler:Yes.
Nick:Yeah. Because I imagine that flow, like, you say database, that means that it probably has some sort of, you know, a login authentication type thing or managing files or anything that that's not only a shiny front end, so it's more than just making a Cloud or ChatGPT account. We need a bit of more of a setup.
Tyler:Yeah. And you you don't necessarily have to have it, but, like, if you're in the ideal state, if you're actually presenting that vibe coded thing or that that prompted output to a client, it is super important that the data that is being visualized is realistic. So curating that that back end piece or that that data that it's pulling from, it's good for it to be realistic, especially if you're well, especially for me in my industry in fintech, like, you're presenting to advisers, the graphs and the output of the analytic charts need to be, like, super realistic or else it stops the conversation.
Nick:Yeah. Yeah. Of course. Otherwise, you have a discussion about, well, this this this is not how it would work in real life. Like, that data point at a graph, you know, that's way too much.
Nick:And then you're like, yeah. Yeah. Yeah. Yeah. But it's not important, but then they are still stuck on that little thing.
Nick:So, yeah, that's a a bezel tested piece of advice from two senior designers. Now prompting wise, I think another bit of advice to to share is that it's okay to start over. I'm not I'm not sure if that's something you encounter to encounter as well, but for me, sometimes, I just like, I'm going in circles. You know, the this incredibly smart AI helper tool turns out to be super dumb at times, you know, completely stuck and forgetting things and your prototype is broken, and it's okay to click the little orange plus or the, you know, ChatGPT plus or whatever just to start new. That's something I wanted to say.
Nick:Like, sometimes it's just, like, you know, attempt failed. Let's start new. That's better than going into circles, you know, a few more rounds.
Tyler:Yeah. I think the benefit there the additional benefit along with the like, to to kinda jump off what your point is, like, it's just a piece of thing that's temporary. Like, I get Yeah. Into this debate of with my design team. Like, have Figma Make, which which does the same thing as, like, Chatchipjeet or Claude, but I like using Claude or Chatchipjeet because it's, like, ice I consider it as, like, temporary.
Tyler:It's not an artifact that I wanna store anywhere. It's just some it's part of my process to get my ideas out, and I'm okay with never seeing it again. I just wanna see it now Yeah. So I have a reference of if my idea makes sense so I can push forward to the next stage.
Nick:Right. Right. Right. So, yeah, so it's really a helper tool for you. It's not something to rep as a present, like, hello, product manager.
Nick:This is this this is a thing. Yeah. Good luck. Yeah. Exactly.
Tyler:You know, it's no.
Nick:No. It's just a an a little artifact, like, just something that helps the discussion move forward, you know, because it's just easier to look at something to be able to click through something compared to thoughts and discussion, you know, where it's just text and sound.
Tyler:Yeah. Exactly. Alright.
Nick:You know, what what I thinking back about your prompting structure, I start with context too, but I do mention in the beginning my goal right away. Yeah. Like, I'm working on this onboarding flow. You know, that that's always my first sentence. I'm working on, you know, fill in the blank.
Nick:And then there's usually, you know, a whole bunch of context as well. Like, I I think that's that there there's no discussion there if you talk about what the best way is to prompt, you know, if you're a designer or anyone else, like, the goal plus context. Like, that's always the starting point.
Tyler:100%. Yeah. Because that's also how, like, designers and, like, how you think also. Like, when you're when we're creating a feature or coming with solution, like, what is the goal? And then that drives everything else afterwards.
Nick:Yeah. You know, sometimes I like, when I'm not really sure yet myself, like, when I'm really early stage, I ask I come up with goal context, my idea, my idea optional in that stage if I have one, and then I ask it to ask me questions Mhmm. To validate. You know? Let let it be the expert.
Tyler:That's a good idea. Yeah. To challenge yourself having, like, almost like an accountability partner kinda thing.
Nick:Yeah. And not not in a way not in a therapy way. Like, they know everything, and they have to get it out of me. But, you know, getting a question back also helps me think, wait a minute. I didn't think about this.
Nick:That changes my view. And then I you know, I'm going to interrupt him or it's or her or whatever. It's yes. And you say, wait a minute. I have this new insight.
Nick:Here it is. Continue with the questions. Mhmm. But you have to be specific because sometimes you're stuck an hour just answering, like, dozens of questions. So Yeah.
Nick:It's always good just transitioning into another piece of advice to be specific in in the amount you expect. I want a one paragraph answer. I want three questions.
Tyler:I have Yeah.
Nick:I need five ideas, etcetera. It's like talking to a three year old. You know? It's it's you have to be really specific about the what and the when.
Tyler:Yeah. 100%. Like, or else it's gonna hallucinate in the worst way, which I hate.
Nick:Yeah.
Tyler:It's like, I didn't ask for that, but it's also not a mind reader.
Nick:True. I mean, that's the thing. Like, you and I, when we're talking, like, our human brains together, like, we can not lit in a literal sense, we cannot read our each other's minds, but you can have this gut feeling of where conversation is going, and then you can anticipate that. Like, that's not the case with your LLM chats. So when you get unexpected results, you really have to be critical of yourself.
Nick:Like, did I mention all the guidelines and scope and ideas and, like, anything that it needed? You know? Because if the answer is, well, I assume it just gets it, you know, like a good boy. Like, that's a mistake. Yeah.
Nick:You have to be really specific. Fun thing happened to me recently is that I I asked Claude to help me with a game, just a PlayStation game, and I assumed that that it knew about the game, so I started writing big prompt. I clicked send, and I got a reply like, well, you know, it doesn't look like that game exists, but it it does because I was looking at it on my TV at that moment. And then my next prompt was, you know, just two words, search online, and then it goes and search online. And then the happiness in the response was so funny, but also so silly at the same time.
Nick:I got capital letters, bold, font weight, good news exclamation point. Point. There is a game. And I'm like, yeah, silly. I'm looking at it.
Nick:But that, you know, and it's I mean, that's that's funny in a way, but still, I mean, it's it's an example of, you know, just assuming that it knows what you're talking about. You either have to put in search online right away or flip that switch in Claude. You know, it's usually a case of just having to be more specific. Again, like you're talking to a three year old.
Tyler:That's always it's always just gonna like, here's the thing. No. No. That's not what I meant. It's this little game until you're super precise.
Nick:Yeah. Exactly. You know, we have to the the prompting prompting part of this episode, but then we also have me listening to you about, you know, should you vibe code and all that stuff. Like, I'm more convinced now also because of the the Figma, MCP and Claude two directional Yeah. Update from last week.
Nick:I I tried it out assuming that it would be a good way to do, you know, production level code work on the actual code base, and then I got angry because it didn't take over variables and components. But listening to you now, I think it makes more sense if you have your local server, your you know, like you say, you share your prompt, your contacts, the goal, the idea, and then now you can say, okay. Bring all of this into Figma. You know? I think that's a good that's a good time saver.
Nick:So I see that whole five coding, you know, early stage exploration phase of of a project. I see it's the AI way of doing it, I see it mature because of features like that. Like, it's getting more real, more professional, more streamlined, and I think that's important for me. Like, it has to be reliable, professional, and useful from start to finish, and I think it's really getting there. At the same time, like, I don't really think stakeholders care where it came from.
Nick:They just want to have those five ideas or those two ideas, you say. They want to be able to look at it and think about it and have a discussion as long as you are on time and have a good quality stuff. Like, yeah, it can be five coated, can be hands drawn, who cares? It can be a paper prototype like a a 12 maniac. You know?
Nick:It's Yes. Yeah. Yeah. I have a few more thoughts, but I'm going to stop rambling now.
Tyler:That's true. I I don't think anyone really cares what activities we do before something gets shipped as long as it's thoughtful and we're doing it the right way. What tools we use to get to production, I don't think it I think it's irrelevant from the leadership standpoint. Yeah. And then back to, like, your your kind of Claude and the kind of prompting ideas, I think I might wanna tease our next episode with a story of how our team actually used MCP to implement our design system in a day.
Nick:In a day. I'll leave
Tyler:in I'll I'll leave us on that cliffhanger for next episode.
Nick:Well, I cannot wait. Because I I really think the the design system connection to fight coding and prototyping with AI is going to be really useful. Useful. Because what you just said, like, if a stakeholder looks at something and it's not realistic, they're gonna get gonna get stuck on that. Yep.
Nick:And it's not only the words and the numbers that you put in, but also, like, does this feel familiar? Does it have more or less the branding or the components of what I'm currently using every day? You know? So, yeah. Curious to hear more about that in the in the next episode.
Nick:I hope I can sleep this night because of the excitement.
Tyler:Hold your breath.
Nick:Yeah. Yeah. Yeah. Alright.
Tyler:That was a great episode. So if you like this content and wanna hear more, please like and subscribe.
Nick:Yeah. And if you want to see more, please go to designtablepodcast.com, Spotify, Apple Music, all the big players, and more.