Escaping Pure Vibe Coding: Making AI More Predictable with JSON

Toja — Wed, 17 Sep 2025 14:16:17 +0000

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.

JSON prompts bring more control to vibe coding

Toja — Tue, 16 Sep 2025 00:49:41 +0000

Managing Frontend AI Prompts with JSON

The typical approach to AI-assisted frontend development is sending hand-drawn wireframes to multimodal AI, supplemented with text descriptions. This works fine for simple layouts, but when pages get complex or you need to emphasize specific details, it becomes unwieldy and error-prone.

Inspired by programming language layout formats, I've developed a JSON-based approach to organizing frontend prompts. Here's the key insight: current AI models understand text far better than images. Text descriptions capture nuanced details that visual inputs often miss, and JSON works with any AI model—no multimodal capabilities required.

Real Example

Here's how I structure a ChatGPT-style chat interface using JSON prompts:

{
  "elements": [
    {
      "type": "container",
      "name": "Sidebar",
      "prompt": "Left sidebar containing new chat button and chat history list",
      "bounds": { "x1": 0, "y1": 0, "x2": 25, "y2": 80 },
      "children": [
        {
          "type": "button",
          "name": "New Chat Button",
          "prompt": "Button to start a new conversation, positioned at top",
          "bounds": { "x1": 2, "y1": 3, "x2": 23, "y2": 7 }
        },
        {
          "type": "custom",
          "name": "Chat History List",
          "prompt": "Scrollable list of previous conversations with titles",
          "bounds": { "x1": 2, "y1": 10, "x2": 23, "y2": 77 }
        }
      ]
    },
    {
      "type": "container",
      "name": "Main Chat Area",
      "prompt": "Main chat interface with header, messages, and input",
      "bounds": { "x1": 25, "y1": 0, "x2": 120, "y2": 80 },
      "children": [
        {
          "type": "input",
          "name": "Message Input",
          "prompt": "Text input with embedded send button on right side",
          "bounds": { "x1": 32, "y1": 70, "x2": 113, "y2": 74 }
        }
      ]
    }
  ]
}

(snapshot from fronami.com)

Full-Stack Prompt Management

This approach lets me combine frontend and backend logic in a single prompt. Sometimes I get lazy and put backend-specific prompts right in the frontend components:

{
  "type": "button",
  "name": "Send Button",
  "prompt": "Send button that validates input, 
             posts to /api/chat endpoint with current message, 
             shows loading spinner, handles errors with toast notifications, 
             and appends AI response to chat history",
  "bounds": { "x1": 107, "y1": 71, "x2": 112, "y2": 73 }
}

For granular control, I can place specific prompts exactly where they belong:

{
  "type": "input",
  "name": "Message Input",
  "prompt": "Multi-line text input with auto-resize, 
             placeholder 'Type your message...', 
             Enter to send (Shift+Enter for new line), 
             max 2000 characters with counter",
  "bounds": { "x1": 32, "y1": 70, "x2": 113, "y2": 74 }
}

My Workflow

Design the complete page structure in JSON format first
Execute prompts step-by-step to build the full application

This structured approach adds predictability to my development process. No more worrying that one misunderstood prompt will break the entire layout. Each component has a clear specification that AI can follow consistently.

While writing JSON by hand works well, I've been experimenting with Fronami(www.fronami.com), which provides a visual interface for organizing these prompts. You can drag and drop components while it automatically generates the JSON structure. They have a one-click frontend code generation feature, though I still prefer using mature tools like Cursor or Roo Code for the actual implementation.

I've grown to love this method of prompt management—it makes AI development more controlled and reliable.

If you have any similar approaches to solving this problem, I'd love to hear about them.

DEV Community: Toja