Picture this: 20 minutes spent curating the perfect glassmorphism card on Pinterest. You open Claude, type something like “make a dark card with a glow effect and a hidden number,” and get back something that looks absolutely nothing like your reference. You try again. Rewrite it. Try a different phrasing. Six attempts later, you’re still staring at generic boilerplate wondering what you’re doing wrong.
Sound like a familiar loop? It was for u/Pedrosh88, who ran this cycle for months before finally identifying where the whole thing was falling apart. Their breakdown is one of the more honest and practical takes on where AI-assisted UI work actually breaks down.
🎯 Why the AI Keeps Missing Your Vision
Here’s the thing the author figured out: Claude and ChatGPT aren’t bad at UI. They’re bad at reading minds. The gap isn’t the model. It’s the input.
When you try to describe a visual reference in plain English, you lose almost everything that matters. A specific hex value becomes “dark.” A calculated blur radius becomes “glow-y.” A deliberate spacing decision becomes “kind of cleaner.” The model can’t reconstruct what you’re picturing from those words, because those words don’t carry any of the actual information.
The original poster put it directly: “A vague prompt produces vague code.” That’s the whole problem in one sentence. The fix follows naturally from understanding it.
🔧 The Workflow That Actually Works
The author’s solution isn’t complicated. Stop trying to describe the image yourself. Convert the visual reference into a structured spec first, then pass that spec into Claude or Cursor.
Here’s how the workflow runs step by step:
- Collect your visual reference. A Pinterest screenshot, a Dribbble link, anything you’ve saved over time. The reference doesn’t need to be polished, just something you want to build from.
- Run it through a prompt interpreter. The author uses a tool called tknctrl (paid version, no affiliation per the post). It analyzes the image and extracts actual values: blur amounts, color codes, layout intent, animation curves. Not your approximation of those things. The values themselves.
- Take the structured spec and paste it into Claude or Cursor. This is the critical step. You’re not writing a description of the card. You’re handing over something the model can genuinely build from.
- Get working code on the first try. The author’s hit rate went from roughly 1-in-6 to nearly every attempt after making this change.
The shift is from “describe the vibe” to “hand over the spec.” One approach asks the model to guess what you mean. The other eliminates the guessing entirely. And the results speak for themselves.
💡 Tips and Tricks
A few things from the original post worth keeping in mind if you want to run this yourself:
- No screenshot? The tool handles text too. If you have a rough concept but no visual reference yet, you can describe it in plain English and get a structured prompt back. Useful for early-stage ideas where you’re still looking for visual references.
- The bottleneck was never the model. This part is worth sitting with. Claude and ChatGPT are capable of generating solid UI code. The weak link in most workflows is the translation between the idea in your head and the text in the input field. That’s the layer this workflow addresses.
- Start with one component. If this is new to you, pick a single card or button to test before applying it to a full layout. Evaluating spec quality at small scale is much easier, and you’ll understand the output format before you’re relying on it for something bigger.
- Treat your saved references as data, not inspiration. The mental shift here matters. A screenshot isn’t something to describe, it’s something to extract. The values you need are inside the image. The workflow is just about getting them out in a form the AI can actually use.
- Before-and-after comparisons make this click fast. The author offered to share prompt comparisons in the thread. Seeing the difference between a vague prompt and a structured spec side by side will make the concept land better than any explanation.
🔗 Check the Full Thread
The original Reddit post is worth visiting if you want to see those before-and-after comparisons the author mentioned, or if you have questions about specific use cases in your own projects.
If you’ve been frustrated with AI missing your visual references, the issue probably isn’t the model, your taste, or your luck with rewrites. It’s the step in between, and that step is fixable.
I kept saving Pinterest UI inspo and then completely fumbling the prompt, found a workflow that finally works
by u/Pedrosh88 in PromptEngineering