How to Build an AI-Powered Design Feedback Workflow

This guide walks you through building a repeatable AI-powered design feedback workflow that connects Figma, Claude, and Notion. You will have a working system in about two hours, and it will save your team two to four hours of review time per design sprint.

What You'll Build

• A Figma export routine that packages screens with structured annotations for AI review
• A Claude prompt template that generates specific, actionable design feedback against WCAG 2.2 and usability heuristics
• A Notion feedback database that logs AI-generated notes alongside human reviewer comments
• A Slack notification step that routes feedback to the right designer automatically
• A review checklist that closes the loop between AI suggestions and shipped changes

Prerequisites

• Figma Professional or Organisation plan (required for the Dev Mode API, as of 2026)
• An Anthropic API key with access to Claude 3.5 Sonnet or Claude 3 Opus
• A Notion workspace with a database you can duplicate
• A Slack workspace where you can install apps
• Make (formerly Integromat) account on any paid plan, or n8n self-hosted
• Node.js 20+ and pnpm 9 if you want to run the optional local script

Step 1: Set Up Your Figma Export Structure

Why does the export structure matter?

Claude cannot open Figma files directly. You need to give it a flat, readable representation of your screens. A consistent export structure means your Claude prompt can stay the same across every project.

Open the Figma file you want to review. Create a dedicated page called AI Review Export. Copy every frame you want reviewed onto this page. Name each frame using this pattern:

[ScreenID] - [Screen Name] - [State]

Examples:
S01 - Onboarding Step 1 - Default
S02 - Onboarding Step 1 - Error
S03 - Dashboard - Empty State

Then export each frame as a PNG at 2x resolution. Use File > Export in Figma and select all frames on the AI Review Export page at once.

Common pitfall: Designers often export at 1x. At 1x, small text and icon details are blurry when Claude processes the image. Always use 2x.

How do you extract the annotation data?

Alongside each PNG, you need a short text annotation. In Figma, add a sticky note component to each frame before exporting. Include the following fields:

Screen: S01 - Onboarding Step 1 - Default
User goal: Complete account creation
Key components: Progress bar, email input, CTA button
Open questions: Is the error state accessible?
Designer: [Name]

Export these notes as a single Markdown file. You can paste them manually, or use the Figma REST API to pull frame descriptions if your team has engineering support.

Step 2: Write a Reusable Claude Prompt Template

What makes a good design feedback prompt?

Vague prompts produce vague feedback. You need to constrain Claude to a specific role and a specific set of criteria. The prompt below references Jakob Nielsen's 10 usability heuristics and WCAG 2.2 success criteria, which are the two most widely accepted frameworks for digital product review.

Save this as design-feedback-prompt.md in your project repository:

You are a senior UX designer and accessibility specialist.
Review the attached screen image and annotation.

Evaluate the design against:
1. Nielsen's 10 usability heuristics (NN/g, 2026)
2. WCAG 2.2 success criteria (Level AA minimum)
3. Mobile-first usability on 375px viewport

For each issue found, return:
- Heuristic or criterion violated
- Severity: Critical / Major / Minor
- Specific element affected (use the annotation labels)
- Suggested fix (one sentence, concrete)

Do not praise the design. Only report issues.
Limit your response to 10 issues maximum.
Format your response as a JSON array.

Annotation:
{{ANNOTATION}}

The JSON output format is deliberate. It makes the next step, importing into Notion, straightforward to automate.

Pro tip: Add a line specifying the product type. For example, "This is a B2B SaaS dashboard for finance teams in Australia." Claude adjusts its feedback based on context, and business-specific framing reduces irrelevant suggestions by a noticeable margin.

Step 3: Send Screens to Claude via the API

How do you pass an image to Claude's API?

Claude 3.5 Sonnet supports vision. You can send base64-encoded images alongside your prompt text. The following Node.js script processes one screen at a time.

// feedback-runner.mjs
// Node 20+, pnpm 9
// pnpm add @anthropic-ai/sdk fs-extra

import Anthropic from '@anthropic-ai/sdk';
import fs from 'fs-extra';
import path from 'path';

const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

const promptTemplate = await fs.readFile('./design-feedback-prompt.md', 'utf8');

