Collaborative Design Systems with AI

Anthropic released Claude Design TODAY and it's now accessible at http://claude.ai/design I spent the last hour giving it a first look, and shared my thoughts and results in the video below. This is a BIG drop. This is a new design surface from Anthropic, and it changes what "AI design" means. Short version: Claude can now design. Not "describe a design." Not "generate an image of a design." Actual production work — prototypes, wireframes, high-fidelity mocks, slide decks, landing pages — editable, on-brand, and ready to hand off. Here's what stood out on first look: → Real design surfaces Prototypes, wireframes, hi-fi, and slide decks — each with templates and proper structure, not just pretty screenshots. → Comment-based edits Leave a comment on any element and Claude revises it. This is the Figma-style review loop, with the designer replaced by a model that works at 3am. → Brand design systems You can feed it your system — colors, type, components — and it actually respects it. On-brand output, not generic AI slop. → Export anywhere PDF, PowerPoint, Canva, standalone HTML. Plus a built-in handoff straight to Claude Code for engineers to implement. → Import from real tools Figma, GitHub, and captured web elements come in as inputs. Your existing work is the starting line, not the discard pile. → Collaboration Share links for view / comment / edit — the exact tier system teams already expect. What I tested on Opus 4.7: • A 5-slide deck generated from a single screenshot. Claude asked clarifying questions BEFORE generating and shipped speaker notes by default. • A landing page build. Solid first pass, real components, real layout logic. • Multiple chats running concurrently. You can parallelize design work across threads like a small team. Why this matters: PMs, founders, marketers, and non-engineers can now create designs that engineers can actually ship with production-ready output and a claude code handoff built in. The gap between "I have an idea" and "here's a working prototype with my brand applied" just collapsed to minutes. Full walkthrough, live demos, exports, and honest takes on where it breaks below. P.S. • This is an Anthropic Labs product — NOT GA yet. • Claude Design is currently webapp only (no API), and does not yet support the Analytics API, Compliance API, or cost/usage reporting. • Availability: – Default ON for Pro / Max / Team – Default OFF for Enterprise Enterprise admins can toggle it on via RBAC in console (comes with a ~$20/user initial credit). Watch full reaction video here: https://lnkd.in/ePdZxeKh

True Humans + AI work and thinking means humans should participate in the AI's thinking processes. A very interesting new paper proposes a "Collaborative Workshop" approach to extended chain-of-thought processes such as deep research. They base their approach on three principles: Transparency: The agent’s reasoning, file system, and terminal outputs are fully visible in real-time. Symmetrical Control: Humans and AI have equal authority to modify the workspace. A human can edit a code file or a plan document just as easily as the agent can. Role Fluidity: The workflow can seamlessly shift between AI-led (autonomous) and human-led (assisted) modes. Beyond the specifics of the approach outlined in this paper, these principles are excellent starting points for all AI interface design. They do this by externalizing the agent's thinking into a visible "Plan-as-Document" markdown file (TODO.md). Users can hit "Pause," edit the TODO.md file to correct the agent's strategy, and hit "Resume." The agent then reads the updated plan and adjusts immediately. Despite being designed for collaboration, the system proves highly capable autonomously. ResearStudio achieved 74.09% on the GAIA benchmark, outperforming OpenAI’s DeepResearch (67.36%) and other state-of-the-art systems. The paper gives concrete examples of how human participants in the collaborative thinking workflow create better results. "It transforms the agent from an opaque, brittle tool into a resilient, trustworthy partner, providing the essential safeguard needed to deploy autonomous systems on complex, real-world problems." Full code available with the paper. Image created by Nano Banana Pro

