#design-systems
Every summary, chronological. Filter by category, tag, or source from the rail.
Building Figma's MCP Server: Lessons in AI Integration
Figma built its first MCP server by prioritizing local-first architecture, iterative evaluation with LLM judges, and mapping design components to production code via Code Connect to ensure high-fidelity, maintainable output.
AI EngineerDesigning Grok Bot: A Journey of Iteration and Agent UX
John Bai, an early designer at Cursor, shares the iterative process behind Grok Bot, explaining why the team ultimately settled on a chat-based interface despite initial explorations into ambient, OS-native UI patterns.
Dive ClubDesign Taste for AI Agents: Avoiding 'Vibe-Coded' Slop
To build high-quality AI apps, treat AI output as a base rather than a final product. Use specific 'slop gates' to block common AI design patterns, provide visual references, and iterate using smaller, faster models.
AI EngineerBuilding a Custom AI-Powered Prototyping Playground
Patrick Morgan built a custom, agent-native prototyping environment for Sublime Security that bridges the gap between static design tools and production code, enabling rapid, interactive iteration without the overhead of traditional design handoff.
Dive ClubThe Rise of the Designer-Founder in the AI Era
AI tools have removed the technical barriers to building, yet designers remain underrepresented as founders. The hosts argue that designers must move past the pursuit of 'ideal' outcomes and embrace the messy, iterative reality of shipping products.
Dive ClubNate Parrott on Building Claude Design
Nate Parrott explains how Claude Design evolved from a personal side project into a powerful tool for rapid prototyping, enabling designers to build custom, interactive interfaces at the speed of thought.
Dive ClubBuilding AI-Powered Products: Workflows, Agents, and Community
A deep dive into modern design engineering, exploring how AI agents and mixed-media workflows are enabling builders to experiment faster, ship code directly, and foster community through interactive, live-demo projects.
Dive ClubCharlie Deets on Designing for Utility and Experience
Charlie Deets, designer of Safari and Dia, argues that in an era where execution is commoditized, a designer's true value lies in simplifying complex systems, maintaining clear personal design principles, and focusing on high-level decision-making over getting lost in implementation details.
Dive ClubThe Rise of the AI-Powered Designer and the End of the 'Dumb Device' Era
The hosts explore how AI is redefining the 'web designer' role, the shift from data-driven to intuition-led product building, and the rapid evolution of AI-integrated hardware and software.
Dive ClubMoving Beyond Folder-Based Documentation Architectures
Traditional folder-based hierarchies fail to reflect how knowledge is actually used. To support both humans and AI, documentation must shift from rigid storage structures to interconnected knowledge graphs.
Moving Beyond the Atomic Design Metaphor
Atomic design successfully taught the industry to think in terms of component composition, but its rigid taxonomy has become a source of unnecessary friction. Teams should prioritize composability over maintaining strict hierarchical labels.
The Steering Layer: Enforcing Brand and Code Cohesion in AI
A 'steering layer' is an intentional architectural component that sits between AI tools and a codebase, using context, guidelines, and retrieval systems to ensure AI output remains consistent with brand and development standards.
Hypertokens: Bridging the Gap Between Tokens and Components for AI
Hypertokens are a proposed design-system concept that bundles multiple style properties into a single, machine-readable unit. By providing AI agents with explicit intent rather than raw values, they reduce guesswork, prevent design drift, and enable automated, multi-format compilation.
Building a Design Stack for Claude Code
To get high-quality UI output from Claude Code, you must move beyond default engineering prompts by providing a structured 'design stack'—a combination of project briefs, design system tokens, and specialized MCP tools.
COrigami: AI-Driven Design for Flat-Foldable Origami
COrigami is an end-to-end AI pipeline that translates natural language into mathematically valid, flat-foldable origami crease patterns by combining geometric optimization with reinforcement learning-based aesthetic refinement.
Building Practical Figma Plugins with AI Agents
Avoid cluttering your workspace with redundant plugins. Instead, use AI agents to build custom tools that solve specific, repetitive manual tasks, following a structured prompt formula to ensure utility and maintainability.
UI CollectiveTeaching AI Agents Product Design Standards
Vercel treats product design decisions as code by embedding a 'product-design' skill in the repository, using linters for deterministic rules, and maintaining a human-in-the-loop evidence workflow to ensure agents understand the 'why' behind UI patterns.
Design Systems in the Age of Agentic Authorship
Design systems are shifting from human-authored assets to agent-authored infrastructure. This transition requires moving away from passive governance toward versioned, API-like token management and rigorous review processes for machine-generated output.
Loredana Crisan on Figma, AI, and the Future of Design Craft
Figma's CDO Loredana Crisan argues that AI is a tool for expression, not a replacement for human intent. The future of design lies in building systems and mini-apps that allow designers to maintain precision and soul in their work.
Figma Updates: Code Layers, Motion, and AI Agent Workflows
Figma is blurring the lines between design and engineering by introducing native code layers, built-in motion/shader support, and AI-driven agent workflows that connect to external tools like GitHub and Notion.
Prioritizing Iconic Excellence Over Superficial Consistency
Modern design systems often prioritize visual uniformity at the expense of individual icon quality. True design consistency should be defined by a shared standard of excellence and intentionality, rather than rigid adherence to superficial stylistic rules.
Scale Your Expertise, Not Your Job Titles
Instead of using AI to perform roles you aren't trained for, use it to encode your unique professional expertise into systems, allowing your specific skills to scale across an entire project.
Evaluating Figma AI Agents: Practical Utility and Limitations
Figma AI agents currently excel at generating mobile flows rather than desktop screens, but they struggle to consistently apply local design system variables and styles unless full component libraries are connected.
UI CollectiveBrett Williams on Building Gather: A Designer's Journey
Visual designer Brett Williams shares how he moved from Figma-only workflows to building a production-ready Mac app using AI, proving that design taste and clear communication are more critical than traditional coding skills.
Dive ClubIntegrating Design Systems with AI via Model Context Protocol
By using the Model Context Protocol (MCP) to feed design system rules into AI agents, developers can ensure AI-generated code remains consistent, brand-compliant, and architecturally sound.
IBM TechnologyRon Goldin: Design Leadership in the Age of AI
Design leader Ron Goldin argues that AI has transformed design leadership from a management-heavy role into a 'player-coach' model, where leaders use rapid prototyping to win arguments and drive product strategy.
Dive ClubFixing AI Design Drift with Code-Based Design Systems
AI agents often reinvent UI components in every session, leading to inconsistent 'design drift.' The solution is to move design systems out of static mockups and directly into your codebase as a single source of truth that agents are instructed to reference.
Brian CaselThree Essential CSS Layout Primitives
Kevin Powell shares three reusable CSS patterns—Stack, Prose, and Pile—that simplify layout management by using flexbox and grid primitives with customizable spacing variables.
Kevin PowellDesign Engineering in the Age of AI: Lessons from Anthropic & Ramp
AI is shifting the role of designers from pixel-pushers to systems-thinkers. The most effective teams are those where designers have direct access to production codebases and leadership actively uses AI tools to maintain intuition for their product's capabilities.
Dive ClubAccelerating Design Workflows with ChatGPT and Codeex
Designers can significantly speed up ideation and prototyping by using ChatGPT for visual inspiration and Codeex for efficient, token-saving code generation that integrates with design systems.
UI CollectiveShowing 30 of 76