AI-Powered Design Prototyping

I redesigned my entire UX/UI process with AI. It’s not about “use ChatGPT to brainstorm.” I mean, I rebuilt the whole pipeline. From product idea to prototype. What used to take months? Now gets done in days. Here’s what it looks like step-by-step: 1. Instant User Flows I drop rough product ideas into ChatGPT. (It's not the public one; it's a custom GPT trained on how I think.) It gives me: - Sitemap - User journey - Logic flows All in less time than it takes to make coffee. 2. Wireframes Without Drawing I stopped sketching. I describe the layout in plain English, and Magician does the rest. "Hero. CTA. Testimonials." Boom. Wireframe. No more dragging boxes like it’s 2015. 3. AI-Built Design System Spacing? Typography? Button styles? I just describe the vibe. Tools like Relume and Uizard take that and build me a full design system. This used to take WEEKS. Now it’s done before lunch. 4. Smarter Figma Time Now everything moves to Figma. But I don’t waste time pixel-pushing. AI plugins handle: - spacing - responsiveness - and accessibility. I just make the ideas click. 5. Prototyping = Auto-On Final step? Auto-connect flows with Figma’s AI tools. Clickable. Shareable. Client-ready. Dev-approved. No extra buttons. No guesswork. Here’s the real punchline: AI didn’t replace my work. It replaced the boring parts, so I can focus on design thinking. It’s not about working faster. It’s about designing smarter. We’re not in 2015 anymore. Let’s build like it’s 2030. What part of your UX workflow do you still do manually? Curious to hear.

