Cursor + Task Master Full Stack AI Course (NextJS, Supabase)

Demo

• ChatGPT clone with 2 important features

• Stream text token by token to the frontend

• Use the recently released GPT-4o models to create images

Diagram

• NextJS, React and TailwindCSS to create a modern interface, using Cursor to steal designs from ChatGPT itself.

• Then we'll build the backend using Supabase, a powerful backend as a service technology, that we'll host serverless functions that call OpenAI's GPT-4o models to give us text and images back to our user

• I've kept this project easy to finish in a weekend, with simple enough features so we can focus on using Cursor to 10X our workflow, get quickly unblocked on bugs, and use cutting edge tools like MCP and TaskMaster to keep our LLM focused.

• After building this project, you'll have the foundational knowledge in using Cursor and MCP like a Sr. Developer. Alright, let's build this thing!

In the previous lecture, we cloned the source code and used the Cursor agent to push a command.

If you prefer to download the ZIP folder locally instead, follow these steps:

1. Download the ZIP folder from the “External Resources” section of this lecture.

2. Once downloaded, unzip the folder to a location on your computer.

3. Open Cursor.

4. In Cursor, go to File > Open Folder (or use the shortcut Cmd+O / Ctrl+O).

5. Select the unzipped project folder and click Open.

You’ll now see the entire codebase loaded in Cursor, ready to explore or run commands with the Cursor agent.

Copy and paste the prompt below. Fix the @ simple to tag the correct files.

[CURRENT STATE] Run the planning sequence @planning.mdc

Summary of last chat.

Use the Edge Functions workflow to create a new Edge function and integrate it to the frontend. We're going to implement the Edge Function creation

[CONTEXT]

@prd.txt

[COMMANDS]

I have my Next.js server already running, so don't start my server. I have my functions being served, so no need to reserve them.

[TESTING]

I'll manually test the outputs in my Next.js app. Just let me know what to check for.

Copy and paste the prompt below. Fix the @ simple to tag the correct files.

[CURRENT STATE]

Run the planning sequence @planning.mdc

Use the @edge_functions_workflow to create a new Edge function and integrate it to the frontend.

We're going to implement the Edge Function creation

[CONTEXT]

@prd.txt

[COMMANDS]

I have my Next.js server already running, so don't start my server.

I have my functions being served, so no need to reserve them.

[TESTING]

I'll manually test the outputs in my Next.js app. Just let me know what to check for.

See the resources for course notes.

⚠️ PROMPTS ⚠️

Creating a JSON Design Profile

Take a design and extract the visual data into a JSON

Analyze the screenshots.

Create a JSON profile design system that extracts visual data from these screenshots so that i can use the JSON output in my AI Coding Agent.

Fonts, typography, colors, etc.

It should give specific context on how to replicate such design systems in a consistent style.

Remove contents of the image, focus on design style, fonts, colors, etc.

Design Workflow.mdc

# What we're doing

We're going to build a landing page for our application.

FRONTEND:

BACKEND:

DATABASE:

# Follow this exact workflow. Say the step so I know you're following!

1. Read the MVP spec to gain as MUCH context as you need to understand the problem fully. Generate a full report on the codebase context before starting.

2. We have DESIGN.json for the how to implement the design. Analyze it and

3. Only use TailwindCSS. Use Globals.CSS ONLY if absolutely necessary.

4. Make it mobile first design.

4. Use `npm run typecheck` to lint every time you edit the frontend.

5.  Make a plan.

a) Check if there are previous components already in the system before making new ones.

b) Use the libraries included in @package.json and nothing else.

c) Ask clarificaiton questions, and make assumptions given the information you currently have.

6. Start Coding.

7. Post Coding: Checks

1. Cross reference DESIGN.json - does the code follow the rules?

2. Run `npm run typecheck` a final time. Any issues?

Intro

In this design section, we'll cover five key areas. First, we'll establish what human designers still do that AI can't - like applying UX principles, mobile-first thinking, and translating business goals. Next, we'll prep our designs either through Figma assets or by extracting design systems from reference sites like Linear and Polar into JSON profiles. Then comes the big one - building a background agent with a carefully crafted megaprompt that can iterate on designs autonomously. I'll share seven battle-tested tips here, from planning first to using inline Tailwind. After that, we'll manually refine what the agent built using screenshots and MCP tools like StageWise and Browser Use. Finally, we'll level up with advanced CSS - smooth animations, hover effects, and scroll-based interactions that make your app feel polished. By the end, you'll have a complete workflow for AI-assisted design that actually works in production.

