DEV Community: Richard Chai

AI can be lazy, sometimes you got to give it a kick.

Richard Chai — Fri, 03 Apr 2026 08:15:04 +0000

There are times when I think that Large Language Models (LLM) are amazing and really do make my life a lot easier.

Then there are days, when they get really lazy and try sneaking in a short cut to avoid doing the hard work.

During a vibe coding session, I found a bug when I was testing the app and I asked the LLM to fix it.

After a short while, the LLM sent the following plan to me to ask for my approval:

The LLM wanted to fix the issue by just changing the syntax to avoid the error message.

Sometimes when the LLM is lazy, you just got to give it a kick! Ok, I'm not a violent person so I didn't smash my laptop, so this is what I did.

Then after more tokens were burnt, this response arrived:

*I really can’t stress enough how important it is to actually read through the plans and specifications an LLM produces. *

In vibe coding, even if we’re not writing the code ourselves, we still need to think critically and evaluate what’s being generated. If we just keep clicking “Ok” or “Proceed” without checking, there’s a good chance we’re letting bugs slip through that will surface at the worst possible moment.

Debugging Smarter and Feature Iteration with Trae AI

Richard Chai — Fri, 20 Mar 2026 16:14:59 +0000

In this third and final post of the series “Turn Ideas into MVP Fast with Trae AI,” let's look at how to debug issues and add features to the AI Generated App.

In this post, we’ll cover:

Why “Please Fix It” Prompts Are Expensive
Best Practices for Debugging Effectively with Trae.ai
Adding Features to Your AI-Generated App

1. Why "Please Fix It" Prompts Are Expensive

When you hit a bug, telling AI, “Please fix it” may seem quick, but it’s often costly, not just in money but also in time and potential technical debt. This is because vague prompts force the AI to guess, which can lead to broad or unnecessary changes that don’t address the root cause.

The resulting inefficiencies typically fall into several categories:

1.1 Money Talks (Token Usage)
Most large language models, like those from OpenAI, Anthropic, or Google, charge based on how many tokens they process - both your input and the response.

A vague “please fix it” prompt doesn’t give the AI anything concrete to work with, so debugging turns into a guessing game where the AI has to make many assumptions. This results in the AI refactoring unrelated code, tweaking style, or adding libraries you don’t need instead of fixing the real problem. That adds up fast in both time and token cost.

1.2 The “Context Dump” Problem
To cover all bases, some developers dump huge chunks of code into the prompt. While it seems thorough, it’s inefficient because the AI has to sift through a lot of irrelevant code, which slows things down, drives up costs, and increases the chance that it focuses on the wrong part of your app.

1.3. New Bugs and Technical Debt
Broad or speculative fixes can have unintended consequences. If the AI rewrites parts of the code without a clear understanding of the problem, it might break unrelated components or introduce inconsistent patterns.

Even if the immediate error is fixed, you could end up with messy, harder-to-maintain code that increases technical debt over time.

2. Ten Best Practices for Effective Debugging

Debugging with AI app generators or coding assistants works best when you treat the AI less like a “magic fixer” and more like a capable collaborator that needs structured input.

The goal is to reduce ambiguity, isolate the problem, and provide the model with enough context to reason about the issue without overwhelming it with irrelevant information.

Several practical techniques can significantly improve debugging outcomes.

2.1 Isolate the Problem Before Prompting
One of the most effective steps is narrowing the scope of the issue before asking the AI for help.

Instead of having the AI read your entire application code, identify the affected:

Specific file, module, screen, or web page.
Function or component involved.
Line or block where the error occurs.
Conditions that trigger the bug.

2.2 Provide the steps to reproduce the issue
AI systems work more effectively when they are informed of the circumstances under which the bug occurs.

You should include:

Input values or request payloads
User actions or workflow steps
Environment conditions (browser, framework version, API response)

2.3 Include the Error Message and Stack Trace
Error messages are among the most valuable debugging signals, often containing precise information about the failure point and execution path.

Best practice:

Provide the exact error message
Include the stack trace.
Avoid paraphrasing.

2.4 Provide Only Relevant Code Context
Context is essential, but too much can reduce the AI’s accuracy.

Instead of dumping entire files or repositories:

Share the specific function.
Include dependent helper functions.
Include relevant configuration if necessary.

This keeps the AI focused and preserves context window capacity.

