skills.rest
vinzenz
vinzenzCOMMUNITY
Explore all skills by this author →
Website𝕏@evilissimoGitHub

optical-refinement

Diagnose visual balance in typography, spacing, color, and UI components.

Updated Nov 23, 2025
Search Tags:#typography#alignment#optical refinement#kerning#visual balance#color weight
One-click install
npx skills add https://github.com/vinzenz/jules-agentic-software-builder-for-claude --skill optical-refinement
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optical-refinement
Source: https://github.com/vinzenz/jules-agentic-software-builder-for-claude/tree/main/.claude/skills/optical-refinement
Command: npx skills add https://github.com/vinzenz/jules-agentic-software-builder-for-claude --skill optical-refinement

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Optical refinement addresses the gap between mathematical precision and human visual perception, ensuring typography, spacing, color, and UI elements feel balanced to real viewers.

Core Features & Use Cases

  • Typography balance: Addresses kerning, letterspacing, and rhythm for legibility and harmony.
  • Spatial harmony: Checks vertical rhythm, alignment, and edge centering in layouts.
  • Color and component weight: Adjusts perceived weight and contrast to reinforce hierarchy.
  • Use Case: A designer reviews an app screen and a marketing page, identifies misalignments, and issues a prioritized list of optical fixes.

Quick Start

Provide an optical critique on a sample design: run the skill to evaluate typography, spacing, color, and button consistency and output a prioritized set of fixes.

Frequently Asked Questions about optical-refinement

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix typography and spacing alignment issues in my UI design?▼

Typography and spacing alignment issues are fixed by applying optical refinement to adjust kerning, vertical rhythm, and edge centering so layouts feel visually balanced to human perception rather than mathematically precise.

What is optical refinement in graphic and interface design?▼

Optical refinement is a critique workflow that diagnoses visual balance across typography, spacing, color weight, and UI components, outputting a prioritized before-and-after plan to align designs with human perception.

How do I run an optical critique on a design layout?▼

To run an optical critique, provide a sample design scene or interface to the skill, which evaluates button consistency, letterspacing, and color weight, and then outputs a prioritized list of optical fixes.

Does optical refinement require external design tools or plugins?▼

Optical refinement requires no external tools or plugins to function, relying entirely on a defined critique workflow to evaluate visual balance and output structured guidance for print and digital designs.

Can I use optical refinement to check color weight and button consistency in app screens?▼

You can use optical refinement to check app screens by diagnosing perceived color weight, contrast, and button consistency, ensuring visual hierarchy and component balance align with human perception.

Why does my design look misaligned even though the measurements are mathematically correct?▼

Designs look misaligned despite correct measurements because mathematical precision differs from human visual perception, requiring optical refinement to adjust edge centering and spatial harmony for true visual balance.

Related Skills

Explore More Design & Creative Skills→
Marwan78888Marwan78888
16

huashu-design

Propose 3 design philosophy directions from 20 styles for web, print, and product interfaces.

Community
Advanced
cshyangcshyang

quieter

Reduces visual intensity in bold, overstimulating designs via constraints on color, typography, spacing, and motion.

Community
Intermediate
ilanf23ilanf23
1

color-system

Generate accessible color palettes with semantic mapping and WCAG contrast compliance.

Community
Intermediate
skeeper75skeeper75

optical-auto-layout

Generate CSS Flexbox layouts with optical alignment and shape corrections.

Community
Advanced