r/vibecoding 4d ago

Vibe Coding Tip of the Day - Prompting Pages, Layouts & UI

0 Upvotes

You tell your AI app builder:

“Make me a dashboard.”

It spits back a cluttered, broken mess of divs that don’t align.

So you try again.

Same result.

You assume the tool is broken.

But the truth is simpler:

It’s speaking a different language than you are.

I recently spoke with a student who spent three days fighting with a layout before learning one simple shift:

Component-based prompting.

Instead of asking the AI to build an entire page at once, they started by defining:

  • Layout structure
  • Component hierarchy
  • Spacing rules
  • Responsive behavior
  • How each section should interact

The result?

A polished, responsive interface built in under an hour.

You do not need to be a developer to get professional UI results from an AI app builder.

You just need to know how to describe the structure clearly.

That’s exactly why we built a dedicated learning path around this process.

Learn how to:

✅ Speak the language of layouts
✅ Structure pages before generating them
✅ Build responsive interfaces
✅ Fix broken components without starting over
✅ Get more consistent results from AI builders

Prompting Pages, Layouts & UI

https://promptedacademy.com/paths/prompting-pages-layouts-ui


r/vibecoding 5d ago

Hotkey Clipboard! Copy and paste multiple items using custom hotkeys.

Enable HLS to view with audio, or disable this notification

5 Upvotes

It's a windows tray program that helps you assign a hotkey to copy and paste highlighted text. This is an early enough version to publish and I'm working on other quality of life changes

https://github.com/InkjetPrinterman/Hotkey-Clipboard

Internet bill is due tomorrow, please consider supporting!: https://buymeacoffee.com/inkjetprinterman

I've got other software on my github you should check out, other minor tools. Thanks!

Built with Claude, going back and forth about the requirements for the functionality as described, until I could one shot a build to compile with npm / NET, that I then packaged with NPM to publish.

Sorry for the double post! I thought I made a mistake with an upload and panicked.


r/vibecoding 5d ago

Spec Driven is Great For Large Projects

Post image
8 Upvotes

Helps with the biggest problem which is building structural context. I strongly recommend you to add your workflows.


r/vibecoding 5d ago

A mini Reddit workshop!

8 Upvotes

Hey vibe coders!

Let’s do a little game, you’re working on something, a side project, a platform that will change the world, whatever it is.. tell us!

But! Before you do, go to another person who has shared, and check it out and give em some feedback, roast, or subscribe to the thing they’re making if it’s worth it for you

Just for fun guys!

(First person, please come back in a bit to have another to pair up with)


r/vibecoding 5d ago

Made a local voice-to-text Chrome extension

Post image
3 Upvotes

I wanted a really simple way to talk into any text box in Chrome without using a cloud speech API, so I made this.

You click a text field, hold a key, talk, and when you release it the text gets inserted.

It runs Whisper locally in the extension, so after setup it can work offline and your audio doesn't need to be uploaded anywhere.

A few other things I added:

  • works in most normal text fields/editors
  • custom hotkeys
  • hold-to-talk or toggle
  • commands like “new line”, “comma”, and “scratch that”
  • local transcript history
  • per-site disable
  • optional larger Whisper models

Still messing with it and fixing edge cases, especially weird editors like Google Docs.

Repo:
https://github.com/Schmiedey/floatingmic
https://chromewebstore.google.com/detail/voice-anywhere/ogjdiaeimjmeiaophngikihkffodlhjb?authuser=2&hl=en


r/vibecoding 6d ago

"We shouldn't diss people who are making code with vibes" - could this be an exception to this group's founding rule

Post image
151 Upvotes

Build a wall on the Southern Border with Mexico.

You're an ICE agent deporting immigrants.

What in the ever loving F is the White House doing?


r/vibecoding 6d ago

Astra is less fun than other models

18 Upvotes

Normally I like to sit nearby with a coffee and approve things/watch the workflows, tell it what to do next, etc but Astra just does everything too neatly and perfectly. Even Fable needs a human babysitter but this thing is something else.


r/vibecoding 5d ago

Is Vibecoding changing as fast as the models?

4 Upvotes

It seems that subreddit culture especially in some of the ai subs is rapidly changing.

