Build an invitation card website purely by prompting
Posted on Apr 3, 2025. Task: Posted on Apr 3, 2025 This is my first post I had an idea that I wanted to implement quickly. I remembered a conversation with a friend who told me he was using Cursor at his company, and it was a real time-saver for him. Since I don’t have permission to use it at work, I hadn’t tried it yet. The website I wanted to create was really simple: an invitation card for my girlfriend. I knew the site would have: A frontend-only setup Animations Images and text Some buttons to navigate between pages The project was technically pretty straightforward. So, I downloaded Cursor, signed in, and started using it to build the application. I saw this as an opportunity to test the "no-code" approach. My goal was to give all instructions in the prompt interaction and not intervene in the code, even though I already knew how to implement everything myself. First 30 Minutes: I have experience working with prompts and AI models, so I was already familiar with the interaction. I started by outlining the goals and describing how the page should look in my first prompt. I included detailed technical instructions on how I wanted things to be implemented. At first, I was pleasantly surprised that Cursor allows you to run commands directly from the console. Then, I stumbled upon my first problem. I wanted to create an envelope animation. Anyone who has worked with animations knows they can be tricky if you’re not familiar with them. So, I started giving Cursor general (non-technical) feedback about the issues I was encountering. I spent about 15–20 minutes revising my instructions and undoing changes, as many of the modifications made the problem worse. Eventually, I searched for an envelope animation in HTML and JavaScript, changed the colors, and pasted the code into the prompt. I told the model to use it, and with that as a base, I was finally able to achieve the desired result. Minutes 31–120: Once the hardest part was done, I moved on to adding buttons, changing fonts, and configuring the layout. This part was quick—I reused prompts to generate new screens, and everything worked smoothly. However, I noticed a few key things: If you don’t specify that certain elements (like backgrounds, fonts, or button styles) are global, the model will treat them as local and apply changes separately for each page. If you don’t specify that certain elements (like backgrounds, fonts, or button styles) are global, the model will treat them as local and apply changes separately for each page. There’s a lot of hallucination about how things "work"—the model often assumes something is functional when it actually isn’t. There’s a lot of hallucination about how things "work"—the model often assumes something is functional when it actually isn’t. It takes your word as the absolute truth. To test this, I falsely claimed that a working feature was broken. Instead of verifying, the model started rewriting the logic to "fix" something that wasn’t broken. It didn’t push back or identify my mistake. It takes your word as the absolute truth. To test this, I falsely claimed that a working feature was broken. Instead of verifying, the model started rewriting the logic to "fix" something that wasn’t broken. It didn’t push back or identify my mistake. Final Phase: When I had about 90–95% of the page completed, small adjustments started taking too much time. So, I stopped making changes through Cursor and modified the code manually. Most of these tweaks involved wording, padding, and margins. Conclusion & Takeaways: I was able to build a website from scratch in 2–3 hours using Cursor. Doing it manually with my usual workflow would have taken 4–8 hours. Knowing what needs to be done and what’s going wrong is crucial for speed. If you can’t identify the problem, you’ll get stuck in a loop of saying, "Oh, I see the issue now," or "This isn’t working." Instead of vague feedback like, "The images are misaligned," it’s better to specify, "The images don’t have the right margin—add a margin or place them inside a container div to fix it." Cursor doesn’t handle backtracking well. If you don’t explicitly state that something should apply globally, it won’t. For example, I wanted to change the button style, but later realized it was only updated on the current screen.; tools: Cursor. Human role: The original post does not say how a person stayed involved.; limitations: Cursor requires explicit instructions for global styles; otherwise, changes apply locally per page. The model lacks verification capabilities and will 'fix' non-existent bugs if told they exist. This workflow is suitable for small, technically straightforward projects where the user already understands the underlying code, but it is not designed for non-technical users to build complex applications from scratch without debugging skills..
Tools
Published on Agent Work Atlas:
Overview
Posted on Apr 3, 2025
Workflow
Posted on Apr 3, 2025 This is my first post I had an idea that I wanted to implement quickly. I remembered a conversation with a friend who told me he was using Cursor at his company, and it was a real time-saver for him. Since I don’t have permission to use it at work, I hadn’t tried it yet. The website I wanted to create was really simple: an invitation card for my girlfriend. I knew the site would have: A frontend-only setup Animations Images and text Some buttons to navigate between pages The project was technically pretty straightforward. So, I downloaded Cursor, signed in, and started using it to build the application. I saw this as an opportunity to test the "no-code" approach. My goal was to give all instructions in the prompt interaction and not intervene in the code, even though I already knew how to implement everything myself. First 30 Minutes: I have experience working with prompts and AI models, so I was already familiar with the interaction. I started by outlining the goals and describing how the page should look in my first prompt. I included detailed technical instructions on how I wanted things to be implemented. At first, I was pleasantly surprised that Cursor allows you to run commands directly from the console. Then, I stumbled upon my first problem. I wanted to create an envelope animation. Anyone who has worked with animations knows they can be tricky if you’re not familiar with them. So, I started giving Cursor general (non-technical) feedback about the issues I was encountering. I spent about 15–20 minutes revising my instructions and undoing changes, as many of the modifications made the problem worse. Eventually, I searched for an envelope animation in HTML and JavaScript, changed the colors, and pasted the code into the prompt. I told the model to use it, and with that as a base, I was finally able to achieve the desired result. Minutes 31–120: Once the hardest part was done, I moved on to adding buttons, changing fonts, and configuring the layout. This part was quick—I reused prompts to generate new screens, and everything worked smoothly. However, I noticed a few key things: If you don’t specify that certain elements (like backgrounds, fonts, or button styles) are global, the model will treat them as local and apply changes separately for each page. If you don’t specify that certain elements (like backgrounds, fonts, or button styles) are global, the model will treat them as local and apply changes separately for each page. There’s a lot of hallucination about how things "work"—the model often assumes something is functional when it actually isn’t. There’s a lot of hallucination about how things "work"—the model often assumes something is functional when it actually isn’t. It takes your word as the absolute truth. To test this, I falsely claimed that a working feature was broken. Instead of verifying, the model started rewriting the logic to "fix" something that wasn’t broken. It didn’t push back or identify my mistake. It takes your word as the absolute truth. To test this, I falsely claimed that a working feature was broken. Instead of verifying, the model started rewriting the logic to "fix" something that wasn’t broken. It didn’t push back or identify my mistake. Final Phase: When I had about 90–95% of the page completed, small adjustments started taking too much time. So, I stopped making changes through Cursor and modified the code manually. Most of these tweaks involved wording, padding, and margins. Conclusion & Takeaways: I was able to build a website from scratch in 2–3 hours using Cursor. Doing it manually with my usual workflow would have taken 4–8 hours. Knowing what needs to be done and what’s going wrong is crucial for speed. If you can’t identify the problem, you’ll get stuck in a loop of saying, "Oh, I see the issue now," or "This isn’t working." Instead of vague feedback like, "The images are misaligned," it’s better to specify, "The images don’t have the right margin—add a margin or place them inside a container div to fix it." Cursor doesn’t handle backtracking well. If you don’t explicitly state that something should apply globally, it won’t. For example, I wanted to change the button style, but later realized it was only updated on the current screen.
Reported result
The project was completed in 2–3 hours, compared to an estimated 4–8 hours for manual development. However, the author noted significant friction: vague feedback led to loops, the model hallucinated functionality, and it blindly accepted false bug reports. The final 5–10% of adjustments required manual code editing because Cursor's iterative process became too slow for minor styling changes.
Human role
The original post does not say how a person stayed involved.
Limitations
Cursor requires explicit instructions for global styles; otherwise, changes apply locally per page. The model lacks verification capabilities and will 'fix' non-existent bugs if told they exist. This workflow is suitable for small, technically straightforward projects where the user already understands the underlying code, but it is not designed for non-technical users to build complex applications from scratch without debugging skills.
Try it
I want to build a simple frontend-only website for [replaceable purpose, e.g., a birthday invitation] using Cursor. I have [replaceable technical skill level, e.g., basic HTML/CSS knowledge]. Steps: 1. Start a new project in Cursor. 2. Provide a detailed prompt outlining the page structure, animations, and navigation buttons. 3. For complex animations, if the AI struggles, search for a reference code snippet online, modify it slightly, and paste it into the prompt asking Cursor to integrate it. 4. Explicitly state that styles (fonts, colors, backgrounds) should be global to avoid per-page overrides. 5. Review the generated code manually. If minor tweaks (padding, margins) take more than 2 prompt iterations, edit the code directly. 6. Do not send or publish anything until I have manually verified all functionality. Output: A working local HTML/CSS/JS project. Success Metric: The site loads correctly with all animations functioning. Error Handling: If the AI claims a feature works but it doesn't, verify manually and provide specific technical feedback (e.g., 'Add margin to container div') rather than vague complaints.
Source reports are not independently verified. Publication date is the catalog publication date, not the original article date.