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
Ready-to-paste message
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-designOr 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.mdTechnical 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.jscomputes centroid / optical-center / pixel-oracle balance and draws an annotated screenshot. Numbers, not vibes. Plus a render-then- critique vision loop.
- 8-pt spacing, and
- 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.
Popularity
- GitHub stars
- 48k
- Ranking position
- #2822
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC