mcpField
A
ai-output-judgement

ai-output-judgement

github.com/kemiljkTesting & quality6163 installsUpdated 1w ago
Repository

About ai-output-judgement

ai-output-judgement is a review method for design and development teams refining AI-generated interface work. It calls for inspecting implementation materials and assessing semantics, tokens, layout, motion, states, and fit with the product.

Key features

  1. 01Treat generated work as a draft
  2. 02Inspect code and style materials
  3. 03Give feedback on specific failures
  4. 04Check semantics and design tokens
  5. 05Review motion and edge states
  6. 06Assess fit with product surfaces

Use cases

  1. 01Review AI-generated interfaces before release
  2. 02Find hardcoded styles and missing tokens
  3. 03Check control semantics and accessibility states
  4. 04Fix motion and state-handling issues

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kemiljk/skills --skill ai-output-judgement

After installing, type/ai-output-judgementin Claude Code to confirm it loaded.

Details

From the project README

AI Output Judgement

Models output the median of their training data. Slop appears when that median is accepted uncritically. The job is to read the draft specifically and fix the last mile.

Defaults

  1. Treat generated output as scaffolding, never as the finished answer.
  2. Review materials, not only screenshots.
  3. Name concrete failures (padding, tokens, semantics, motion, identity), not vibes.
  4. Prefer system references over one-off values the model invented.
  5. Keep human taste on the exit path to production.

Common median failures

  • Hardcoded hex/rgb instead of semantic tokens
  • div controls instead of native elements
  • transition: all / linear timing for interactive motion
  • Generic shadows, radii, and 24px padding
  • Missing empty, error, disabled, and reduced-motion states
  • React keys/identity that remount and reset state
  • Accessibility bolted on after the visual pass

Review rubric

  1. Semantics — correct element and contract?
  2. Tokens — colour, space, type, elevation from the system?
  3. Layout — intentional hierarchy, not template residue?
  4. Motion — physics/interruptibility where needed?
  5. States — hover/focus/disabled/loading/empty/error?
  6. Fit — matches neighbouring product surfaces?

Prefer / Reject

PreferReject
Draft → critique → revisePrompt → ship
Specific notes ("12px on spacing scale")"Make it nicer"
System-aware replacementsFresh one-off styling
Knowing when the model is wrongBlind trust because the preview looks polished

Review checklist

  • Did anyone read the code/CSS, not just the preview?
  • Are tokens used everywhere values repeat?
  • Are native semantics intact?
  • Is motion intentional and interruptible?
  • Do edge states exist?
  • Would you defend every leftover default as deliberate?

Source essays

  • The slop isn't the models
  • Force-multiplying design
  • AI as pair design
  • On giving AI taste

Comments

Markdown supported