Week 1: Introduction

[00:00] Hello everyone and welcome to the course. Before we begin exploring VIP coding and AI assisted design workflows, I'd like to briefly introduce myself and share the background I bring into this class. My education combines both design and engineering disciplines. I earned a bachelor's degree in industrial design followed by an MFA in packaging design and a master's degree in user centric design.

[00:27] Later I completed a PhD in software and security engineering. This combination of design thinking and technical engineering strongly shapes how I approach digital products and AI tools today. Professionally I've worked across multiple areas of design and technology. I started as an industrial designer in China.

[00:49] Later, I worked as a UX designer in Cincinnati, focusing on user experience, interaction design, and digital workflows. I also worked in web design and front-end development in Fargo, North Dakota, where I gained experience building interactive web applications and translating design concept into working software.

[01:10] These experiences are especially important for this course because vibe coding sits at the intersection of design, AI, and software development. My UX background helps us think critically about users and interfaces, while my front end and software engineering experience helps us understand how AI generated code actually works in real products.

[01:36] In this course, we'll focus not only on creating functional prototypes with AI tools, but also on designing thoughtful user-centered experiences.

[00:05] How AI is changing UX design. Design has already changed by AI in several ways. First, design has shifted from static mockups to functional executions. In 2026, designers are able to not only create static mockups in Figma, they could also create functional prototypes with actual coding. And so this will change the design deliverables to engineers.

[00:32] The traditional Figma to engineering handoff is also ending because instead of delivering Figma prototypes, designers now can also deliver coded prototypes which makes it different. UX designers now influence three areas. First, they influence how products are assembled or encoded. Second, they influence how ideas are tested via functional prototypes, not just hotspots from static mockups.

[00:57] Also, last but not least, they influence how solutions are launched. This shift is driven by AI enabled workflows, blurring the line between design and front-end engineering. AI is changing what UX designers actually do. With AI, designers can focus more on the strategies of the project or the product, the problem framing of the product and the communications, the orchestrations.

[01:26] They will need a strategic level of views to make decisions about the design and they will be focused more on validation of the design outcomes. So based on that different roles in the product team would be emerging. First product managers will be able to create build the MVPs which means minimum viable product that could be used to validate functionalities and product features and the designers will be able to prototype with code which could be delivered directly to the development team and on the other hand the

[02:05] developers could also generate the UI mockups. So the roles are merging and some new roles will grow up and some others will disappear. Also AI will dramatically accelerate the UX workflow. And now with AI, it will support nearly every UX stage including research and synthesis, user persona generation, competitive analysis, interactive prototyping, design systems, copywriting, design to code handoff and usability testing.

[02:36] So all of them will be benefited by AI automation so that the process will be much faster than the traditional workflow and with the influence of AI technologies the gap between design and development is also compressed. Before AI designers would create mockups and then deliver them and developers will work on implementation later.

[02:59] But now the roles become blurred. Now designers will create prototypes with code and developers generate UIs with them. So AI bridges design and development so everybody becomes a builder. Even though AI makes automation much easier, human thinking will matter more than ever. On one side AI is strong at speed, they can do it very quickly and it can generate a lot of ideas or solutions.

[03:24] It also scales patterns very fast and it is also very good at repeating the same tasks but there's a lot of decision making in between. So the human remains essential for a lot of things now such as judgment of the design decisions. Empathy to understand the user's ambiguity the strategy the organizational context the meaning making all will need human thinking.

[03:55] The future of UX. In the future, UX is becoming an AI orchestrated discipline. As you have probably already tried, AI will automate more executions like writing code or implementing your designs. And secondly, UX becomes more strategic and systematic. So the designers now need to stand on a higher level of decision making like how the product will work and what design we need not just how to design that and third designers become orchestrators and facilitators to facilitate the entire design process and make sure the entire process is good.

[04:36] Also, they will need to work with multiple AI agents at the same time to organize the entire working process just like organizing a team. And last but not least, human judgment becomes more valuable because AI is not perfect and what they create might sometimes have a lot of issues.

[04:55] That's why human judgment will be very important.

[00:06] Token is the unit that controls cost and capacity. Large language models do not read text as full sentences first. They process tokens. A token could be a full word, a part of the word or a symbol. Token counts affect the conversation with AI. It counts how much input fits, how many words you include in your message and how long the responses can be. Also, that is very important.

