User Flows And Pathways

AI Prototyping 101: If I had to teach someone how to actually build usable products with AI, this is where I’d start. Here's the step-by-step workflow that feels like magic: — ONE - THE UNIVERSAL AI PROTOTYPING WORKFLOW No matter which tool you’re using — v0, Bolt, Replit, or Lovable — this is the backbone of a solid AI build process: 1. Start with Context AI works way better when it knows what you're working with. Figma files are ideal, they give structure and design language. If you don’t have those, use screenshots of your product. Worst case? A hand-drawn wireframe is still better than nothing. Without visual context, AI makes blind guesses. And you’ll spend more time correcting its “creativity” than building useful stuff. 2. Write a PRD (Yes, Even for AI) A simple .md file with a few bullet points on what you’re building goes a long way. Include: - What the customers want - What the feature does - Key user flows - Must-have functionality You can even ask Claude or GPT to write the first draft. But the better your input, the stronger your first output. 3. Get to Building Now open up your tool of choice. Start with a big-picture command. Then zoom in. Don’t say “Build me a dashboard.” Say: “Build a dashboard with 3 sections: recent activity, user goals, and notifications. Each should have X, Y, and Z.” Also, AI can handle technical stuff. So don’t hold back. Use real terms: auth flow, API call, state logic, it gets it. 4. Iterate Like a Builder, Not a Perfectionist Make one change at a time. Test it fast. Roll it back if it doesn’t work. This isn’t “prompt once and ship.” This is real prototyping. AI is just helping you move 100x faster. — TWO - TOOL-BY-TOOL BREAKDOWN (Complete walkthrough of the tools with screenshots, real examples, and tool setups is linked at the end.) So, let’s talk interfaces here. Here’s what each platform does best: 1. v0 - Figma import is seamless - Template gallery = instant jumpstart - Chat interface bottom left, live preview on right - Exports clean code and deploys fast 2. Bolt - Same vibe as v0, but more technical - Built-in Supabase integration with a terminal access - Deploys to Netlify in one click 3. Replit - This one feels like a real IDE - You get an “AI agent” to plan everything - Built-in chat, live console, multiplayer mode - Ships to a live URL, complete with CDN 4. Lovable - The most design-friendly of the bunch - Visual editing > code editing - Figma support, Supabase, live preview, it’s all there - Great for teams who want to stay out of code — I broke it all down - with screenshots, working examples, and use cases - in this full walkthrough: https://lnkd.in/eJujDhBV — All of these tools are powerful. But none of them matter if you don’t understand the workflow behind how to use them. Once you’ve got that down, you can ship real products in hours, not weeks.

AI isn't going to take ux designers' job, but it's changing what we do. Here's a new workflow that saves loads of time 👇 Take a hand-crafted ui designHave Figma Make recreate it in codePrompt it for a new ux design pattern or user flowImport that into Figma Design to make it pixel perfect Let's break it down: Take a ui design you already have in Figma. Head to Figma Make and paste in the frame then ask it to recreate it pixel perfect. The ai generated ui was was almost exact for me and it only took 15 seconds and fully functional. Now here's where the magic happens 🪄 Ask Make for a new flow and direct it to generate a button in the current ui design that will send to that flow. Be as specific as you can be wit user persona and how it fits into the product. It will generate some code that has the new flows in it within a few minutes. But I think that's where most designers stop. AI is not just a mood boarding tool though! See, you can publish that project, then go to the url and use the html.to.design plugin to capture the screen and import it back into Figma design--it even has Auto Layout so it's easy to work with. So in minutes, you have an interactive flow that you can edit and refine in Figma. This is a huge new workflow that I think product designers will be using daily in the near future and it's where I bet Figma Make is headed: generate new flows in seconds, refine those pixel by pixel before doing it all over again. Have you tried this workflow? #uiux #figmadesign #productdesigner

