AI-Powered Slack Chatbot for Design System Compliance & Collaboration

Abstract

Maintaining consistency between design specifications and frontend implementations is a recurring challenge in large-scale software development. In industrial design systems, user interface components are often defined by designers in tools such as Figma and implemented separately by developers in frontend codebases. Because these two representations are created, maintained, and updated in separate environments, inconsistencies can appear over time. This can lead to design-code drift, where visual and structural properties such as colors, spacing, typography, layout, and component variants no longer align. This thesis investigates how an AI-based system can be designed to detect and explain inconsistencies between Figma-based design components and their corresponding frontend implementations. A proof-of-concept system was developed in an industrial context at Ericsson. The system retrieves design data from Figma and frontend implementation data from a GitLab-hosted codebase, filters and transforms both sources into structured JSON representations, matches corresponding components using a hybrid fuzzy and LLM-based matching approach, and performs compliance checking using a controlled LLM-based comparison pipeline. The results are delivered through a Slack chatbot interface to support integration with existing developer and designer workflows. The system was evaluated using industrial design-system components and controlled test cases with known inconsistencies. The evaluation examined component retrieval, component matching, inconsistency detection, prompt strategies, model selection, data reduction, token usage, and practical workflow behavior. The strongest configuration, using filtered JSON, GPT-5.1, and multi-pass prompting, achieved a precision of 0.9577, recall of 0.9444, and F1-score of 0.9510 for inconsistency detection. The matching pipeline produced matches for 109 of 189 components, while the wrong-match correction mechanism identified and rejected 10 initially accepted incorrect matches. The results show that LLM-based design-code compliance checking can be effective when used as part of a controlled pipeline with deterministic preprocessing, structured representations, schema-constrained outputs, and task-specific prompting. However, the results also show that automatic component matching, scalability, latency, and human trust remain important challenges. The thesis shows that AIbased compliance checking is best understood as a support tool for developers and designers rather than a fully automatic source of truth.