Integrating AI in Design and Development: Insights from GIT's Recent Session

Daniel, the VP of Engineering at Git, introduces the session alongside Ital, the Head of UX, and Amir, the VP of Products. The session was initiated in response to a post that generated significant interest, marking the first time they are conducting such a session.

Git has developed a platform for Application Security Posture Management (ASPM). Recently, they have begun exploring the field of Agentic AI, engaging with their users, primarily AppSec Engineers, and expanding into various use cases.

The transition to becoming an AI-native company is complex, involving more than just implementing AI tools. It requires a cultural shift, changes in mindsets, and alterations in processes. The integration began in engineering and is now extending to product and UX areas, aiming to enhance productivity significantly.

Ital prepares to share a presentation titled 'From Laboratories to Freedom,' indicating a shift in her approach to work with AI tools, which she believes has greatly transformed her professional life.

Ital shares her background, having worked at Wix for over seven years before joining Git. She emphasizes the importance of her experiences at Wix, where she learned critical design processes and methodologies, which she now aims to implement at Git.

Ital discusses her role in adapting the design processes she learned at Wix to Git's workflow, focusing on iterative cycles of two weeks. She aims to integrate these methodologies into Git's operations to enhance efficiency and effectiveness.

The speaker discusses the design process, emphasizing the importance of understanding the specific area that needs focus. This involves initial steps like creating flows, wireframes, and prototypes, followed by internal and external validation. The entire process can take time, especially for larger features, which may extend beyond the average two-week iteration period. Typically, medium-sized features require about two weeks for completion, with all work conducted within Figma, which the speaker highly values for its efficiency in consolidating various design stages.

The speaker highlights the iterative nature of the design process, where each phase, including internal validation and feedback incorporation, can take several days. This meticulous approach ensures that every component is well-defined for developers, minimizing their questions and clarifying the user experience. The speaker notes that creating a handoff for developers is also time-consuming, as it requires detailed documentation of how each component behaves and looks.

The speaker reflects on a significant shift in the company's workflow, as all developers transitioned to using Cursor, which accelerated the development cycle. Previously, the speaker often found herself as a bottleneck in the design process, but with the introduction of the agile model in Cursor, developers gained more autonomy. They could implement simpler UX changes independently, allowing for quicker iterations and reviews, thus enhancing collaboration and efficiency.

The speaker expresses a desire to engage more with the development side of the process, stating that she wanted to use Cursor as well. This involvement has opened up a new realm of understanding for her, bridging the gap between design and development. The collaboration among the three distinct roles within the company is highlighted as significant, with each role contributing uniquely to the overall workflow and project success.

The speaker discusses a shift in team dynamics where product development and coding are becoming increasingly integrated. They highlight how the product team is now capable of creating prototypes easily using AI, and developers are adapting to this change by understanding the functionalities of the product better. This collaborative environment fosters a strong unit where responsibilities are shared, and ideas flow freely between developers and product managers.

The speaker introduces the use of ChatGPT as a custom tool in their workflow, particularly enjoying its integration with Figma. They describe how ChatGPT assists in brainstorming and structuring ideas, enhancing their creative process. The speaker emphasizes the importance of this tool in generating prompts and facilitating discussions about design elements, showcasing a seamless partnership between human creativity and AI capabilities.

The speaker shares their recent experiences with prototyping, revealing how they have started using AI tools to generate prototypes directly from prompts. They express excitement about the efficiency of this process, which allows them to visualize ideas quickly without traditional coding. This innovation represents a significant leap in their workflow, enabling rapid iterations and feedback collection from clients.

The speaker highlights the importance of receiving feedback during the prototyping phase, noting that the ability to quickly adjust designs based on client input is crucial. They mention that the traditional lengthy processes have been streamlined, allowing for more effective collaboration and faster turnaround times on projects. This shift not only enhances productivity but also improves the overall quality of the final product.

The discussion shifts to the use of Cursor, a tool that has become popular among developers. The speaker notes that developers are now less focused on writing code manually, which opens up opportunities for non-developers to engage with coding tasks. They mention the MCP (Model Control Protocol) and express a desire to explore the application's structure further, indicating a growing interest in understanding and utilizing new development tools.

The speaker discusses the MCP Server, a buzzword in the design community, highlighting its ability to communicate with other tools through a protocol that utilizes APIs. This functionality allows for easy recognition of specific functions, enhancing workflow efficiency. The speaker connects MCP Server to Figma, demonstrating how it can copy specific frames and automatically assist in text recognition, although improvements are still needed.

The speaker emphasizes the importance of integrating design systems within the MCP Server framework. They explain how they can set global guidelines and rules for design components, ensuring consistency across projects. This system acts as a permanent reference, allowing the MCP Server to improve and adapt over time, akin to a design system that evolves with user input.

The speaker is in the process of creating a new design system within the MCP Server, which is still a work in progress. They describe how they are coding this system, aiming to streamline the development process for developers. By providing references from Figma, the speaker can generate a design system more quickly than traditional methods, which often take considerable time in larger companies.

A question arises regarding the challenges of creating complex components within the design system. The speaker acknowledges that while the initial effects are appealing, more intricate behaviors can complicate the process. They note that some components remain at a basic level, and as architects build upon existing structures, new, more complex components are emerging.

The speaker mentions utilizing the MCP Server for prototyping, indicating that they are currently in a transitional phase. They are leveraging the MCP Server to create screens while simultaneously building the design system. The speaker observes that the MCP Server effectively handles more complex components from Figma, indicating a promising integration of design and development processes.

The speaker highlights their collaboration with developers, noting that they have created specific components for a WebApp. They have been actively editing and refining these components within the MCP Server, ensuring that the design system aligns with the developers' current needs. This collaborative effort enhances the overall efficiency and effectiveness of the design and development workflow.