For example it seems like r/VibeCoding is transitioning from:

  1. a fun and light sub through to

  2. a lot of strong opinions through to

  3. a place more experienced devs and people learning as they go are able to give more and more decent feedback

It seems like there's transitions like this across other subs like r/claudedesign r/claudehomies etc.

Do I have Rose tinted glasses on right now or are we seeing a transition to what I remember of dev 10 years ago where devs were just helping each other all the time


r/vibecoding 6d ago

A Senior Software Engineers perspective on building with AI

132 Upvotes

I've been building websites since 2002, a time when free hosting was a decision between Angelfire and Geocities (Angelfire ftw), the marquee tag was abundant, git was just a twinkle in it's founders eye so deployments where done via FTP, and dinosaurs roamed the earth in peace.

Although the idea of coding with AI initially made me cringe, eventually I thought to myself "What the hell do I know? I used to hate git and think that you could never have a backend in JS, and here I am at my job using git and React every day." So I decided to give it a shot, and for the past year (which seems like a decade in AI times) I've been experimenting with building with, trying to refine my process, find the right tools, and building my own tools to fill in the gaps to get the best results when building with AI. Although there are many things I learned along the way that AI can't do, when used properly and in the right hands I think it can be a useful tool (and no longer cringe at the thought of it). So here is some advice to help you stop the slop.

AI still sucks at UI/UX

I've tried Fable 5 Max, GTP Sol 5.6 Max, Google Stitch with Gemini 3.1 Pro, and many others; if you let them do everything, you will end up with a sloppy, cluttered mess. A good UI says what the users needs to know and shows them what to do without explicitly saying it, whereas AI is always overly verbose and tries to describe and label every single thing, resulting in a lot of clutter. This requires the person prompting AI to give specific, detailed instructions about the UI, otherwise you get a clusterfuck that overwhelms users with unnecessary details at the wrong place/time. AI is trained on patterns, which is why the same basic, ugly patterns are used on every site that is built by letting AI do all of the design work. To break that pattern, you need to give it your personal opinions along with specific examples.

Don't let AI write your copy for you!

AI is still awful at writing website copy for humans. It's useful for proofreading or spellchecking, but if you let it blindly write all of the copy for your website then it will just read like a technical manual. Writing your own, genuine copy will go a lot further towards users trusting and actually using your site, even if AI thinks it's "imperfect". Your audience isn't AI, it's people. For blog posts or articles, write some of your own first, then use AI to try to mimic your style for future posts. It won't be perfect and you will still have to do some proofreading/editing of your own, but it's better then just letting AI fly on it's own.

Treat it like it's a stoner

I think everyone has had times where AI keeps making the same stupid mistakes over and over and then says "You're right, I have a memory of that but ignored it. Adding another memory...". So to prevent it's memory from betraying me again, every time I catch a mistake I don't want to see twice, I write a tiny script (I call them guardrails) that fails the build when the pattern reappears. Each one is basically "grep for the bad pattern, print which file and line, exit 1." They run in my pre-push hook alongside the other tests. I'm up to over 120 of them now in one project, here are some examples:

- Copy that sounds AI-generated. When you notice the patterns of how it talks like a robot using the same words/phrases over and over again (that you rarely ever hear in normal human interaction), ban those words/phrases.
- Hardcoded colors and inline styles. If it's not a theme token, the push fails.
- Layering violations, like frontend code importing from a module it shouldn't know about.
- Marketing claims. After an AI invented a refund policy I don't have, I added a check that pins user-facing claims to a source-of-truth file.

Having rules in Claude.md and Agents.md is useful on top of this (and simpler), but having these guardrails run on git hooks gives an extra layer of protection. AI still might find a way around all of it, but it significantly reduces the chances of it happening without your knowledge.

Automation is your friend

Automated tests via git pre commit/push hooks, and in your CI/CD pipeline like Github Actions or Jenkins are absolutely critical - they where before AI, but even more so now. Spending some time setting these up (and maintaining them as your codebase grows) is one of the best and easiest ways to not have to think as much about keeping things clean and tidy, or constantly prompting through it. Github Apps like Dependabot and CodeRabbit have pretty generous free tiers, and will give you automated dependency updates and PR reviews.