Some of you disagreed with my last post. Fair. Let's talk. Let me explain the topic a bit more and give you a deep dive into how I see the new process. The old way: Think → Research → Wireframe → Design → Spec → Hand off → Build → Test → Iterate Weeks. Sometimes months. Before anyone touches real code. The new way: 👉 Step 1: Start with a problem, not a doc. I don't need a full PRD. I need one thing. Example: "𝘗𝘦𝘰𝘱𝘭𝘦 𝘴𝘵𝘳𝘶𝘨𝘨𝘭𝘦 𝘵𝘰 𝘨𝘦𝘵 𝘩𝘰𝘯𝘦𝘴𝘵 𝘧𝘦𝘦𝘥𝘣𝘢𝘤𝘬 𝘰𝘯 𝘵𝘩𝘦𝘪𝘳 𝘱𝘰𝘳𝘵𝘧𝘰𝘭𝘪𝘰." That's it. That's the brief. 👉 Step 2: Build the ugliest working version. I open Lovable or Cursor and prompt my way to a prototype. Not a mockup. Not a Figma file. A real, clickable, functional thing. 30 minutes. Maybe an hour. 👉 Step 3: Use it. Don't refine it. Don't show it to anyone yet. Use it yourself like a real user would. Click every button. Try to break it. Feel where it's awkward. 👉 Step 4: Now design. This is where design skill actually matters. You're not guessing what the experience should feel like. You already know because you felt it. Now you fix what's broken, remove what's unnecessary, and polish what works. Maybe pivot or try other solutions. 👉 Step 5: Show it, don't spec it. Instead of a 20-page spec, I send a link. "Here, try this. What's confusing?" Real feedback on a real thing beats hypothetical feedback on a hypothetical thing every single time. 👉 Step 6: Iterate in minutes, not weeks. Here's where this workflow really pulls ahead. Someone says, "This flow is confusing." You don't update a Figma file, write a ticket, and wait for the next sprint. You open Cursor, fix it, and send a new link. Same conversation. Same day. The feedback loop goes from weeks to hours. Sometimes minutes. And each round gets sharper because you're iterating on something real. 3-4 rounds of this, and you have something more validated than most products get after months of traditional process. 👉 Step 7: Document what you built, not what you plan to build. Documentation becomes a record, not a prediction. It's accurate because the thing already exists. You can do it at the end or during the process. Why this works: You make decisions with information instead of assumptions. You eliminate 80% of the back-and-forth. You design from experience, not imagination. And you iterate at the speed of conversation, not the speed of sprints. Why it feels wrong at first: Because we were trained to think before we build. And thinking first felt responsible. But we did that because we couldn't build. Now we can. And I don't think it's about ignoring thinking. (𝘔𝘢𝘯𝘺 𝘰𝘧 𝘺𝘰𝘶 𝘢𝘤𝘤𝘶𝘴𝘦𝘥 𝘮𝘦 𝘰𝘧 𝘵𝘩𝘢𝘵) I believe it's about doing it at every step. Refining it based on real feedback. Insights you can get internally and from user testing. If you're still reading this, let me know what you think about it all. ✌️

I watched a designer turn a 12-page PRD into a user flow in 43 seconds. Not a sketch. Not a rough draft. An editable, team-ready flowchart in FigJam. The Claude + FigmaJam integration launched last month, and it's changing how product teams work. Here's what I'm seeing: → Teams creating diagrams earlier in the process — not after decisions are made, but as a way to make them → Designers with zero coding background turning flowcharts into working HTML prototypes in under 5 minutes → PMs catching edge cases in sprint planning that used to surface in QA three weeks later Three workflows worth trying this week: 1. PRD to user flows Upload your requirements doc. Get an editable flow diagram. Your team reviews it before standup ends. 2. Flowcharts to working code Draw logic in FigJam. Claude Code reads it and builds a functional prototype. Designer Felix Lee calls this "vibe coding." 3. Screenshots to prototypes Screenshot any UI. Get a clickable HTML version. Test five navigation patterns in an afternoon. The shift isn't faster diagrams. It's collapsing the time between understanding a problem and visualizing it with your team. Setup takes 2 minutes: Claude → Settings → Connectors → Figma. What's your biggest friction point right now — alignment between specs and flows, or getting testable prototypes without engineering time? #ai #product #productdesign #ux #design

