This is how I use AI for Design Systems at Monday.com

How AI Transforms Design Systems Management

The Shift from Traditional to AI-Driven Processes

• Elad discusses the transition from detailed annotations and lengthy documents to a simplified approach where specifications are tailored for AI rather than human interpretation.

• The use of Figma MCP is highlighted as a crucial tool that aids in generating screenshots and code, streamlining the connection between design components and their specifications.

• Elad emphasizes the importance of creating specifications within cursor, especially in large organizations with established design philosophies and developer preferences.

Challenges Faced Before Implementing AI

• Prior to using AI, managing design systems involved numerous handoffs between smaller design teams and developers, leading to communication challenges and delays.

• A specific example is given regarding dropdown components, illustrating the extensive notes required to ensure developers understood all states of a component accurately.

Advantages of Using AI in Design Specifications

• With AI integration, documentation has become more concise; it allows for clear visibility of spacing and other technical details that were previously prone to human error.

• Elad explains how writing for AI differs from traditional methods; while humans might overlook context or specifics like pixel gaps, AI can process this information effectively when presented correctly.

Tools and Techniques Employed

• The discussion includes various tools used alongside Figma MCP that facilitate specification creation by analyzing designs directly from Figma links.

• An internal VS Code extension is mentioned that automates the generation of specifications based on copied Figma links, enhancing efficiency in the workflow.

Importance of Accurate Specifications

• Elad stresses that accurate specifications are vital; they provide standardized UI elements which help maintain consistency across projects.

• He notes that while Figma MCP can generate decent specs independently, having internal rules ensures better alignment with organizational standards.

Understanding the Design System at Monday.com

Overview of the Design System

• The design system at Monday.com is structured around specific philosophies, emphasizing consistency and quality in code development.

• Developers are encouraged to maintain high standards for code quality, not just functionality. Tools are implemented to ensure this consistency.

• The design library includes various components such as color tokens, visuals, illustrations, buttons, and links that aid in creating cohesive compositions.

Role of Cursor in Development

• Cursor plays a significant role by generating specifications that align with the design system's requirements.

• Cursor rules guide developers on how to implement components effectively, including structuring stories within Storybook.

• The integration of specifications from Figma into Cursor allows for a streamlined process where developers can follow a clear plan without extensive meetings.

Efficiency Gains Through Automation

• The transition from traditional handoff methods (like Figma specs) to using Cursor reduces the need for back-and-forth communication between designers and developers.

• With 90% of the necessary code generated automatically through Cursor, it significantly speeds up the development process while ensuring adherence to design guidelines.

Storybook Integration

• Generated documentation includes all relevant props and usage instructions directly available in Storybook after component creation.

• This automation eliminates the need for detailed manual story creation in Figma; instead, AI assists in generating comprehensive templates based on established rules.

Visual Updates and Collaboration

• Designers can easily update visuals within Cursor without needing constant developer input or revisions in Figma files.

• By allowing designers to provide SVG assets directly into Cursor, collaboration becomes more efficient as they can specify visual elements needed for components quickly.

Understanding Component Templates and Cursor Rules

Overview of Component Templates

• The speaker emphasizes the need to avoid boilerplate content in component templates, focusing instead on essential guidelines and specifications.

• A template exists within Storybook that outlines dos and don'ts for each component, created using tools like Figma and Cursor.

• Existing code allows for efficient creation of new stories based on previous components' guidelines without needing extensive manual input.

Integration with Figma and Storybook

• The integration process involves pulling visual elements from Figma into Storybook, streamlining the documentation of dos and don'ts.

• Cursor automates the generation of stories by referencing existing images and guidelines, facilitating collaboration between developers.

Utilizing Cursor Rules

• The speaker explains that cursor rules are prompts used by developers to guide AI in creating components based on established standards.

• Yossi Sadi is credited for developing these extensions, which enhance efficiency in component creation through structured rules.

Technical Structure of Cursor Rules

• Cursor rules include technical specifications such as naming conventions and documentation structure that designers do not need to manage directly.

• When prompted to create a component, the AI utilizes these rules to ensure proper implementation according to predefined standards.

Accessibility Guidelines

• The discussion highlights the importance of adhering to WCAG guidelines for accessibility, emphasizing semantic HTML usage (e.g., using buttons instead of div tags).

• While AI can generate functional code, it may struggle with producing high-quality accessible components; thus, comprehensive guidelines are made available through various platforms.

Design System and AI Integration in Development

Importance of Accessibility in Component Design

• Emphasizes the need for creating accessible components that adhere to valid area guidelines, including keyboard navigation and logical tab order.

• Highlights the use of Vibe design system tools available in both Figma and Storybook, making them accessible for everyone involved.

Overview of Vibe Design System Tools

• Discusses the dual availability of documentation and components in both Figma and Storybook to avoid redundancy in development efforts.

• Questions about the percentage of code generated by AI (Cursor), indicating that it can generate around 70% for complex components like buttons.

Efficiency Gains from AI Code Generation

• Notes that simpler components can see up to 90% code generation by AI, allowing designers to focus on more complex tasks while maintaining quality standards.

• Explains how engineers are responsible for tooling improvements, enabling a small team to manage a large component library efficiently.

Team Dynamics and Workload Management

• Describes the structure of a small design system team at Monday.com with three developers supporting 70 designers, emphasizing collaboration.

• Acknowledges the role of AI tools in expediting releases by handling simple components stuck due to engineering timelines.

Automation Benefits and Real-time Updates

• Discusses how automation allows teams to focus on complex design system tasks rather than repetitive coding work.

• Illustrates a live example where an engineer would typically handle color updates but shows how Cursor can facilitate real-time changes without waiting for manual intervention.

Contextual Understanding for Effective AI Use

• Demonstrates using screenshots as context for Cursor when making changes, highlighting the importance of providing clear instructions.

• Concludes with insights into why establishing rules within Vibe is crucial for effective AI operation, ensuring accurate outcomes based on user input.

Design System Component Management with AI

Enhancements in Figma Tooling

• The discussion begins with the effectiveness of text color adjustments in dialogue, emphasizing that providing more context improves functionality.

• A comparison is made between traditional Figma prototyping and current methods, highlighting a significant reduction in time spent on updates—down to about five minutes for certain tasks.

Streamlining Design Processes

• The speaker suggests using images to convey desired outcomes effectively, which can simplify the design process without needing extensive prototype updates.

• There’s an acknowledgment of challenges when components do not behave as expected, indicating the need for overrides to ensure proper functionality.

AI Integration and Component Updates

• The conversation shifts towards how new components yield better results with AI assistance compared to older ones, which often require more manual fixes.

• It is noted that most improvements are seen in new components due to their fresh coding environment, while existing code presents more difficulties.

Interactive Components and Visual Updates

• The speaker expresses dissatisfaction with static images used in designs and discusses the potential for interactive elements within design systems.

• A practical example is provided where visual updates can be made through cursor tools by replacing visuals directly within storybook stories.

Simplifying Design Tasks

• The ease of replacing images through AI tools like Cursor is highlighted as a major improvement over previous manual processes.

• Concerns arise regarding unapproved changes by designers leading to multiple versions of components; however, it’s clarified that code integrity remains intact despite these capabilities.

Design Process and AI Integration in Development

Overview of Design Changes and Approval Process

• The design process requires approval from developers, maintaining a structured workflow where changes are reviewed before implementation.

• In Figma, designers open branches for modifications, similar to the branching system used in development environments like GitHub.

• All design rules and guidelines are accessible on GitHub, allowing transparency and collaboration among developers interested in the design system.

• Quality checks remain essential; any new feature or fix must undergo tests to ensure it meets quality standards before approval.

• The speed of implementing changes has increased, but the emphasis on quality remains paramount due to the large user base of Monday.com.

Branching System and Collaboration

• Both designers and developers utilize a branching version control system that facilitates collaboration while ensuring all features receive necessary approvals from the design team.

• The integration of AI tools allows for quicker feedback on designs, yet human oversight is crucial for consistency across the platform.

Designer and Developer Roles with AI Tools

• A discussion about how designers use AI tools like Cursor compared to developers highlights ongoing efforts to bridge knowledge gaps between these roles.

• Designers are being trained to engage more with coding processes despite existing barriers such as familiarity with GitHub workflows.

Accuracy of AI-generated Components

• The accuracy of components generated by AI varies based on complexity; simpler components can achieve up to 90% readiness while complex ones may only reach around 70%.

• Despite using AI for initial reviews, manual checks remain critical. Developers conduct thorough reviews to ensure security and quality before finalizing components.