The Shift: AI as a Workflow Layer

Designers often view AI as a tool for generating visual iterations, which can be time-consuming and expensive. The real value lies in using AI as a "workflow layer" to handle the tedious, non-creative tasks that lead to technical debt. By utilizing Claude Code, designers can automate the maintenance of design systems, documentation, and handoff processes, ensuring that design specs remain accurate as the product evolves.

Building Sustainable Documentation

Documentation often suffers from "write once, ignore forever" syndrome. To combat this, the author recommends a two-part approach:

  1. Skills for Initial Generation: Use a Claude Skill to generate the first draft of documentation. A well-structured skill should include specific sections: definition, usage scenarios, variants, states, anatomy, properties, usage rules (do's/don'ts), accessibility notes, and related components. Providing Claude with a template and worked examples (e.g., button and input field) ensures high-quality, consistent output.
  2. Routines for Maintenance: Unlike Skills, which are for one-off tasks, Routines are designed for recurring updates. By setting a manual trigger for these routines, designers avoid the noise of AI attempting to document every minor iterative change. The routine should be instructed to read the current Figma state via the Figma MCP (Model Context Protocol), identify specific changes (new variants, updated properties, layout shifts), and draft an updated entry for human review before applying changes to the canvas.

Practical Implementation & Tooling

To integrate Claude Code with Figma, the following setup is required:

  • Figma MCP: Connects Claude to the Figma API, allowing it to read and interact with the canvas.
  • Figma Skills: Plugins that enable AI to perform specific actions on the canvas, such as auditing design systems or applying design tokens.
  • Workflow Strategy: Always maintain a "human-in-the-loop" approach. AI should identify changes and draft updates, but the designer must approve these before they are pushed to the Figma file. This prevents the AI from making unauthorized edits or misinterpreting design intent.

Beyond Documentation: Audits and Tokens

Claude Code can be extended to other critical areas:

  • Design Audits: Use specialized skills to scan components for consistency, identifying deviations in radius, stroke, or color across variants.
  • Accessibility Checks: Automate the generation of accessibility reports, including keyboard behavior and screen reader notes.
  • Design Tokens: Use Claude to generate JSON-formatted tokens, which can then be synced with development workflows, bridging the gap between design and code.

Key Takeaways

  • Treat AI as a workflow layer: Focus on automating the "boring" parts of design (docs, audits, tokens) rather than just visual generation.
  • Use Manual Routines: Avoid automated triggers for design updates to prevent unnecessary documentation churn during the iterative design phase.
  • Provide Examples: When building Skills, include templates and worked examples to ensure the AI maintains a consistent quality bar.
  • Human-in-the-loop: Never let AI edit design files autonomously; always review drafts before pushing changes.
  • Collaborate with Developers: When generating handoff documentation, treat the output as a draft and refine it based on specific developer requirements.

Notable Quotes

  • "Designers are sleeping on Claude Code because you can use it for more than just AI design."
  • "It's not about replacing Figma or becoming a developer. It's about using Claude Opus 4.7 as a workflow layer for the time-consuming parts of product design."
  • "If you're just doing iteration, you don't want to have any AI picking up all of these small adjustments and generate documentation. It's just a complete waste."