What problem does it solve? UI feedback often stalls at vague pixel-level complaints like "make this 6px" or "this feels off," which fixes one spot while the underlying design rule stays broken everywhere else. This Skill provides a shared design vocabulary so designers, engineers, and agents can reason about VS Code interfaces in terms of values and principles rather than raw pixels. ## Core Features & Use Cases - Values-Principles-Moves framework: Diagnose any UI issue by naming the feeling (Calm, Focused, Consistent, Delightful), the principle it breaks, and the concrete move that fixes it. - Design token decision rules: Apply elevation tiers (4/6/8px radii), the spacing ramp, type roles with two weights, 16/12px icon sizes, one-stroke borders, and theme colors with explicit rules for which value to choose and why. - Feedback phrasebook: Translate pixel-level complaints into principled statements, with worked examples for busy panels, flat settings rows, mismatched dialogs, and gimmicky animations. - Use Case: When reviewing a screenshot of a noisy side panel, identify that it breaks "Quiet at rest," then prescribe dropping it to a recessed background token and demoting labels to a quieter type role. ## Quick Start Ask the design philosophy skill to review this UI screenshot and explain which design principles it violates and how to fix them.
