Ui Evaluator logo

Ui Evaluator

Community
Bandersnatch0x
ui-evaluator

Run evidence-backed UI acceptance. Use after generating a page, or when the user wants a design review or recirculatable critique against declared goals and success criteria.

Overview

PublisherBandersnatch0x
Repositorydesign-playbook
Skill nameui-evaluator
Stars
3
Forks
0
Bundled files
3
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 3 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by Bandersnatch0x on GitHub. Read the source before you install it.

Installation

Install the Ui Evaluator AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/Bandersnatch0x/design-playbook/tree/main/packages/design-playbook/skills/ui-evaluator
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/Bandersnatch0x/design-playbook.git /tmp/design-playbook
mkdir -p .claude/skills
cp -r /tmp/design-playbook/packages/design-playbook/skills/ui-evaluator .claude/skills/ui-evaluator
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Ui Evaluator in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Ui Evaluator on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Ui Evaluator is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

ui-evaluator

Evaluator contract: turn declarations into checks. Do not invent new taste standards. Every issue points back to a declaration.

Steps

1. Bind declarations

Identify which of these apply to this surface (repo files, prior turns, or design-playbook defaults): spec · domain · craft · design · components · template.

When a verified .scratch/<run>/design-baseline/state.json binds a baseline (status: ready, path from baseline.path), include it as the project-specific visual declaration. It can support design-drift findings but is never L6 runtime proof by itself. An explicit status: waived disables baseline-drift checks for that run. It does not waive spec, accessibility, or craft checks.

When .scratch/<run>/reference/contract.md exists (ADR-0011), you may use it as supporting context for Do not copy findings. These include copied brand chrome, distinctive illustration, or other breaches. Set source to reference or the owning declaration. It is never L6 proof and never a Pass or Fail gate by itself.

Done when: the check set is named. If spec L6 exists, every criterion and its required proof are on the list.

2. Run checks

Walk every applicable row (exhaustive for bound declarations):

CheckSource
Empty / loading / error / permissionspec
Risk color, secrets, dangerous opsdomain
AI slop, hierarchy, purposeless motioncraft
New surface drifts from confirmed project visual roles and patternsbound <binding.path>
Raw hex / px / ms (unlogged)design
Badge and Tag, Dialog and Drawer, …components
Shell matches scenetemplate
Each L6 acceptance itemspec
Required proof exists for each L6 itemspec

Dimension selection, recirculate examples, the preview-seam health check (required when the run produced preview/ artifacts), and the observe* mirror-surface finding (required when any manifest capture notes surface: mirror): references/rubric.md.

When L6 proof includes an a11y tree artifact, interpret it with references/a11y-tree.md (names, roles, states, keyboard path, focus, material omissions). Record accessibility evidence on the owning user-risk criterion. Do not invent separate taste standards.

When .scratch/<run>/craft-guard.md exists, consume exactly one seven-column audit row for every registry craft entry whose applicability predicate evaluates to applicable. Use the full catalog, or every enabled subset row when the contract declares a smaller set. Registry: ../design-playbook/references/rules.md. Summarize the applicable count, and warn when every evaluated entry is not-applicable, any not-applicable row lacks an observable reason, or the blocked rate is abnormal. Audit rows are advisory. Verify their rendered and source evidence and exception checks. Use the authoritative recirculate map below to choose declaration source and assign severity. A detector never decides source, severity, or verdict. Carry every blocked row into evaluation as a craft proof gap. Implemented UI cannot claim complete craft Pass while required rendered or source proof is blocked. Planning-only work records an explicit not-applicable reason without claiming rendered inspection. Keep craft detector rows out of the G6 manifest and L6 evidence ledger: they are craft-stage audit records, not runtime artifacts or criterion results.

Record an evidence ledger before writing findings. Every L6 criterion has exactly one row:

text
criterion: L6.<n>
required:  <declared proof>
observed:  <artifact path, interaction, check result, or missing>
result:    pass|fail|blocked|N/A

