Step 01 of 04 · Accessibility Audit
Scan Component — Detect Violations
Plugin Panel — Live
Step 01
AI detects the violation
The plugin scans the selected frame and reports contrast violations with exact values — not generic warnings. The designer sees the specific fill and background causing the failure.
Contrast Audit
1:1 contrast ratio flagged. Fill
#ffffff on background #ffffff — identical colors, zero contrast. The plugin identifies both the violating element and the component context (2-1 - pager).Specificity
Not a generic warning. The audit surfaces the exact hex values, the element name, and a Zoom shortcut to navigate directly to the violation — reducing the time-to-fix from minutes to seconds.
AI Does
Scans frames, calculates contrast ratios, identifies WCAG violations, flags specific elements
Designer Does
Reviews the report, decides which violations to address, navigates to flagged elements
Step 02 of 04 · Fix Suggestion
Surface Fix — Specific Alternative Proposed
Plugin Panel — Fix Surfaced
Step 02
A specific fix — not a warning
The plugin proposes a concrete accessible alternative. The designer sees the suggested color swatch, the hex value, and can pull from existing styles rather than guessing.
Actionable Output
#9a9088 proposed as override fill. Not "improve your contrast." A specific value the designer can apply directly or use as a starting point — the difference between a linter and a tool.From Styles
"From styles" pulls from the existing token library. The fix stays within the design system — reducing the risk of introducing a one-off value that breaks token governance.
AI Does
Calculates a compliant fill value, surfaces existing styles that pass, provides a specific recommendation
Designer Does
Chooses whether to apply the suggestion, pick from styles, or override with a different value
Step 03 of 04 · Designer Authority
User Override — Intentional Choices Preserved
Plugin Panel — Typography
Step 03
The designer stays in control
The plugin infers heading hierarchy from frame structure — but the designer can accept, edit, or override any label. Intentional design choices are never overwritten automatically.
Inferred, Not Imposed
Labels are inferred from frame type. The plugin reads the structure and suggests semantic labels (h1, h2, h3) — but exposes them as editable fields. The designer confirms or corrects the inference.
Governance Principle
AI earns authority through accuracy, not assumption. If the plugin gets an inference wrong, the designer fixes it and moves on. Nothing is applied silently. This is the same principle that governs the Billing Intelligence system — AI prepares, human approves.
AI Does
Reads frame structure, infers heading levels, suggests semantic labels, flags hierarchy gaps
Designer Does
Reviews inferences, edits labels where the AI is wrong, applies changes explicitly via "Apply typography"
Step 04 of 04 · Structured Output
Export — Design Tokens + Engineering Docs
Plugin Panel — Export
Step 04
Structured output for engineering handoff
The plugin exports audited tokens as structured JSON and auto-generates markdown documentation — closing the design-to-engineering gap without a separate handoff step.
Token Output
Design tokens exported as structured JSON. Compatible with Style Dictionary and standard token pipelines. Engineers can consume the output directly without re-interpreting the design.
Sample output
// design-tokens.json
{
"color": {
"text": {
"primary": { "value": "#0f1117", "type": "color" },
"muted": { "value": "#6b7280", "type": "color" }
},
"surface": {
"default": { "value": "#ffffff", "type": "color" },
"raised": { "value": "#f4f4f6", "type": "color" }
}
},
"typography": {
"heading": { "value": "DM Serif Display / 32px" },
"body": { "value": "Instrument Sans / 16px" }
}
}
Plugin Does
Structures tokens into JSON, generates markdown docs, formats for Style Dictionary compatibility
Designer Does
Chooses export format, imports into token pipeline, shares with engineering team