Large Figma ecosystems accumulate hidden dependencies over time, including outdated styles, incorrect library references, detached assets, and components nested deep inside product flows.

Using Claude Code, custom skills, and the Figma MCP, I developed workflows that inspect files and identify where incorrect assets, styles, variables, and component references are being used. Instead of simply reporting that dependencies exist, these processes help locate the specific instances creating the problem.

Encoding audit logic into reusable skills also makes the process repeatable, so the same checks can be run as the system evolves rather than rebuilt as a new prompt each time.

Some AI solutions I explored using Claude Code and Claude Design for Acorn include:

• Design debt and entropy identifier
  Figma will tell you how many assets and styles are being pulled from any added file, but it doesn't tell you where they are. Finding deeply embedded items is incredibly time consuming, so I created an agent that locates and logs all assets and styles within the system and product flows that are incorrect or pulled from incorrect libraries, allowing the design system and product teams to eliminate design debt and greatly reduce entropy going forward.
• Variable / token consistency and structures
  An agent for scanning variables collections for redundancies, missing or incorrect styles, and token related errors. Eventually, we're wanting to use AI as a tool to perform automatic cross-updates in both code and figma.
• System and component audits
  An agent that audits and records any design-to-eng disparity, redundant components, missing components or parts, and areas that could be streamlined or optimized better.
• Multi-directional updates
  We're aiming to create a process where our coded prototypes are the actual codebase, and updates to either code or Figma will automatically update the other library for ultimate design and code parity.More advanced experiments explore how automatically updated markdown files can guide AI skills and agents. These agents can scan design and code sources, generate UI rules, answer system-related questions, and help maintain code parity, visual consistency, and brand cohesion.

One of my longer-term areas of experimentation is reducing the separation between the design system in Figma and its implementation in code.

Using Claude Code, Figma MCP, Cursor, and structured markdown files, I explored workflows where AI agents could read system rules, inspect both design and code sources, answer system-related questions, identify disparities, and potentially propagate approved changes between environments.

The longer-term goal is a more connected system where Figma and code remain synchronized with less manual maintenance, strengthening design-to-engineering parity while reducing opportunities for system drift.

Accessibility testing can become especially time consuming in Acorn because components often need to work across many opaque background colors, states, and theme combinations.

I used Claude Code to generate WCAG-focused accessibility reports that could evaluate large sets of color and contrast combinations much faster than checking them individually with manual tools. This was especially useful when validating text, icons, controls, and component backgrounds across multiple surfaces.

The reports helped me identify failures, edge cases, and patterns more quickly, giving me more time to focus on the harder design decisions where accessibility, visual quality, and usability needed to be balanced.

Some component concepts are difficult to communicate through static Figma screens alone, particularly when they involve responsive behavior, motion, nested interactions, or complex browser functionality.

I used Claude Code, Cursor, Figma Make, and Figma Agents to rapidly create functional prototypes based on Acorn patterns. One area of experimentation involved prototyping portions of the Browser component as working coded interfaces with accompanying specifications.

These prototypes helped make complex system behavior easier to evaluate with designers, engineers, and leadership before committing to implementation.

Maintaining detailed component documentation can be time consuming, particularly when specifications need to incorporate accessibility guidance, interaction behavior, and established platform conventions.

I developed a reusable Claude Code documentation skill to help structure and generate component documentation consistently. The workflow incorporates defined documentation rules and reference material, while tools such as ChatGPT and custom GPTs help with research and synthesis from public sources including Apple’s Human Interface Guidelines and Google Material Design.

Every output is reviewed and verified before publishing, but the workflow reduced the time required to produce a component entry by an estimated 70%.

AI also gave me new ways to communicate design system concepts beyond traditional documentation.

I experimented with Figma Weave, Nano Banana, and other generative visual tools to create custom imagery, motion, video, presentation graphics, and higher-fidelity demonstrations for training and adoption materials.

This is especially useful for explaining how components behave rather than simply showing how they look. It also allows me to explore visual direction and motion earlier, helping designers and engineers better understand how an experience should look, move, and feel.