From the course: Build with AI: Beyond Pair Programming with AI

Use AI to build the layout

From the course: Build with AI: Beyond Pair Programming with AI

Start my 1-month free trial

Use AI to build the layout

“

- [Instructor] The scaffolding is already in place thanks to AI, and now I want to add some style and content to my app. I want a header across the top, I want three equal width boxes underneath, one with information, one with an interactive map, and one with a chat. So let's see if we can get AI to do that. But first, I want to ensure (indistinct). So let's see if we can get Cursor to help us do that. But first, I want to ensure Cursor is following my set of instructions. For this, you can create a file called dot cursor rules, and provide system instructions for Cursor to operate on your particular project, and you place that cursor rules file inside the root of your folder, and Cursor will then always refer to it anytime it's doing something in your project. If you want to see examples of these Cursor rules, you can go to cursor dot directory. Here, open source contributors are creating these Cursor rules, and posting them for anyone to use. And to use them, all you have to do is find one you like, copy the content, go into Cursor, go to the root of your project, create a new file called dot cursor rules, and just paste in the content. Cursor is configured to automatically detect this file, and then use it as the system instruction for any future chats. So whatever is in this file now governs how Cursor will write your code, and this will allow you to closely moderate how the AI is writing code to deal with all the issues we've been talking about so far in this course. So let's see what the AI can do now. I'll close out the chat, and this time, I'll use the composer. So I'll hit Command or Control I to open the composer, then I'll click on this button here to open it in a notepad mode. So here, you can set up quite complex instructions, and then have the system run through it, and you get a nice view where you can see what the system is doing. For this next part, I need a fairly beefy prompt. So here it is. Build out the React app in the folder using components and tailwind styles. The app has a full width responsive layout, and a full width header, and a full width main area. The main area has the three equal width boxes that take up all vertical space. The first box is an info box, second is an interact map, third is a chat, put placeholder content in, interactive elements will be added later. Let's see what happens if I just run this. So I'll click submit down here. What the composer does now, is create a list of steps it needs to follow, and then it goes into my project, finds all the files that are related to it, writes all the code it needs to make my instructions work, and then when it's done, it'll give me instructions on what to do next. So what it's suggesting is changes to App TSX, ChatBox TSX, MapBox TSX, InfoBox TSX, and Header TSX. So let's see what happens if I just click Accept All. If I now close out my composer, and look over in my files, you'll see now App TSX has a bunch of new content, and we also have new files. Here we have ChatBox TSX, MapBox TSX, InfoBox TSX, and Header dot TSX. So let's see what that looks like in the browser. And look at that. I now have a complete layout with a header. Well, there's some interesting menu options up there I need to get rid of. Then we have an information box, we have an interactive map placeholder, and we have a chat placeholder. And the layout is roughly what I was asking for. Here, I have a huge step forward from where I can then continue to do work. And this time, I didn't do anything. I just provided the instruction, let the AI do the work, and then hit Apply All. That is the entirety of my involvement.

Contents