1. Defining “Good” Design

Intro Video

In this section, we’ll focus on design tools. Firstly, let’s be clear, at the time of recording this, there are a lot of challenges besides just making it look “good.”

Roles of a Human Designer

Apply modern UX principles

A human designer ensures the interface is intuitive, accessible, and user-centered. This includes:

• Visual hierarchy (e.g., clear headings, scannable layouts)

• Readability (e.g., font size, line height, contrast)

• Action clarity (e.g., buttons look clickable, labels are clear)

• User flow (e.g., reducing friction from one step to another)

• Accessibility (e.g., keyboard nav, screen reader support)

Design for responsive mobile-first experiences

Humans are better at anticipating real-world usage than AI. That means:

• Prioritizing the mobile layout first (small screens = harder constraints)

• Avoiding horizontal scrolling, fixed widths, or tap targets that are too small

• Making design decisions based on context — what’s essential on mobile vs desktop

• Testing on actual devices or in browser dev tools

Translate business and brand goals into design choices

AI can style a page, but it won’t understand business needs unless you tell it. Humans:

• Decide what to emphasize (e.g., signup button vs contact form)

• Make brand-consistent decisions (e.g., tone, color, mood)

• Balance aesthetics with performance and clarity

In this section

I’ll split this section from beginner tips to advanced workflows. These are all super-medius and detail-oriented responsibilities. And that's why at traditional tech companies, you would commonly see a designer working with a tool like Figma, the supply of designs, who a developer would then implement those designs.

In this new age of AI, we're seeing the evolution of these roles into things like product designers or full stack engineers, where we're seeing that because the AI tools are getting that much better, the boundaries between each role are starting to merge together.

Limitations

• Emphasize that AI is a tool, not a replacement for a designer’s creative thinking or user empathy.

• Encourage learners to question the AI output, make adjustments, and validate design/user experience themselves.

• Illustrate with a brief example of when AI-generated design choices might be wrong (e.g., accessibility, color contrast).

Subtask: Refactoring

The biggest strength of cursor for design is that it's quick at making huge sweeping refactoring changes. The problem with this is that it's usually quite over eager and does not do well at changing a single thing without changing a bunch of other things in the process. While LLMs are getting a lot better at this, it's still a huge problem.

Tip: Use Inline Edits

A common thing that I've started to see is people using a lot of cursor agents for simple things like changing text. This can run through your tokens and increase your monthly costs significantly. So I would just like to quickly remind you that you can always use Ctrl+F and Ctrl+Shift+F over a large amount of your file, and then use Command+K to manly rejig everything without using the more expensive cursor agent.

2. Preparing Our Designs

Figma

If you can use Figma, you can load your Figma assets as PNGs into a folder and reference them.

No Code: Prompt with ChatGPT / Cursor

1. Find a design style you like. We’ll use Linear.app and Polar.sh as references.

Take a design and extract the visual data into a JSON

Analyze the screenshots.

Create a JSON profile design system that extracts visual data from these screenshots so that i can use the JSON output in my AI Coding Agent.

Fonts, typography, colors, etc.

It should give specific context on how to replicate such design systems in a consistent style.

Remove contents of the image, focus on design style, fonts, colors, etc.

3. Build Your Background Agent

# What we're doing

We're going to build a landing page for our application.

FRONTEND:

BACKEND:

DATABASE:

# Follow this exact workflow. Say the step so I know you're following!

1. Read the MVP spec to gain as MUCH context as you need to understand the problem fully. Generate a full report on the codebase context before starting.

2. We have DESIGN.json for the how to implement the design. Analyze it and

3. Only use TailwindCSS. Use Globals.CSS ONLY if absolutely necessary.

4. Make it mobile first design.

4. Use `npm run typecheck` to lint every time you edit the frontend.

5.  Make a plan.

a) Check if there are previous components already in the system before making new ones.

b) Use the libraries included in @package.json and nothing else.

c) Ask clarificaiton questions, and make assumptions given the information you currently have.

6. Start Coding.

7. Post Coding: Checks

1. Cross reference DESIGN.json - does the code follow the rules?

