The term “Vibe Coding” has become quite popular recently. Simply put, it means: telling the AI what you want to achieve and letting it help you write the code.
It sounds great, but in practice, beginners often encounter three main problems: an unappealing user interface, limited functionality, and poor security. The end result is often something so poor that you’re too embarrassed to show it to others.
This article discusses how to avoid these issues.
What is Vibe Coding?
Let’s clarify something right from the start: Vibe Coding doesn’t mean letting the AI write the entire code for you. Instead, you define the direction, the AI executes the code, and then you make the necessary adjustments.
You don’t need to be an expert in every programming language, but you do need to be able to:
- Clearly describe what you want.
- Judge whether the AI’s suggestions are good or not.
- Know the aspects that you need to oversee yourself.
These three points are essential. Without them, you’re just relying on luck, not truly leveraging the potential of Vibe Coding.
Aesthetics: Don’t let the AI go wild
The biggest problem with AI-generated front-end code is not that it doesn’t work, but that the resulting design looks terrible.
Centralized large headings, three cards, blue-purple gradients – no matter what project it is, the AI tends to produce the same kind of design. The reason is that these are the most common “safe choices” in the training data used to train the AI.
How to overcome this
1. Provide references, not just descriptions
Don’t say, “Create a beautiful landing page for me.” Instead, say, “Create a tool introduction page that follows the style of linear.app.” With specific references, the AI’s output will be much more reliable.
2. Establish design rules
Include a design specification document in your project and tell the AI:
- What fonts to use (e.g., Inter, Noto Sans SC).
- What primary colors to use (don’t let the AI choose; it’s likely to pick blue and purple).
- What spacing guidelines to follow (8px, 12px, 16px, etc.).
- What to avoid (e.g., gradient backgrounds, stacked cards).
3. Work in stages
First, let the AI generate the basic structure. Once you’re satisfied with the layout, then have it add the content and styles. Trying to do everything at once usually results in a less attractive design, as the AI tends to add too much detail in every part.
Functionality: Get it working first, then improve it
A common mistake for beginners is to try to create a complete, large-scale project from the start. The result is that they end up writing a lot of code, but nothing works as expected.
The right approach
Step 1: Create the minimum viable version
Start with a version that only has the essential functions. For example, if you want to build a note-taking app, the first version should only include the ability to “create notes” and “view notes.” Don’t rush to add features like search, tags, or import/export options.
Step 2: Iterate through features one by one
Test each new feature before adding it. If there are any issues, fix them before moving on to the next one. AI-generated code often contains hidden bugs, and trying to fix ten features at once can be a huge hassle.
Step 3: Handle edge cases
AI doesn’t consider things like:
- What if the user enters nothing?
- What if the internet connection is lost?
- What if the amount of data is very large?
Handling these edge cases is crucial for a functional and reliable application.
Tips for collaborating with AI
- Ask it to make only one change at a time. Making too many changes can lead to errors.
- Ask it to explain its code. This isn’t to understand every line of code, but to ensure it understands your requirements.
- Break down big problems into smaller ones. When you encounter issues, break them down into smaller parts and solve them one by one.
Security: The most overlooked aspect
AI-generated code has a serious security issue: it doesn’t prioritize security. It might hardcode passwords, ignore input validation, or store data in insecure ways. This isn’t intentional, but the proportion of secure code in the training data used to train the AI is too low.
Things beginners must pay attention to
1. Never hardcode secrets in the code
# Wrong example:
API_KEY = "sk-1234567890"Correct approach: Use environment variables or a configuration file (and make sure the configuration file isn’t committed to Git).
2. Always validate user input
Check whatever the user enters – whether it’s the format of an email address, the length of a password, or whether the input is indeed a number. The AI won’t do this for you automatically.
3. Encrypt database storage
Passwords should never be stored in plain text; use bcrypt orargon2 for encryption. Sensitive user information also needs to be encrypted. The AI usually doesn’t handle this automatically.
4. Regularly check dependencies
Get into the habit of using commands like npm audit and pip audit. Dependencies introduced by the AI may have known security vulnerabilities.
5. Don’t trust the AI’s claims about code security
Ask the AI to audit its own code; it might say “no issues,” but asking from a different perspective (e.g., “What potential security risks does this code have?”) will often yield more useful information.
Some practical tips
1. Learn to read error messages
You don’t need to understand them completely, but you should know how to identify the key information: which line, what the error is, and what type of error it is. This is essential for working efficiently with AI.
2. Use version control
Git is not just for professionals; it’s for everyone. Commit your changes before making any modifications so you can revert them if something goes wrong. It’s common for AI to modify code incorrectly, and without version control, you’ll have to start from scratch.
3. Don’t trust everything the AI says
Even if the AI says a piece of code is safe, test it yourself. If it suggests a particular approach, research whether there are better alternatives. AI is a tool, not an expert.
4. Learn the basics first
You don’t need to be proficient in programming syntax, but you should understand basic concepts like APIs, databases, and the differences between front-end and back-end technologies. This knowledge will help you judge whether the AI’s suggestions are reasonable.
5. Start with small projects
Don’t try to create a SaaS product right from the start. Begin with a personal tool, a simple website, or a small application. Gain experience before tackling more complex projects.
In conclusion
Vibe Coding lowers the barrier to programming, but it doesn’t lower the standards for creating good software. Aesthetics, functionality, and security still rely on your judgment. The good news is that you don’t need to be an expert to create quality software. All you need to do is know what makes good software and then use the AI to help you implement it.
This is the right way to approach Vibe Coding.