So, the first thing you want to do is go to tracer. ai/install and then click on the VS Code one cuz that's the one I have. If you have cursor, you can also click on that button. It'll take you there or Windsurf. So, if you just click on that, I already have this installed, but then you'll just press install and you'll see that you'll end up over here. So this is the default tracer walkthrough. So this is actually their new feature. So we'll try out the epic mode today versus the phases or planer review. Then you got to select your workflow. So you can see you have the refactoring workflow which is a lean collaborative workflow for systematic code refactoring. Then you have the agile workflow. We'll keep it the agile one. Now press send. So before I started the project, I was actually building a snake game in here. Now Tracer realized that I'm telling it to build me a productivity and habit tracker dashboard. So you can see the first question is asking me is this a standalone new project or does it live alongside the existing snake game. Obviously I want it to be standalone. So I'll answer standalone to that. Which what text stack do you want to use? I can use vanilla HTML CSS react or whatever. Uh I'll just do no strong preference. I'll let it recommend what fits best for my purpose. And it also asks which core features do you want in the dashboard? A daily habit checklist, a habit streak tracker. C D E FG. I can put all those letters and everything like that. And what where should the data be stored? So you can see this is actually asking questions that a product manager would ask. So it's going into details that I personally if I was vibe coding somebody who doesn't have that much of a technical background. I would not know what to say. But I can say that I can also just do a browser local storage only. No backend no login data stays on this device. I'm going to do that for ease. And then there's also backend plus database. So you need data syncs across devices. And this requires a server and user account. So I'm for today's demo, I'm just going to do a. And who is the primary user of this dashboard? Just me, a personal tool for my own daily use, a small group, family, team, friends, a public product built for many users. So you can see these five questions are something a external consultant or a product manager would have to help you understand and align with before you start building an actual project. And Tracer does that for you with ease. So I put in all my answers for all the questions. So I'm just going to press send. All right. So now we have additional questions that it's asking to help us narrow down the project. So how should habits and goals relate to each other? What does the weekly and monthly progress view look like? How should task to-do list work? Are they daily reset or persistent? Because I asked for that feature as well. What is the overall layout navigation style of the dashboard? And then what visuals are you going for? So I can answer these questions. So let me just do that. So I've responded to all the questions. Just going to press enter. All right. So we can see we have finally have a complete plan. We know that our project setup is going to be a standalone project. We're going to use Manila HTML CSS ES modules. Storage is going to be local. Then all the features that we wanted to add, the layout design as well. How to store the data like habits, goals, completions, tasks, everything like that. All of this was planned in about 2 to 3 minutes. What this allows me to do is elevate my vibe coding project into something that I actually want and not leave it to the hands of the AI agent that will do something random, have a random design, have random structure and everything like that and have to work backwards. So this is really cool. Now suggested next steps we can see with requirements aligned the natural next steps are to either write the epic brief problem statement goals and constraints or jump straight into defining the core flows, what the user does and how they navigate through the app. Both can be in any order. So then I can just go into the epic brief or I can define the core flows. I'll just go on the epic brief. All right. Now we have our epic brief. Basically this kind of summarizes what the project is about. This is something that most technical teams have to do to understand what's in scope, what is out of scope, which is for example, we don't need to worry about user accounts, login or multiple device syncs or push notifications or anything like that. I want to create a simple habit tracker and I don't need any of this right now. So I don't have to worry about that. AI generating fake login buttons or anything like that. Now the next step is actually going to the core flows. All right. Now Tracer has come back to me with asking me quick questions about how the users are going to flow through the product. And these are important questions that you know I should be aligned on with my AI. So I'm going to ensure that I understand how I want and structure it like that. So when it generates something for me, I'm going to have a good overview and control of what the flow is going to look like. So, I'll answer these questions, but you can see like how do you add a new habit? It wants to understand that. How do you edit or delete an existing habit? Where does streak number live relative to the habit checkbox? What happens visually when you check off a habit? How does linking a habit to a goal work? Things like that. What does the goal card show on the main dashboard? Everything. So, I'll answer all of these. So, let me just do that quickly. All right, I've answered all those questions. Now, I'm going to press enter. So, now what you can see, I actually have a user interface preview. So before the project is actually created, I can take a quick look at the UI. And if I wanted to change this, I can go ahead and make this adjustment before you know you actually waste some tokens on your AI project. So this is really huge because you save so much time and money by doing this and you're not just reiterating yourself or having code projects that don't look like what you want and then you're just working backwards and backwards and wasting time and energy. For our purposes, this UI is really good. So I'll stick with this. Now I can go into the tech plan or I can do more validation. And I'm just going to go into the tech plan. I think I'm good at where we are right now. All right. So, Tracer has determined the tech plan, meaning it understands where to store the data, the ES module structure, logic versus UI separation, streak calculation, and things like that. And you can see we have the tech plan over here as well. So, we can see all these specs that we are creating, the epic brief, the core flows of the projects we just created, the tech plan, everything like that. Framework basically is understanding is going to use none. rationale matches workspace no build tooling needed things like that storage local storage only personal use no sync needed everything like that so these type of questions I'll be honest if I didn't have experience with coding or anything like that I wouldn't know but tracer ensures that it understands all my requirements for a complete project that's not just spaghetti code and it's going to help me build it the next thing I'm going to do is break down my work into tickets most coding teams break down work into tickets and they go ticket by ticket or each team is responsible for a specific ticket and that's how they actually ensure that the work is following a logical step. So we can see that our tracer right now is creating tickets for us to understand that for example ticket one is HTML skele skeleton and CSS ticket two is logic module and data module ticket three is UI rendering and events then the module system and this ticket five is streak and weekly progress so it's going to open all our tickets and they're going to be coming up over here so we'll see them. One thing you'll notice is that it understands that ticket one and two could be done at the same time. That's why we see them happening. Ticket three is dependent on ticket one and two. So it's going to build this first then go there. All right. So looks like my tickets are finalized. So we have all our tickets here. And if you wanted to go into each ticket, you can actually see the breakdown. For example, I'm in ticket one, which is the HTML skeleton and CSS foundation. It gives an overview what it's supposed to do, create a dashboard, everything like that. And what's the acceptance criteria? So once all of these are met then it moves forward to the other ticket or if it's supposed to run in parallel like ticket one and ticket two it'll do that. As you can see ticket three depends on ticket one and two. So wait for these to be finished then it'll only execute that one. So now I can already execute. What's also
