Cursor 사용사례_Prompts

I've reviewed the transcript and extracted the prompts used or implied. I've also attempted to present them in a roughly orderly manner, reflecting the flow of the video. There may be some slight interpretation involved, but I've aimed for accuracy.

 

Here's the list:

1. (To Composer): What is a codebase? Answer by creating a new file called "codebase explanation.txt".
2. (To Composer): Please make codebase explanation longer – a 10-paragraph essay.
3. (To Composer): Can you change this file to MD (markdown)?
4. (To Composer): (Referring to selected text) Make more concise.
5. (To Composer): I want you to create an HTML and JS animation of balls bouncing in a rectangle. They should be red, blue, green, orange, and white.
6. (To Composer): Run it locally.
7. (To Composer): Add four more green balls.
8. (To Composer): I want you to make these balls bounce off of each other.
9. (To Composer): This is not doing a good job of mimicking how these balls would realistically bounce off of each other... Please figure this out.
10. (To Composer): Abandon everything. I want you to get rid of these bouncing balls, and I want you to create a landing page with no scrolling that looks like an early 2000s website on animation. Make it like this retro animation website and make it epic.
11. (To Composer): When I click on each of these (links), can you please create a different animation? And within this box, I want something else to pop up.
12. (To Composer): Save this project to [GitHub repository link]. I already created the repo. Please load files to this or commit… put this on GitHub.
13. (To Composer): Run this locally. (Referring to a Next.js project).
14. (To Composer): I want you to create right now I want you to create a really cool looking AI image generator. The input field will be light purple, and I will describe the image there, and when I press enter, it will generate images in a grid. Right now, I want you to just put placeholder components instead of the images there. I'll add the AI features later. I want to start off by just creating the shell. Have a top bar that looks like this image (sketch). Please make it look professional and have the background have dots like a gridline dots in the background that are gray and like nice and light and not too demanding.
15. (To Composer): Make no images show up until I press enter, and I actually want you to mimic the loading process of these images and have like a nice little like blur while they're loading and just have them load for 3 seconds.
16. (To Composer): I don't like this purple, please make it darker dark blue and make update that across all components get rid of the purple.
17. (To Composer): Man, the text is dark blue.
18. (To Composer): In very simple terms, I want you to create a little info icon at the top right of this page that when I press it, it opens up a center Peak toggle that explains what an API is. Explain this very simply, like concise to a beginner, and use analogies and make this easy to understand.
19. (To Composer): Put this [API Key] in the Env file that is secure.
20. (To Perplexity): I'm creating a Next.js app, and I want a user to be able to generate an image from text. I want the best AI image provider API to use. Please give me the code examples for generating an image using a great high-quality image model, explanation, and code examples.
21. (To Composer): I'm still getting errors with Fal. Please fix them.
22. (To Composer): Please create an option for all the images to one-click download and one-click copy. This should be on the top right of each one as little icons. Don't have text, have icons, just allow me to copy and download. The copy icon should have a slight little animation when I press it.
23. (To Composer): When the images loaded, I got this error, and this happened after I tried to add the copy and download buttons.
24. (To Composer): I want you to take a really close look at the component uh that has the uh typing and the changing components. I need you to make sure that the previous change is held there. All of this seems like an endless rotation, and so you should change the last animation to the first one and make that match in the prompt so it's like a continuous clean flow.
25. (To Composer): Please change the font to Poppins, and then I want you to add another component that shows the assembling of components, and I want you to use examples from this (transforms demo) and match the color of the site.
26. (To Composer): Can you please make this, um, this new one make it these circles go into the middle, and then flash out to like a really clean red component um that looks like a section of a website wow in white. I want to add text to that, and then I want you to get rid of that gray background that's behind it just have it on without any background that that red stuff and then and then move that up above the component that shows the typing to edit the animations. Just have the header text on that, and then also rotate everything down. You in in in your recent changes, you moved everything uh too far up, and now it's off the screen.
27. (To Composer): Every time that there is a new component that it pops up, cuz right now it's on a loop where it circles to the middle and it pops out with the component. I want you to change the component every time it comes out, so now it's horizontal, and then I want it to be a vertical component, um, and then I want it to be a, um, a component with a square in the middle that has like animating or a rectangle in the middle that has like animations going through it. And yeah, keep the top bar the same and the the out border the same for all of them, so it should all look like a Mac window.
28. (To Composer): In between these two sections, I want you to make a testimonials section, and I want you to add like this should be like and there should be spacing in between the top of this component and then the bottom of this new component, and I'm going to give you an image of the style to follow...
29. (To Composer): Change this to um blue text.
30. (To Composer): Between these sections, add a line, like a white line that doesn't go that far across, just a little line break make it look cool this separates the sections.
31. (To Composer): Can you please add a title section that says edit your animations just by typing, and please add a white line break between this section and the one above it very similar to uh the other line breaker.
32. (To Composer): Please add a footer at the bottom, and I want to be able to scroll down to get to the footer, so a good amount of spacing between the last component and the footer.
33. (To Composer): I created a new GitHub repo at this link right here. I just initiated it, and I want you to push this code to that, and it is a public repo. Let's put it on GitHub.
34. (To Composer): I just tried to deploy this app to Vercel, and I got this error. Please fix this and prepare this project for deploying on Vercel.
35. (To Composer): Do it now directly and give me deployed link.
36. (To Perplexity): I want to make a really cool landing page that has really elegant and fun animations, and I want to use a new library and test out new uh simple Frameworks for animation. I want you to suggest simple Hub repos that I can use right now to try out different to test out different types of animations, and I want these to be lightweight, great for landing pages. Please list these out right now.
37. (To Perplexity): Please find popular ones.
38. (To Composer): Can you please tell me if um I'm able to run locally anything from the documentations folder. I'm wondering if we can run that index.html file to see what's in there.
39. (To Composer): The documentation is trying to load some resources from paths that don't exist.
40. (To Composer): I want you to create a new document that is a landing page for my app, and I want you to start off by making it look like this. Except where they mention app, I want you to say design. This is going to be an idea to design tool, and it's an agent that creates designs for you, and it's going to be awesome... Build this site, this landing page, except I want you to use some cool animations in that uh just around the app that match the examples in the...
41. (To Composer): Change the orange to like a dark, like a a red pink, uh all instances of that. And idea to design in seconds...
42. (To Composer): Where did you get this inspiration? What cool animations match the example file? And what is the key name.
43. (To Composer): In that example directory you used a different key to create the animation that is pretty simple. Please use that.
44. (To Composer): To find the examples easier and easier to access, please make the example a file inside the project folder. I need you to use a more descriptive format for each example in the folders.
45. (To Composer): Is there any other way to run this so I do not have to tag the whole folder?
46. (To Composer): Can I change these types of files at scale?
47. (To Composer): What can I use that has all of these files? Is there a specific place I can use that does not require specific code?
48. (To Composer): Put those new examples in new pages for my index.html.
49. (To Composer): What file can I start from to start coding on that main page that I am making?
50. (To Composer): I want to create an HTMX site because I see examples of these files can do the front end of a site at scale.
51. (To Composer): I'm going to use HTMX now with the key elements from those HTMX examples in index html.
52. (To Composer): I found a simple JS file in that documentation that has all the animation examples. Use this to the best of your ability for my main HTMX page.
53. (To Composer): I have these files open on the page. Why are the colors not appearing on the page? Where do the colors come from on the page?
54. (To Composer): Please use the colors from this specific HTML file in my HTMX page.
55. (To Composer): How do I change the size of the animation itself?
56. (To Composer): I found this script that I want to incorporate, but how does it look on the page, and how do I add it inside one of those containers?
57. (To Composer): Please only render this script in one of the containers with the best alignment.
58. (To Composer): Is there a way to call this function at the top of the document, rather than have it inside the div itself?
59. (To Composer): I can see the JavaScript but I cannot see it showing up inside the animation section of that file. Use the previous example to place that function there.
60. (To Composer): How to control animations with JAVASCRIPT at scale?
61. (To Composer): Remove that javascript from the HTMX page, I want to use something simpler.
62. (To Composer): Start with this script, and add some animations.
63. (To Composer): I am going to try to use alpine now with the key elements and JS files and Alpine examples, to add my key animation features.
64. (To Composer): Is there any way to make this script in an external file for my new alpine script?
65. (To Composer): The new function did not do anything on that external file.
66. (To Composer): Make the Javascript more detailed.
67. (To Perplexity): Give me examples of the best CSS examples to add cool, sleek animations in HTMX code.
68. (To Composer): Change this code to the CSS elements and the best practices that perplexity told you to do.
69. (To Composer): Is there any way to do this and use that CSS sheet I already have?
70. (To Composer): I am going to try out CSS now, use this code to control animation at scale.
71. (To Composer): I see it, now add that animation to a few of the main headers on that HTMX file.
72. (To Composer): To make this simple, get rid of that CSS to make more room and organization.
73. (To Composer): Let me try and add a container around all of this, it will be more organized at scale.
74. (To Composer): Get rid of that container and try to animate a single header inside the file, not with external files, but with the raw animation itself.
75. (To Composer): Remove that animation on the header, it is not working.
76. (To Composer): I give up on animation for now. Please make that file simple and easy to use at scale without all this other madness.
77. (To Composer): It is not easy to use and I cannot see it to be fun.
78. (To Composer): Lets start over with this template in a new file. What do I need to create this properly?
79. (To Composer): Make sure there is nothing external.
80. (To Composer): I want that HTMX file to show up right after I create it. Make the file and have it appear on the web page.
81. (To Composer): HTMX and ALPINE together, now make a new container, please!
82. (To Composer): Use this website for Alpine for a good scale file.
83. (To Composer): Add the code from there to a container for a new HTMX file.
84. (To Composer): I do not see this code that you are doing to the Alpine, let me give the key section here, try again!
85. (To Composer): I can only change one element here. Make this so I can change more.
86. (To Composer): Let us focus on the container. Make it move left and right.
87. (To Composer): Try some of these new scripts on the HTMX file.
88. (To Composer): That file is dead to me. Create a new file, with just this script on that page!
89. (To Composer): Get rid of that file I just made.
90. (To Composer): This does not matter at all and is annoying. Make it the way the page was before, that has only three examples and those examples show up right away.
91. (To Composer): Remove all the new containers, I cannot see what is working, so just a basic HTMX file, but I am getting these elements in.
92. (To Composer): Add a container, but make it very simple.
93. (To Composer): Make that JavaScript even simpler.
94. (To Composer): Okay I see it, but how do I make it so I can duplicate the container, it needs to use the code I already have to work!
95. (To Composer): I will keep trying. This template sucks, create a brand new template with the best Alpine skills, a template I can start from so it has all the best practices.
96. (To Composer): I will use this, use the key skills here, but make it as scale as possible.
97. (To Composer): Put all of that inside the Alpine code file.
98. (To Composer): Create this inside a container that I can scale easily on that page.
99. (To Composer): Try a new page, show all those new things I can do with those elements on that page.
100. (To Composer): I want a basic HTMX page to work with this. Get rid of the template.
101. (To Composer): Now use those components to change and have those elements show up on that HTMX.
102. (To Composer): Okay this works, but how to call these external files!
103. (To Composer): Forget all of that CSS, get rid of it!
104. (To Composer): Make it clear that these examples are external files and that I can call these files here now that it is properly set up!
105. (To Composer): Use this code for Alpine examples for the most important section of the files.
106. (To Composer): Make the main section a single tag inside that HTMX file, I only want one file.
107. (To Composer): Now make everything show up on the tag and file itself.
108. (To Composer): Finally, all I want to do is add animation. Make that file simple and easy to use now.
109. (To Composer): Please let me be done with animation finally. Get it over with for the HTMX project.
110. (To Composer): I should be good to go now. What can I test at this section?
111. (To Composer): Make the HTMX file simple with the key examples showing up on the page itself.
112. (To Composer): Get rid of all the text, I want an empty code that has a title and this on this page, nothing else.
113. (To Composer): I want to have two example boxes, not one.
114. (To Composer): How can I make the containers look more like those coding sandboxes? What do they consist of?
115. (To Composer): Create CSS files and HTMX files with those sections of the container, what can I put in this HTMX file?
116. (To Composer): It looks like the JS and CSS files will only work if I change them to CDNs, do that right now.
117. (To Composer): Show me what key lines consist of those specific boxes.
118. (To Composer): What key features can I put at the top of the page for Alpine and HTMX?
119. (To Composer): If CSS, HTML, and ALPINE, are CDNs, what example should I test at that page?
120. (To Composer): It needs a key title for the CDN HTMX code I want, nothing else.
121. (To Composer): Give me some simple CSS styles to use at all the HTMX examples for code, nothing more.
122. (To Composer): Make the top a dropdown now.
123. (To Composer): It needs to work with this specific drop down.
124. (To Composer): Now focus on the key JS at the bottom of the file, is it good to go for a file at scale?
125. (To Composer): What should I test now, please make it clear.
126. (To Composer): Where does the page end? Can I add more sections that would be fun to see at the page in scale, what examples would be fun at all?
127. (To Composer): What about simple JS files. What lines and keys are required to put inside that one file that loads on that one page.
128. (To Composer): What does that HTMX file contain to call these files?
129. (To Composer): Where does HTMX come to play at calling these files?
130. (To Composer): What new test can I apply for CDNs and what files can I create with those examples at the page?
131. (To Composer): What about simple CSS files. What lines and keys are required to put inside that one file that loads on that one page.
132. (To Composer): Is it possible to incorporate a dark mode using the current code and examples from the HTMX file in an organized, scalable way?
133. (To Composer): Test it! I only want these examples and code I have made working properly, nothing extra.
134. (To Composer): This template still sucks to change. Forget it. If there is a more scalable way to have what these sandboxes look like, go for it. I only want to use three files if you can.
135. (To Composer): Here are my keys put them where they need to go in EnV file format them properly please
136. (To Composer): please run this locally
137. (To Composer): error please fix
138. (To Composer): Commit This to this GitHub repo that I just created so I already created this repo please upload my code to this repo
139. (To Composer): I now create a verel project using the C I think we can force it to use versel here using the CLI and deploy it to verel and um yeah I think we can just say this