Artificial intelligence is rapidly changing how design systems are created and maintained. Instead of treating design and development as separate disciplines, new AI-powered workflows make it possible to move seamlessly between design files, codebases, documentation, and component libraries. My recent experiments focused on understanding how these “agentic” workflows operate and how they can improve collaboration between designers and engineers.
To explore these possibilities, I built an experimental workspace that combined AI agents, Figma, Model Context Protocol (MCP) tools, and modern development environments. The objective was simple: create a system where design could automatically generate code, code could recreate design assets, and both remained synchronized throughout the project.
The foundation of this setup relied on Google’s Antigravity development environment together with several AI integrations. This allowed me to orchestrate multiple AI agents simultaneously while maintaining a shared workspace that contained design files, source code, documentation, and supporting metadata. Rather than switching between disconnected tools, everything could be managed from a single environment.
One of the most interesting aspects of the experiment was establishing a two-way workflow. Instead of limiting AI to generating code from designs, I also wanted to determine whether existing code could recreate high-quality design components inside Figma. Supporting both directions proved valuable because it reduced duplicated work while keeping design and implementation closely aligned.
My interest in this topic grew after following several designers and developers exploring AI-assisted design systems. Community discussions highlighted how quickly new tools are appearing and how difficult it has become to keep pace with the evolving landscape. Research into agentic workflows, combined with projects involving Figma MCP integrations, demonstrated that AI could already automate many repetitive tasks that traditionally required manual effort.
One important realization became clear early in the process. Building software with AI is no longer simply about generating code from natural language prompts. When working with structured design systems, detailed specifications become increasingly important. Well-defined components, design tokens, documentation, and usage rules provide the context AI needs to produce reliable results.
The first stage involved configuring Figma Console MCP within the development environment. This connection allowed AI agents to read from and write directly to Figma files, making it possible to generate components, variables, and design assets automatically. Because Antigravity supports multiple parallel conversations with AI agents, I could experiment with different workflows without interrupting ongoing tasks.
To create a reusable foundation, I assembled a small design system using open-source UI components. Rather than designing everything from scratch, I imported several commonly used interface elements, including buttons, form controls, accordions, input fields, labels, and separators. This provided enough material to evaluate how effectively AI could translate between code and design.
My first experiment focused on converting existing code into Figma components. Before generating any layouts, AI created the necessary design variables that corresponded with the project’s design tokens. After adjusting these variables to match a preferred visual style, I instructed the agent to recreate the imported components directly inside Figma.
The results were surprisingly effective. Simple components required very little correction, while more advanced elements occasionally needed additional prompts or manual refinement. Depending on complexity, AI produced results that ranged from approximately sixty to ninety percent complete, dramatically reducing the amount of manual work required.
Despite these improvements, designer expertise remains essential. Reviewing Auto Layout settings, variables, component properties, and overall structure is still necessary to ensure quality. Understanding how the original code functions also helps identify inconsistencies that AI may overlook during conversion.
Maintaining consistency between design files and implementation naturally raises concerns about synchronization. Fortunately, later stages of the workflow demonstrated practical ways to detect and correct differences before they become larger maintenance problems.
After validating the code-to-design process, I reversed the workflow by testing design-to-code generation. This approach aims to transform visual concepts into functional code that developers can immediately use as prototypes or implementation starting points.
Rather than relying on an existing component, I created an entirely new card layout through collaboration with AI. During brainstorming, I used integrated sketching tools to rapidly explore multiple interface concepts. Once I selected the strongest direction, the AI converted the chosen sketch into a structured Figma component while applying the correct design variables automatically.
From there, the workflow continued smoothly. The Figma component became a React component, supporting documentation was generated, AI-readable metadata was created, and the new component was integrated with the rest of the existing design system. This demonstrated how designers could deliver not only polished interface concepts but also functional implementation assets that accelerate engineering work.
Documentation proved to be another area where AI delivered meaningful improvements. One MCP feature automatically generated readable component documentation directly from Figma. Although this process depends on maintaining consistency between design and implementation, it provides an efficient way to populate documentation websites with minimal manual writing.
Beyond documentation intended for people, I also explored metadata specifically designed for AI systems. Specialized skills analyzed every component and generated structured information describing how, when, and where each element should be used. Instead of forcing AI to guess which components belong in a particular interface, these metadata files provide explicit guidance that improves consistency during interface generation.
Another valuable capability involved indexing the codebase itself. Rather than producing generic HTML or inventing styling rules, AI could reference the actual design tokens, component definitions, and project structure already present in the repository. This significantly reduced inconsistencies while encouraging reuse of existing assets.
These experiments highlighted an important shift in the responsibilities of design system teams. Designers are no longer creating components solely for human users. Increasingly, they are also defining the instructions that AI systems follow when generating interfaces. Governance, usage rules, and implementation standards now become structured data that machines can understand.
Because of this change, maintaining a design system increasingly involves encoding knowledge instead of only producing visual assets. Well-designed metadata becomes just as valuable as the components themselves because it helps AI make reliable design decisions without constant supervision.
To evaluate the overall health of the project, I generated a design parity report comparing Figma components against their corresponding implementation in code. This automated analysis identified inconsistencies between the two environments and highlighted areas requiring attention before larger differences could emerge.
The generated report served as an internal dashboard summarizing alignment across the design system. By storing these reports within the project workspace, teams can continuously monitor synchronization over time and quickly identify components that have drifted away from their intended implementation.
Perhaps the greatest advantage of this workflow is that AI can assist with correcting many of these discrepancies. Once differences are identified, connected tools can update either the codebase or the design files to restore consistency with minimal manual effort.
My experiments reinforced the idea that AI is becoming more than a productivity assistant. It is evolving into an active participant throughout the entire lifecycle of a design system. When supported by structured metadata, connected design tools, synchronized codebases, and well-defined workflows, AI can help teams build, document, maintain, and improve design systems far more efficiently than traditional approaches.
While these technologies are still developing, they already demonstrate enormous potential. Organizations willing to invest in structured workflows today will be better positioned to take advantage of increasingly capable AI systems as agentic design environments continue to mature.