2. Run `npm run typecheck` a final time. Any issues?

Now we're going to build our background agent that is going to get us 80-90% of the way. Remember, we just need to give it as much context as possible so that it can execute the task. 80-90% of the way. There's going to be lots of mistakes. It's almost impossible for it to not have any mistakes. And that’s ok!

Firstly, let me first mention that I've carefully refined this cursor rule over a bunch of time, or what I think works best for me. However, you could get a lot more loose or strict with this as you find works best for you.

You can also do this in a manual cursor chat, but I like to use background engines for this because it's a pretty isolated, self-contained part of the codebase. Pretty much is all gonna live in the front end. So we can work on other parts of the code base without worrying that we're going to overlap changes with whatever the background agent works on.

0. Start from Scratch using Background Agents

Firstly, we'll start with this MegaPrompt that is not a one-size-fits-all solution, but it'll take us about 90% of the way there.

I like to use this megaprompt with a background agent because it's able to continuously iterate on the design, which compared to back-end development can feel kind of iterative sometimes, where you constantly have to check something with your eyeballs to make sure that the spacing, colors, and fonts all look correct.

Tip 1: Add files manually

Small tidbit for these background agents is to spend at least 5 to 10 minutes crafting the perfect prompt, thinking about all the possible ways that your background agent might fail on the task. I also like to think that every single time I tag a file or explain something a little bit clearer, well that's just one less slip up that my LLM can make when it's creating the design.

Tip 2: Constantly Lint

Using npm run typecheck on the frontend folder.

Another major tip is to make sure that you use NPM Run TypeCheck on the front end folder. This is just a simple way that the LLM can continuously check between face to face that there are no linter errors. The reason we want to do this continuously rather than right at the end is that we want to make sure that the code is as clean as possible between each phase as fixing these all at the end is going to lead into some major bug fixes your Cursor agent will not likely be able to recover from.

Tip 3. Use Reference Designs

This is the easy way to learn chat about no context about how something looks. We can use images at the start of a prompt if we have some reference Figma designs. And if we don't have images from Figma, we can also just hand sketch some basic UIs with ChatGPT and get a basic working principle without having to know how Figma works.

Tip 4: Use Inline Tailwind, Only Globals.css for animations as needed.

Another huge reason that we use Tailwind CSS in this course is that it's super easy for our LLM to quickly reference the context of the front-end design in relation to the actual file itself.

What that means is that instead of the file having to check the module or global CSS file, it can quickly check within the same file what kind of dial in what kind of styles are applied to that exact element.

Tip 5: Mobile First Design

Next, we're going to ask the LLM to go for Mobile Design first. However, doing mobile first responsive design is a whole task in itself. But for this reason, we're going to leave the mobile first design until the very end, as a final pass check or even a separate prompt, where we're also manually verifying this step.

At the time of recording this, there aren't that many tools that I know of that would make mobile-first design as seamless as possible. For this, we're just going to hop into the console, activate our developer tools, and just spot as many tidbits as we can, passing those manually to the cursor agent and asking it to fix the design manually.

Tip 6: Plan first, then execute

Just like back-end development, planning for clean, maintainable code is just as important in front-end web development. That's why I always mention to my cursor agent before it runs through something significant, such as animations or any effect heavy styling, To come up with a whole plan. I'd like to ask it to make these clarification questions and then to clearly state the assumptions it's making for those questions. Since in this background agent, everything will be auto-continued.

This is just another way for us to see what our cursor agent was thinking when it implemented those designs so that we'll be able to easily see through the stack trace of why it made key design decisions.

Tip 6.1: Reference Previous Designs

Here in the planning section, I have this subtip to reference previous designs and learn from the typography, color schemes, and UI, so that it can easily make sure that it uses the correct designs on the first go.

Tip 6.2: Reference Libraries

Here, I'm mentioning some several design packages that we already have so that it doesn't try to use or install outside packages. For packages here, we've already installed radix icons so that it's using these beautifully styled icons in the project.

Tip 6.3: Check for Accessibility

Color contrast, alt text, keyboard navigation, etc

Tip 7: Make a full checklist

Since we're running in the background agent and the chats will be automatically ran, it's important that we make a full checklist. Just like if you were an employee at a company, if there were super vague instructions, then there would be many, many ways for you to get to the same answer.

We'll specifically ask the cursor agent to reference the exact step of the checklist that we're on so that we always have an easy way to look back at what was going on.