#AI and #SDLC - What's changing and what #startups can build . Artificial Intelligence (AI) is fundamentally reshaping the Software Development Lifecycle (SDLC), moving it from a human-intensive craft to an AI-augmented process. What are the groundbreaking opportunities? 1. UI/UX Design: From Manual to Curated Creativity 🎨 Today's design workflows, whether starting from scratch or working within existing systems, are riddled with inefficiencies like manual inspiration gathering and tedious design-to-code handoffs. How AI is changing it: AI models can now generate context-aware mockups from feature briefs and brand guidelines, turning designers into curators who review and customize AI-generated options. For implementation, AI can generate production-grade frontend code, allowing engineers to shift from writing boilerplate to reviewing and refining. Startup Opportunities: • AI Designer Assistant: Think of this as a "junior designer" embedded in an organization. It combines a structured component library with an agentic workflow engine to instantly generate mockups aligned with a brand's design system. This is less about inventing new styles and more about automating execution.      • Frontend Execution Agent: This agentic AI system acts like a junior front-end engineer, transforming finalized Figma designs into clean, semantic production-ready code. • Zero-Code App Builder: For non-technical users like small business owners or HR managers, AI can collapse complex app creation into natural language. Imagine telling an AI, "I want a mobile app where customers can book appointments," and it handles the UI, frontend, backend, data, and deployment. This is about delivering outcomes, not just clean code. 2. System Design: Automating the Blueprint 🏗️ System design is critical, yet often a bottleneck, relying on scarce senior talent and informal tribal knowledge. How AI is changing it: AI can ingest vast architectural designs, trade-offs, and best practices to recommend patterns, surface trade-offs, and auto-generate system diagrams and starter code. Startup Opportunities: • System Design Thinker: An AI copilot that acts as a reasoning assistant, helping engineers explore design options, explain pros and cons, and suggest optimal designs based on benchmarks and historical company decisions. This is fundamentally creative work. • System Design Executor: An agentic solution that automates the translation of high-level designs into diagrams, documentation, boilerplate code, and cloud infrastructure templates. This is largely mechanical execution. 3. Code Writing: From Manual Coding to AI-Guided Assembly ✍️ Developers spend 60-70% of their time on repetitive "grunt work". AI models like GPT-4 can now not only read and write code but also reason about it. How AI is changing it: AI can translate natural language into functional code, explain codebases, suggest fixes, refactor modules, and auto-generate documentation.

RIP manual Design System work. We asked Claude AI to migrate every Porsche digital touchpoint to our new design language. One copy-paste prompt later: v4 of the design system built and our whole international ecosystem migrated to it, done. Every component refactored with latest browser-native standards. Across 8 framework, delivered via global CDN. Thousands of tokens migrated, zero regressions. Lighthouse 100, WCAG 2.2 AA everywhere. Nothing actually worked. Seriously: We did ship v4 of the Porsche Design System, and teams did migrate our Porsche web touchpoints internationally, in two weeks. Just not by magic. It works because of how the system is built, and how we keep evolving it. Framework-agnostic Web Components with Shadow DOM. Opened up with slots and CSS variables for flexibility and easier maintenance, without losing quality or consistency. A new, more flexible design language, carried by a richer token layer. Components, theming and accessibility built on browser-native standards. Leaner, faster, more polished. And with common standards like Tailwind CSS, plus ready-made component examples, patterns and templates, every team gets a high-quality starting point. Here's what I actually believe: AI won't build the core of a design system on its own. It needs a foundation of 100% quality. And a strong brand is exactly what generic AI output flattens away. The newest, most innovative ideas still take a dedicated, experienced team that cares about getting it right. Get that foundation right, and AI becomes a real accelerator. Get it wrong, and AI just scales the mess. But as a tool for the teams that apply and migrate the system, AI is genuinely powerful. It makes them faster and better at their work. Have a look. Everything is open source and publicly available. What do you think? #PorscheDesignSystem #DesignSystems #WebComponents #AI

