What specific design elements can this skill analyze?

It covers four main categories: Typography (kerning, scale), Spatial issues (centering, edge alignment), Color (perceived weight, contrast), and Components (icon consistency, button padding).

Why do I need optical refinement if my CSS is mathematically correct?

Human vision perceives shapes and colors differently than computers. Elements like circles or triangles often look off-center even when perfectly aligned; this skill applies 'visual compensation' to make layouts look right to the human eye.

Can it help with icon alignment?

Yes. It specifically addresses issues where icons of the same pixel size appear to have different visual weights or where icons within buttons look unbalanced due to their internal geometry.

How does this skill improve accessibility?

It goes beyond standard WCAG contrast ratios by accounting for font weight and background influence, ensuring text isn't just mathematically compliant but actually readable in real-world conditions.

Optical Design Refinement

Name: Optical Design Refinement
Author: vinzenz

byvinzenz

0•

디자인 도구

Reviews and corrects user interface layouts for visual balance and optical harmony that mathematical precision often misses.

The Optical Refinement skill bridges the gap between mathematically perfect code and visually correct design. While AI and CSS often align elements based on bounding boxes, the human eye perceives weight and alignment differently based on shapes, colors, and context. This skill empowers Claude to identify and fix 'awkward' layouts, providing specific guidance on typography kerning, visual centering for irregular shapes (like play icons), spatial rhythm, and perceived color weight to ensure interfaces feel polished and professional.

주요 기능

01Evaluates perceived color weight and contrast beyond basic WCAG ratios

02Provides visual centering for shapes where mathematical centers look incorrect

03Adjusts spatial spacing based on visual weight rather than fixed pixel values

040 GitHub stars

05Identifies and corrects typography kerning and vertical rhythm issues

06Standardizes icon sets for consistent visual density across components

사용 사례

01Fixing 'off-center' icons and buttons that are technically aligned but visually unbalanced

02Polishing AI-generated UI components to achieve a high-end designer finish

03Optimizing complex typography scales and line-heights for maximum readability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vinzenz/jules-agentic-software-builder-for-claude optical-refinement

For use in Claude.ai and ChatGPT

Download Skill