Every time you ask AI to write code, it feels like gambling? You say "build a responsive navigation bar" and it gives you an overly complex breakpoint system. You mention "optimize performance" and it transforms your simple code into incomprehensible async logic.
What's the problem? We describe requirements in natural language, AI interprets through its own lens, and everything in between relies on luck.
Why AI Always Misunderstands
Compare this to the AI art community—those folks have detailed prompt templates and know exactly which keywords trigger specific effects. But AI coding doesn't allow batch generation. Every interaction is unique, and the cost of getting it wrong is much higher.
We put tremendous effort into system prompts, making them structured and standardized. But we never apply the same rigor to user input. This makes sense for user-facing products, but it's a disaster for AI-assisted development.
The JSON Breakthrough
The breakthrough came from a simple idea: since AI understands text better than images, why not use structured text to describe our requirements?
Traditional approach: wireframes + text descriptions. Problem: wireframes lack detail, text descriptions are ambiguous.
JSON benefits: structural clarity + rich detail.
Here's how I rebuilt a chat interface using this approach:
{
"elements": [
{
"type": "container",
"name": "Sidebar",
"prompt": "Fixed 250px width left sidebar with dark background #2c3e50, contains logo and scrollable chat history list",
"bounds": { "x1": 0, "y1": 0, "x2": 250, "y2": 100 },
"children": [
{
"type": "button",
"name": "New Chat",
"prompt": "Primary action button, 8px border radius, main color #3498db, hover state #2980b9",
"bounds": { "x1": 20, "y1": 20, "x2": 230, "y2": 50 }
}
]
}
]
}
Results were immediate:
- AI no longer had to guess the layout
- Every component had clear definitions and boundaries
- When modifying, I could target specific components without affecting others
Fronami: The Tool We're Building
Based on this insight, we're developing Fronami, a tool that visualizes this structured prompt process. You can drag and drop components while the tool automatically generates the corresponding JSON structure.
The core is describing each UI component with JSON:
- bounds property defines precise position and dimensions
- prompt field contains detailed styling and interaction requirements
- children property manages nested relationships
Our goal is to build a standardized component library where each element has detailed prompt definitions, making complex application development as predictable as assembling LEGO blocks.
From Gambling to Engineering
After using this structured approach for months, the biggest change is regaining control:
- No more praying that AI understands your intentions
- No worrying that small changes will break the entire project
- Each component has clear responsibilities, modifications are precise, debugging is systematic
This transforms AI coding from gambling into engineering.
Of course, there's a learning curve. You need to think about information architecture and write clear prompts. But the investment pays off with more stable and efficient development processes.
New Era Needs New Methods
AI tools are rapidly improving, but how to use them effectively—how to maintain control—still lacks standard answers.
Structured prompt management is just the beginning. The key insight: AI isn't magic. It needs clear instructions and thoughtful organization.
Moving beyond pure vibe coding toward structured development is a fundamental shift in thinking. In this new era of AI collaboration, mastering this control determines how far we can go.
We're no longer passive prompt writers hoping for the best. We're becoming active architects of the development process.
Top comments (1)
Do you have a better idea? Share it with me.