Figma just dropped a study that explains why the edges of your role keep dissolving. They surveyed 1,199 U.S. product and marketing professionals this year. ↳The results show something big is happening behind the scenes: People are doing more, faster, with less clarity around where one role ends and another begins. "As the market adapts to new tools that enable faster iteration cycles, product teams are wrestling with evolving role boundaries that bring traditional titles into question." Workflows are more fluid and cross-functional, blurring lines and speeding up delivery. ↳Role shift: ➤Most professionals now identify with ~3 roles. ➤64% wear two or more hats. ➤PMs, marketers, and project managers are skewing generalist; developers and researchers stay deep and narrow. ➤The design process? Everyone’s in it now. 56% non-designers are doing at least one design-centric task. That’s good for speed. But it creates more overlap, more ambiguity, more need for coordination. Context switching is brutal. ↳Main Takeaways: ➤ AI is the #1 driver of change (72% say AI tools reshaped their role). ➤ Time spent collaborating with AI rose from 11% → 19%. ➤ Multi-hat reality: responsibilities are up 19% YoY; only 36% identify with a single role; average scope spans 2.75 roles. ➤ 57% of developers now prototype moderately to significantly. ➤ Collaboration > handoffs: 56% report more cross-functional collaboration; teams work in parallel, not linear phases. ➤ Tool sprawl is real: product builders juggle 7.6 tool types on average. ↳Leadership's playbook: ➤ Redesign roles for generalist collaboration + specialist depth; update career ladders to match reality. ➤ Codify "AI as colleague” (prompt playbooks, sources, etc.). ➤Move from handoffs to parallel workflows on a shared stack; reduce tool friction. ➤ Use time saved to shift into high-value work (vision, roadmaps); 57% already are. ➤ Build capability: fund AI + craft upskilling; stand up guilds/rotations; keep a single source of truth (design system + shared backlog). The game has changed. This is your edge.