𝗬𝗼𝘂𝗿 𝗱𝗲𝘀𝗶𝗴𝗻𝗲𝗿 𝗶𝘀 𝗯𝘂𝘀𝘆. 𝗬𝗼𝘂𝗿 𝘀𝗽𝗿𝗶𝗻𝘁 𝘀𝘁𝗮𝗿𝘁𝘀 𝗠𝗼𝗻𝗱𝗮𝘆. 𝗬𝗼𝘂 𝗻𝗲𝗲𝗱 𝗮 𝗺𝗼𝗰𝗸𝘂𝗽 𝗻𝗼𝘄. 𝗜'𝘃𝗲 𝘁𝗲𝘀𝘁𝗲𝗱 𝟮𝟬+ 𝘁𝗼𝗼𝗹𝘀. 𝗧𝗵𝗲𝘀𝗲 𝟲 𝗮𝗿𝗲 𝘁𝗵𝗲 𝗼𝗻𝗲𝘀 𝗜 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘂𝘀𝗲 𝗶𝗻 𝘀𝗽𝗿𝗶𝗻𝘁 𝗽𝗹𝗮𝗻𝗻𝗶𝗻𝗴 𝘁𝗼 𝗴𝗼 𝗳𝗿𝗼𝗺 𝗶𝗱𝗲𝗮 𝘁𝗼 𝘃𝗶𝘀𝘂𝗮𝗹 𝗶𝗻 𝘂𝗻𝗱𝗲𝗿 𝟮𝟬 𝗺𝗶𝗻𝘂𝘁𝗲𝘀 — 𝗻𝗼 𝗱𝗲𝘀𝗶𝗴𝗻 𝗱𝗲𝗴𝗿𝗲𝗲 𝗻𝗲𝗲𝗱𝗲𝗱: 🧠 𝗨𝗶𝘇𝗮𝗿𝗱 — Type a feature description or upload a rough sketch. Done. Editable wireframes in seconds. I use this when an idea is still half-baked but I need something to react to. 🎨 𝗩𝗶𝘀𝗶𝗹𝘆 — My go-to for stakeholder alignment. Business-friendly, no Figma overwhelm, and exports cleanly for the design team to polish later. ⚡ 𝗨𝗫𝗣𝗶𝗹𝗼𝘁 — Built for PMs who care about UX. Generates multi-screen flows, spots friction before handoff, and gives you design critiques without needing a designer in the room. 🖼️ 𝗙𝗶𝗴𝗺𝗮 𝗔𝗜 — FigJam AI generates user flow diagrams from a prompt, and the design side can auto-write placeholder copy, suggest layouts, and bridge directly to dev handoff. I reach for this when I'm collaborating closely with a designer. 🤝 𝗠𝗶𝗿𝗼 𝗔𝗜 — Turns your discovery sticky notes and diagrams into basic UI layouts. Zero context switching if Miro is already your planning home. 🔧 𝗚𝗼𝗼𝗴𝗹𝗲 𝗦𝘁𝗶𝘁𝗰𝗵 (𝗳𝗿𝗲𝗲 𝗯𝗲𝘁𝗮, 𝗚𝗼𝗼𝗴𝗹𝗲 𝗟𝗮𝗯𝘀) — Free. Prompt in, Figma file and frontend code out. Still rough but already in my rotation. The real unlock isn't speed. It's earlier alignment. 𝗪𝗵𝗲𝗻 𝘆𝗼𝘂 𝘄𝗮𝗹𝗸 𝗶𝗻𝘁𝗼 𝘀𝗽𝗿𝗶𝗻𝘁 𝗽𝗹𝗮𝗻𝗻𝗶𝗻𝗴 𝘄𝗶𝘁𝗵 𝗮 𝘃𝗶𝘀𝘂𝗮𝗹 𝗶𝗻𝘀𝘁𝗲𝗮𝗱 𝗼𝗳 𝗮 𝟯-𝗽𝗮𝗴𝗲 𝗣𝗥𝗗, 𝘁𝗵𝗲 𝗰𝗼𝗻𝘃𝗲𝗿𝘀𝗮𝘁𝗶𝗼𝗻 𝘀𝗵𝗶𝗳𝘁𝘀. 𝗟𝗲𝘀𝘀 "𝘄𝗵𝗮𝘁 𝗮𝗿𝗲 𝘄𝗲 𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴?" 𝗠𝗼𝗿𝗲 "𝗵𝗼𝘄 𝗱𝗼 𝘄𝗲 𝗺𝗮𝗸𝗲 𝘁𝗵𝗶𝘀 𝗯𝗲𝘁𝘁𝗲𝗿?"

