Vibe coding
Teach your AI to be easy to read
What you'll learn
How to make AI models like Claude answer in a short, structured, and easy-to-read way.
What you'll get
The complete rules file, free to download. Add it to your AI setup and get shorter, clearer replies.
The problem
AI responses are hard to read
Responses usually look like this:
I've completed the changes you requested. I updated the header so it now sits flush with the blue band — it turns out the gap was being caused by some leftover spacing from the old logo, which I've now removed. One thing worth mentioning: visitors who already saw the old page might still see the gap until they refresh, due to browser caching. Let me know if you'd like me to go ahead and commit this!
Hard to scan fast. One big paragraph, no hierarchy, no clear next step
The solution
Teach your AI how to respond
The result after implementing the rules:
Changed
The header now sits flush with the blue band.
The gap came from spacing the old logo left behind.
Limitation
Visitors who saw the old page may need one refresh.
Next
Say the word and I'll commit it.
Easy to read, easy to understand, saves a lot of reading time
The rules that got us there
1 · Every topic gets a divider and a heading
Every topic gets a divider, a heading, and a few short lines. The reply becomes something you scan, not something you have to read.
Before
So I finished the contact form work — the spam blocking is now in place and runs before anything gets sent, everything looks good on my side, so whenever you're ready we can push it live, just let me know how you'd like to proceed!
After
Changed
The contact form now blocks spam before sending.
Next
Say the word and it goes live.
2 · Cut hard
Keep answers to three lines by default.
Before
I've made good progress on the animation! I did a deep dive into the loading sequence and discovered that on slower connections the animation was actually playing over an empty box before the image had finished arriving, so I restructured the logic so the animation now waits for the picture itself to be fully loaded before it starts, which should make the experience feel much smoother...
After
The animation now waits for the picture to load.
Before, on a slow connection it played over an empty box.
Nothing else about the animation changed.
3 · One sentence per line
Answers are not crammed into a big paragraph. One sentence per line makes each idea instantly visible. Replies get scanned, not read.
Before
The build failed on the third check because the new entry is missing an id, which can be fixed by running the id script, after which everything should go green again.
After
The build failed on the third check.
The cause is a missing id in the new entry.
One command fixes it, and the build goes green.
4 · Plain language
Answers are in simple, easy-to-understand words unless technical language is actually needed.
Before
The resolver emits an unvalidated srcset rung, so the fallback chain can 404 silently.
After
A picture can go missing on the live site without the build noticing.
5 · Questions always come last
Questions that need answers are always shown at the end. A question never gets buried in the middle.
Before
I fixed the footer link. Quick question — should the logo also link home? I also went ahead and updated the copyright year.
After
The footer link is fixed, and the copyright year is updated.
Next
Should the logo also link home?
Free
Get the complete set of 16 rules
Drop it into Claude Code or Codex and ask it to apply the rules, that's the whole setup
Conversations.md
Article by Rotem Elimelech 😎