AI can generate tokens, build components, and control your Figma file directly. 👇 That makes FOUNDATIONS even more important. When anyone can produce UI at speed, the gap between a product that scales and one that falls apart comes down to infrastructure. Your design system is infrastructure. 💪 And infrastructure demands you understand the WHY before you automate the how. ✨ Before you hand anything to an AI tool, you need clarity on: → Where a design system is actually needed (and where it's overkill) → What your design-dev workflow honestly looks like today → How your token architecture is structured, not just named → Which decisions are locked into your foundations and which ones are still floating AI is incredibly good at executing. It's terrible at deciding what matters. So before you start building, answer these questions: ↪️ Scope and strategy * Who is this system for? One product or five? One brand or many? * What problem is it solving right now, not in theory? Who owns it and who contributes? ↪️ Workflow and adoption * How do designers and developers actually hand off work today? * Where's the duplicated effort? * Where do things break? * What tools are in the stack and how do they connect? ↪️ Token architecture * Do you have a clear separation between core, semantic, and component tokens? * How do tokens scale across themes, brands, or modes? * Are tokens the source of truth or just a Figma convenience? ↪️ Components and governance * What components actually exist vs. what's been built ad hoc? * How do you decide what becomes a system component vs. a one-off pattern? * What's the process when something needs to change? Solid foundations + AI = speed. Weak foundations + AI = scaled chaos (and burned tokens 🤑) #designsystem #designtokens #AI #productdesign

We’ve been exploring where AI fits within the NYS Design System, and we've come up with an approach that I think has promise. A lot of teams lean heavily on AI to generate code, but doing that means AI makes a lot of decisions for you. And while those choices may work short-term, they may not be the best choices for you or your codebase. And if you generate more code with a slightly different context, you may get significantly different results. This can create inconsistency in your code base over time, which can make maintenance a big challenge and introduce risk. We flipped the model. Our design system designers and developers have mapped the properties and attributes of our code components to our Figma components. That way, after designers do the important work of user research, information architecture, user journeys, and all the other critical sense-making, and have built out a prototype in Figma, engineers can point an LLM at that Figma file and get working code snippets from Figma's MCP server. In this case, the AI is doing a lot less generative work, and a lot more stitching together working code snippets into usable, accessible markup. We're basically asking the AI to do intelligent code snippet assembly. This makes the code output way more reliable and repeatable. And on top of that, this approach keeps designers in the loop. There's a big push to build MCP servers for Design Systems. (GitHub just release theirs a few weeks ago.) This has promise, but it brings us right back to the challenge of AI generation. Unless those MCP servers have well-structured ways to convey well-tested patterns and thoughtful mappings between the UI elements and how they should be used, the likelihood that AI will put them together well is low. When we anchor everything in Figma, we keep designers in the loop. And especially in government, we desperately need designers helping make sense of complicated requirements, policies, language, systems, etc. By pointing at a design that has design components thoughtfully placed by designers yet thoughtfully mapped to real code, we give AI the context it needs to produce consistent, usable, accessible code. It's really just connecting the dots. Check out this short demo... it's wild to watch this happen live. #DesignSystems #Figma #AI #Accessibility #Frontend #PublicSector #GitHubCopilot #MCP

Most of the AI-meets-design conversation right now is about converting. Designs to code. Code to designs. Back and forth. It's great. But what about creating? I started with 4 things: → A blank Figma canvas → Claude Code → Figma Console MCP → Material 3's component library One prompt: "build a mobile fintech login screen using the existing components and tokens." Claude analyzed the full design system, picked the right components, set the right properties, and composed the layout directly on the canvas. Real components, real variables, fully bound to tokens. But I didn't stop there! THEN, I asked it to invent a Brutalist theme. → It spun up one of our custom UI designer sub-agents → Created a new variable mode from scratch (acid yellow, zero radii, Space Mono) → cloned the original layout, and restyled everything Same components, completely different look/feel. Switch modes and it all holds together. 15 minutes. Start to finish. The magic is how to stack tooling, not a single tool. MCP for the canvas, Claude Code for orchestration, sub-agents for specialized design thinking, and a solid design system underneath it all (very important). This is a creative tool, not just a conversion tool. Style exploration, mood boards, rapid variable mode testing, pushing your token architecture to see what it can handle... I did this in 15 minutes. I want to see what you can do in an hour. Grab the Figma Console MCP, plug in your design system, and show me! If you need help getting set up or want to talk about making your design system AI-ready, reach out. Check out the new easy-to-follow community setup guides - https://lnkd.in/eNmzhh5S

AI’s biggest threat to product designers is actually our greatest opportunity. Last week I ran an AI-powered design sprint, and saw the future of designing together. Three things are crystal clear: 1. If anyone can make anything using AI... collaboration is everything. Our AI design sprint, completed in 1/5 the time, ended with live, collaborative prototyping using AI. It was brilliant. I’m calling it a “Super Sprint” because that’s exactly how it felt. But here’s what hit hardest: one of the most relevant and valuable roles of design right now is helping teams discover, align, and build the right thing together. Without this, teams risk spiraling into AI-generated chaos. 2. The role of design is shifting, faster than most people think. This isn’t the end of design, but it’s the end of solo designing and long hours spent in Figma-focused isolation. This is a good thing. We've always preached that design is more than pixels, colors, and fonts. Now is the time for designers to prove it. Design will shift even more upstream, which is that "seat at the table" we always wanted anyway. 3. Discovery, strategy, and facilitation are must-have design skills. AI will empower us to spend less time pushing pixels and more time facilitating conversations and alignment. This is the 90% of design that happens before Figma, and it’s where we can step up and have the most impact. If you’re curious how I pulled this workshop off, I put together a quick outline you can use. It's the exact sprint format and AI touch-points that worked. I'm happy to share it, just DM me or comment “shift”, and I’ll send it over. This is the shift in how we design and build products collaboratively. An AI-powered Super Sprint is just the beginning. And designers are in the perfect position, and uniquely equipped, to lead.

The Friday Note: When AI Becomes the Fourth Teammate. This week, I sat with my PM, designer and engineering partner to explore a new product functionality, not in Figma, not on a whiteboard, but directly inside Vercel's AI prototyping workspace. What unfolded was a reminder of how powerful cross-functional prompting can be. ➔ PM framed the business objective, customer value, and requirements. ➔ Designer added user needs, logical information architecture, and workflows. ➔ Engineer grounded everything with the realities of the tech stack and data models. Three perspectives. One shared canvas. And the AI responded with prototypes that felt far more aligned than anything we could have produced working in isolation. That’s the missed opportunity with AI tools. Used alone, they tend to generate feature-focused point solutions and not cohesive experiences grounded in holistic design logic. The AI simply mirrors that narrow prompt. But when PMs, Designers, and Engineers prompt together, the inputs, and therefore the outputs, become richer, more contextual, and dramatically more actionable. Co-creating inside the tool jump-started each of our deeper work-streams, giving us not just speed but directional momentum right from the first sketch. Together, the AI becomes the fourth teammate: an accelerator of shared understanding, not a replacement for it. #thefridaynote #designingwithai