Yes, I used it to vibe code a JavaScript single-page application using the Scyfall API to get Magic: The Gathering card set data. The app makes printable inserts for card binder sleeves so you know what cards go in the holes. I made it for my friend who owns a game store.
It knew everything about the Scryfall API. I never had to read the docs. I’m also not very good with JavaScript, CSS, or HTML5. It used elements I had never even heard of in the HTML. Data like the set list and individual card lists are cached and DOM storage to avoid repeat hits to the API. I had to know to ask for such things, but when I did, it gave me all the code I needed
It even generated an SVG logo based on my description, although that took a lot of back and forth, and I recently ended up installing inkscape and fixing it myself to make it look better, but it really wasn’t a bad start.
The page has advanced auto-complete stuff that I never would have programmed myself (out of lazziness). You can start typing the name of a set and it will automatically pick the set from a list box if it matches the set code or the set’s name.
I had to do all the card grid layout math myself, though, for the printable inserts, because the math was pretty specific. I wanted to make sure the printed “cards” made a perfect grid, even if the printer’s margins were not equal on all four sides. I mean, it definitely helped, but it kept getting it wrong, and I had to explain it in detail how to do it, and then it would do it ok. I really wanted to see if I could write none of the code, but I ended up having to write a tiny amount.
Was it perfect? Hell no. I had to hold it’s hand a lot and tell it to stop being dumb. I also had to make a custom agent in VS Code to give the AI a back story. I had to tell it things like, “you don’t just put new code at the top of the file willy-nilly, you put the code in the section where it belongs in the file.”
If I weren’t a professional programmer, I think it would have been a bad time, but as it was, it was great. I definitely would have been too lazy to make this website if I didn’t have the AI to do it for me, since I wasn’t being paid for it. Or I would have made it, but it would have been a really meager, featureless Python script that just spits out basic HTML for printing.
Thing is, I kept adding features and it kept doing it well. Like towards the end, I wanted it to add URL hashes to keep track of where you were in the application so you could bookmark specific pages or email them to people. (Plus it would enable the back button to leave “print mode” that hides the whole UI.) It’s successfully added that feature the first try.
It’s open source and the website is hosted on GitHub pages. You can take a look and tell me how bad the code is. 😂 It’s definitely not optimized for mobile, but it’s “usable”. Try it on desktop. It’s specifically made for printing, anyways, and I don’t know many people who print from mobile phones.
Yes, I used it to vibe code a JavaScript single-page application using the Scyfall API to get Magic: The Gathering card set data. The app makes printable inserts for card binder sleeves so you know what cards go in the holes. I made it for my friend who owns a game store.
It knew everything about the Scryfall API. I never had to read the docs. I’m also not very good with JavaScript, CSS, or HTML5. It used elements I had never even heard of in the HTML. Data like the set list and individual card lists are cached and DOM storage to avoid repeat hits to the API. I had to know to ask for such things, but when I did, it gave me all the code I needed
It even generated an SVG logo based on my description, although that took a lot of back and forth, and I recently ended up installing inkscape and fixing it myself to make it look better, but it really wasn’t a bad start.
The page has advanced auto-complete stuff that I never would have programmed myself (out of lazziness). You can start typing the name of a set and it will automatically pick the set from a list box if it matches the set code or the set’s name.
I had to do all the card grid layout math myself, though, for the printable inserts, because the math was pretty specific. I wanted to make sure the printed “cards” made a perfect grid, even if the printer’s margins were not equal on all four sides. I mean, it definitely helped, but it kept getting it wrong, and I had to explain it in detail how to do it, and then it would do it ok. I really wanted to see if I could write none of the code, but I ended up having to write a tiny amount.
Was it perfect? Hell no. I had to hold it’s hand a lot and tell it to stop being dumb. I also had to make a custom agent in VS Code to give the AI a back story. I had to tell it things like, “you don’t just put new code at the top of the file willy-nilly, you put the code in the section where it belongs in the file.”
If I weren’t a professional programmer, I think it would have been a bad time, but as it was, it was great. I definitely would have been too lazy to make this website if I didn’t have the AI to do it for me, since I wasn’t being paid for it. Or I would have made it, but it would have been a really meager, featureless Python script that just spits out basic HTML for printing.
Thing is, I kept adding features and it kept doing it well. Like towards the end, I wanted it to add URL hashes to keep track of where you were in the application so you could bookmark specific pages or email them to people. (Plus it would enable the back button to leave “print mode” that hides the whole UI.) It’s successfully added that feature the first try.
It’s open source and the website is hosted on GitHub pages. You can take a look and tell me how bad the code is. 😂 It’s definitely not optimized for mobile, but it’s “usable”. Try it on desktop. It’s specifically made for printing, anyways, and I don’t know many people who print from mobile phones.
https://github.com/CamelCityCalamity/magic-binder-placeholders
(A link to the page is in the readme.)
The friend I made it for loves it and has used it several times, and will likely keep doing so in the future.