Let’s go!

All right, so now that we've crafted this mega prompt, which can take 50 to 100 cycles in the chat, we can basically go away for a couple hours and wait for this to apply all of the changes to our branch.

What this is going to do is create up a clone of our repository in a secure isolated cloud infrastructure, and you can read more in cursor's documentation for how this works.

From then on, it's going to spin up a cursor chat and automatically the next continuously until it believes that the task is fully completed.

3.5 Setup your Background Agent

Please refer back to hte Backgroun Agent section if you have issues with this! You should have to

1. Authenticate your GitHub

2. IF you have any issues, reach out to me on Discord/Email.

4. Refine with Manual Troubleshooting

1. Review Background Agent Code

Introduction

In this video, we’ll review the background agent code. You should be able to revisit your Background Agent’s code in full detail by clicking the cloud icon and opening the latest chat.

We’ll see the amount of lines it added/removed. Yours will of course be very different from mine, but I still want to generally go over HOW to review the code manually, even if you’re not a developer first.

Then we can scroll up to the very top to see the previous messages.,

Just generally scrolling, it seems like it indeed followed our 12 step workflow, starting with a full context report of the codebase, analyzing the design system, and finalizing with typechecks.

First, it found out what packages we were using, and related that to the business requirements. Then it looked at what kind of packages we were working with, in this case, Radix, ShadCN and others.

By toggling this preview above, we can see that it read a bunch of pages including our components, and it also asked our codebase where UI components were stored, in order to determine what components it had available.

This way, it was able to make the MOST accurate plan possible, as when you don’t have this detail, it can run up to 50% more chats just because it usually dives straight into coding, then finds out this information later and has to revise its plan.

We can then see it started to install packages with shadcn, which is fine since we already had that in the design system.

It proceeded to install fonts, and because it noticed it edited the TSX typescript files, it ran npm run typecheck and we can see that it was checking the design compliance rigorously.

Globals.css

Then it’s important to check in on the files it touched. We can see here that it modified our globals.css file, although we told it to avoid doing so unless it had to. But, remember that to get gradients, or more advanced CSS features, we do need to use the globals.css.

So we can see that it added some new colors in the globals.css, although we could have done that in the next.config.js which I’ll update in the prompt for the future.

It added some glass surface styles, which I’ll check in manually.

Layout.tsx

In the layout file, it added some new fonts into the layout, and updated our site metadata as per the PRD. We didn’t ask it to do that, so technically the agent went off instructions, but I’ll keep this as it is important for our app.

Chat Demo Page

Now, in the chat demo page we can see a bulk of the changes being added. Just generally, we can see the semantic HTML being followed as it uses proper section, div, and h1 tags.

The button and card files are from ShadCN so we won’t worry about those for now, and then we can see it updated our package.json slightly. This is where our dependencies live, so we’ll make sure we run npm install locally to get these packages in our local environment.

Follow Ups

It’s important that we leave no stone unturned at this step. So I just went through the last manually for about 5-10min then made a list of questions I had:

We can see it created this utils.ts file that I’m a little worried about, so I’ll follow up on that.

Make sure to spend a little more time on this conversation to apply the changes locally.

2. Applying Changes Locally

Next, we’ll apply the changes. This UI is a little bit confusing, but we can switch in the side panel from our local chat, to background chat. I’ll switch back locally, and look for a button to apply the changes locally.

Almost always, there’s a couple of tweaks I want to change to the pull request, as it’s only 80% of the solution, and we ALWAYS want to make sure we check the code and outputs before merging into our codebase.

I’ll check it out and run the packages locally to inspect.

Making a checklist of follow up instructions

In this stage, I’m going to just pause the video and make a full list of EVERYTHING that went wrong. For the purpose of this video, I’ll make it pretty fast, but I’ll focus on

1. Readability

2. Good design

3. Mobile Responsiveness

4. Animations

PAUSE: MAKE CHECKLIST ⏸️⏸️⏸️

Alright, so now I’ll skip over this, but we can manually go into the Cursor chat and fix these one by one.

Here, I like to screenshot the issues and number them all in one chat.

Then i’ll ask it to make a plan for fixing all the changes at once.

If it’s a more complicated fix, like an animation issue, then you should probably stick to fixing those issues at once.

