AI-Generated Code Meets Design: Faster Iteration with Claude

AI is moving really fast, and partnerships like this show how design and development are starting to blend together more than ever. Turning AI-generated code into editable designs sounds powerful because it can make collaboration between designers and developers much easier. At the same time, I still feel the real magic will be when we can smoothly go both ways from design to code and from code back to design. Either way, it’s exciting to see how tools are evolving and changing the way we build products.

Claude Code is starting to integrate with Figma - and it’s easy to underestimate what actually changed. With the help of MCP (Model Context Protocol) and Figma’s Plugin API, AI can now generate and modify real Figma frames, not just images or mockups, but editable layouts aligned with your design system. This is still an early-stage integration that started emerging around March, not a fully packaged feature, but the direction is already clear. At first glance, this looks like another step in AI-assisted design. In reality, it changes the interaction model itself. We are moving from “AI suggests design” to “AI produces structured, editable artifacts directly inside design tools.” Design is becoming programmable, and the gap between design and development is shrinking even further. There is already some hype around this. Claims like “I stopped using Figma on 99% of tasks” sound impressive, but they are likely edge cases. Complex UX decisions, product thinking, and system-level design are not going away. What is changing is not the need for designers, but the way they interact with their tools. A more interesting question is how roles evolve. Developers have already adapted to reviewing AI-generated code instead of writing everything from scratch. Now we are starting to see the same pattern in design. Instead of creating every screen manually, designers increasingly validate, refine, and guide what AI produces. This does not replace designers. But it clearly shifts the role - from hands-on creation toward direction, system thinking, and validation. The same transition we’ve seen in engineering is now beginning in design. #AI #Design #ProductDevelopment #Automation #FutureOfWork

There’s a lot of noise right now around AI and design. Especially the debate around Figma and tools like Claude. Here’s the honest take: it’s still broken. Not because the vision is wrong, but because we’re early. Figma is a ~10-year-old product trying to plug into a completely new paradigm. AI tools are evolving weekly. The result? Friction. Glitches. Workflows that almost work, but not quite. You spend more time fighting the process than designing. That’s not a failure, it’s a signal. We’re in the transition phase. The design flow has already changed: • Ideation → AI • User flows → AI • Wireframes → AI • Copy → AI • Prototypes (even with real-ish data) → AI And only then → Figma Figma is becoming the final mile tool: Where taste, precision, interaction, and craft come together. Where designers actually design. But trying to force a perfect AI ↔ Figma workflow today? That’s where frustration kicks in. My take: Stop wasting cycles trying to duct-tape the future together. The market will converge. A stable layer will emerge. And when it does, it’ll be obvious. That’s the moment to go all in. Until then, use what works. Embrace the messy middle. And don’t confuse “possible” with “ready.” We’re not late. We’re just early. This is just my take based on what I’ve been seeing and building recently. Curious how this feels from your own design experience?

AI can generate UI in seconds… but why does it still miss pixel perfect accuracy from Figma? 🤔 This is something I’ve been noticing a lot lately even with powerful AI tools, the final UI often feels slightly off. Not broken, just not right. Here’s why 👇 AI doesn’t truly understand design intent. It reads values like padding, font-size, and colors. but design is more than numbers. It’s about visual balance, hierarchy, and subtle adjustments that designers make instinctively. There’s also a fundamental gap between Figma and code. What looks perfect in Figma (thanks to auto-layout and optical spacing) doesn’t always translate the same way in CSS due to rendering differences, box models, and font behavior. Another big reason is inconsistency in design systems. If tokens, components, and constraints aren’t properly defined, AI treats everything as independent values leading to small but noticeable mismatches. In short, AI today is great at getting you 80–90% there… but the last 10% the polish still needs a designer’s eye (or smarter validation tools). This gap actually opens up an interesting opportunity: tools that can validate and match UI at a pixel level between design and development. (Comment below if you know any such tools ) Curious to know if are you facing this issue in your workflow too? 🚀

Want to close the gap between vibe-coded UI and your actual product? You have an established design system. You somehow managed to hook those real components in the prototype. And yet, the outcome is right components, but wrong product. That was my problem. AI followed the style guide but broke the UX principles. I solved consistency. I didn’t solve coherence. Colin Matthews found out that 41% of teams still use Figma as their design system source for prototyping. A few years from now that will sound like using Photoshop for web design a decade ago. https://lnkd.in/dwnQzyTc For multi-platform teams it’s even more pressing. Code translates to code. Figma translates to interpretation. None of this is easy. But there seem to be better workflows emerging, and they start with two layers. A code-native design system tool with MCP (Subframe, Storybook, your own) handles what it looks like (styles, themes, components). And a second layer, Design MCP server that handles what it thinks like (principles, personas, tone, journeys). And the agent reads both. Components tell the AI what to build. Rules tell it why. Getting both right is harder than it sounds, and I’m still iterating on the balance. Both layers together are what gets a prototype past the fidelity line, where users forget it’s fake and start behaving instead of performing. Wrote about that here: https://lnkd.in/dUxtNQGt What’s your setup? One layer or two? Curious what others are finding. Image courtesy of Colin Matthews.

A Tuesday in 2026 for a product designer: Figma drops the new AI feature, everyone gets hyped, you try it for a week… then quietly go back to doing everything manually. Not because the AI can’t design, it just has zero memory. Every session starts cold with no design system, no tokens, no clue why that teal was banned as a CTA, and no memory of what broke last sprint. You’re not building a relationship with an assistant; you’re hiring a new temp every single day and briefing them from scratch. So we built something different. Say hi to Solacy. It lives in your Figma comment threads, @ it once and it already knows your full design system, tokens, copy rules, and every past team decision. It executes, audits its own work, and replies like it belongs there. On Slack it’s your design brain that actually remembers everything you tell it. Month 2 is better than Month 1. Month 3 is even better. That’s what a true agent with your team should actually feel like. We’re letting in a small group of designers for early access right now. If you’re tired of stateless AI, drop “Solacy” in the comments or access waitlist here → https://solacy.design

