AI WORKSHOP / WCAG / FIGMA Arnesh Mandal · 2026
Building a WCAG Figma Plugin with AI

From accessibility standards to a working audit tool.

A working plugin is the proof. The real story is the workflow that produced it.

WCAG Figma Plugin

First, the artifact.

Every WCAG criterion that can be checked from the design runs against the selected Figma frame in one click — contrast, target sizes, focus visibility, labels, image semantics. No browser, no export, no API call. The audit happens in the file where the designer is already working.

/wcag-figma-plugin

Most tools stop at contrast.

2
Where most tools stop Text & non-text contrast
16
What this plugin adds structure · state · labels · motion · language · evidence
WCAG 2.1 AA · design-stage · 18 criteria
Contrast
Text contrastWCAG 1.4.3 · GIGW · IS 17802
Non-text contrastWCAG 1.4.11 · GIGW · IS 17802
Structure & labels
Typography readabilityDesign heuristic · GIGW
Form input labelsWCAG 3.3.2 · GIGW · IS 17802
Headings & labelsWCAG 2.4.6 · GIGW
Link purposeWCAG 2.4.4 · GIGW
Interaction & state
Touch targetWCAG 2.5.8 · IS 17802
Focus visibleWCAG 2.4.7 · GIGW · IS 17802
Use of colorWCAG 1.4.1 · GIGW · IS 17802
Error identificationWCAG 3.3.1 · GIGW
Error suggestionWCAG 3.3.3 · GIGW
Time, motion & sensory
Text reflowWCAG 1.4.4 / 1.4.10 · GIGW
Sensory characteristicsWCAG 1.3.3 · GIGW
Timing adjustableWCAG 2.2.1 · GIGW
Pause / stop / hideWCAG 2.2.2 · GIGW
Pointer + motionWCAG 2.5.1 / 2.5.4 · GIGW
AI
Image of text (vision)AI · WCAG 1.4.5 · GIGW
Visual reviewAI · observation
335 tests 154 audit logic · 75 output · 55 design-reading · 51 core 0 runtime dependencies · workshop-informed scope
SLIDE 04 / ENGINEERING

The engineering behind the audit.

Going beyond contrast meant teaching the plugin to read design structure, state, intent, and evidence.

01

Design reading layer

Pulls nodes, hierarchy, fills, strokes, text, variables, and bounding boxes from the Figma file.

nodes · fills · strokes · bbox · variables

02

Background resolution

Walks ancestor groups and surfaces to find the true background behind any text or shape.

parent walk · ancestor surface · alpha blend

03

Detection heuristics

Combines geometry, regex, and component naming to classify inputs, buttons, links, and image-text candidates.

regex · geometry · component names · clickables

04

Deterministic audit engine

Runs every non-AI WCAG check and emits a pure DTO of pass, flag, or unable-to-test outcomes.

WCAG checks · pure DTO · pass/flag/unable

05

Variant diff engine

Diffs default, focus, and error variants to catch missing focus rings and color-only error states.

variant tree · focus · error · diff

06

Designer intent layer

Explicit include and exclude marks let designers override static inference when intent cannot be read from geometry.

include · exclude · intent override

07

AI enhancement layer

A vision LLM handles image-of-text and visual review cases that deterministic rules cannot resolve.

vision LLM · image bytes · master prompts

08

Provider abstraction

A single VisionProvider interface hides API, CORS, auth, and JSON-mode differences across three LLM vendors.

VisionProvider · CORS · JSON mode

09

Reliability + debug

Copy-debug reports, tests, and per-user key storage make the tool inspectable in real workflows.

copy debug · tests · clientStorage

So how did I build this with AI?
06 Mega-flowchart · how it actually got built
CLAUDE.md · continuous context
QA · debug loop · reliability
Select real component Run audit Copy debug report Paste into Claude Diagnose Patch + re-run
335 tests 27 test files task-list QA multi-round review code-simplifier debug-notes.md
260515-wcag-mega-flow
SLIDE 07 / CONTEXT ENGINEERING

The lesson under the chaos.

Every arrow in that flowchart was one thing: giving the AI the right context at the right time.

  1. 01

    Plan before implementation

    Make the task explicit in markdown before asking the AI to execute it.

  2. 02

    Unstructured input → structured artifacts

    Turn raw material into artifacts both humans and AI can reason over.

  3. 03

    Continuous re-planning

    Plans are living context, rewritten as you go — not one-time setup.

SLIDE 08 / AI INTERFACES

Three AI surfaces I had to shape.

AI was never just plugged in — each shape had to be understood and shaped before it produced value.

01

WhisperX

Unstructured input → structured artifacts

  1. workshop audio
  2. WhisperX
  3. VTT transcripts
  4. Claude synthesis
  5. workshop-notes.md
  6. gap review / roadmap

Raw workshop recordings became usable project context.

02

Figma MCP / Figma Plugin API

Tool-context before leverage

  1. Figma design
  2. MCP node tree / properties
  3. understand output shape
  4. extraction logictoken-efficient processing

I didn’t just ask AI to inspect Figma — I first understood what MCP returned and designed around that structure.

03

Vision LLM

AI inside the product

  1. designer API key
  2. local storage
  3. master prompts + image bytes
  4. provider abstractionOpenRouter · Anthropic · Google
  5. opinion-based visual review

Runtime AI is opt-in, BYO-key, prompt-controlled, and labelled opinion — not measurement.

WHAT AI MADE POSSIBLE

AI closed the gap
between knowing the standard
and shipping the tool —
one head now spans
what used to take a team.

The product is the evidence. The judgment is the work.