OPTIK is a design quality engine for AI coding tools. One skill with 58 commands, a scoring algorithm, and an anti-pattern registry. It measures design quality across typography, color, layout, motion, and accessibility — then tells the AI exactly what to fix.
I built this because every AI design skill I tried was just opinions in a markdown file. "Use good typography." "Pick a bold color." That's like telling a junior dev to "write clean code" and expecting production output. OPTIK gives the AI algorithms. Mathematical type scales. Computed color palettes. Grid-snapping logic. Measurable contrast ratios. A 0-100 score that means something.
Paste code below and try it.
Paste any CSS or HTML. The engine checks 40+ signals across five categories and produces a weighted score. This is the same algorithm the AI runs when you use /score.
The default sample scores around 38. That's typical AI-generated CSS: Inter font, purple gradient, nested cards, arbitrary spacing, no accessibility. The kind of output every LLM produces without guardrails.
What it catches
The engine checks specific, measurable signals. Not vibes. Each one maps to a point deduction in one of the five categories.
Typography
The number one tell of AI-generated UI is the font. Inter, Roboto, Open Sans, Poppins. OPTIK maintains a banlist of 14 overused fonts. Using any of them is an automatic -25 on the typography score.
Beyond the banlist, the engine checks whether your font sizes follow a mathematical ratio. A good type scale uses a consistent multiplier between each step: 1.250 (major third), 1.333 (perfect fourth), 1.500 (perfect fifth). If your sizes are 32, 24, 18, 14 with no discernible ratio, the engine flags it.
It also checks hierarchy depth (minimum 4 distinct sizes), line height ranges (1.5-1.7 for body, 1.1-1.3 for headings), letter-spacing on uppercase text, and font weight variety.
font-size: 32px;
font-size: 24px;
font-size: 18px;
font-size: 14px;
/* no line-height */
/* no letter-spacing */
--type-base: 17px;
--type-md: 21px; /* x1.25 */
--type-lg: 27px; /* x1.25 */
--type-xl: 33px; /* x1.25 */
line-height: 1.6;
letter-spacing: -0.02em;
The /type-set command replaces the banned font, computes a Major Third scale (1.250), and adds line-height and letter-spacing in one pass.
Color
Purple gradient on a white background. The single most common pattern in AI-generated UI. OPTIK deducts 30 points for it. Harsh, but accurate. If your interface looks like every other AI landing page, the score should reflect that.
The engine also flags: pure black text (#000 or #333 — always tint your darks), too many raw color values without CSS custom properties, palettes with more than 15 unique colors, and missing dark mode support.
The /palette command generates a full 50-950 shade scale from a single hex value. /semantic-color builds surface, text, border, accent, and feedback tokens from that palette. /dark-mode creates a dark variant that preserves contrast ratios — not color inversion, actual dark surface design.
135deg, #667eea, #764ba2
);
color: #333;
border: 1px solid #eee;
/* 12 raw hex values */
/* no CSS variables */
--color-500: #e8590c;
--color-900: #431407;
--surface: var(--color-50);
--text: var(--color-900);
--accent: var(--color-500);
/* 11 shades, full system */
One hex in, a complete color system out. The /palette command generates 11 perceptually uniform shades and the /semantic-color command maps them to surface, text, border, and accent tokens.
Layout
Cards inside cards. The other dead giveaway. OPTIK deducts 20 points for nested cards because it's almost always the AI defaulting to container patterns without thinking about hierarchy.
The engine checks whether spacing values sit on a 4px grid. Every padding, margin, and gap should be divisible by 4. Values like 13px, 22px, 37px suggest arbitrary choices. /grid snaps them to the nearest valid value.
It also verifies max-width constraints on content containers, responsive breakpoints, grid/flexbox usage, gap property adoption, and nesting depth (maximum 4 levels).
Motion
Motion scoring starts at 50, not 100. A page with zero animation isn't broken — it's just not investing in that axis. You earn points by adding purposeful transitions, custom easing curves, scroll reveals, and keyframe animations. You lose points for animating layout properties instead of transforms, or for having motion without a prefers-reduced-motion fallback.
Accessibility
The harshest single penalty in the engine: outline: none without a replacement focus style. That's -20 points. Removing focus outlines makes keyboard navigation impossible.
The engine checks for :focus-visible styles on interactive elements, semantic HTML landmarks, ARIA attributes, touch target sizing (44x44px minimum), and skip links.
Getting started
Auto-detects your AI harness and installs to the right location.
For manual install, copy the provider directory to your project root:
cp -r optik/.claude your-project/ # Claude Code
cp -r optik/.cursor your-project/ # Cursor
cp -r optik/.agents your-project/ # Copilot / Kiro / Antigravity
cp -r optik/.gemini your-project/ # Gemini CLI
cp -r optik/.codex your-project/ # Codex CLI58 commands
Not design vocabulary lessons. Each command carries the full scoring algorithm, anti-pattern registry, and generation logic. When the AI runs /palette, it doesn't ask an LLM what a good palette looks like. It computes one from HSL interpolation.
Score & Audit
/scoreFull 0-100 design quality analysis/auditComprehensive report with line references/critiqueUX hierarchy and resonance review/benchmarkCompare against quality baselines/compareSide-by-side version comparison/reportShareable score card/trendTrack score across iterations/certifyPass/fail for CI/CD pipelines/score is the one you'll use most. It runs the full analysis and returns a categorized breakdown. /certify is the same engine in pass/fail mode — set a threshold (default 80), get a boolean. Wire it into your pre-commit hook.
Typography
/type-scaleGenerate mathematical scale from base + ratio/type-pairFont pairing recommendations/type-auditAudit all font usage across codebase/type-fixAuto-fix scale inconsistencies/type-hierarchyEnforce heading + body hierarchy/type-measureCheck line lengths (45-75 chars)/type-rhythmVertical rhythm baseline alignment/type-setComplete type system in one pass/type-scale takes a base size and a ratio. Major Third (1.250) is the default. It computes 7 stops, rounds to whole pixels, and outputs CSS custom properties. /type-pair never suggests banned fonts.
Color
/paletteFull 50-950 shade palette from one hex/contrastWCAG AA/AAA contrast check/harmonizeFix palette coherence/semantic-colorSurface, text, border, accent tokens/dark-modeDark variant preserving contrast/color-auditMap all colors, find duplicates/color-fixAuto-fix contrast failures/color-a11yVerify palette at every text sizeLayout
/grid8px grid with snap correction/spacingGenerate spacing scale from base unit/densityVisual density and whitespace audit/rhythmVertical spacing rhythm/responsiveBreakpoint and reflow quality check/layout-auditMap patterns and find issues/layout-fixAuto-fix off-grid spacing/alignAlignment verification across sectionsMotion
/animatePurposeful motion and transitions/transitionTiming function audit and improvement/scroll-fxScroll-triggered reveals and parallax/motion-auditPurpose, performance, and a11y check/reduce-motionAdd prefers-reduced-motion support/overdriveWebGL, spring physics, GPU effects/overdrive is for when the brief demands something technically extraordinary. Shaders, spring physics on dialogs, scroll-driven 3D transforms. Maximum one per page. Must degrade gracefully.
Accessibility
/a11y-auditFull accessibility check/focusFocus ring system generation/touch-target44x44px minimum verification/ariaARIA attribute audit and fix/a11y-fixAuto-fix detectable issues/screen-readerSimulated screen reader traversalDesign System
/tokensComplete design token set/extractPull reusable patterns from code/normalizeAlign to design system standards/system-auditCheck for token drift/component-checkVerify component consistency/export-cssCSS custom properties/export-tailwindTailwind config/export-jsonW3C Design Tokens JSON/tokens is the one-shot design system generator. It runs /palette, /type-scale, /spacing, and the shadow and radius generators, then outputs everything in four formats simultaneously.
Polish
/polishFinal pass — alignment, spacing, details/distillStrip to essence, remove complexity/bolderAmplify safe, boring designs/quieterTone down aggressive designs/hardenError handling, i18n, edge cases/delightMemorable moments of joy/bolder and /quieter are opposites. One amplifies safe designs that score fine but feel forgettable. The other dials back aggressive designs with too much competing for attention.
Scoring
The five categories are weighted to reflect their impact on perceived quality:
| Category | Weight | Why |
|---|---|---|
| Typography | 25% | Most visible quality signal |
| Color | 25% | Immediate emotional impact |
| Layout | 25% | Structural foundation |
| Motion | 10% | Enhancement, not requirement |
| Accessibility | 15% | Non-negotiable baseline |
Thresholds
| Score | Grade | |
|---|---|---|
| 90-100 | Exceptional | Ship with confidence |
| 80-89 | Strong | Minor refinements only |
| 65-79 | Needs work | Fix before shipping |
| 40-64 | AI slop | Significant rework |
| 0-39 | Emergency | Start over with intention |
The default target is 80. The AI won't ship code below 65 without explicit override.
Anti-pattern registry
Automatically flagged. Each one has a specific deduction and a specific fix.
| Pattern | Deduction | Fix |
|---|---|---|
| Inter / Roboto / Arial | -25 type | Distinctive typeface |
| Purple gradient | -30 color | Non-generic palette |
| Nested cards | -20 layout | Flatten hierarchy |
| No CSS variables | -15 color | Use custom properties |
| outline:none | -20 a11y | :focus-visible styles |
| No media queries | -15 layout | Add breakpoints |
| Pure black text | -5 color | Tint dark colors |
| Off-grid spacing | -3 each | Snap to 4px grid |
| Single font weight | -10 type | Use 2-4 weights |
| No line-height | -10 type | Add declarations |
| 15+ unique colors | -15 color | Consolidate to tokens |
| Motion without a11y | -10 motion | prefers-reduced-motion |
Badge
Add your score to your README.
How it works
One core skill file contains the scoring algorithm, type scale math, palette generation logic, spacing grid rules, and the anti-pattern registry. 58 command skills reference it. When the AI runs /score, it doesn't send your code to an API. It parses the CSS in context and runs the scoring logic inline.
The build script compiles source skills to five provider directories: .claude/, .cursor/, .agents/, .gemini/, and .codex/. Each is identical except for minor frontmatter differences. npx skills add auto-detects your provider.
The web analyzer above runs a JavaScript port of the same logic. It's client-side only. Your code never leaves the browser.
Just a score
OPTIK can do a lot. Palette generation, type scale computation, grid snapping, dark mode derivation, token export in four formats. But if you just want to know whether your UI is any good before you ship it, /score does that just fine too.
Built by dragoon0x. Apache 2.0. Source on GitHub.