2.5 Define the Expected Behavior
Many debugging prompts fail because they explain what is broken, but not what should happen instead.

Include a clear success condition, such as:

"The function should return a validation error instead of crashing."
"If email is missing, the API should return HTTP 400."
"The UI should display a fallback message instead of rendering a blank page."

2.6 Ask for a Diagnosis Before Requesting a Fix
Jumping directly to asking the AI to “fix the code” can lead to unnecessary changes.

A more effective strategy is to prompt in stages:

Diagnosis prompt
"What is the root cause of this error?"
Fix prompt
"Suggest the minimal code change to resolve it."
Validation prompt
"Are there any edge cases this fix might introduce?"

This workflow mirrors professional debugging practices and helps produce more reliable solutions.

2.7 Request Minimal Patches Instead of Full Rewrites
AI models sometimes attempt large refactors when a small change would suffice.

To prevent this, explicitly constrain the response:

Provide a minimal patch.
Do not refactor unrelated code.
Return only the modified function.

This reduces the risk of introducing new bugs or architectural inconsistencies.

2.8 Use Iterative Debugging Instead of One Large Prompt
Effective AI-assisted debugging is iterative.

A typical workflow might look like:

Identify the failing component
Ask the AI to analyse the error
Test the proposed fix
Provide feedback or new logs
Refine the solution

Short, focused iterations almost always outperform large, unfocused prompts.

2.9 Validate the AI’s Fix
Even powerful models can generate incorrect solutions. Always verify the proposed changes by:

Running tests
Checking edge cases
Reviewing for architectural consistency
Confirming performance or security implications.

Treat AI output as a proposed patch, not an authoritative answer.

2.10 Use Structured Debugging Prompts
Over time, teams benefit from standardizing their debugging prompts.

One useful template is the “Given–When–Then–But” format from Behaviour-Driven Development (BDD).

Like a developer, the AI needs three key pieces of information to diagnose and fix a bug efficiently:

Context: What’s the state of the system when the bug appears?
Action: What triggers the bug?
Expected vs. Actual Outcome: What should happen, and what actually happens?

The Given-When-Then structure captures these elements in a concise and predictable format. Adding “And” and “But” allows you to specify additional conditions or exceptions without breaking the flow. Example:

❌ Vague Prompt (Expensive):
"The login button doesn't work. Just fix it. "

The AI now has to guess: Is it a front-end issue? Back-end? Does it throw an error? What browser? What user? This leads to a long, token-wasting conversation.

✅ Structured Prompt (Efficient) :
Given a registered user with the email "test@example.com" and password "secret,"
And the user is on the login page,
When they enter correct credentials and click the "Login" button,
Then the page should redirect to the dashboard.
But currently, the page just reloads and shows no error.

This prompt tells the AI:

Exact scenario (user, page, actions)
Expected behaviour (redirect to dashboard)
Actual bug (page reloads, no error)

The AI can now zero in on possible causes (e.g., JavaScript form submission preventing default, API call not firing, response not handled correctly). It doesn't need to ask for clarification, so the fix will be quicker, cheaper, and more accurate.

Trae makes implementing these best practices easy:

3. Adding Features to Your AI-Generated App

Once your app runs smoothly, the next step is usually adding features, and vague prompts like “add X” can cause messy code, broken workflows, or unnecessary rewrites.

When asking AI to add features:

Define the feature clearly
- What it does
- The problem it solves
- Constraints or limits
Provide technical context
- Framework / tech stack
- Relevant files or modules
- Where it should connect (API endpoints, UI components, DB tables, jobs)
Work in incremental steps
- Design architecture
- Update schema
- Implement backend logic
- Add endpoints
- Build frontend
Control the output
- Return only needed changes (e.g., modified functions, patch diff)
- Follow project standards (naming, structure, error handling, logging)
Ensure reliability
- Define success criteria and edge cases
- Protect existing functions/modules
- Request a self-review for regressions, performance, security
- Validate with tests, example API calls, or usage scenarios

Key principle: clear instructions + small steps + strict boundaries = safer feature additions without breaking existing code.

You can do all of these manually.

Or you could let Spec-driven development in TRAE SOLO help you.

It's a workflow that gives your agent a persistent implementation plan to follow, so it always knows where it is and where it's going.

4. Your Turn

Pick a bug in your current project and use the best practices (above).
Add a feature using Trae Solo spec-driven development.
Compare the results with your usual workflow.

