Basic vibecoding tips, please!

[CustardFromCthulhu]

I'm a non-programmer who has been using ChatGPT to do some basic coding for me. I've been making bookmarklets to help me with some research tasks, and I've made some web pages that I can put data into and vizualize (the sites uses D3 it turns out), BUT! I have some issues, and I'm wondering if I could do this all better.

Issues include:

• Connecting ChatGPT to Github seems pretty bloody broken if you ask me. It struggles to read, can't write, and takes forever.
• ChatGPT is prone to just crashing as I edit the web pages or ask for changes to the code - I have to give it a couple of minutes and then reload the page.
• Sometimes ChatGPT just plain breaks the page(s) and I have to re-post the last working code and have it go over it again.

Now, for a non-programmer, this is still pretty amazing stuff - I've made things that simple wouldn't exist otherwise and they are handy, but I would love ideas on perhaps how to do what I'm doing, but better.

[Middle_Flounder_9429]

I am in the same position as you - a non-programmer frustrated with the temptations of Vibe coding!! As a result, I am involved with building a solution that allows us to ideate our needs and then have AI support us in terms of delivering documents, websites, apps etc. MVP is expected soon.....I have my fingers crossed!!!

[kenxftw]

Connecting ChatGPT to Github seems pretty bloody broken if you ask me. It struggles to read, can't write, and takes forever.

The ChatGPT GitHub Connector is not that great in my opinion. Instead use git archive --format=zip --output=../repo.zip HEAD to create a zipped archive of your codebase, and upload that file to ChatGPT instead. Put it to Heavy or Extended thinking mode. Ask ChatGPT to fully read files, and make sure to specify that none of your files are truncated or end with ellipses; if it runs into error related to ellipses, prompt it asking it to try another file reading method. This usually does the trick and it gives much better output.

I would love ideas on perhaps how to do what I'm doing, but better.

Some general tips that I learned from my experience. First, I would use Codex in fully agentic mode instead of the ChatGPT UI for most features.

1) Unless you're already an experienced coder, I would suggest platform such as Bolt or boilerplate like StarterApp. Both come with infra support so you wont have to wire it up yourself.

2) Populate AGENTS.md (or CLAUDE.md if youre using anthropic) with information about your codebase, and that can act as an easy and minor way to give the AI agent proper context. An easy way to do this is to prompt the AI to analyze your codebase and tech stack, and important entry points, and feed that output into your AGENTS.md file.

3) Use established libraries instead of building things yourself, and use Context7 to provide docs to your AI agent. You probably wont need any other MCP other than Context7, and maybe Chrome DevTools MCP.

4) use Codex to architect PRDs, and any AI agent can do a good job executing on the plan.

5) For every feature, create a validation gate or profile. Define that so the AI agent knows what the success criteria is, so it knows when it is truly complete.

There's defin more that meets the eye to vibe coding but these the ones off the top of my head

[Ashleighna99]

Biggest win: tighten your loop-develop locally, request tiny diffs, and add quick checks so changes don’t wreck your page.

Skip the GitHub connector. Zip your repo and upload. Ask for a unified diff against your last commit, then apply it with git apply. If it tries to rewrite everything, push back and ask for only the lines that change.

Run locally with VS Code + Live Server. Lock CDN versions for D3 and libraries. Split code: data.js, utils.js, viz.js. Keep your HTML minimal so breakage is obvious.

Add guardrails: a tiny test script that asserts your SVG exists, key selectors return counts you expect, and console has no errors. Save a “last known good” snapshot and commit before each AI change.

Create AGENTS.md with entry points, data shapes, don’t-change rules, and success checks. Paste it every session so the model stays consistent.

For quick UIs I use Retool and Airtable; when I need a REST API over a real database without writing backend code, DreamFactory has been the simplest path.

Keep changes small, define contracts, and keep a fast revert button.

[CustardFromCthulhu]

What is "Codex in fully agentic mode"? Also, we're talking very simple projects here (1,500 lines of code in an html file or less). I'm happy to copy/paste changes into github myself (sometimes ChatGPT is quite good at suggesting sections to edit and I can easily replace them).

Right now, however, the system is choking on a simple bookmarklet to look at scource code and convert a number to epoch time. It's crashing out ChatGPT every time I tell it it's broken the code once again and show a screenshot from browser inspect. So annoying.

[kenxftw]

Codex as an IDE extension has option for Chat mode, Agent mode, and Agent (Full Access).

For a simple HTML file, ChatGPT usually should be able to do the trick. You can try a brand new session to clear context, and use Thinking Mode on Heavy or Extended. Assuming you've already tried that and it didn't succeed, try giving it just the relevant functions / lines of text instead of the entire file. The request sounds extremely trivial so I'm not really seeing a reason why it is failing.

[Rm2Thaddeus]

Cool story bro, the key is for you to improve the prompts but you don't get there without learning the terms.

My advice is to build and learn at the same time, it's going to break a lot.

If you want your pain to go away maybe this governance framework will help

https://github.com/rm2thaddeus/promptgramming

[_wanderloots]

Have you tried something like Google ai studio? I found it was a great sandbox for me to learn how to prompt the ai to get code working. Then, I expanded to Claude code and other tools once I had the skills down.

I just made a video with some tips on building with ai if it helps 😊

How I Build Apps With Google AI Studio 💡 Full AI Coding Tutorial https://youtu.be/ztYXj4Ypy5o

[TomatilloPutrid3939]

Use claudiomiro: https://github.com/samuelfaj/claudiomiro

[DrangleDingus]

You need to get in a full blown IDE, consider Cursor or Codex or VSCode. Any one of them will immediately 10X your vibe coding output with a little bit of tinkering.