Daniel mentioned the introduction of a new feature that allows users to add agents and invite them to teams, effectively utilizing them as additional employees within the company to perform specific tasks. This feature was demonstrated through a prototype, which was intended for both user presentation and internal discussion, highlighting the nuances involved in its implementation.

The application is divided into three main sections: navigation, which lists all pages; the central area for settings and code generation; and a chat section, which is crucial for user interaction. The speaker, who has limited coding knowledge, focuses primarily on the chat functionality, utilizing a 'YOLO mode' for rapid development without the need for review and acceptance processes, allowing for faster workflow.

The speaker emphasized the importance of creating a specific chat context for agents to enhance their focus and performance. They demonstrated the process of adding a new agent with tailored capabilities, showcasing the flexibility of the agent mode, which allows for various personality settings and operational modes, including a 'thinking mode' to observe the agent's decision-making process.

The speaker expressed a preference for local development over web applications due to the stability it offers, particularly when dealing with more fragile components. They aim to engage more with the development team to better integrate with the web application and local functionalities, indicating a desire to bridge the gap between local and web-based development efforts.

The speaker discusses the progress of developing a design system, emphasizing the importance of collaboration with developers. They express a desire to create a system that aligns closely with the developers' needs, aiming for a seamless transition from design to implementation. The speaker notes that the transition process is currently taking about half a day, and they hope to produce a ready-to-use product for review, indicating that the design system is still under construction but nearing completion.

The speaker highlights the necessity of working closely with developers to ensure that the design system is effectively integrated into the coding process. They mention that while the code may not be fully ready, their vision is to create real screens that facilitate collaboration. The speaker aims to avoid using Figma for design, preferring to generate everything directly through code, which they believe will enhance efficiency and speed in the development process.

The speaker describes the internal dynamics of their work with developers, noting the need to adjust expertise areas within the project. They mention a specific example of changing the focus to 'data privacy guard' and the importance of clear communication with the developer to ensure that the design aligns with the intended functionality. This highlights the ongoing adjustments and collaborative efforts required to refine the design system.

The speaker emphasizes their focus on user experience and the desire to create a comprehensive design that can be directly implemented in code. They express a commitment to understanding the specific needs of their area of focus, moving away from pixel-perfect design and instead concentrating on the overall experience. This shift allows them to prioritize user needs and streamline the design process, reducing the time spent on minor details.

The speaker reflects on the shift in focus towards analytics, noting that previously, due to time constraints, they were unable to delve into detailed analytics. However, with the current shorter cycles, they now have the opportunity to engage more deeply. They mention a previous UXQA cycle that was cumbersome, involving lengthy processes of documentation and corrections. Now, the collaboration with developers has become more streamlined, allowing for immediate adjustments and improvements in real-time, which the speaker finds exciting.

The speaker emphasizes the importance of user experience (UX) in their current workflow, highlighting the need for brainstorming sessions to enhance user interaction. They express a desire to create engaging and innovative experiences, moving away from mundane tasks. A developer recently introduced a new navigation feature, which the speaker appreciates as it allows them to focus on broader creative aspects without needing to engage with design tools like Figma for every minor change.

The conversation shifts to the integration of AI tools in their product development process. The speaker mentions an AI named Zelda that analyzes their discussions and provides insights on various areas, including competitor analysis. They also discuss the evolution of their Product Requirements Document (PRD) process, indicating a significant transformation in how they approach product development. The team has adopted a new mindset, incorporating AI tools at every step to enhance efficiency.

The speaker describes a recent initiative where they created a PRD generator during a hackathon. This tool is designed to understand their needs and generate comprehensive PRDs based on their inputs. The AI is capable of producing a complete document that aligns with their objectives, allowing the team to focus on reviewing rather than drafting from scratch. They express excitement about the potential for automation in creating prototypes from these PRDs, indicating a desire for further development in this area.

The discussion highlights a critical shift in design focus from pixel-perfect precision, traditionally emphasized in tools like Figma, to a more user-centered approach. This involves prioritizing user needs through brainstorming, competitor analysis, and direct user engagement, indicating a broader trend towards practical application in design processes.

The conversation delves into the complexities of working with intricate components in design systems. An example is provided of a tool for building automations that consists of multiple components, which can complicate the design process. The speaker notes the necessity of understanding these complexities to effectively translate and implement them in design, emphasizing the importance of context and precision in working with such components.

To ensure a cohesive graphic language, the speaker suggests establishing clear guidelines for designers using tools like Figma. This includes creating a design system that serves as a reference point, instructing designers on what to use and what to avoid. The idea is to provide structured resources that help maintain consistency across various components and features being developed.

The speaker raises questions about the integration of new features with existing design systems, particularly regarding the ability of tools to read and convert established design elements into code. There is a recognition of the existing design system's complexity and a desire to streamline the process of utilizing these elements without having to rebuild them from scratch, indicating ongoing challenges in achieving seamless integration.

The discussion revolves around automating design processes using tools like Figma and Cursor. The speaker mentions creating groups for specific tasks and automating the generation of stories or designs, emphasizing the importance of a minimal setup that allows for independent use by the team.

The speaker highlights that with a structured approach, team members can learn quickly. They mention the need for a systematic way to research competitors and gather features, indicating that while they currently rely on existing competitors, there is a desire to develop a more automated input system for feature analysis.

The transition to using Cursor has been smooth for developers, as they have all adapted to this tool. The speaker reflects on their experience with Figma and the support received from developers like Ariel, who provided mentorship. This collaborative environment has streamlined their workflow, making the design cycle more efficient.

The speaker discusses a unique approach where they can instruct the system to reverse-engineer designs from Figma back to Cursor. This capability allows for a more flexible design process, enabling the team to adapt and modify designs as needed.