# 10 rules of vibe-coding 1. [[#get an agentic coding tool]] 2. [[#write a seed prompt]] 3. [[#use tools in parallel]] 4. [[#evaluate existing repositories]] 5. [[#build from a specification]] 6. [[#copy before you create originals]] 7. [[#design according to your taste]] 8. [[#plan before you code]] 9. [[#focus on small features]] 10. [[#change your definition of done]] --- # get an agentic coding tool there are many options nowadays, the most common are: - ides: cursor, windsurf, zencoder, void - web: lovable, bolt.new - cli: claude code, gemini cli > get one, do it now! --- # write a seed prompt you can be very concise -- choose one of the 3 approaches: ## one-liner ```instructions design and build a website card for a portfolio of an architect ``` > try it out! ## 3 bullet points ```instructions - task: write a python script that converts from heic to jpeg - process: user gives folder, load files in parallel async, convert in batches, store in the same folder, move originals to root/_archive - outcome: py file runnable from the command line with parameters ``` > try it out! ## use a bot like [[bot - @landing.page.maker]] > try it out! --- # use tools in parallel open lovable, bolt, but also regular chatgpt, claude, gemini run the same seed prompt open 3-5 lovable and bolt windows for some design variety ![[Pasted image 20251117004954.png]] --- # change your definition of done before you go yolo and accept all changes made by ai, think about your sins! and change your [[definition of done]] the old ones are no longer fast enough --- # assess existing repositories many developers complain that ai cannot work with existing code bases that's wrong -- but you need to familiarize your agent with it [[command - repo - assess]] ![[Pasted image 20251117005138.png]] --- # build from a specification - do you have some notes from the conversation with users? - process diagrams and documentation? - support tickets and customer complaints? all of this is a godsend for a modern developer because it can easily be translated into a specification, a product requirements document, or a scope you can use [[bot - @scoper]] and save it as scope.md in the repository --- # copy before you create originals don't try to invent every part, every time reuse, get inspired, critique! ```instructions build a website for the company as the style example, apply the following link: https://cogit.systems/ maintain most of the design ideas get creative in how you position elements for content, apply: http://jeffclune.com/ ``` ![[Pasted image 20251117184857.png]] [on Lovable](https://jeff-clune.lovable.app) --- # design according to your taste don't try to invent every design element close the conversation before that like this: ```instructions analyze and review the contents of the code and the conversation you've seen so far thoroughly summarize them in a comprehensive design document consider visual elements, shapes, colors, fonts, margins, rounding, and other aspects of styling, graphic design, visual presence, branding summarize your findings in the design.md document ``` --- # plan before you code now you have an assessment, a scope, a design what remains is a plan for implementation [[command - plan - development]] ![[Pasted image 20251117005347.png]] --- # focus on small features look through plan.md find features, usually f1, f2 etc. copy their contents and specify that the ai agent should only focus on that, optionally supplemented [[command - plan - feature]] --- // 17 nov 2025, hamburg