The more intentionally you use AI tools like TRAE AI, the more they shift from “code generators” to true development partners that help you debug faster, iterate safely, and ship features with greater confidence.

If this guide helped you refine your workflow, consider sharing your experience or your own prompt strategies in the comments, your insights might help the next developer build smarter with AI.

This is the final post in a 3 part series: Turn Ideas into MVP Fast with Trae AI
1. Stop Guessing: Turn Vibe Coding from "Sometimes Magic" to "Reliably Powerful"!
2. Visual Customization with Natural Language Prompts in Trae.ai
3. Debugging Smarter and Feature Iteration with Trae AI

Here's the link to my 10x AI Engineer, Trae: https://www.trae.ai/.

To learn how to use Trae.ai: https://www.youtube.com/playlist?list=PLvDpQQwPxoz2nI9WyErHjntvrrQsf1Kp8

Visual Customization with Natural Language Prompts in Trae.ai

Richard Chai — Thu, 12 Mar 2026 16:15:44 +0000

How to precisely shape your app's look and feel - without writing CSS or playing prompt roulette.

Part 2 of the "Turn Ideas into MVP Fast with Trae AI" series on reliable vibe coding with Trae.ai.

Read Part 1: Turn Vibe Coding from Sometimes Magic to Reliably Powerful https://dev.to/richard_chai_7ae55a511593/stop-guessing-turn-vibe-coding-from-sometimes-magic-to-reliably-powerful-51mi

You've built your MVP. It works, but when you show it to a friend, they ask, "Is this finished? It feels a bit… generic."

You try to fix it. You type into Trae.ai:

"Make it look modern and friendly."

Trae updates something: The colours shift. Maybe a font changes. But it's still not quite what you imagined. You try again:

"Use nicer colours and better spacing."

More iterations. More tokens. More frustration.

Then you suddenly realise: Visual intent is hard to convey without a shared vocabulary.

But you’re already so busy building your product and talking to users that you don’t want or have the time to learn design jargon or write CSS code.

In this post, you’ll learn how Trae enables you to turn vague visual requests into precise prompts that AI can reliably execute to bring your vision to life easily.

Two Paths to Visual Polish in Trae

The first approach is to use text prompts only, where you describe the look and feel you want using clear language.

For example, you might request a minimalist, modern, or vibrant interface and Trae applies those ideas across layouts, buttons, and colour schemes.

But style is subjective. What “minimalist” or “modern” means can vary from person to person and between different Large Language Models (LLM).

To make your intent clearer, Trae also lets you include visual references alongside your text prompt (the second path).

Instead of describing the design, provide a reference image, website URL, or Figma design that captures the style you want. Trae analyses patterns like color, typography, and spacing, then applies that styling to your app.

Both methods can be used to apply changes to a single element, multiple components, or the entire app, so refining the visual experience is fast and simple.

With so many options, which approach is best?

When you’re refining your app’s visual design, the best method depends on how clearly you can express the style you want.

If you already know how to describe the look, such as minimalist, modern, or vibrant, and can describe the details clearly or don’t mind different interpretations, a text prompt is often the fastest place to start.

But when the goal is to replicate a specific aesthetic or design pattern, visual references work better. Providing an image, Figma design, or website gives Trae concrete examples to analyse, making it easier to reproduce details like spacing, typography, and colour systems.

In practice, many teams combine both approaches.

Start with text prompts to shape the overall direction, then add visual references when you want the result to more closely match a specific style. This balance keeps iteration fast while giving you precise control over the final visual experience.

To see how this is done (Start from 03:00 onwards.):

No guessing. No endless iterations.

Just clear direction that gets you the UI you actually want, saving you time and burning less tokens!

Your Turn

Here’s the Visual Aesthetic Styles.md used in the video lesson.

<h1>
Visual Aesthetic Styles
</h1>

