“Alright, so I basically wrangled ChatGPT, put it in a headlock, and made it perform exactly as the great Sam intended!”
Despite the abundance of AI models (and I regularly use four top-tier ones), GPT-4.1 still gives me the best results for my tech stack compared to others.
My main secret has always been this: whenever I add a new feature to my app that theoretically consists of multiple components, I save these components in a Google Docs file. Every time I generate a new function or entire component, I "feed" the text from this document to the AI — specifically in text format. This approach works pretty well.
But today I managed to substantially improve this already powerful tool. Based on my internal assessment — probably by 50%.
Here's what I did
Now, whenever I write a prompt, I always add this at the end:
"Please explain how you understood my problem, why I think this is important, how you're going to solve it, and what would be the right solution."
If the tasks aren't too complex, I immediately add: "Without waiting for the next request, right after the description, provide me with a complete ready solution that includes all component code without abbreviations."
But in some cases, when tasks are complex, it's crucial to understand that the solution approach the AI model wants to suggest fully aligns with your thought process. Then it makes sense to wait for the response, maybe discuss it a bit, or perhaps fundamentally change the solution. Only then request the complete component code.
A Real Example
Let me show you a concrete example so you can see how the model responds.
I had a problem with badge animation in a React menu component. When hovering over a link with a badge, the badge would disappear, but the link text remained truncated, not expanding to fill the freed space. Here's how I wrote the task:
"Investigate the issue with incorrect animation of links containing badges. When hovering over such a link, the badge disappears and an arrow appears — this is correct behavior, but the link text remains shortened, and we can't read the full content. The correct behavior should be that after hovering, the badge disappears, an arrow appears, and the original link text should restore to the state as if the badge never existed in the link. Please explain how you understood my problem, why I think this is important, how you're going to solve it, and what would be the right solution, then provide a ready solution."
Now let's see how the model responded:
How I understood your problem
If a link has a badge and long text, visually the link looks like:
[TEXT ...] [BADGE]
When hovering, the badge disappears and an arrow (ArrowRight) appears. However, the text area doesn't expand — it still occupies less width, so the long text remains truncated and doesn't become fully visible.
Why this is important for UX: Users get maximum information on hover. Similar behavior is often implemented in rational interfaces (side menus, dropdowns — see Figma, Notion, etc.) — the badge doesn't interfere with reading detailed information.
How I'm going to solve this
Use conditional rendering instead of opacity: when hovering, show only the arrow and text, without the badge at all (badge is removed from DOM or replaced with arrow). The containing text shouldn't have fixed width — it should automatically occupy the freed space.
The right solution:
Normal state: [TEXT (shortened)] [badge]
On hover: [TEXT (full)] [ArrowRight]
Below, the model provided a completely working solution with proper conditional rendering and dynamic width management.
Draw Your Own Conclusions
Personally, I've already made mine — I'll use this approach constantly. The model now doesn't just generate code but thinks about the task structurally, which dramatically improves results.
By the way, for those following my work — this is related to developing menu interfaces for my open source Next.js starter for AI applications called AIFA. Right now I'm working on creating the second part of four for generating beautiful pages using commands — this will be one of the features similar to v0 or Lovable.
P.S. If you're interested in AI-powered development and open source solutions, I'd appreciate a follow — today I'll be showing the open source code for a really interesting top menu and mobile version that can scale to infinite categories and links while remaining elegant.
🔗 Links:
Project: https://aifa.dev
Open source code: https://github.com/aifa-agi/aifa
What's your experience with AI code generation? Have you found any techniques that dramatically improve output quality? Share in the comments!
Top comments (0)