This content originally appeared on DEV Community and was authored by Toja
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.
This content originally appeared on DEV Community and was authored by Toja