Don't be like Dave...Dave made 47 prototypes last week, and none of them looked like his actual product. He spent 6 hours trying to get the navbar right. He yelled at the AI at 2 a.m. We had to hold an intervention. Dave has a problem. He's addicted to AI app builders that force him to start from scratch every single time. Most AI prototyping tools assume you're building version 1. But product teams don't work that way. You're improving version 13 of your onboarding flow. You're exploring how to add a capability without breaking existing patterns. You need prototypes that look and feel like your actual product. Today we're announcing two features in Reforge Build that take this further. 1️⃣ Capture Flows lets you grab entire interaction sequences directly from your product. Click through a flow (button → modal → success state) and Reforge Build will capture each step with the triggers that connect them. Onboarding flows, checkout flows, upgrade flows, navigation flows, etc. 2️⃣ Capture Library turns every screen you've captured into a searchable, reusable asset. You built a good modal layout last quarter. Your table design works well across features. Now you can search your library, find the pattern you need, and start prototyping from it. Your prototypes will look like your product because they are your product. Don't be like Dave. Like + Comment and I'll DM you a code for a free month.

🚀 Level up your prototyping workflow: How to share multiple versions of your vibe-coded prototype Working on a complex prototype and need to show stakeholders different variations? Or running A/B tests with users? Here's a game-changer I just set up for our team: The problem: You're iterating on a prototype but need to keep the "stable" version accessible while testing new ideas. Or you want to run user research comparing two approaches. The solution: Deploy each Git branch to its own unique URL. Now our prototypes live at: main → primary "stable" prototype URL variant-a → /variant-a/ variant-b → /variant-b/ Why this matters for designers: ✅ Stakeholder reviews. Use the Github desktop app to switch between versions — "Here's the current version, and here's what we're exploring" ✅ User research — Run proper A/B tests with different participants seeing different URLs ✅ Iteration without fear — Experiment on a branch without breaking what's already working ✅ Documentation — Each variation has a permanent, shareable link The setup takes minutes using GitHub Actions. Once configured, every time you push changes to a branch, it automatically deploys to its own URL. This setup works particularly well at companies with security restrictions on teams that already use Github. Showing always beats telling. If you're a designer working with code-based prototypes, this workflow is a must-have. Happy to share the technical setup if anyone's interested! Also curious — what tools or workflows have changed how you share work with stakeholders?

