NEXO (AI)
THE SETUP
Ok so, I have here a project in Claude with a PRD for a bank, that hypothetically is called Nova, the goal is a Know Your Customer flow, and I will ask Claude to map this onboarding flow, using a prompt.
PROMPT LOGIC
Claude did a lot of thinking and provided extensive information about how to sort out the problem.
With all this information what I want to do is have this flow visually.
USER FLOWS
VISUAL UI SCREENS
Now I want to see this flow visually so I am going to ask Claude to design the mobile screens, so I can review them in Figma.
Claude made a good job, with what I asked, a quick and efective walktrhoug until I get to the money deposit screen, but it is working from assumptions not from actual mobile screens.
VISUAL FEEDBACK
Claude made a pretty good job, for a first pass but there are some things it is not telling me
1- What should critical moments look like.
2- How other apps deal with this problem?
3- What does that moment look like in a product that converted well
These are reasoning questions, that Claude answer from assumptions, that`s why we will use Mobbin to reference from actual companies and real problems.
MOBBIN MCP
After setting the MCP and making sure it was connected Claude Code it is time to re prompt what I already had, with el beneficiode tener toda la basede datos de Mobbin.
MOBBIN RESEARCH SCREENS
Now we are in a point in which, we watch the finer details of what a flow should fell made by designers.
This is what separates AI slop from AI Assisted design.
CLAUDE REPROMPTING
Let’s go back to Claude with this context, and ask it for another pass, what I will addd in this new prompt is reduce the amount of steps to 7 and reference the examples from the Mobbin MCP