# Design review before handoff

> Mida reviews a wireframe board against your checklist, with the scores in the pull request.

Source: https://mockflow.com/developers/examples/api/design-review-gate

Before a sprint's designs go to developers, a team checks the same things every time: are empty, loading and error states drawn, do fields have labels and validation messages, are the accessibility notes there. This example has Mida, MockFlow's AI assistant, review the wireframe board against that checklist and write the result where developers look: the pull request.

[**Download the code**](/developers/assets/examples/mockflow-design-review-gate.zip) (Node.js 18 or later, no packages)

## What it does

- Reviews the board with your checklist as the focus, and gets a score per aspect and an overall score.
- Writes a Markdown table of the feedback to `review.md`, and to the run's summary page in GitHub Actions.
- Fails the run when the overall score is below `MIN_SCORE`, if you set one.

## How it works

1. Read the checklist from `focus.txt`, up to 500 characters.
2. [Read the board](/developers/reference/boards/get-board) for its title and link.
3. [Ask Mida for a review](/developers/reference/ai/ai-review) with `POST /boards/{boardId}/ai/review` and the checklist as `focus`. The answer has `overallScore` and `feedback`, one entry per aspect with a `comment` and a `score`.
4. Write the summary, and exit with an error when the score is under the threshold.

## Run the example

Create an API key in the [developer console](/developers/console/) with the scopes `user:read`, `boards:read` and `ai:generate`, then run it with the board's `id` from [`GET /boards`](/developers/reference/boards/list-boards):

```bash
cp .env.example .env        # paste your key into .env
node review.js YOUR_BOARD_ID
```

The download includes `.github/workflows/design-review.yml`, which runs the review when a pull request gets the `design-review` label. Add the `MOCKFLOW_API_KEY` secret and the `DESIGN_BOARD_ID` variable to the repository.

## The key code

```javascript
const review = await mf.post(`/boards/${boardId}/ai/review`, { focus });

const summary = [
  `**Overall score:** ${review.overallScore ?? 'not scored'}`,
  '| Aspect | Score | Feedback |',
  '| --- | --- | --- |',
  ...review.feedback.map((f) => `| ${f.type} | ${f.score ?? ''} | ${f.comment} |`),
].join('\n');

// In GitHub Actions this file is shown on the run's summary page.
if (process.env.GITHUB_STEP_SUMMARY) fs.appendFileSync(process.env.GITHUB_STEP_SUMMARY, summary);

if (min && review.overallScore !== null && review.overallScore < min) process.exit(1);
```

## Adapt it

- **Marketing:** review a campaign board for a clear audience, message and call to action before launch.
- **Teachers:** review a student's project board against the assignment's rubric.
- **Architecture reviews:** review a cloud architecture board for single points of failure and missing monitoring.

## What you need

An API key with `user:read`, `boards:read` and `ai:generate`. Plus or Max; each review uses AI credits.