| **Style Name**    | **The "Code-Talk" Description (Use these keywords)**                                                                                                                 |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Neubrutalism**  | "High-contrast UI, **3px solid black borders**, **hard box-shadows** (offset 5px, 0 blur), vibrant high-saturation backgrounds, and zero-radius corners."            |
| **Bento Grid**    | "Modular **rectangular tiles**, organized grid system, large **rounded-3xl (24px) corners**, consistent gaps, and clear hierarchy through varying tile sizes."       |
| **Aurora UI**     | "Ethereal look with **large blurred mesh gradients**, `backdrop-filter: blur(100px)`, translucent glass layers, and vibrant, organic color blobs in the background." |
| **Claymorphism**  | "3D 'squishy' plastic look. Use **double-layered shadows**: outer `shadow-lg` and **inner inset shadows** to create depth. Extremely rounded corners."               |
| **Retro-Pulp**    | "Analog charm with **grainy/noise textures**, earthy 'dirty' tones (off-whites, burnt oranges), **chunky serif typography**, and 1px 'imperfect' black strokes."     |
| **Cyberpunk**     | "Dark mode (#050505), **neon glow effects** (`text-shadow`), electric pink/cyan accents, and **2px solid borders** with outer glows and clipped corners."            |
| **Skeuomorphism** | "Tactile 3D effect. Use **dual-shadows** (light top-left, dark bottom-right) to make elements look molded from the background. Reverse on `:active`."                |
| **Glassmorphism** | "Translucent 'frosted glass' panels using **`backdrop-blur-md`**, white semi-transparent borders (1px, 20% opacity), and soft multi-colored gradients."              |
| **Flat Design**   | "Pure 2D aesthetic. **Zero shadows**, zero gradients, solid matte color palette, and simple 8px rounded corners for a clean, professional finish."                   |
| **Minimalist**    | "Monochromatic palette, extreme **whitespace**, 1px hair-line borders, no shadows, and high-quality sans-serif (Inter/Geist) typography."                            |

Have fun with it and explore how different styles transform the look and feel of your app.

Here's the link to my 10x AI Engineer, Trae: https://www.trae.ai/.

To learn how to use Trae.ai: https://www.youtube.com/playlist?list=PLvDpQQwPxoz2nI9WyErHjntvrrQsf1Kp8

This is the second post in a 3 part series: Turn Ideas into MVP Fast with Trae AI
1. Stop Guessing: Turn Vibe Coding from "Sometimes Magic" to "Reliably Powerful"!
2. Visual Customization with Natural Language Prompts in Trae.ai
3. Debugging Smarter and Feature Iteration with Trae AI

Stop Guessing: Turn Vibe Coding from "Sometimes Magic" to "Reliably Powerful"!

Richard Chai — Mon, 09 Mar 2026 22:59:25 +0000

Vibe Coding is like Rolling a Dice?

I spent hours tweaking prompts in Trae.ai. The output?
Almost right, but missing the one thing that mattered. I tried again.

And again.

By the 5th attempt, I was frustrated, not with the tool, but with myself: Why can't I just get this right the first time?

Then it finally dawned on me: I was asking AI to read my mind!

If you're an experienced dev already comfortable with Trae.ai, Cursor, or other vibe coding tools, you might be thinking:

"I’m already vibe coding just fine; I iterate fast, follow my intuition, and shape the output as I go. Why would I add structure to something that’s supposed to remain fluid?"

Fair question. But here’s why...

Prompt:

Update Visual Style.

AI:

Update one element, one section, one screen, a few screen, the entire app? Just the font, the size, the colour, other visual effects? What does this human want?

Weak prompts lack specificity while strong prompts are structured and provide detailed instructions.

So when you use a weak prompt, AI has to guess your intent.

This can sometimes be a good thing when you're just exploring or aren't sure what you want, but when you do, a strong prompt will get you to your destination a lot cheaper and faster.

From Magic to Method

Think of G.S.B.E.C. like a type system for your prompts. Just as TypeScript catches errors before runtime, G.S.B.E.C. catches ambiguity before Trae.ai starts coding.

The G.S.B.E.C. Prompt Framework

GOAL: 
- What is the primary objective? 
- What problem does it solve
- What is the specific, measurable expected outcome?

SCOPE: 
- Who is the app for?
- What high-level functional areas does it cover?

BEHAVIORS: 
- What specific actions can users take? 
- How should the system respond? 

EXCLUSIONS: 
- What must the application explicitly NOT include or do? 
- Set clear boundaries to prevent scope creep.

CONSTRAINTS: What rules must be respected across three categories:
- Technical (stack, compatibility, performance, security)
- Business (budget, timeline, resources)
- Regulatory (GDPR, WCAG, industry requirements)