I gave up 2 hours of my weekend to test Claude Design. Here’s what I found as a PM. Not to review features. I wanted to answer one question: Can I prototype a real product flow without pulling a designer in? I picked a real problem: an internal moderation dashboard I’d been trying to get on the roadmap for weeks. No Figma file. No design brief. Just a prompt. 15 minutes later, I had a multi-screen flow with our brand tokens, a review queue, and an approval workflow. Not pixel-perfect. But clear enough to put in front of a VP and unstick the conversation. That’s the real signal. Not “AI replaces designers.” It’s “PM unblocks herself.” What actually works ✅ Idea → reviewable prototype in minutes, not days ✅ Connects to codebase/Figma to auto-apply brand tokens → outputs stop looking generic ✅ Live parameter sliders per design → tweak spacing, tone, layout without re-prompting What to watch out for ⚠️ Token economics are real → complex flows burn Pro allowances fast. Batch your inline edits instead of chaining prompts. ⚠️ No backend/state → it’s a high-fidelity wireframe, not a shippable product ⚠️ Vague prompts = generic output. Context is the multiplier. Where I would actually use this as a PM • Unblocking early stakeholder conversations before design bandwidth opens • Concept validation with users before committing to a sprint • Internal tools nobody wants to prioritize → show, don’t tell What Figma should watch - Not pixel-perfect editing. They’ll always win there. - It’s the upstream layer: exploration, synthesis, early alignment. If Claude Design owns that surface, Figma becomes a finishing tool, not a thinking tool. That’s a workflow shift, not a threat. My honest take Claude Design won’t replace your design team. But it will compress the time between “I have an idea” and “Let’s align on it.” That changes how product teams negotiate scope, prioritize, and move forward. Worth your 2 hours. Test it on a real problem, not a toy prompt. What’s the one flow you’d prototype first? #ProductManagement #AI #ProductStrategy #Prototyping #EnterpriseTech #DesignSystems

I Just Cut My Product Design Cycle from 5 Days to 1 — and I’ll Never Go Back For the last 10 years, my design process looked like this: Write a PRD → add design notes → hand it to a designer → wait for mockups → review → repeat. Even with Figma, that back-and-forth loop could take 4–5 days just to lock down one flow. It worked — but it wasn’t lean. Now I do it differently. I started using Claude for early design flows — and it completely changed my speed. Here’s what I do now: 1️⃣ Take screenshots of our product and other products for reference. 2️⃣ Give Claude the context, goals, and constraints. 3️⃣ It generates clickable mockups with multiple variations. 4️⃣ I can test logic, layouts, and user flows instantly. Once I know what works, I either: • Hand it to a designer to polish, or • If it fits our system, pass it straight to engineering. The result? What used to take 4–5 days now takes 1. You still need great designers — but now they can focus on the hard creative problems instead of spending hours rearranging buttons. For startups, this saves serious time and money. You can validate ideas faster, reduce the cost of iteration, and build smarter. This is the lean way to build products now. Less waiting. More shipping.

No designer wants to waste weeks building the wrong thing. That’s why I lean on a battle-tested prototype progression that saves time, catches problems early, and gets stakeholder buy-in faster. Because smart prototyping isn’t about polish. It’s about asking the right questions at the right level of fidelity. And those last-minute pivots because “the client doesn’t get it”? Most of them are avoidable—with the right prototype at the right time. There are four main stages between napkin sketches and pixel-perfect handoff: 1️⃣ Paper Sketches 2️⃣ Low-Fi Wireframes 3️⃣ Mid-Fi Interactive Prototypes 4️⃣ High-Fi Prototypes The real magic comes from matching fidelity to purpose. → Want to test a new flow? Mid-fi is enough. → Need clean handoff? Go hi-fi. → Exploring 10 ideas? Stick to paper. Every level answers a different question. Skipping steps = solving the wrong problem too late. Smart prototyping lets you fail fast, learn early, and ship experiences that actually work. What’s your prototyping process for UX design projects? #uxdesign #prototyping #uxstrategy ——— 👋 Hi, I’m Dane—I love sharing design tips + strategies. ❤️ Found this helpful? Dropping a like shows support. 🔄 Share to help others (& for easy access later). ➕ Follow for more like this in your feed every day.