\ud83e\udd28<\/p>\n
I know, coming from a developer (who used to take pride in what\u2026 we’ll call "handcrafted artisanal code"<\/em>), this sounds like heresy.<\/p>\n But stay with me here and see how far these kind of tools have come in only the last year.<\/p>\n We’ll be building the app using the so-called vibe coding<\/strong>. Basically: you "talk" to the editor<\/strong>, the editor writes the code, and you navigate aka prompt<\/strong> it toward the final product (that you’ll be happy with \ud83e\udd1e).<\/p>\n Programmers\/Coders\/Engineers – we’ve always liked to tell\/instruct computers what to do. That’s still true, only the syntax got\u2026 conversational \ud83d\ude42<\/p>\n Who would’ve thought \ud83e\udd37\u200d\u2642\ufe0f<\/p>\n ~ Nikola Bre\u017enjak on X<\/a><\/p>\n<\/blockquote>\n In my previous post, I did this with Replit: Vibe Coding a Pok\u00e9mon Search App with Replit<\/a>.<\/p>\n This time we’ll do the same thing, step-by-step, but with Cursor<\/strong>.<\/p>\n Same app. Same flow. Different tool. More "local dev" vibes (yup, puns still need some work<\/em>).<\/p>\n In this post, we’ll be using Cursor<\/strong>: https:\/\/www.cursor.com\/<\/a>.<\/p>\n Cursor is a code editor (much like Visual Studio Code – VSC<\/a> – actually, its fork, in Github terms), but with an AI Agent that can plan and implement changes across your codebase. It’s like pair-programming\u2026 except your pair doesn’t need bathroom breaks.<\/p>\n For bonus points, we won’t even type anything. Instead, we’ll use our voice to code<\/strong> (\ud83e\udd2f, I know<\/em>) with *WisprFlow<\/strong><\/a> (or alternatives like SuperWhisper \/ VoiceTypr).<\/p>\n Previously, I wrote the "classic" (may I say, "old" at this point?<\/em>) tutorials building the same app with two different tech stacks:<\/p>\n This one is different.<\/p>\n Same Pok\u00e9mon search app.<\/p>\n Less typing.<\/p>\n More vibes (\ud83d\ude02 I know, I know<\/em>).<\/p>\n If you want to follow along:<\/p>\n Pro tip: copy\/paste these and adapt in case you’re feeling adventurous.<\/p>\n<\/blockquote>\n First of all, always start with a plan<\/strong> before writing any code.<\/p>\n In the Replit post, I started with a simple prompt and then clicked Replit’s Improve prompt<\/strong> button.<\/p>\n I like that "improved" prompt better as:<\/p>\n So\u2026 let’s use that improved prompt here too \ud83d\udc47<\/p>\n Paste this into Cursor (Plan mode):<\/p>\n A comprehensive web-based Pok\u00e9mon search application that allows users to discover and view detailed information about Pok\u00e9mon using the Pok\u00e9API.<\/p>\n Core Features:<\/p>\n Visual References:<\/p>\n Inspired by the official Pok\u00e9mon website and Pok\u00e9dex interfaces, using vibrant, game-accurate designs and intuitive card-based layouts.<\/p>\n Style Guide:<\/p>\n Special Requirements:<\/p>\n You can leave the Since we didn’t define the actual tech stack, Cursor will ask us which stack we want (language + CSS framework):<\/p>\n I chose Vue.js and Tailwind CSS.<\/p>\n Select Cursor will create a seriously detailed PRD. I won’t paste it here fully, but will mention that mine included sections like:<\/p>\n Also, Cursor created a detailed implementation checklist (sharing just sections that it covered below):<\/p>\n Before you do ‘start cooking’, I really encourage you to read through the PRD<\/strong> and see if:<\/p>\n If something looks off, just tell Cursor what you want. And, once you’re happy, move on.<\/p>\n Let’s now tell Cursor to implement the project by following the PRD and the Checklist it created:<\/p>\n Finally, send that prompt to Cursor (make sure you have \u26a0\ufe0f You would most likely get a good final output if you wouldn’t use such a detailed prompt. Something like "Implement the @PRD" would most likely suffice. But, as with anything, treat this like a craft and go an extra mile (test multiple prompts and see what works best for you).<\/p>\n TL;DR<\/strong>: a bit more structure and detail in the prompt goes a long way.<\/p>\n<\/blockquote>\n Here’s where Cursor does the ‘actual work’ of:<\/p>\n Yes, it can do all of that. No, it doesn’t always do it perfectly, and that’s why you’re here \ud83d\ude05<\/p>\n Meaning, it will ask you for permission to run certain commands ( As it’ll be doing its thing, you’ll be able to follow along and read what it is all that it’s doing. I know, looking at someone else doing your job, gives you a weird feeling.<\/em> \ud83d\ude05<\/p>\n When Cursor is done, you’ll see a detailed message of what it did, including the section on running it and deploying to Github:<\/p>\n In the Replit version, preview was built into the web UI.<\/p>\n With Cursor, we’re running locally on our machine \u2014 so the "Preview" step is simply:<\/p>\n In my case, the URL was http:\/\/localhost:4173\/PokemonSearch\/<\/a> and it looks like this:<\/p>\n I’ll be frank and say that I liked the Replit output better (see here: https:\/\/pokedex-nikolabreznjak.replit.app\/<\/a>), but you can get to that as well by additional prompting.<\/p>\n I asked Cursor to Not bad for a terrible prompt \ud83d\ude48<\/p>\n Replit had a "Publish now" button.<\/p>\n Here, we’ll just ask Cursor to tell us how to deploy to Github Pages.<\/p>\n It said:<\/p>\n Only thing you have to change in the commands above is the Github username, and the project’s name.<\/p>\n As a step 2, you have to:<\/p>\n You can now run the workflow manually in the Once deployed, your app is going to be available at: https:\/\/YOUR_USERNAME.github.io\/YOUR_PROJECT_NAME\/<\/a><\/p>\n\n
The Tools<\/h2>\n
The Old Ways\u2122<\/h2>\n
\n
Let’s Start Prompting<\/h2>\n
\n
pokemon-cursor<\/code>)<\/li>\nCommand + i<\/code>) and make sure you select the Plan<\/strong> mode<\/li>\n<\/ol>\n![\"\"](\"https:\/\/i.imgur.com\/YNco74W.png\")
<\/p>\n\n
Prompt 1: Spec first, code later<\/h3>\n
\n
\n
\n
\n
\n
Auto<\/code> for Model, but lately I’ve been defaulting to Opus 4.5. Then, just hit ENTER or click the button with the arrow pointing up (\u2191).<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/chBiS7U.png\")
<\/p>\nAnswer the questions<\/h3>\n
![\"\"](\"https:\/\/i.imgur.com\/4nTDaTU.png\")
<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/Dws58lf.png\")
<\/p>\nBuild the plan<\/h3>\n
Build<\/code> to start creating the PRD and the implementation checklist.<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/AUaTY7G.png\")
<\/p>\nReview the prompt<\/h3>\n
# Pok\u00e9Search - Product Requirements Document\n\n1. Project Overview\n2. User Stories\n3. UI Layout and Wireframes\n4. Component Architecture\n5. State Management\n6. API Endpoints\n7. Loading and Error States\n8. Accessibility Considerations\n9. Style Guide Implementation\n10. Folder Structure\n11. GitHub Pages Deployment Plan\n12. Implementation Checklist<\/code><\/pre>\nPhase 1: Project Setup\nPhase 2: API Layer\nPhase 3: Core Components\nPhase 4: Detail View\nPhase 5: Search Integration\nPhase 6: Polish and Accessibility\nPhase 7: Testing and Quality\nPhase 8: Deployment\nFinal Checklist\nBonus Features (Optional)<\/code><\/pre>\nStart cooking<\/h3>\n
\n
OK, now we start cooking \ud83e\uddd1\u200d\ud83c\udf73<\/h3>\n
Implement the product described in @PRD.md by executing @IMPLEMENTATION_CHECKLIST.md end-to-end.\n\nRules:\n- Treat @PRD.md as source of truth. If checklist conflicts, call it out and follow PRD.\n- Work in small, reviewable commits (or clearly separated change blocks) per checklist section.\n- After each section, run\/tests\/build locally and paste results. Fix issues before moving on.\n- Keep the solution minimal and maintainable. No over-engineering.\n- Update docs and TODOs as you go; leave the repo in a \u201cship-ready\u201d state.\n\nDeliverables:\n- All checklist items completed (explicitly mark each as done with a short note).\n- A final summary: what was implemented, how to run, how to test, and any known gaps (should be none).\nStart now.<\/code><\/pre>\nAgent<\/code> mode selected).<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/0b4hCyn.png\")
<\/p>\n\n
Now we wait… \u23f3<\/h3>\n
\n
npm install<\/code>, npm run dev<\/code>, …). You can choose to whitelist the commands so it won’t ask your permission about running them again (do thread lightly here though, and actually read which commands it wants to run).<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/3hbxXJq.png\")
<\/p>\nDone<\/h3>\n
### How to Run\n\n```bash\n# Install dependencies\nnpm install\n\n# Development server\nnpm run dev\n\n# Production build\nnpm run build\n\n# Preview production build\nnpm run preview<\/code><\/pre>\nPreview<\/h3>\n
\n
![\"\"](\"https:\/\/i.imgur.com\/2sZg0bK.png\")
<\/p>\nlet's now add a nice landing page to it.<\/code>, and it came up with this:<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/0HBnDQw.png\")
<\/p>\nPublish and share<\/h3>\n
# Initialize git (if not already)\ngit init\n\n# Add all files\ngit add .\n\n# Commit\ngit commit -m "Initial commit: Pok\u00e9Search app"\n\n# Create repo on GitHub, then add remote\ngit remote add origin https:\/\/github.com\/YOUR_USERNAME\/YOUR_PROJECT_NAME.git\n\n# Push to master\ngit push -u origin master<\/code><\/pre>\nGo to your repository on GitHub\nClick Settings \u2192 Pages (left sidebar)\nUnder "Build and deployment":\nSource: Select GitHub Actions\nThat's it! The workflow will trigger automatically<\/code><\/pre>\nActions<\/code> tab on Github, or push some code changes and it will trigger automatically.<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/QMHJXA3.png\")
<\/p>\n