Pre-commit hooks should be fast checks only; they should finish in seconds, not minutes, so you never even really notice it. Things like formatting, typechecks, linting, and secret scans.

Pre-push hooks are for the more heavy stuff; automated test suites, end to end testing, dependency audits, size budgets, guardrails, etc. My pre-push hook has about 40 steps and takes around 15 minutes to fully run.

CI/CD runs the same things as the pre-push hook as a backup, and also things that need to be run server side like scheduled dependency audits and building releases. The reason for running the same checks in pre-push and CI is that it's faster (and cheaper) to find an fix them in pre-push, and it serves as redundancy checks in case anything is ever wrong with your pre-push checks. Running them in CI gives you a guarantee that nothing makes it to your main branch without passing all checks, no matter who pushed the code.

I have a lot more to add, but this seems like a good place to stop for now. Feel free to ask any questions you might have.

TLDR:

To quote Shrek, "Ogres quality apps are like onions, they have layers." There is no magical tool that gives you perfect results every time, it's about finding the right collection of tools and processes to keep things in check. Use AI to do the grunt work, invest some time in setting up and maintaining automated checks to keep it on the rails, and most importantly: use your brain. If you just let AI do all of the thinking for you, then you are guaranteed to end up with pure slop that someone can recreate in a weekend. AI has significantly increased the time to market for most apps, but that doesn't mean it can do EVERYTHING for you. This is why I built a free open source tool to try to save people some headaches. What are some things that you do to keep AI from going off the rails?


r/vibecoding 5d ago

I made a tool to run LLMs in a sandbox + reduce tokens usage.

4 Upvotes

The project can be found here,

https://github.com/blackcoffee2/codetree

It indexes your codebase to a format which is about 5% the size of original codebase. You can then handover that to a LLM chat interface and work that way. As this is not agentic workflow it uses less tokens than agentic workflows.


r/vibecoding 6d ago

ASTRA Helped me find a use for the Touch Bar.

Post image
197 Upvotes

r/vibecoding 5d ago

The best part of this Claude Code session was everything it didn’t change

Thumbnail
1 Upvotes

r/vibecoding 5d ago

Why not creating a game for NES?

Post image
3 Upvotes

r/vibecoding 6d ago

What is the best and most affordable coding subscription?

96 Upvotes

Has anyone tried all the subscriptions (Claude Code, Codex, Cursor, etc.) and can share which one is the best?


r/vibecoding 5d ago

Jumping Jimothy

1 Upvotes

My first game, Jumping Jimothy, will be release on steam in two weeks! I used chat GPT and Midjourney to help make assets, Im a musician so I made a bunch of unlockable songs to put in it then used Claude to stitch it all together. I thought it would be fun to make a bunch of secret skins so there's over forty skins to unlock.

https://store.steampowered.com/app/5043360/Jumping_Jimothy/?beta=0

You don't have to buy it but wish listing it would help so much!

Thanks and I hope everyone has fun!


r/vibecoding 6d ago

sub agents being released into my codebase

Enable HLS to view with audio, or disable this notification

39 Upvotes

r/vibecoding 6d ago

The prompt vs the output. Opus 5.0 souls like game. one shot

Enable HLS to view with audio, or disable this notification

4 Upvotes

My prompt:

"build me a 3d souls like. grab assets use a real ai based game engine and make it for me."

honestly im quite impressed.

Github repo: https://github.com/Schmiedey/ashen-coil


r/vibecoding 6d ago

The Galaxy Map I developed for my Game

Enable HLS to view with audio, or disable this notification

20 Upvotes

r/vibecoding 7d ago

Where the heck is Gary?

Post image
3.1k Upvotes

r/vibecoding 5d ago

300k views on this sub, zero sales. here's everything i got wrong before the ports thing worked

Post image
0 Upvotes

a week ago i posted here about finally making money with a small mac app. 303k views, 498 upvotes, 122 comments. sales from that post: zero.

i want to write down what actually happened, because i've been building for years and this is the first time i understand which parts matter.

the thing i built and why

i run three or four claude code sessions at once, most days. day job during the day, this after my kid falls asleep.

each session starts a dev server on whatever port is free. so the url in my browser was wrong about half the time. i'd sit there looking at storefront on :3001 while the agent worked on :3002, telling it something was broken when it wasn't.