My AI agent just built a product dashboard better than our design team did. I fed it our existing Figma files. Gave it 30 skills - how to work with design systems, how to structure layouts, how to follow Notion-like patterns. Showed it what we'd already built. It produced three versions. I put them side by side with what our team made. Honestly, the agent's versions didn't look worse. In some ways they were better - it made decisions about layout and hierarchy that I actually preferred. And it did things I didn't ask for. Added sections that made sense. Organized information in ways I hadn't thought of. The team spent a week. The agent spent a night. The quality was roughly the same. Now - I'm not saying designers are obsolete. That's not the point. Our design team brings taste, context, brand intuition that no agent has yet. But for functional internal dashboards? For MVP interfaces? For testing whether an idea works before you invest a week of human time? This is gonna change how every product team works. Not replace designers - but compress the cycle from weeks to hours for 80% of the work.

Most designers haven't heard of Paper yet. That's about to change. While everyone's debating Figma vs. everything else, a new tool called Paper (paper.design) has quietly been building something completely different and honestly, it might be the most important design tool of the AI era. Figma's canvas is built on a proprietary node tree. When an AI agent tries to read it and generate code, there's a translation step and that translation is lossy. Teams are reporting up to 85–90% styling inaccuracy just getting code out of Figma. Paper's canvas is literally built on HTML and CSS. What you design visually is code. No conversion. No handoff gap. One source of truth. That changes everything for AI workflows. You can connect Claude Code, Cursor, or Windsurf directly to your canvas. Agents can read and write your designs, not just generate code from a static snapshot. Design tokens sync between your codebase and canvas automatically. Ask an agent to localize your UI into 3 regions? It creates the artboards, copies the content, translates it, all on canvas. And the philosophy behind it is refreshing. The founder, Stephen Haney (who previously built Radix UI), isn't trying to replace designers with AI. His take: AI isn't a fit for stakeholder management, collaboration, or setting a quality bar. We're using AI to speed up boilerplate, not to be the designer. That's the kind of thinking the industry needs right now. Paper is currently in open alpha. It's rough around the edges. But if you're a solo designer, a design-engineer, or anyone building AI-native products, this is worth watching closely. The design tool that wins the AI era won't be the one with the most features. It'll be the one built on the right foundation. Paper is built on the right foundation. 🔗 [Watch this quick demo to see it in action → https://lnkd.in/gs3VpWxS] #UIUX #UIDESIGN #UXDESIGN #VIBECODING

The design process is changing, but AI is not enough. In the end it still needs a designer touch! I've been deep in the Claude Code design ecosystem for months now. Watched every major creator test it. Studied workflows from Anthropic's own head of design. Here's what nobody's saying clearly enough: Mocking used to be 70% of a designer's job. Now it's 30-40%. The rest? "Jamming" with engineers and shipping polish directly in code. The designer-developer handoff we've been complaining about for a decade? Gone. Claude pulls changes from your Figma file and pushes them into production code. In real time. Two-way sync. No more "the spacing is 2px off" Slack messages at midnight. But here's what really surprised me: The designers winning right now aren't the best at Figma. They're the ones who learned to use Claude Skills — specialized instructions that turn generic AI output into production-grade UI. The difference between "AI slop" and a $10,000 website is literally one skill install. The old playbook: Research > Discovery > Wireframe > Mock > Iterate > Handoff > Pray The new playbook: Prompt > Build > Screenshot loop > Ship > Iterate in public Claude now has "eyes." It screenshots its own work, compares it to your reference, finds its own mistakes, and fixes them. Without you lifting a finger. The tools are moving fast: Figma MCP for two-way design sync. Paper and Pencil for AI-native design. Nano Banana for 3D assets. Static mocks are becoming useless because AI products are non-deterministic. You can't mock what changes every time. The designers who adapt will be 10x more productive. The ones who don't will wonder what happened. P.S. What's your current design workflow, still full Figma, or have you started using AI tools? Genuinely curious where people are at. #AIDesign #ClaudeCode #UXDesign #FigmaMCP #DesignTools

Figma didn’t just add AI. It quietly changed who or what is doing the designing. This week, something big happened AI agents can now design directly inside your Figma canvas. Not mockups. Not exports. The actual working file. And most people haven’t fully processed what that means yet. Because now: • AI can create and edit real designs in your file • It understands your components, tokens, and styles • It doesn’t start from scratch—it works inside your system • It can iterate without waiting for handoffs Let that sink in. For years, our workflow looked like this: Design → Handoff → Build → Fix → Repeat Now it’s becoming: Prompt → Generate → Review → Refine • No back and forth. • No broken handoffs. • No “lost in translation”. And here’s where it gets uncomfortable: The canvas is no longer just yours. AI is now a collaborator - that doesn’t get tired - doesn’t wait - and doesn’t need permission to try 10 variations. But… This doesn’t mean designers are getting replaced. It means something else: • Execution is getting automated • Systems are becoming more important • Thinking is becoming visible Because AI can design screens. But it still depends on: • What problem to solve • What trade-offs to make • What actually matters We spent years asking: “Will AI replace designers?” Wrong question. The real shift is: • Design tools are becoming AI-native. And designers are becoming decision-makers. The future might not be you staring at a blank canvas… It might be you reviewing 5 versions an AI already created for you. The question is: Are you ready to direct it… or still trying to compete with it? → Follow Surinder Thakur - UXC, CUA™, CDPA™ for more insights on UX and design. #UXDesign #UserExperience #UXResearch