observed is either an artifact path (relative to the run root, e.g. evidence/L6.3-error.png) when a runtime capture was bound by a manifest, or free-text describing a manual observation. Both are legitimate. The machine seam (G6) only validates artifact-path references. When using an artifact path, keep the path as the leading token of the line (e.g. observed: evidence/L6.3-error.png). Trailing commentary is tolerated by G6; it reads the leading token, breaking on whitespace, ( / (, or , / , / : / :. Other punctuation (em dash, slashes, etc.) will be treated as part of the path, so put elaboration on a separate note: line for clarity when unsure.

Evidence is captured, not judged. A manifest entry records that an artifact was collected at a state; it does not say the criterion passed. pass/fail is this evaluator's verdict against required vs observed. A screenshot can prove a criterion false. Three ledgers, each one authority: spec L6 names what to prove. The manifest records what happened. This ledger decides what it means. Providers produce artifacts. The manifest binds them to criteria. The evaluator decides. For a page-probe/v1 sidecar, read layout.measurement_status, defects.measurement_status, and console.measurement_status before interpreting leaks / tapFails / consoleErrors; blocked or unmeasured is ledger blocked, never a clean pass. Those arrays are candidate observations, not automatic blocking. A fail or blocked L6×viewport pair is not rescued by another viewport's pass. captured/ok is not proof the declared target page was reached.

For implemented UI, visible-state proof is a rendered inspection at the declared target viewport. Behavior proof is an interaction trace or automated check. Code-health proof is the relevant available test, type and lint, or affected build result. Planning-only proof is declaration coverage and must not claim a render or test occurred. Non-L6 declaration checks may be supporting observations or findings. They do not enter the machine ledger.

The host model may have no vision (text-only input). Reading a screenshot would break such a session, never make viewing an artifact a review action. Render artifacts stay bound as path references (manifest + ledger observed). Machine assertions judge the text face: HTML and CSS source, a11y tree text, and interaction-trace action records. An interaction trace is a Playwright trace ZIP. Unzip before reading; the artifact is not JSON. A no-vision run reviews this way end to end without degrading the protocol. Note it once in the Limitations statement ("this run was reviewed on text-face evidence").

Done when: every bound row was considered. Every L6 criterion has exactly one non-empty criterion / required / observed / result row keyed as L6.<n>. Results use only pass|fail|blocked|N/A. Any unavailable required proof is blocked, not skipped.

3. Emit point-back findings

text
issue:    <observable>
source:   <declaration>
fix:      <next edit>
severity: S3|S2|S1|S0
track:    product|interaction|cross-cutting

Severity is the consequence axis: S3 blocking-severity, S2 major, S1 minor, or S0 positive or info. Grade by user-visible impact and reference the affected L6 or primary-path node. The legacy values high (blocking)|high|med|low are no longer legal (alias period ended, v0.20.0 breaking change). They are structural errors at G2. Write the axis values directly: high (blocking) maps to S3 + disposition: blocking, high to S2, and med or low to S1.

track is required: every finding declares which review track produced it, product (per-L6 acceptance), interaction (primary-path walkthrough dimensions), or cross-cutting (applicability-matrix families). The machine seam is unchanged (G2 validates the value only when the line is present). An omitted track is a review defect to fix here, not a structural error.

Additional field lines (machine-tolerated; validated when present) complete the review axis:

text
confidence:  high|medium|low   (evidence layers x reproducibility x judging subject)
disposition: blocking|advisory|info   (severity x fact/judgment class x confidence)
evidence:    <artifact path or source ref, may repeat>
assumes:     <assumed contract field paths the finding depends on, if any>
rule:        <registry ID@version refs, when a registry rule is involved>
dd:          <decision-report entry ref, when a design decision is challenged, never on positive (S0) findings>
id:          <run-unique token>
status:      open|resolved|new|regression  (optional; omit = no re-review annotation, not a second closure authority)

On a new P2/P3 observe* blocking finding, assign a non-empty run-unique id on first write and reuse it when the issue text is rewritten. Older reports without id stay legal; G2 does not backfill them. status never overrides a current - closes: line.

When a previously closed blocker regresses, keep the same id. Move the old - closes: line into history:, where it must not match CLOSURE_LINE. Put the stale artifact on invalidated: and recapture new evidence. Before Pass, write exactly one current - closes: against that new artifact.

Probe arrays may contain secrets (cookie, token, and session text in leaks or consoleErrors). In point-back and any shareable summary write seen, omitted, do not copy the secret string. The sidecar file stays the fact store.

Severity and disposition are two axes. A judgment-class S3 (subjective, semantic, or representativeness) is never directly blocking. List it in the Limitations "pending user adjudication" sub-block. Offer three options: change declaration, accept risk, or promote to the rule-registry queue. Only fact-class S3 (reproducible, evidence-bound) takes disposition: blocking and enters G4 closure.

Order: blocking first (broken L5/L6, unsafe dangerous ops, removed focus rings), then polish.

Done when: every finding has all five fields (track included). No “generally improve the design” lines. Additional fields use only their declared value sets.

4. Verdict

  • Emit exactly one ## Verdict section containing exactly one anchored verdict: Pass or Recirculate.
  • Pass. zero blocking. Every L6 criterion has exactly one evidence row. For Pass, every required evidence row passes (every evidence result is pass). Token gaps are logged or fixed.
  • Recirculate. each blocking source names the step and declaration to reopen in design-playbook; fail or blocked evidence remains visible.

For a repaired blocker, record exactly one closure line whose target is the finding id when present, otherwise the issue text (same normalisation as G4):

text
- closes: <id or exact issue value> -> recirculate -> fix -> re-eval -> 0 blocking

Done when: the explicit verdict is structurally unique. Blocking sources are non-empty. Every blocking finding has exactly one matching closure before Pass. A blocking finding cannot be waived inside a Pass artifact. Without a user in the loop, blocking findings remain in recirculate and the run requests a decision. Re-evaluate only after an explicit user decision updates the owning declaration or severity. Record it against the user's statement or decision record. The final Pass artifact contains no blocking severity.

5. Six-block report structure

The report artifact remains point-back.md (no new file). The machine face is unchanged, four-field findings, four-field ledger rows, closure lines, verdict semantics, and existing parsers tolerate the new blocks. The full structure:

text
## Evidence ledger          (one row per L6; required rows may note assumed deps)
## Findings                 (five fields + additional field lines)
## Positive findings        (S0/info rows + pattern-level positives; AC-level
                             positives are the ledger pass rows themselves)
## Coverage statement       (exhaustive-review completion / sampling + reasons /
                             explicit unreviewed list; G11 checks existence)
