A Design-Review Skill, Run by Claude Code (Figma's agent pending)
Tonight's skill is one page with three rules. The naming contract: a layer is named for its role, and a restyled instance becomes a named variant. Contrast: every text at four point five to one or better against what's behind it, computed, not guessed. And one primary action per screen. Anything the
A Design-Review Skill, Run by Claude Code (Figma's agent pending)
Tonight's skill is one page with three rules. The naming contract: a layer is named for its role, and a restyled instance becomes a named variant. Contrast: every text at four point five to one or better against what's behind it, computed, not guessed. And one primary action per screen. Anything the
Series: Figma for Educational AI Topic: FIGMA · REVIEW SKILL
Chapters
0:00 Introduction 0:26 Introduction 2:39 Your Turn
YOUR TURN
Your turn. Paste this into Claude: Here is a design-review skill, then paste the skill file. Here is one screen's get design context output, then paste it. Follow the skill exactly and write findings dot json. Then list every place the data didn't let you apply a rule. Then check two things yourself. Run it twice: same node ids and same ratios both
@NikBearBrown
Part of the Figma for Educational AI series.
Sources and citations: see the reel's SOURCES.md in the open textbook.
▶ The full series playlist — Brutalist https://www.youtube.com/playlist?list=PLG9H-C6rp5RU
What this video covers
- 0:00 — Introduction
- 0:26 — Introduction
- 2:39 — Your Turn
Transcript
A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.
Introduction
[0:00] Kai show, this is Liam in for Bear. Can an agent review a design? Better question, does it give the same review three times? Three terms, a skill, a written procedure an agent follows with its rules, its input, and its output. Contrast ratio, how much lighter one color is than the one behind it on the web accessibility scale. 4.5:1 is the floor for text. And a primary action, the one button a screen is for. This files button carries the rule one per screen in its description.
Introduction
[0:26] Tonight's skill is one page with three rules. The naming contract, a layer is named for its role and a restyled instance becomes a named variant. Contrast, every text at 4.5:1 or better against what's behind it, computed not guessed. And one primary action per screen. Anything the data doesn't show goes into a cannot judge list, never into a finding. The screen is Film 8's quiz results drawn by an agent in a duplicate file. This film read it once through the MCP server as data, one call. The data came back with Bear's review note on the frame and without one thing, component instances have no node IDs in it. Keep that in mind. Then three headless Claude code sessions started at the same moment, each with the skill, the data, and the same one-line prompt. Same default model, Claude
Sonnet 4.6. Two finished in 5 and 6 minutes, the third took 15. And the CLI reported 58 cents, 52 cents, and a dollar eight at list price under Bear's login, not money charged to a card. All three found the same four things. The second button named button but restyled white fill, dark border. The quiz name 3.5:1. The score 2.96:1. And two primary actions on a screen whose button says one per screen. Same node IDs, same ratios in every run. Then the split run three added two more. The button label white on terracotta 3.12. The card body gray on white 3.68. Runs one and two saw the same colors and filed them under cannot judge because those texts sit inside instances and the data gives an instance no ID to hang a finding on. The rule found the fault
Three times. The skill's wording decided whether it counted. A script applying the same three rules to the same data finds eight, counting each card once. Every run got the four the data names by ID. None got the four inside instances as instances. So, across the runs, agreement is four of six. And one small thing, run one wrote 3.49 where the others wrote 3.50. The exact ratio is 3.496, same number rounded two ways. So, is a written review skill consistent? Middle. Consistent where the data names the layer, split where it doesn't. The fix is in the skill, not the model. One line saying what to do when an instance has no ID. And the half this film is named for the same skill inside Figma's own agent, three runs. The credit meter read before and after is pending bear.
Your Turn
[2:39] Your turn. Paste this into Claude. Here's a design review skill, then paste the skill file. Here's one screen's get design context output, then paste it. Follow the skill exactly and write findings.json. Then list every place the data didn't let you apply a rule. Then check two things yourself. Run it twice. Same node IDs and same ratios both times. And recompute one contrast ratio by hand with the formula in the skill. A design review skill run by Claude code, Figma's agent pending at Nick Bear Brown.