But with these little papercut fixes, we can just ask the Cursor Agent to fix them all at once.

3. Fix Everything Locally

Alright, in this video, we’re going to make a couple of changes locally. I’m simply going to ask it to do this full list of tasklist of papercuts I see. I won’t go through this chat as extensively, just quickly so you can see the full list of change I’m making.

1. Make another checklist + build prompt. Use images!

I’ll tag the updated design workflow which includes the changes we made to use the tailwind config file. Then I’ll add a bunch of these images of references as well. We’ll reference the Design.JSON file again too so it has reference of our colors!

Papercuts

1. Make the header text fade in from the bottom. See Linear screnshot.

   
   

2. View features should take you to Features

3. Hover effects on the feature cards. Add a card glow / shadow. See Features screenshot

   
   

4. Make the feature cards subtly jiggle on hover

5. Get Started Now - No account required - Start immediately spacing looks bad.

6. Design for landing page should follow this structure

7. Add a placeholder footer relevant to my app context.

   
   

8. For the hero add these placeholder tags

   Backed by Nobody.

   GitHub 0K+

   
   

9. Add Dark Mode / Light Mode

Other Important Things To Add

For the context of this course, we won’t add images, but as you can see from Linear, Polar, and Apple, they actually show these glassy images from the app. to show how things work.

Adding product demos, testimonials, etc.

Conclusion

Great! So now the landing page is looking a lot better. There’s obviously still a lot to fix, but this is looking good enough to ship for now.

In the next video, we’ll use a tool called Stagewise and BrowserTools MCP to get into some really advanced workflows that will really improve our quality of life. Let’s jump in.

5. Advanced Tool: Stagewise

Stagewise

Editing front-end design can get a little bit meticulous because the cursor agent doesn't have great spatial awareness.

As we saw in the last couple of videos, the cursor agent took us 80% of the weight there with the background agent. Then we did another 10% of the design work manually with a cursor agent. But now we're going to use this advanced tool set to get that last 10% polish without manually going over the design over and over again.

So how StageWise works is it first interprets the user's request with natural language. It'll analyze the visual content on the page, create a plan to make the change, and apply the changes directly through cursor.

Setup

To set it up, we quite simply just need to open up a terminal, navigate into the directory of choice, and run this command.

Once we see that, we're going to be prompted to a browser where we can sign up for SageWise.

And then we're going to hop back into the terminal, install this extension stage wise.

Then I'll hit Command + Shift + P or Ctrl + Shift + P on Windows and I'll select the button to open up the window.

Demo

1. Add https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Y_Combinator_logo.svg/2048px-Y_Combinator_logo.svg.png to the Backed by Nobody

2. Add a Carousel with palceholder tweets

Design Part 3

and if we hop back into cursor, we can see it added that image into the correct component.

Next Feat.

Next, we’re going to do a huge refactor by tagging everything and asking for a greenish modern gradient instead.

We’ll tag all the relevant files and buttons, and check back in with the Stagewise agent to make the appropriate fixes.

Gradient background

Finally, we’ll just ask for a modern gradient background, that modernizes and makes the website feel more edgy without losing its sleek modern feel.

6. Continue refining the design!

Outside of the course, continue using the design_workflow and Stagewise to implement…

• Add smooth animations and micro interactions like：

• smooth hover effects

• gentle tilt effects

• scroll-based animations

• animated glitch-style

• inertia-based scroll

11

⚠️ PROMPT ⚠️ 

# What we're doing

We're going to build a landing page for our application.

FRONTEND:

BACKEND:

DATABASE:

# Follow this exact workflow. Say the step so I know you're following!

1. Read the MVP spec to gain as MUCH context as you need to understand the problem fully. Generate a full report on the codebase context before starting.

2. We have DESIGN.json for the how to implement the design. Analyze it and

3. Only use TailwindCSS. Use Globals.CSS ONLY if absolutely necessary.

4. Make it mobile first design.

4. Use `npm run typecheck` to lint every time you edit the frontend.

5.  Make a plan.

a) Check if there are previous components already in the system before making new ones.

b) Use the libraries included in @package.json and nothing else.

c) Ask clarificaiton questions, and make assumptions given the information you currently have.

6. Start Coding.

7. Post Coding: Checks

1. Cross reference DESIGN.json - does the code follow the rules?

2. Run `npm run typecheck` a final time. Any issues?