メニュー
Render the UI and prove it's balanced + usable: a deterministic layout audit (centroid / optical-center / pixel-oracle balance via explicit math + annotated screenshot) plus a vision-judged Nielsen usability audit by a separate fresh-eyes judge. The measurement layer taste-only design skills lack.
Optimize pull requests for quick approval and merging by ensuring clean diffs, comprehensive self-reviews, and structured documentation.
Frontend design entry point: direction, design system, visual philosophy. Use whenever building or touching the look of any web UI (components, pages, dashboards, React/Vue/HTML-CSS) or when the user says "make this look better", "fix the spacing/layout", or mentions styling, color, type, or polish.
Automated visual tuning: a vision or video model rates rendered variants in a loop. Render several labeled variants into one artifact, ask the model to rate them and suggest better values, render the suggestions, ask it to pick the best, repeat until good — the model is the eye, you run the loop.
Human-in-the-loop web studio to tune AI-generated output by eye. Stand up a local interactive studio (sliders, pickers, drag handles) or an inline edit/highlight/comment annotation studio for prose & media, instead of guessing values or shipping a static comparison grid.
macOS screen recorder that captures the main display PLUS system audio via ScreenCaptureKit — no BlackHole/loopback driver, no sudo, just the standard Screen Recording permission. CLI-driven; fills the headless-screen-recording-with-system-sound gap QuickTime and `screencapture -v` can't.
Open-source headless Screen Studio alternative: auto speed-up of idle, auto-zoom on click clusters, keystroke overlay chips, smoothed synthetic cursor, and 9:16 vertical export that follows the action — post-production for screen recordings from the CLI.
| name | deterministic-design |
| description | Render the UI and prove it's balanced + usable: a deterministic layout audit (centroid / optical-center / pixel-oracle balance via explicit math + annotated screenshot) plus a vision-judged Nielsen usability audit by a separate fresh-eyes judge. The measurement layer taste-only design skills lack. |
| risk | safe |
| source | community |
| source_type | community |
| source_repo | connerkward/deterministic-design-skill |
| date_added | 2026-06-16 |
| author | Conner K Ward |
| license | MIT |
| tags | ["design","layout","usability","audit","verification","vision"] |
| tools | ["claude-code","antigravity","cursor","gemini-cli","codex-cli"] |
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).
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):
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.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).