What problem does it solve? UI feedback often stalls at vague pixel-level complaints like "make this 6px" or "this feels off," which fix one spot and drift back out of sync. This Skill provides a shared design vocabulary—Values, Principles, and Moves—so designers, engineers, and agents can name the rule a surface breaks and land the fix everywhere it applies. ## Core Features & Use Cases - Three-layer reasoning framework: Translate a "this feels off" observation into a named value (Calm, Focused, Consistent, Delightful), the principle it breaks, and the concrete move that restores it. - Concrete design tokens and ramps: Reference elevation tiers (Control 4px / Inner 6px / Outer 8px radii), the spacing ramp, type roles with two weights, 16px/12px icon sizes, one-stroke borders, and theme color tokens. - Feedback phrasebook: Convert pixel-level complaints into principled statements (e.g., "this overlay is rounded at the wrong elevation tier") for design reviews and code reviews. - Use Case: When reviewing a busy settings panel, identify that it breaks "Quiet at rest" and "One thing leads," then demote secondary text to a quieter type role and reveal chrome only on hover. ## Quick Start Ask the assistant to review a UI surface or screenshot using the VS Code design philosophy and name which value, principle, and move apply.
