Audit UI layouts with deterministic spatial measurements
Measure and prove UI balance with deterministic layout audits—numbers, not vibes—before shipping AI-generated designs.
Maintainer of this project? Claim this page to edit the listing.
1.0.0Add to Favorites
Why it matters
Validate AI-generated UI designs by rendering them and measuring spatial balance, alignment, and usability with deterministic metrics instead of relying on subjective visual judgment.
Outcomes
What it gets done
Compute centroid, optical-center, and pixel-oracle balance scores from rendered UI screenshots
Audit layouts against 8-point grid spacing rules and generate annotated visual reports
Score usability against Nielsen's 10 heuristics using a fresh-eyes judge model
Generate prioritized fix lists for spatial misalignment and interaction failures
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/ag-deterministic-design | bash Overview
Deterministic Design
deterministic-design renders UI and measures it with deterministic metrics to catch layout and usability failures. The design-spatial sub-skill audits layouts using 8-pt grid spacing and computes centroid, optical-center, and pixel-oracle balance with annotated screenshots. The design-ux sub-skill scores rendered UI against Nielsen's 10 heuristics using a separate fresh-eyes judge that outputs prioritized fixes. Use this skill when AI-generated UI looks misaligned, centered-mush, or fails usability and you need to prove balance with numbers instead of trusting the model's eye. Compose it with any taste or design skill before finalizing work, but note it requires a rendered UI or screenshot and cannot replace product judgment or user testing.
What it does
deterministic-design is a reusable skill that catches AI-generated UI failures by rendering interfaces and measuring them with deterministic metrics rather than trusting a model's visual judgment. It provides two sub-skills: design-spatial performs layout audits using 8-pt grid spacing and computes centroid, optical-center, and pixel-oracle balance with annotated screenshots, while design-ux scores rendered UI against Nielsen's 10 heuristics plus interaction principles using a separate fresh-eyes judge that outputs a prioritized fix list.
When to use - and when NOT to
Use this skill when AI-generated UI "looks off", appears misaligned or centered-mush, or fails usability checks - when you need to prove a layout is balanced and usable instead of trusting the model's eye. Compose it with any taste or token design skill before reporting design "done". The workflow requires a rendered UI or screenshot; it cannot validate components that have not been built or captured. Do NOT use this as a substitute for product judgment or user testing - automated scoring can miss brand nuance, copy tone, accessibility needs, and domain-specific user expectations.
Inputs and outputs
You provide a rendered UI or screenshot of an interface. The design-spatial sub-skill returns layout audit data including centroid, optical-center, and pixel-oracle balance calculations, plus an annotated screenshot showing spatial measurements against an 8-pt grid. The design-ux sub-skill returns a usability score based on Nielsen's 10 heuristics and interaction principles, delivered as a prioritized list of fixes from a separate vision-based judge.
Integrations
This skill is composable with any existing design skill, including the default Anthropic design skill. It lives as a subdir of ckw-design in the central repository and publishes separately as deterministic-design-skill. Load the two sub-skills as needed: design-spatial for layout audits and design-ux for usability audits.
Who it's for
This skill is for teams and developers who need to validate AI-generated UI with objective measurements rather than subjective visual assessment. It improves existing design skills by adding a measurement and judgment layer they lack - it doesn't just advise on taste, it renders, measures, and judges the output. It represents the determinism narrative in the skill ecosystem, with a sibling skill focused on human-in-the-loop workflows (lookdev).
Source README
When to Use
Use to catch AI-generated UI that "looks off", is misaligned or centered-mush, or fails usability - when you need to PROVE a layout is balanced and usable instead of trusting the model's eye. 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 a SEPARATE fresh-eyes judge → 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 asdeterministic-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).
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; it cannot validate components that have not been built or captured.
- Automated scoring can miss brand nuance, copy tone, accessibility needs, and domain-specific user expectations.
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.