Show HN: Flompt – Visual prompt builder that decomposes prompts into blocks
github.comAnthropic's research shows prompt structure matters more than model choice. Flompt takes any raw prompt, decomposes it into 12 typed blocks (role, context, objective, constraints, examples, chain-of-thought, output format, etc.), and compiles them into Claude-optimized XML.
Three interfaces: web app (React Flow canvas), browser extension (injects into ChatGPT/Claude/Gemini toolbars), and MCP server for Claude Code.
Stack: React + TypeScript + React Flow + Zustand, FastAPI + Claude API backend, Caddy.
Free, no account, open-source. Demo: https://youtu.be/hFVTnnw9wIU Hey HN! Builder here. The core idea: most people write prompts as a wall of text. But prompt quality comes from structure — role, context, constraints, examples, output format all serve different functions. Flompt makes that structure visual and explicit. A few things that might be interesting to this crowd: 1. The MCP integration — you can call decompose_prompt() directly from Claude Code agents. I use it in my own agentic workflows to turn rough task descriptions into structured XML prompts before sending them to sub-agents. 2. Everything assembles client-side. The compiled prompt (Claude-optimized XML) never leaves your browser. The AI decomposition calls the backend, but compile is pure JS. 3. The browser extension injects directly into ChatGPT, Claude, and Gemini's textarea. Build your prompt in the canvas, click inject, it appears in the chat input. The XML output format is intentional — Anthropic's research and my own testing show Claude handles structured XML tags significantly better than markdown for complex prompts. Happy to answer any questions about the architecture or the prompt engineering decisions behind the block types.