Design Review
A designer reviews a design-system change the AI proposed (a rule, component, token, pattern or artifact) and approves, declines or sends it back before it enters the system.
≈ 1,710 tokens per use (tool 1,165 · guidance 296 · typical payload 249)How token costs are estimated
Example: Design Review
Turn this week's review comments about badges into a system rule.
No hollow badges
RuleMedium impactEvery badge is a tinted fill; neutral ones turn blue.
Design agent · From 14 review comments.| Now | ProposedAI |
|---|---|
| Status badges use tinted fills. | Every badge is a tinted fill with coloured text, no border. |
| Neutral badges are outlined. | Neutral badges are blue (info), never outlined. |
| Hand-made pills use the Badge component. |
- Contrast AA, dark mode: Passed
- Contrast AA, light mode: Passed
- Stage heights under 640px: Warning, 6 scenarios over
When to use
- The agent produced a design-system change, such as a rule, a component, a token, a pattern or a design artifact, and a designer must review it before it becomes part of the system.
- There is a before and after worth comparing, or something new worth seeing before it ships.
When not to use
- The change isn't to a design system or design artifact. Use the Approval Request or Change Preview.
- The agent hasn't run its checks yet. Run them first and report the real results.
- The agent only wants an opinion between options. Use Draft Options.
How the agent should use it
- Wait for the result. Never add the change to the system before
approve. - On
modify, apply thefeedback, plus the reviewer's own edit inproposalwhen there is one, and propose again with a new review. - On
decline, stop. Don't re-propose the same change unless asked. - Checks come from tool results. A failing check is always shown; the card warns the reviewer but still lets them approve.
- Keep the title short and put the full rule or spec in
proposed.text, one item per line (-lines become a list).
Interaction
| Control | Sends | Notes |
|---|---|---|
| Approve | approve | The one grey primary action |
| Decline | decline | Asks for an optional reason inline before sending |
| Request changes | modify | Opens "What should change?" and, when the proposal is text, an editable copy of it. Send changes is disabled, with a tooltip, until there is feedback |
The card shows what is proposed and its impact as badges beside the title, the proposer and date on one line with the date on the right, then a comparison table with Now and Proposed columns and one row per item, the checks with tinted status badges, and the evidence as a numbered source list. After a decision the card locks: the title shows Approved, Declined or Changes requested, and the footer keeps a one-line record.
Installation
npx shadcn@latest add https://your-site.com/r/design-review.json
Usage
import { tool } from "ai"
import { designReviewTool } from "@/components/genui/design-review.schema"
const tools = {
// No execute(): the call is completed by the designer's decision in the UI.
[designReviewTool.name]: tool({
description: designReviewTool.description,
inputSchema: designReviewTool.inputSchema,
}),
}The agent receives one of:
{ action: "approve", decidedAt: "2026-10-14T09:12:00.000Z" }
{ action: "decline", reason: "Conflicts with the brand guidelines", decidedAt: "…" }
{ action: "modify", feedback: "Keep outlined badges for filters you can tap", proposal: "- Every badge…", decidedAt: "…" }