[00:32] We use tokens to calculate the cost of using AI large language models. This table shows some examples of how the cost of AI models is calculated. Basically, it is calculated by how many dollars per 1 million tokens. From this list, you can see the price of different popular models such as Gemini 3 and this is Gemini 3.1 Flash. It's a cheaper model.

[01:00] You can see that it's 50 cents per million tokens for input price and output price is $3 per 1 million tokens. Input price means how much text you submitted to the AI model and output price indicates the response you got from the AI model. When you compare the price on this list, you can find that a lot of the price is changing significantly.

[01:24] There's very cheap price like the models at the top, but also there are very expensive ones like GPT 5.5 which is $30 for output price and Claude Opus 4.7 is $25. Those are very expensive ones, but their capacity is higher and they're smarter and more powerful to use. Usually when I use those models, I just use lower, more affordable models to complete most of the tasks or the easy tasks.

[01:53] If I have some very hard problems in coding, I will just use those very expensive models. Usually once I change the model to the higher level ones, the problems will be solved very very quickly. Context window is another very important concept in large language models. It indicates the model's temporary working memory during the conversation.

[02:15] Every time you open a conversation session with an AI model in the chat box, you will have a lot of information like your current message, the system instructions, retrieved the document tools or other information like the AI model read a document from your local machine. This will also be counted into the context window.

[02:38] Also, it will include all of the prior conversation context. Each model has a limited context window. The context window will decide the limit of a chat session. What if you exceed the context window in a conversation session? Several things might be happening. But basically, the AI agent will ignore the oldest message or summarize the earlier context automatically so that you might lose the information in earlier session of a conversation.

[03:09] As a result, first AI might forget the requirements that are mentioned earlier of the conversation if you are doing this in a single project. Secondly, the code quality will suddenly decrease very quickly. Third, AI will resolve the problem you already solved and this actually sometimes will bring more bugs to the project.

[03:30] Last but not the least, debugging becomes unstable because of loss of the important information in earlier conversation. So some required information will be missing to fix the bug. Reasoning is the model's ability to analyze, connect, and infer rather than just predict the next word. Basically, it just makes the large language model smarter.

[03:54] Every time we send a new message to a large language model, it will take some time to think. That is the process of reasoning. In this process, the model will talk to itself to understand your questions deeper and then they get back to you based on the internal discussion. In vibe coding, the reasoning process helps AI to understand goals and constraints better.

[04:16] It will break problems into steps. It also helps you debug and review the code and make the design or architecture decisions. The strong reasoning models are better for complex coding tasks, multi-step workflows, agentic behaviors, and handling ambiguity. With all the previous skills or abilities, an AI agent could only talk to you and answer your questions.

[04:42] With tool call, or sometimes we call it function call, we can do more. A tool call is when a large language model decides that generating text alone is not enough and it needs to use external capabilities. An AI agent without tool call is just a chatbot that can process the prompt the user provides.

[05:06] The user provides a prompt. The language model will process that to understand it and then they send back the text response. On the other hand, if an AI agent has the ability of tool call, it can do more. It becomes a true agent that can control the user's device and help the user complete tasks automatically.

[05:28] Here is the basic process. First, the user sends a prompt to the AI and then it will call a tool or a function such as run external functions or APIs like doing a web search or read and write files. Then they might complete a task which is optional because sometimes you can just ask ChatGPT to write a document for you.

[05:52] So they will need this feature to write a document on your laptop. After this it will also receive the result of the generation and then it analyzes the result and gives you the text response. Basically with this feature an AI agent will do two things for you. It will complete the task and then it will tell you the result.

[06:13] This is one of the most important parts of vibe coding because we will ask AI to help us write code which will require them to access your computer and read and write on your computer. MCP indicates model context protocol. It is not very complex technology. It is just like an agreement like connectors allowing AI to connect to external tools, data sources and applications.

[06:39] In another word, MCP allows an AI agent to communicate with any applications. Here is one example. You can ask AI to read from your Figma file like read your Figma design and then you can also ask it to send a file to your Figma document. MCP will provide a connection between the two parts.

[07:01] So that's to make the reading and writing possible.