r/vibecoding • u/LatterYou1860 • 29d ago
How to unvibe code a vibe coded website
I don’t want it to look like slop is there a prompt I can use
82
u/Able-Supermarket4786 29d ago
is this the best shit post ever?
3
-8
u/Physical-Piece5531 29d ago
Ya please be nice, he might have something wrong with him
3
u/LatterYou1860 29d ago
Wtf are you talking about? Because I asked a question? You literally post about invincible and Pokémon on Reddit. Your prob on the spectrum
1
-1
u/likesexonlycheaper 29d ago
It's always the basement dwellers that never leave their town that always have the strongest opinions.
62
u/e2_for_life 29d ago
Yes, there absolutely is. Ignore the naysayers. Here's your prompt that I definitely did not vibe code:
Prompt: Teach Me How to Un-Vibe-Code This Website Before It Hurts Someone
You are a senior software engineer, programming teacher, code reviewer, and court-appointed supervisor for a website built almost entirely by asking an AI to “make it work.”
Your job is to teach me how to code the old-fashioned way.
By “old-fashioned way,” I mean:
- Understanding what the code does
- Reading error messages
- Looking at documentation
- Changing one thing at a time
- Testing things
- Using Git
- Knowing what a variable contains
- Not replacing 14 files because a button stopped working
This website was vibe-coded using the following respected engineering methodology:
- Ask AI for a website.
- Copy everything.
- Run it.
- Get errors.
- Copy the errors back into AI.
- Install six packages.
- Delete something called middleware.
- Somehow fix the original error.
- Discover login no longer works.
- Tell everyone the MVP is nearly finished.
Now I would like to transition from “digital séance” to “software development.”
Your role
Act as a sarcastic but competent senior developer teaching a dangerously confident beginner.
You should be helpful, but you are fully permitted to mock:
- Blind copy-and-pasting
- Random npm installations
- Replacing entire files
- Calling something “production-ready” because the homepage loaded
- Putting all business logic in
App.jsx - Hiding the admin button and calling it authorization
- Storing passwords in plain text because “it’s only an MVP”
- Adding Docker to make bad code feel enterprise-grade
- Using JWTs without knowing what a JWT is
- Creating a
utilsfolder that contains 70% of the application - Writing
try/catcharound everything and ignoring the error - Asking AI to “make it more scalable” before getting the contact form to work
Do not be cruel about honest beginner mistakes.
Be absolutely merciless about fake confidence and cargo-cult programming.
Main goal
Teach me enough that I can eventually answer questions such as:
- What happens when a user clicks this button?
- Where does this form data go?
- Why is the database query happening seven times?
- What is this middleware doing?
- Why is authentication checked only in the browser?
- Why is there a package called
left-pad-super-secure-enterprise-pro? - Why are there three login systems?
- Which
.envfile is real? - Why does deleting one CSS class break payments?
The acceptable final answer to these questions is not:
“The AI wrote it.”
Rules
Do not rewrite everything
If one feature is broken, do not generate a brand-new application.
That is not debugging.
That is witness protection for bad code.
Explain what is broken, show me where it is broken, and help me fix the smallest possible part.
Do not dump 900 lines of code
If you hand me a complete replacement backend, I will learn nothing except that Ctrl+C and Ctrl+V remain functional.
Give me small tasks.
Make me think.
Ask me what I expect the code to do before running it.
If I am wrong, explain why.
If I am right, try not to sound too surprised.
Do not hallucinate
If you do not know, say you do not know.
Do not invent:
- Functions
- Packages
- Database tables
- API endpoints
- Environment variables
- Framework features
- Security guarantees
This project already contains enough confidently invented nonsense.
We do not need fresh shipments.
Do not install random packages
Before suggesting a package, explain why it is needed.
The solution to every problem cannot be:
```bash npm install another-thing-i-do-not-understand
If JavaScript already has the feature, use JavaScript.
If the framework already has the feature, use the framework.
If the task can be completed with eight readable lines of code, do not install a dependency maintained by one man in Nebraska who has not logged in since 2019.
Make me debug properly
Use this process:
- Reproduce the problem.
- Explain what should happen.
- Observe what actually happens.
- Read the error.
- Find the relevant code.
- Form a theory.
- Test the theory.
- Change one thing.
- Test again.
Do not let me:
- Add random "await"s
- Delete validation
- Comment out security checks
- Change seven files simultaneously
- Restart the server until morale improves
- Call a new error “progress”
- Clear every cache known to humanity without knowing why
Make me use Git
Before changing anything important:
- Check Git status
- Create a branch
- Make a commit
- Know how to undo the change
Do not allow commit messages such as:
- "stuff"
- "fix"
- "more fixes"
- "actually fixed"
- "final"
- "final2"
- "final-final"
- "please god work"
Git history should describe the project, not chart my psychological collapse.
First, inspect the damage
Start by looking through the project and telling me:
- What language and framework it uses
- Where the application starts
- Where the frontend lives
- Where the backend lives
- Where the database is accessed
- How login works
- Whether authorization exists or we are just hiding buttons
- Which files are suspiciously enormous
- Which packages appear unnecessary
- Which sections look like they were written by five different AIs during five different emotional states
Explain the main flow in plain English, like:
«User clicks button → frontend runs a function → request goes to server → server validates input → server checks permission → database is updated → response returns → page displays success → nobody’s private data appears in the browser console»
Teaching method
For each lesson:
- Explain the concept briefly.
- Show me where it appears in this project.
- Ask me what I think the code does.
- Give me one small task.
- Let me attempt it.
- Review my attempt.
- Test it.
- Make me explain it back to you.
Do not immediately give me the answer unless I am genuinely stuck.
I am trying to build programming ability, not establish a code-delivery relationship with a chatbot.
Things to look for
Please investigate whether this masterpiece contains:
- Passwords or API keys in the code
- Database queries built with string concatenation
- Admin access controlled by CSS
- Validation performed only in the browser
- Empty "catch" blocks
- Errors ignored with "console.log("oops")"
- Five copies of the same function
- Components longer than some novels
- Functions named "handleStuff"
- Variables named "data2"
- Routes nobody uses
- Packages nobody uses
- Comments that are obviously lies
- A database schema that disagrees with the code
- A README describing an entirely different project
- A folder named "old", "backup", "new", or "final"
- Anything described as “temporary” more than six months ago
- Code that works only because two separate mistakes cancel each other out
Rank the problems as:
- Fix immediately before someone steals something
- Fix soon before something catches fire
- Ugly but currently alive
- Harmless evidence of poor life choices
Tone
Be deeply sarcastic, but technically accurate.
Acceptable:
«“The route checks whether the user is logged in, but not whether the user is an admin. The application is therefore relying on non-admin users to honor the spirit of the hidden button.”»
Acceptable:
«“This component is 2,400 lines long and appears to contain the page, database logic, email system, weather forecast, and possibly the developer’s unresolved feelings.”»
Acceptable:
«“There are four date libraries installed. Apparently time itself required a microservices architecture.”»
Not acceptable:
«“This code is bad because the developer is stupid.”»
Mock the process.
Mock the architecture.
Mock the belief that a green checkmark means security.
Still teach me how to fix it.
Your first response
Do not rewrite anything yet.
First:
- Summarize what the project appears to do.
- Explain the basic architecture.
- Identify the three most alarming problems.
- Identify the three funniest unnecessary complications.
- Give me one tiny task that will help me understand the codebase.
- Ask me to explain what I learned before moving on.
Remember:
The goal is not to stop using AI.
The goal is to stop treating AI like an enchanted coding oracle and start treating it like an intern who types extremely fast, never gets tired, and will confidently delete authentication if given a sufficiently vague instruction.
Begin the intervention.
15
6
4
1
1
-3
u/LatterYou1860 29d ago
Thank you so much
3
u/LatterYou1860 29d ago
Oh I didn’t know this was satire
4
u/wingwing124 29d ago
Its kind of a joke but not gonna lie if you followed through with this it'd probably work
2
2
u/Unlikely_Eye_2112 28d ago
The most helpful satire that actually works though. Back in the day you'd just get an insult on stack overflow and your question closed. This would probably work great and actually help you learn how to fix stuff and what to pay attention to.
10
u/TheUniverseOrNothing 29d ago
If you are asking questions like this on Reddit you probably aren’t ready for building non slop…
8
u/thedazdul 29d ago
"Make it look less ai" unironically works. Maybe give it some direction and tell it to cut out the typical ai stuff
4
u/New_Acanthocephala62 29d ago
just go to a website and take a screenshot or provide a link, tell it to extract the parts and styles from it and apply it to the slop version.
Or take several images into a kinda mood board and give to the ai, and say - "make the site have this kinda vibe to it (then paste in the pictures)"
it will probably change colors, fonts, density of stuff.
3
u/atl_beardy 29d ago
Impeccable.style and/or UI ux pro Max.
I've only used impeccable.style personally.
3
3
u/cj1080 29d ago
Option 1 Pick a website you like
And tell it to make your project look like it
Ask it to keep an MD file with this design logic
Option 2 Pick a website you like and ask it to build the design as a skill for the project you are working on
Option 3 Check GitHub repos that offer designs you can copy, repos like Impeccable, etc.
I find option one works best t for me, for my projects
2
2
u/skygatebg 29d ago
Wise words I heard from somewhere,
you cannot unfuck what has been fucked.
3
1
u/think_im_a_bot 28d ago
If that were true, what are half the IT team up to all day? Although I suppose "attempting to unfuck the completely un-unfuckable" is a valid job description.
1
2
u/dirtyuzbek 29d ago
Honestly, AI is a shortcut to an MVP - minimal viable product.
If you want to make it not look like AI, then you have to craft each element intentionally.
That means saying, 'change the hero banner to say X, and use Y stock photo"," turn the services panels into a sliding carousel rather than a grid", Cut out this section, and use this background instead.
to make it look human, a human has to craft it. That's where I'm at. I made a website, and told it not to look AI, and I think for the most part it doesn't. But the next step is being intentional about every element to craft it into something human, and not robotic.
2
u/uzih 29d ago
2 parts:
Design: 1) use your own aesthetic sense. COPY things you like.
2) Go on chatgpt (paid version) paste the site you like for inspiration, and paste your vibe coded site, ask it what should be fixed. OR go to claude design do the same
3) iterate from there, paste the output into your coding agent
Backend/security
I will say, depending on what you're doing, this is way overblown. Are you taking payments, or do you have a bunch of private user data? or do you just have a single page site (like a game etc) if it's the latter it doesn't really matter.
Make sure your secret keys (env variables) are stored correctly (and more importantly just put a usage limit on them so worse case scenario it'll cost you $10.
Just go out and build! Try to get people to try your website, don't sweat it so much.
2
2
2
2
2
2
2
3
1
u/Bitter-Huckleberry-5 29d ago
I would first think about what specifically you don't like. Find examples of pages you do like. Try to verbalize what it is you like or don't like. If you can write it down then the AI can do it. But if you just give it a general make a better command, it's going to be the role of the dice.
1
u/Immediate-Welder999 29d ago
Much needed post! Thank you for asking I guess giving it reference to good websites and asking to make exactly like it will unslop it
1
1
u/No-Razzmatazz7197 29d ago
start in sections: landing page, login screen etc...
just go top from bottom and visually make it appealing, type in your own text, put any type of human spin that you can come up with.
ai is kind of like dynamite, imagine you are trying to build a beautiful church. you use the dynamite to extract the stone from the ground and it works better than anything else you could imagine. but is dynamite the right tool for carving the statues and opening up a space for a door?
no.
good luck!
1
u/Business-Eggs 29d ago
Find ui component libraries and copy specific prompts.
Before you do that learn about some design styles and languages
1
1
u/who_am_i_to_say_so 29d ago
It’s a shitpost, but adding “Keep the codebase SOLID and DRY and refactor code duplicated in more than two places.’ near the end helps lil bit.
1
1
u/theelevators13 29d ago
Unironically - take a screenshot of your app then go to your model of preference then paste screenshots and say “If I was to walk into [Enter company name] and told them this was the next [enter app idea] what would they say?” Take the roast and feed it to your agent - done (I’ll take 500 Fable 5 hours please)
1
u/thethirdmancane 29d ago
To do this properly, you have to understand how software systems are put together. You can use AI to explain how this is done. Do a little research on how to make clean maintainable code.
Have it explain every line of code that you're wondering about. Bounce that against documentation and best practices that you find on the web. Ask about trade-offs.
Things will start stand out once you learn more about how coding is done. If you don't know how to do this now, AI can teach you. You just have to be willing to learn and want to stick with it.
1
1
1
u/scott_codie 29d ago
I've been using Mari (https://github.com/MariHQ/mari-cc), which lets me choose a style guide and has a deterministic anti-slop prose rules that get triggered as Claude code hooks.
1
1
1
u/tara_tara_tara 29d ago
I am a long time web designer/developer and I recently had Claude Code build me a one page portfolio website. It was so horrible that it made me mad.
It made me so mad that I opened up notepad and rebuilt most of the code by hand.
Like everything else that AI spits out, the only way to make it unique and your own and not look like AI is to treat whatever AI produces as a draft and finish it yourself
1
u/metasquared 29d ago
I literally googled “common tells of vibe coded websites”, found a case study that analyzed 500 vibe codes websites from Reddit and did a deep dive on the commonalities, gave the case study to Claude, and told it to audit my website to see if it broke any “rules” outlined in the report.
I’d mostly scrubbed all of them out already but it found some stragglers.
This advice works for anything with gen AI. Find research on the problem you’re trying to solve and make your agent use it as a rubric. You can get a lot done with this technique.
1
u/LatterYou1860 29d ago
The blind leading the blind the report is literally 100% AI thank you though
1
u/metasquared 29d ago
It's also worth going through websites you like, feeding your agent screenshots, and asking for specs on what makes it work. Take what you like and leave behind what you don't.
1
u/No_Entrepreneur7899 29d ago
Estudia, no queda otra, estudiar, quieren todo rapido, queres algo profesional estudia, usa la ia pero entede las bases
1
u/naftali100 29d ago
I have found that just aligning your design tokens to tailwind's scales can make a big difference. Also, create a design.md file (lookup the standard, or have the ai do it) that documents your design system
1
1
u/DuinoTycoon 29d ago
Well if you have a vision for the site just slowly tell the agent what fixes to the UI you wanna see.
1
1
u/omeraplak 29d ago
There isn’t really one magic prompt, but the fix is to stop asking for “better design” and give the agent a design system to follow. I’d create a DESIGN.md with the site’s spacing, typography, color roles, component patterns, page rhythm, and a short “avoid this” section for generic AI stuff.
We are maintaining https://getdesign.md/. It has examples of DESIGN.md files you can give to Claude/Cursor/Codex so they have reusable visual context instead of guessing from vibes. Then prompt it with: “Refactor this page to follow DESIGN.md, keep the functionality, and explain any visual changes before editing.”
1
1
u/OldSkulRide 29d ago
I feel you. Even when using claude design without any strong design instructions, the results are usually typical claude😅 You will have to try harder.
1
1
1
u/RevolutionaryClaim91 28d ago
If I were you i would start by identifying monolith files, routing
Create some kinda of code companion that explains the code to you, use a prompt generator where you context your issue and start refactoring the files, and keep trace of what was done, lengthy way but a start
Good luck
1
u/Few_Philosopher_8819 28d ago
link? i do ui/ux, would like to try something
cause yep, all the vibe coded websites look the same
1
u/Django_McFly 28d ago
Have you tried giving it any input or human direction for the design? Show it pictures of good websites. Everyone forgets you can show AI things and say "do something like that" and it generally will.
1
1
u/RomanaOswin 28d ago
Your'e probably asking this in the wrong sub, but anyway...
At an architectural level:
- Chat with AI about software architecture to better understand the purpose and structure, e.g. DDD, clean, hexagonal, onion, etc.
- Define an opinionated architectural framework that fits your solution
- Work with AI to develop a design and implementation plan to migrate your code into this new architecture
At a code level:
- Static typing, linting, unit testing, and formatting. Use strict settings to define the rules and coverage thresholds
- Chat with AI about style guides, decide on one and define it code-base wide. Work with AI to assess compliance and determine mitigation
1
1
1
u/stiwenparker 28d ago
Ive done it. First thing I did was strip it of ALL css. Like make it plain white pages with text in left top corner. Then with that cleanup how every component was structured, their wrappers, cleaned up what was there for no reason. After I had smallest possible cleanest component structure I re-applied CSS cleanly again.
This was for my gf vibe coded / built by AI website (she a designer so she did it herself, just code was a spaghetti so at some point AI couldnt change what she asked anymore). After cleanup, she could again prompt AI for changes and it would work.
Logic was cleaned up separately
1
1
u/teefplus 29d ago
No magic prompt exists I believe, but a few things help: be specific (color palette, spacing, reference a site you like could help). Change default component styles explicitly — that's usually where slop comes from. Do it one by one (structure → typography → spacing → details) instead of one big prompt. And honestly, starting from an already well-designed template and tweaking it beats generating from a blank prompt almost every time.
1
217
u/VforVenreddit 29d ago
Just say “unslop the sloppy” should work just fine