🪂 How To Make Your Design System AI-Ready (https://lnkd.in/dtnpy7CM), a practical guide on how to reduce drifts, minimize mistakes, maintain context and improve the quality of AI-generated prototypes — with structured spec files, automated auditing and token layers. Put together by Hardik Pandya from Atlassian. --- 🔹 1. Design Decisions Are Infrastructure AI-generated prototypes often don't deliver consistently decent results because of tiny inconsistencies scattered all across a design system. Often it's decisions made but not documented, hard-coded values never cleaned up, or relying too much on AI making sense of mock-ups or design flows on its own. Unsurprisingly, better AI prototypes come from better data — but also from better human guidance. We shouldn’t assume that AI knows how to choose the right component, and how to design with accessibility in mind. It needs priorities, a clear path on how we make decisions, design principles, examples, do's and don'ts. In fact, we should treat design decisions as infrastructure. That means that every time we make a decision — not just a design decision, but even decision on how actually prioritize our work and how we make decisions around here — it must find a path into the spec file that is then consumed by AI. --- 🔶 2. Three Layers: Spec Files + Token Layer + Audit To ensure quality, we establish design principles, guidelines, rules in a form of “spec files”). It's structured Markdown files that include spacing rules, color choices, component usage guidelines, priorities etc. AI is going to read and reuse that spec file every time it's going to generate a prototype. Because the spec files are text files, it's much more cost-effective, but also much more accurate just because we don't rely on AI recognizing or decoding patterns from mock-ups, but gets specific guidelines instead. In fact, extending code is often a more effective way than generating code from mock-ups. Token layer lists and keeps updated all tokens used throughout the design system. AI always chooses from a closed set of named variables instead of inventing plausible values ad-hoc. An audit script catches what AI gets wrong. It scans the prototype and flags every hard-coded value and flags it if necessary. It can be a regular software doing that, with AI waiting for its feedback to come back. Finally, when a design system ships updates, a sync routine flags which spec files need updating. The goal is to make sure that AI always reads up-to-date, current specs, not the ones written against an outdated version. --- 🔺 3. Examples of AI-Ready Design Systems ⌾ Atlassian: https://lnkd.in/dVsGc3Cp ⌾ Carbon: https://lnkd.in/d4zq4WWb ⌾ CMS Design System: https://lnkd.in/dHHzV3en ⌾ Nordhealth: https://lnkd.in/d8C4j2ZA Yet again, AI can’t magically resolve technical debt or design debt — it needs guidance, decisions, priorities and principles.

Prototyping is proven to have the potential to transform the speed, quality & impact of instructional design: can AI finally make prototyping a standard part of our process? For years, studies have shown that rapid prototyping in instructional design: 📊 Significantly shortens development cycles (Gerber & Carroll, 2012) 📊 Improves instructional quality (Daugherty et al., 2007) 📊 Enhances the quality of stakeholder collaboration (Nixon & Lee, 2001) Despite 20+ years of evidence & tools like Balsamiq and Figma, instructional design has remained stuck in waterfall workflows with little if any testing & iteration. The question I've been exploring this week is, will AI prototyping tools change this? In this week's blog post I share what I learned prototyping a recent training design using AI. TLDR: → AI tools like Claude, Vercel & Loveable are finally making rapid prototyping in instructional design practical, fast, and accessible—transforming abstract learning concepts into testable, shareable experiences in minutes → While AI isn’t a silver bullet (it struggles with complex visuals and multi-page journeys), it does a good job of generating realistic, evidence-based scenarios, assessments, and case studies—*provided* the designer brings strong instructional expertise and prompt precision → The future of L&D lies in combining deep pedagogical expertise with AI fluency. Check out my full guide to AI prototyping for L&D, complete with prompts you can try for yourself, using the link in comments. Happy innovating! Phil 👋

Top 6 AI tools for design & workflow in 2026 👇 Yes, not all of them are “design tools.” Yes, that’s exactly the point. I spent time exploring tools beyond just UI screens… Because real product work is not just design anymore. It’s workflows. Automation. AI orchestration. Here are 6 that actually matter right now: 1. Paperclip AI https://lnkd.in/dXkCrnbe Local-first AI for organizing research, notes, and work items. But it goes deeper. It acts like an orchestration layer for AI agents. Goals. Budgets. Audit logs. Agent “heartbeats.” If you deal with messy research or multi-step thinking, this is insanely powerful. 2. Flowstep https://flowstep.ai Prompt → UI designs. It generates wireframes and full interfaces on an infinite canvas. You can iterate fast. Refine layouts. Explore ideas visually. Feels like Figma + AI had a smarter child. 3. Moonchild AI https://moonchild.ai Turn PRDs into actual UI screens. It helps with: User flows UX problem solving Moodboards Design systems This is not just generation. It’s structured product thinking. 4. Dify https://dify.ai Visual builder for AI apps. Drag. Drop. Deploy. You can create: Chat apps Text-generation tools Custom AI workflows If you ever wanted to ship your own AI product without heavy coding, start here. 5. Flowise https://www.flowise.io Low-code builder for LLM workflows. Think: Connecting multiple models Creating agent flows Shipping APIs fast Great for prototyping AI features inside real products. 6. n8n https://n8n.io Automation on steroids. Connect apps. Trigger workflows. Automate repetitive ops. Designers ignore this. Smart designers don’t. Because real impact = design + systems. Here is the shift most designers are still missing. The future is not just UI design. It’s: Design + AI Design + automation Design + systems thinking Tools like Flowstep and Moonchild help you design faster. Tools like Dify, Flowise, and n8n help you build smarter. And tools like Paperclip help you think better. AI will not replace designers. But designers who understand workflows will replace designers who only push pixels. Use these tools for: Speed Exploration Systems thinking Execution Not just aesthetics. Because in 2026… The best designers are not just designing screens. They are designing how things work. If you had to pick ONE tool to explore this week, Which one are you trying first?

𝐖𝐞 𝐬𝐭𝐨𝐩𝐩𝐞𝐝 𝐰𝐫𝐢𝐭𝐢𝐧𝐠 20-𝐩𝐚𝐠𝐞 𝐏𝐑𝐃𝐬. Now we build prototypes instead — and it’s completely changed how Databricks PMs align on solutions. A product manager’s job is still the same at its core — identify a problem that, if solved, drives adoption or revenue. But what we’ve learned is this: aligning on the problem isn’t the hardest part. Aligning on the solution is. Traditionally, this meant messy slides, slow UX cycles, and static mockups. PMs would test ideas with customers using decks or clickable Figma files that took days (or weeks) to build. Each round of feedback felt like a mini product cycle. With 𝐯𝐢𝐛𝐞 𝐜𝐨𝐝𝐢𝐧𝐠, we’ve flipped that. We now prototype directly to test and iterate live with customers. When customers can use something, not just look at it, the insights are richer, and we can see where expectations diverge from design. We tweak the prototypes between user interviews, learning faster than ever before. Before GenAI, PRDs were 20+ pages long and few people read them. Now we skip them entirely. PMs replace written specs with working prototypes and run “prototype reviews” instead of doc reviews. We’ve even developed a Plan/Build workflow, inspired by Claude Code: 🧠 𝐏𝐥𝐚𝐧 𝐌𝐨𝐝𝐞: use an AI assistant to reason through the design — feeding it jobs-to-be-done, API specs/information architectures, and refining until the assistant truly “gets it.” ( 💡 Pro tip: many on our team use Wispr Flow for voice-to-text — it makes iterating on ideas faster and more natural than typing) ⚡️ 𝐁𝐮𝐢𝐥𝐝 𝐌𝐨𝐝𝐞: prompt your AI assistant to generate *page-by-page* UI prompts for your vibe code tool of choice, switching between modes until the design feels right. Incremental building by page is key here! Most of our prototypes today are UI-only (no backend), but they’re powerful enough to test flows, get real feedback, and lock in what the MVP should be. ➡️ Our next step: connecting to real data — turning prototypes into Databricks Apps customers can actually use. We joke that “no engineers were harmed in the making of this prototype” — but the impact is real. We’re moving from writing about ideas to feeling them. 👋 Would love to hear how other teams are replacing PRDs with prototypes in the comments.

We killed Figma from our design workflow. We haven't built a single mockup in months. Here's the journey that got us there and what replaced it 👇 It started innocently. Like everyone, we began with vibe coding to test quick ideas. Generate a prototype, throw it away, start fresh. Tested several tools like Replit or Lovable. Figma was still the source of truth. AI was just a toy on the side to illustrate the user paths and replace the prototyping, not the mocks. Then something shifted. We switched to Claude Code and started to build a more sustainable AI prototyping engine, plugged with our design system. Suddenly prototypes started looking... indistinguishable from the real product. Edge cases covered. Flows detailed. Components aligned. And that's when Figma became the bottleneck. 👉 If your AI-generated prototype already respects your design system, handles edge states, and runs in a browser — what exactly is Figma adding? The answer, for us, was: friction. Today our setup is simple. ➡️ For major new features that reshape the product architecture, we use our dedicated AI prototype engine built with Claude Code, hosted on Vercel. ➡️ For iterative improvements, we code prototypes directly on a branch of the codebase. Figma still hosts our atomic design system — components, tokens, molecules. But zero mockups are made there anymore. The results are hard to argue with. Where we used to spend hours testing a single design variant in Figma, we now explore five deeper variants with full edge-case coverage — and land on a more mature design before a single line of production code is written. Fewer iterations downstream. Faster shipping. Notion recently shared a similar path — their design team built a shared "prototype playground". That's the crux. Static mockups hide reality. Loading states, screen sizes, AI model behavior, interaction quirks — you only discover these in code. And now code is fast enough to be your first draft, not your last mile. I was afraid to quit Figma. Figma Make and their other initiatives are good. But the most effective path we've found is using the Figma MCP to export your design system and history into an AI-powered prototype engine, and gradually emancipate yourself from Figma altogether. I'm still in my learning curve on this reshaping of tools & collaboration patterns in the AI era. What was your path internally?

"Graphic design is dead" they said. AI just killed another industry. But after 18 months creating with AI tools daily? The opposite is true. Design isn't dying. It's evolving at warp speed. Yesterday's workflow: ☒ 3 hours sketching concepts ☒ 2 hours in Photoshop ☒ 1 hour tweaking colors ☒ Endless client revisions Today's AI-powered reality: ☑︎ 20 concepts in 20 seconds ☑︎ Instant color palettes ☑︎ One-click variations ☑︎ Real-time collaboration Here's what most people miss about AI design: AI handles output. You handle outcomes. Tools like Ideogram can generate 100 logos. ↳ But which one tells your brand story? Adobe Firefly creates perfect palettes. ↳ But which one triggers the right emotion? Figma AI builds responsive layouts. ↳ But which one guides user behavior? The gap between AI output and human insight? ↳ That's where designers thrive in 2025. My AI + Design workflow: 1 → Start with strategy What problem are we solving? AI can't answer this. You can. 2 → Generate variations fast Prompt: "Modern tech logo, blue accent, minimal" Get 20 options in seconds. 3 → Curate with taste Pick 3-5 that align with brand values. Your eye matters more than ever. 4 → Refine with precision Take AI drafts into your core tools. Add the human touches AI misses. 5 → Test with real users AI can't predict emotional response. Only humans understand humans. The tools crushing it right now: ✦ Ideogram – Logo concepts at light speed ✦ Midjourney – Brand visuals that pop ✦ Adobe Firefly – Integrated AI magic ✦ Canva Magic – Templates on steroids ✦ ChatGPT – Concept art instantly Lazy designers? Yes, they're toast. Strategic designers? They're 10x more valuable. Clients don't pay for pixels. They pay for: • Visual strategy • Brand coherence • Cultural context • Emotional impact AI can't hop on a discovery call. AI can't understand business goals. AI can't feel what resonates. The new designer toolkit isn't just Adobe anymore. Now it's: → Prompt engineering → AI tool mastery → Strategic thinking → Rapid iteration → Human insight The best designers won't fight AI. They'll ride it like a rocket. More output. Better strategy. Happier clients. The creative process just got an upgrade. And designers who embrace it will thrive. Graphic design isn't dead. It just learned to fly. Follow Charlie and Sana for more AI insights. ♻️ Repost if AI is changing how you create.

Lately I’ve been focusing on using AI to improve how I prototype, not just to move faster, but to get better stakeholder engagement when sharing work.   One pain point I kept running into: I can build end-to-end, very real prototypes in Cursor using Figma MCP, and it works fast. But sharing those prototypes easily across my team isn’t great.   Figma Make, on the other hand, is much better for sharing. Familiar links, easy access, and stakeholders immediately know how to use it. It just doesn’t move as fast once prototypes get big.   Then it clicked 💡 What if I combine the two?   Now my flow looks like: – Build complex, realistic prototypes in Cursor – Open that same repo in Figma Make – Share a familiar, clickable prototype across the team   It’s early, but it already gets the right picture across.   This is starting to change how I think about prototyping, sharing work, and closing the gap between design and build. Next up: figuring out how design systems plug into this workflow and make it even more powerful.

Happy Friday, this week in #learnwithmz, let's explore how AI is revolutionizing product prototyping, from idea to interactive mockup faster than ever. I’m delivering an internal talk on this topic for my team, and thought it would be valuable to share some highlights here as well. 𝐓𝐨𝐩 𝐀𝐈 𝐏𝐫𝐨𝐭𝐨𝐭𝐲𝐩𝐢𝐧𝐠 𝐓𝐨𝐨𝐥𝐬 𝐟𝐨𝐫 𝐏𝐫𝐨𝐝𝐮𝐜𝐭 𝐌𝐚𝐧𝐚𝐠𝐞𝐫𝐬 -Visily Transform text prompts, sketches, or screenshots into editable UI designs. 🔗 https://lnkd.in/gcerJweq - Uizard Generate wireframes and mockups instantly from text descriptions. 🔗 https://lnkd.in/grdSadcb - Microsoft 365 Copilot Prototype ideas directly within your workflow using Word, Excel, PowerPoint, and Teams. Great for early PRDs, visualizations, and cross-team brainstorming. 🔗 https://lnkd.in/gB2PNq9k - V0 by Vercel Create full-stack web apps from prompts, integrating frontend and backend. 🔗 https://v0.dev/ - Bolt Rapidly build and iterate on AI-driven product ideas. 🔗 https://boltai.co - Lovable Design and deploy AI-powered products with minimal coding. 🔗 https://lovable.so 𝐎𝐩𝐞𝐧-𝐒𝐨𝐮𝐫𝐜𝐞 𝐑𝐞𝐬𝐨𝐮𝐫𝐜𝐞𝐬 - NodeTool: Build and automate AI workflows without code. 🔗 https://lnkd.in/gnnB_7UU - ReacType: Visualize and export React applications with drag-and-drop. 🔗 https://lnkd.in/geQbxbEC 𝐋𝐞𝐚𝐫𝐧𝐢𝐧𝐠𝐬 - Speed vs. Precision: AI tools are great accelerators, but manual polish is still needed for complex workflows and specific needs. - Experiment often: The space is evolving fast; test, learn, and share back. - Check before you use: Always check your company’s policies on tool usage, especially when working with sensitive product data or proprietary designs. 𝐅𝐮𝐫𝐭𝐡𝐞𝐫 𝐑𝐞𝐚𝐝𝐢𝐧𝐠 A Guide to AI Prototyping for Product Managers by Lenny Rachitsky and Colin Matthews 🔗 https://lnkd.in/ge6nbzcr Which AI prototyping tools are in your workflow or on your radar? Drop your experiences or recommendations below 👇 #AI #ProductManagement #Prototyping #AItools #learnwithmz

I tried 10+ AI prototyping apps. Only one stood out. Here's why: Don't sleep on this tool. I tried the usual suspects (Lovable, Stitch, Make, Bolt, v0, etc.) But when I found Magic Patterns, I stopped looking. It had everything I needed for collaborative, AI-powered prototyping, especially in the early stages of the design process. Everyone’s debating which AI prototyping tool generates the best UI designs or code. Or they're showing off a random vibe coded app. But I think the real opportunity for product teams is being overlooked. Early-stage collaborative AI prototyping is where the magic happens. Fast exploration, shared context, real momentum. 3 Reasons why Magic Patterns excels at this: 1. Live AI prototyping with others = game changer Magic Patterns lets you invite people to a shared canvas. Review and interact with multiple prototypes in one view. Fork, remix, and build on ideas instantly. It’s multiplayer AI prototyping done right, perfect for my AI design sprint workshops. And perfect for product teams to rally around a problem and explore ideas. 2. Front-end focus, no backend noise You can explore flows and concepts fast, without getting distracted by databases or logic. Many of the hyped AI tools are focused on vibe coding complete apps. But for early-stage work you just need to quickly explore multiple ideas, iterate, get alignment, and test for feedback. For this purpose, Magic Patterns is exactly what I needed. 3. Thoughtful features that speed up your flow Magic Patterns is perfect for first-time AI prototypers. The beginner friendly interface and useful features like "Presets," "Inspiration," and "Polish", make it easy for anyone to experiment with purposeful ideas. Bonus Reason: Don't mistake Magic Patterns for a basic AI UI tool. There are advanced features and smart workflows I’ll show you that make this the most valuable tool I’ve added to my design process in years. I’m hosting a FREE live walkthrough next week where I’ll demo exactly how I use Magic Patterns inside my AI Design Sprint workshops, including best practices and the frameworks I’ve used in real sessions. This is a glimpse into how design, product, and engineering will work together in the AI era. Once you see it in action, you’ll want to run your next workshop this way. Come hang out. It’s going to be fun, useful, and maybe even a little magical. 🪄 Spots are limited. Drop “magic” in the comments or DM me to reserve your spot.