[Google Stitch] Generate structured, component-based code

Everyone's testing AI design tools on landing pages and simple dashboards. I wanted to test something harder: can AI design complex B2B e-commerce? Not just make it look good. Actually understand what should be on the page, plan the information architecture, and handle the complexity of B2B flows. One prompt. Four tools. Same test. Prompt: "Build a B2B e-commerce store for industrial MRO supplies (maintenance, repair, operations). Plan what the store needs and design it." Intentionally simple. No feature list. No wireframes. No hints about what pages to include or what elements matter. I wanted to see how much each tool understands about e-commerce on its own. Not just design skill, but commerce logic. The tools: Google Stitch, v0 (Vercel), Figma Make, Claude. Results: 🏆 v0 @v0 (Vercel) Clear winner. v0 was the only tool that stopped before designing. It asked clarifying questions, proposed a plan with pages and feature scope, and waited for confirmation. Then it delivered the best layout: proper category navigation, bulk pricing, trust signals, quote request flows. And under the hood: a clean Next.js project with reusable components. Real code structure you can actually continue building on. 🔵 Google Stitch @stitchbygoogle Most original visual style. Stitch generates designs that don't look like typical AI output. It has its own aesthetic, makes interesting layout decisions, and feels fresh. The problem: click "View Code" and you get a single flat HTML file with Tailwind classes. No components. No structure. No modularity. You'd have to decompose everything into proper components before using any of it in production. For ideation and moodboarding it's great. For building, not yet. One thing I really like though: Google introduced DESIGN.md with Stitch. It's a markdown file that captures your entire design system in natural language plus specific values (colors, spacing, typography, component styles). You can export it and hand it off to Claude Code, Cursor, or any coding agent. I've been building something similar in my own workflow, but never had one standardized format for it. Smart move from Google and worth watching closely. 🟣 Figma Make @figma Similar layout approach to v0, but noticeably weaker execution. Feels like v0 from a year ago. The upside: from most of these tools you can export or transfer designs into Figma for further refinement. ⬛ Claude @claudeai Technical, dark, dense. No visual hierarchy. As a standalone design-from-scratch tool, not useful in this form. But this is not how I use Claude. And this is where it gets interesting. Our production flow at @Rigbyjs is Claude Code paired with our own e-commerce component library. We've spent the last two years building and battle-testing these components across 30+ @medusajs stores. Every component is proven in production, maintained, and continuously improved. When Claude Code works on top of that library with our rules and conventions, the output quality is on a completely different level. It understands the constraints, follows the patterns, and delivers working e-commerce that we can ship with confidence. No other tool comes close to this today. I think this is the real unlock for building e-commerce with AI: not generating designs from zero, but having a strong, tested component foundation that AI can build on top of. The better your library, the better the AI output. That compounds over time. Bottom line: for going from zero to design with real B2B commerce understanding, v0 wins. Best planning, best design, best code output. For production builds, nothing beats Claude Code with a purpose-built component library. That's where the real speed and quality lives.