Skip to content
Skillpedia
Interfaces (UI/UX)48k · #2822

deterministic-design

Lets your agent measure user interface layouts precisely and repeatably. It helps evaluate usability and distinguish objective measurements from opinions.

What it does

This tool objectively measures and evaluates the design of user interfaces. It checks if elements are correctly aligned and if the interface is easy to use, using clear numbers and rules instead of opinions.

When to use it

  • ✓When an AI-generated interface looks off or misaligned.
  • ✓To ensure the interface is user-friendly and follows best practices.
  • ✓When you need a reliable, data-driven design evaluation.

Example of what to ask your AI

“Review this interface and tell me the biggest design problems, proposing improvements.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/deterministic-design/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/deterministic-design/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

The tool renders the interface and measures it based on spacing and alignment rules. It then checks usability using known checklists, separating measurement numbers from subjective opinions.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add sickn33/agentic-awesome-skills --skill deterministic-design

Or download just the file:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/deterministic-design/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

When to Use

Use to catch AI-generated UI that "looks off", is misaligned or centered-mush, or fails usability — when you need reproducible spatial measurements and an evidence-based usability review. Metrics do not prove user success, accessibility or overall design quality. Compose it with any taste/token design skill before reporting design "done".

Source: connerkward/deterministic-design-skill (MIT).

deterministic-design

Thesis: determinism beats AI randomness. A model can't trust its own eye on layout — so don't. Render the UI and measure it.

Two sub-skills (load as needed):

  • design-spatial — deterministic layout audit: explicit grid
    • 8-pt spacing, and layout-audit.js computes centroid / optical-center / pixel-oracle balance and draws an annotated screenshot. Numbers, not vibes. Plus a render-then- critique vision loop.
  • design-ux — usability audit: scores the rendered UI against Nielsen's 10 + interaction heuristics via an authorized separate judge or clearly disclosed self-review → prioritized fix list.

This improves existing design skills (including the default Anthropic one) by adding the layer they lack — it doesn't just advise on taste, it renders, measures, and judges the output. Composable with any design skill.

In central this lives as a subdir of ckw-design; it publishes separately as deterministic-design-skill (its own distribution) via publish-skill. One of the two flagship narratives — the determinism one; its sibling is human-in-the-loop (lookdev).

Example

User request:

Review this interface with @deterministic-design, identify the highest-impact design problems, and propose an implementation-ready improvement.

Limitations

  • Layout metrics and vision-judged audits catch many spatial and usability failures, but they are not a substitute for product judgment or user testing.
  • The workflow requires a rendered UI or screenshot; record viewport, scale, fonts, capture state and measurement definitions. Separate layout measurements, subjective vision judgments and actual user/accessibility tests.
  • The linked sub-skills and layout-audit.js are external, not bundled. Read and pin them before use; the link is not executable availability. Delegation requires existing explicit authorization, and screenshots may contain private data.
  • Automated scoring can miss brand nuance, copy tone, accessibility needs, and domain-specific user expectations.
FAQ

What are 'spatial metrics'?

These are numbers that describe the positioning and spacing of elements on the screen, such as alignment and the distance between them.

Does this tool replace user testing?

No, it complements it. The metrics help find layout and usability issues, but real user testing is essential to ensure overall quality and accessibility.

Do I need to install anything extra?

Yes, the specific tools for measuring layout and usability are external and need to be loaded separately before use.

Details

Original description by the author

Measure rendered UI layout with reproducible spatial metrics and a separately assessed usability review; distinguish measurements from subjective judgments and user tests.

repo: sickn33/agentic-awesome-skills

Popularity

GitHub stars
48k
Ranking position
#2822
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills