DEV Community

Hamza KONTE
Hamza KONTE

Posted on

I Built a Visual Prompt Builder That Turns Messy Prompts Into Structured Blueprints

The Problem Nobody Talks About

Everyone's debating which AI model is best. GPT-4o vs Claude vs Gemini. But here's what Anthropic's own research shows: the structure of your prompt matters more than the model you use.

A well-structured prompt on a "weaker" model consistently outperforms a vague prompt on a "stronger" one. Yet most people still write prompts like this:

"Hey, write me a marketing email. Make it professional but fun. Target millennials."

That's not a prompt. That's a vibe check.

What If Prompts Were Visual?

I built flompt (flow + prompt) to solve this. Instead of writing one big block of text, you decompose your prompt into 12 semantic blocks:

Block Purpose
Role Who the AI should be
Audience Who the output is for
Context Background information
Objective The main task
Goal Success criteria
Input Data you're providing
Constraints Rules and limits
Examples Few-shot demonstrations
Chain of Thought Reasoning instructions
Output Format Expected response structure
Response Style Tone, verbosity, formatting
Language Output language

You drag these blocks onto a visual canvas (built with React Flow), connect them, edit each one, and compile everything into Claude-optimized XML.

Three Ways to Use It

1. Web App

Full visual editor at flompt.dev/app. Paste any prompt, hit Decompose, get structured blocks. Edit them visually. Hit Compile. Copy the result.

2. Browser Extension

This is the killer feature. The Chrome/Firefox extension injects an "Enhance" button right into ChatGPT, Claude, and Gemini. A sidebar opens beside your conversation. Structure your prompt visually. Inject the compiled result back into the chat input. Zero tab switching.

3. MCP Server (for Claude Code users)

claude mcp add flompt https://flompt.dev/mcp/
Enter fullscreen mode Exit fullscreen mode

Your agents can now call decompose_prompt() and compile_prompt() natively. Build prompt engineering into your agentic workflows.

The Stack

  • Frontend: React 18 + TypeScript + React Flow v11 + Zustand + Vite
  • Backend: FastAPI + Anthropic Claude API
  • Extension: Chrome + Firefox (injected sidebar)
  • MCP: HTTP transport, three tools exposed

Try It

It's free, open-source, no account needed, and supports 10 languages.

Stop writing prompt essays. Start building prompt blueprints.

Top comments (0)