For an in-depth explanation: [(https://www.youtube.com/watch?v=TdH81cFSzpQ)]

G.S.B.E.C. doesn’t take away the spirit of vibe coding; it sharpens it by removing the guesswork. With a clearer structure, your first prompt gets you much closer to the end goal, so you spend less time iterating. Fewer iterations also mean fewer tokens used and lower costs overall.

Using AI to generate the GSBEC prompt
But you don't have to do everything manually. Let's get AI to generate the GSBEC prompt, and we can modify it as we see fit.

Here's a meta-prompt you can put in ChatGPT, Gemini, Qwen etc:

Please create a prompt for my idea using the G.S.B.E.C. framework that consists of Goals, Scope, Behaviours, Exclusions, and Constraints, as defined below:

GOAL: What is the primary objective? What problem does it solve (who experiences this pain point)? What is the specific, measurable expected outcome?

SCOPE: Who is the app for (target audience, user personas, technical proficiency, pain points)? What high-level functional areas does it cover (core features, supported platforms, integrations)?

BEHAVIORS: What specific actions can users take, and how should the system respond? For MVP validation, define either high-level behaviors (intent-focused) or granular step-by-step flows based on complexity.

EXCLUSIONS: What must the application explicitly NOT include or do? Set clear boundaries to prevent scope creep.

CONSTRAINTS: What rules must be respected across three categories:
- Technical (stack, compatibility, performance, security)
- Business (budget, timeline, resources)
- Regulatory (GDPR, WCAG, industry requirements)

From my idea, derive the goal with a clear problem statement and measurable outcome. If you are unable to do so, please ask me clarifying questions before proceeding to output the G.S.B.E.C. prompt. 
If you have asked me 3 times and you are still unable to derive the goal with a clear problem statement and measurable outcome, give me an example I can learn from and stop the conversation.

Once the goal is successfully derived, for remaining components, make reasonable assumptions and produce an MVP-level output focused on validating the goal.

Output the complete G.S.B.E.C. in a structured format with clear headers. Include a 2-3 sentence "MVP Summary" at the beginning.

Technology Stack:
- Mobile/multi-platform: PWA-appropriate stack
- Non-mobile: Plain HTML/CSS/JS OR Tailwind + TypeScript + React + Vite
- 2D Game: Phaser
- 3D Game: Three.js
- Database: Supabase preferred; FastAPI backend only when justified
- Deployment: Vercel preferred

Finally, recommend three potential application names.

My idea is:
<your idea>

To see how I used AI to generate the GSBEC prompt for me: [(https://www.youtube.com/watch?v=tD_ilRK7eOI)]

Building our Community Clothes Swap App using Trae.ai

The Big Idea
I wanted to build a community clothes swap app because I had many clothes I never wore or maybe only once, but feel bad throwing away. I kind of thought that there would be more people like me but wasn't sure. So I thought why not build a MVP using Trae to find out? An app that makes it simple for people nearby to swap pieces they don’t use anymore, save money, and make fashion a bit more sustainable.

Excitedly I fired a prompt to Trae and got back... never mind. After failing again and again, I decided to use GSBEC method.

And here's what happened:

You can get the GSBEC prompt I used from the YouTube video's description.

Your Turn

Unless it's a trivial app, the GSBEC Prompt probably won't give you the full app you had in your mind. But if it helps bring you that much closer to your vision, you'll spend far less time iterating and burn far fewer tokens ($).

Take the GSBEC Meta Prompt and play around with it. I think you'll be amazed at the difference it makes.

Oh yes, one more thing. Trae also has a "Optimise Your Input" function that can be used to provide more context to your MVP idea. See the screen shot below, it's at the bottom right, that button that looks like a star or diamond. And the button next to it? That's for voice input, if you prefer talking to typing.

You can use it by itself or together with the GSBEC Prompt.

And here's the link to my 10x AI Engineer, Trae: [(https://www.trae.ai/)].
Feed it your GSBEC prompt.

If you can think and explain it, you can build it.

To learn how to use Trae.ai: https://www.youtube.com/playlist?list=PLvDpQQwPxoz2nI9WyErHjntvrrQsf1Kp8

This post is the first in a 3 part series: Turn Ideas into MVP Fast with Trae AI
1. Stop Guessing: Turn Vibe Coding from "Sometimes Magic" to "Reliably Powerful"!
2. Visual Customization with Natural Language Prompts in Trae.ai
3. Debugging Smarter and Feature Iteration with Trae AI