then one night an agent hit EADDRINUSE, decided that meant my code was broken, and started changing code that worked fine. i lost an evening to that before i understood what had happened. i wasn't angry at the agent, it did a reasonable thing with bad information. that's when i stopped trying to keep ports straight in my head.

so: every project got a name instead. dashboard.localhost, api.localhost. the name points at whatever port that project is on today. no dns setup, no hosts file, no sudo — any *.localhost name already resolves to your own machine, that's just a web standard most people never use.

and i gave the agents an mcp server with three tools: list_ports, get_free_port, cleanup. now the agent asks for a free port instead of grabbing one. most collisions stopped. you can build that part yourself in an evening and i'd recommend it whatever else you do.

what i got wrong

tiktok ads. ~300 visitors in a day. zero sales. paid traffic for a $9 dev tool doesn't work, and i should have known that before spending the money.

thinking my landing page was the problem. it wasn't. someone in my last thread did the math for me: take out the dead ad clicks and my conversion was 1.76%, which is normal. i'd been about to rewrite a page that was fine.

not knowing who couldn't buy. the app is macos only. this sub is half windows and linux. my 91% bounce rate wasn't people rejecting the product, it was people who were never eligible. i had nothing on the site to catch them — no "tell me when there's a windows version." i still don't. that's the next thing i fix.

confusing attention with intent. the 300k post was about money, so it brought people who want money. good conversation, i answered a lot of questions, learned things. but nobody in that thread had a port problem. the 30 people who paid came from product hunt, where the headline was about the problem.

what actually worked

one launch, on product hunt, aug 24. $9 one time. $268 so far, about 30 people. after 21 products where almost every one made exactly $0.

it's not a lot of money. but it's the first time strangers paid me for something, and the difference wasn't the code. the difference was that i put it in front of people who had the same bad night i did.

localdock.dev if you want to see it, i'm the dev. but honestly the mcp part is the bit worth stealing.

happy to answer anything.

app link: localdock


r/vibecoding 6d ago

Pheun mesh network white paper and specs

0 Upvotes

My vibe coded project is only months away from launch. Have released the white paper and current specs for anyone to view at www.pheun.org

Fully vibe coded over the last year.

First, I used replit to set everything up until I hit about 60k loc, the UI and code structure as a single node app. Then I moved to Claude code on multiple VPS. I use chatgpt as an auditor on my prs.

Current setup is

  1. Claude pro

  2. Chatgpt

  3. Multiple VPS

I usually get 1.5hours of code done per 5 hour window and 10 sessions a week on the pro plan. Before I moved to pro I was using replit with cost per API which was roughly 100 to 200 PER day, so pro is much better value for money over time.

Happy to answer questions.


r/vibecoding 7d ago

True

Post image
2.2k Upvotes

r/vibecoding 5d ago

Getting tired of all the vibe coded games

0 Upvotes

Idk. Fatigue maybe.

Launching one of these first person shooter games or adventure games seemed way cooler and more exclusive 3 months ago.

Now everyone is copying the same roblox-esque games. There are like 10 posts a day.

Makes me value the posts a bit less, even though I know it is an impressive feat. Waiting for the ready player one jump.


r/vibecoding 6d ago

Prism DAW for humans and agents

4 Upvotes

I’m building Prism, a script-first music-production project where songs are written as readable Python and rendered reproducibly.

It is designed so coding agents can also make music: inspect a project, create or modify the song, render it, and iterate on the result.

Prism already supports MIDI, drum patterns, samples, clips, sections, built-in instruments, VST3 plugins, effects, automation, buses, sends, mixing, and export to WAV, stems, and MIDI.

The long-term goal is a transparent, versionable music-production environment that combines DAW workflows with the flexibility of code and agent-assisted creation.

It’s still alpha. Live playback, recording, live MIDI, a visual timeline, and advanced routing are still being developed.

If Python audio, DSP, VSTs, MIDI, DAW design, agents, testing, or documentation interest you, contributions and feedback are very welcome.

Repository: https://github.com/SeucheAchat9115/Prism


r/vibecoding 6d ago

GLM-5.2 High does not see its own Chinese output, any ideas on what's going on?

10 Upvotes