async function reviewScreen(imagePath, annotation) {
  const imageBuffer = await fs.readFile(imagePath);
  const base64Image = imageBuffer.toString('base64');

  const filledPrompt = promptTemplate.replace('{{ANNOTATION}}', annotation);

  const response = await client.messages.create({
    model: 'claude-3-5-sonnet-20241022',
    max_tokens: 1024,
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'image',
            source: { type: 'base64', media_type: 'image/png', data: base64Image },
          },
          { type: 'text', text: filledPrompt },
        ],
      },
    ],
  });

  return JSON.parse(response.content[0].text);
}

// Usage
const feedback = await reviewScreen('./exports/S01.png', `
Screen: S01 - Onboarding Step 1 - Default
User goal: Complete account creation
Key components: Progress bar, email input, CTA button
Open questions: Is the error state accessible?
Designer: Priya
`);

console.log(JSON.stringify(feedback, null, 2));

Run with:

ANTHROPIC_API_KEY=your_key node feedback-runner.mjs

Expected result: a JSON array of up to 10 issue objects, each with severity, element, and fix fields. Processing one screen takes around 8 to 12 seconds on Claude 3.5 Sonnet.

What if Claude returns malformed JSON? Add a try/catch around the JSON.parse call and log response.content[0].text raw. Claude occasionally wraps JSON in a markdown code fence. Strip the fence characters before parsing.

Step 4: Push Feedback into a Notion Database

Why store feedback in Notion instead of a doc?

A Notion database lets you filter by severity, assign issues to designers, and track resolution status. A Google Doc or Slack message disappears into history. Notion keeps your feedback auditable across sprints.

Duplicate the Lenka Studio design feedback database template or create a new database with these properties:

• Screen ID (Text)
• Issue (Title)
• Severity (Select: Critical, Major, Minor)
• Criterion (Text)
• Suggested Fix (Text)
• Assigned To (Person)
• Status (Select: Open, In Review, Resolved)
• Sprint (Text)

Use the Notion API v1 to create a page per issue. The following Make scenario handles this without custom code.

In Make, build this sequence:

1. Trigger: Webhook (receives the JSON array from your Node script or a manual HTTP request)
2. Iterator: Loops through each issue object in the array
3. Notion: Create Database Item (maps each field from the issue object)
4. Slack: Send Message (posts a summary to your design team channel)

The Make HTTP module can also call the Claude API directly if you want to avoid running the Node script locally. For teams without a developer, this no-code path works well in practice.

Step 5: Route Notifications to the Right Designer in Slack

What should the Slack message include?

Keep the message short. Designers should be able to action it without opening Notion first for minor issues.

*Design Feedback: S01 - Onboarding Step 1*
:red_circle: Critical — CTA button contrast ratio below WCAG AA (3.8:1 vs required 4.5:1)
Fix: Darken the button background to #1A6BCC
Assigned to: @Priya
View in Notion: [link]

In Make, use the Slack module's Block Kit builder to format this cleanly. Use a conditional filter to only post Critical and Major issues to Slack. Minor issues go straight to Notion without a notification, which reduces alert fatigue.

Common pitfall: Sending all 10 issues as individual Slack messages. Group them into one message per screen instead. Use Make's aggregator module to collect all issues for a screen before posting.

Step 6: Close the Loop With a Resolution Checklist

How do you stop issues from being ignored?

AI feedback is only useful if it changes the design. Add a mandatory review step to your Figma handoff checklist. Before any frame moves to the developer handoff stage, a second designer must mark each AI-flagged issue as either Resolved or Accepted Risk in Notion.

Accepted Risk means the team has consciously decided not to fix the issue, usually due to a constraint like a brand colour that cannot change. This prevents issues from being silently dropped.

Teams at agencies like Lenka Studio run this check at the end of every design review meeting, treating the Notion board as the single source of truth for design quality.

Set up a Notion filter view called Handoff Blockers that shows all Critical issues with Status set to Open. Share this view with your project manager. Any frame with a handoff blocker cannot be moved to development.

Frequently Asked Questions

Next Steps

Once this workflow is running, extend it in two directions. First, add a weekly Notion rollup that shows which designers have the highest rates of resolved Critical issues. This gives team leads a clear signal on design quality over time. Second, expand the Claude prompt to include brand guidelines. Paste your colour tokens and typography scale into the prompt so Claude can flag deviations from your design system automatically.

If your team is managing multiple products or client projects and wants help structuring a scalable design review process, the team at Lenka Studio works with SMBs across Australia, Singapore, Canada, and the US to build design operations that ship clean, accessible interfaces consistently. Get in touch to talk through what a structured workflow looks like for your team.