## Limitations statement    (judgment-class dimensions, no-user-evidence scope,
                             pass scope, assumed dependencies, machine-face
                             boundary, text-face review note when no visual
                             evidence was read, pending-user-adjudication
                             sub-block)
## Verdict                  (exactly one Pass|Recirculate + closure lines)

An empty Findings block is a fact, not an omission: keep the ## Findings heading and write the single literal marker line findings: none inside it. Never transcribe a placeholder ('none blocking', 'not applicable') into finding field values, a placeholder is not a finding, and cross-run derivation groups field values verbatim.

Coverage levels:

  • exhaustive: primary path, required rare paths, and per-page five-state matrix, with no exceptions.
  • sampled: edge cases by five-state x page matrix, with reasons recorded.
  • explicit unreviewed: everything else, never defaults to pass. Unreviewed is not pass: it produces no pass contribution.

Positive findings are acceptance evidence, not decoration. Every L6 pass on implemented UI requires at least one bound rendered or interaction artifact. Measurement and source corroborate but never carry a pass alone. Planning-only passes rest on declaration coverage and must not claim a render or test occurred. Missing evidence is blocked (unverifiable), never fail, "not tested" and "tested and failed" are different facts.

Done when: all six blocks are present. The Coverage statement names the exhaustive completion status and the explicit unreviewed list (G11). Every pass row cites bound evidence. Limitations name the judgment-class dimensions and assumed dependencies. Machine check right after writing point-back.md: python scripts/g2_g4_pointback.py .scratch/<run>/point-back.md, do not wait for the end-of-run validate_run.py sweep.

After Recirculate, use references/repair.md for the smallest owning declaration, the R1-R5 second-hop route, and which evidence to invalidate.

The artifact shape behind this verdict is machine-checkable. scripts/validate_run.py gates L1-L6 and ordered Given, then When, then Then in every top-level L6 item. It requires one non-empty four-field evidence row per L6.<n>, allowed evidence results, and all-pass evidence for Pass. It also requires four non-empty finding fields, one explicit verdict, and one exact issue-linked closure per blocking finding. These checks are the completion criteria above, not extra prose.

After Recirculate, use references/repair.md for the smallest owning declaration and which evidence to invalidate.

Recirculate map (authoritative)

Single source of truth for routing an observable to its declaration. The orchestrator and other skills point here. Do not duplicate it. Routing has two hops. First map the observable to a declaration artifact. Then map the declaration artifact to an R1-R5 repair target. See references/repair.md for the full second-hop table and the invalidated: evidence-set block.

ObservableDeclarationSecond hop (default)
Happy path only. Empty, fail, and auth missingspecR2 (interaction model: five-state / path rows)
Wrong business meaning / risk / secretsdomainR1 (requirement subtree reopen when undeclared)
AI slop, flat hierarchy, purposeless motioncraftR4 (implementation)
New UI visually conflicts with confirmed existing-product baselinebound <binding.path>R3 (design decision)
Scattered hex, px, and msdesignR4
Badge↔Tag, Dialog↔Drawer mixupscomponentsR4
Wrong page shell (e.g. list as card wall)templateR4
Desktop app feels like a web page / wrong seamnative-craftR4
Copied third-party brand / Do not copy breachreference (supporting) belongs to fix in Fill / re-intakeR4
Undeclared product requirement / unjudgeable criterion / falsified assumptionre-open ux-spec shapingR1
Capture plan cannot answer the criterion / provider absentobserve* seamR5 (evidence plan)
Critique with no ownerre-run ui-evaluator,

Fix only the owning layer (minimum owning set). Repair in order R1, R2, R3, then R4; R5 may append after any layer. Resume from the pipeline step that consumes it.

Guard

Prefer positive fixes in fix. Reserve bans for non-negotiables (e.g. open dangerous action without confirm) and always pair with the required behavior.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Ui Evaluator AI skill do?

Run evidence-backed UI acceptance. Use after generating a page, or when the user wants a design review or recirculatable critique against declared goals and success criteria.

Why use Ui Evaluator on TypingMind?

Because you install it once and use it with any model. Ui Evaluator is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Ui Evaluator in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/Bandersnatch0x/design-playbook/tree/main/packages/design-playbook/skills/ui-evaluator. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Ui Evaluator?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Ui Evaluator?

As many as you like. As long as a model supports skills, you can use Ui Evaluator with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Ui Evaluator AI skill free?

It is published on GitHub by Bandersnatch0x. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