Levyra Design Taste

Levyra design taste

Purpose

This skill is Levyra's product-design quality gate. It exists to prevent technically correct UI from becoming generic, templated, over-decorated, inconsistent, or recognizably AI-generated.

It does not replace levyra-compose, levyra-desktop, Material guidance, accessibility, performance work, localization, lifecycle rules, or the repository architecture. Load it alongside the matching domain skill.

Repository precedence remains:

1. root and nearest AGENTS.md files;
2. approved requirements and active planning;
3. current architecture and implementation;
4. matching Levyra domain skills;
5. this design-quality layer;
6. external references and inspiration.

If visual polish conflicts with playback reliability, responsiveness, accessibility, user choices, battery/resource constraints, or established architecture, the visual idea loses.

Activation

Load this skill automatically when the task includes any of the following:

• redesigning or visually polishing a Levyra screen;
• requests such as "più bella", "più professionale", "premium", "modern", "clean", "cinematic", "minimal", "less generic", or "less AI";
• changing hierarchy, spacing, typography, color, shape, elevation, icon treatment, artwork treatment, navigation presentation, or motion;
• using screenshots, mockups, another application, or a design reference as inspiration;
• introducing or revising a reusable visual component or visual language;
• reviewing whether a UI change looks coherent with Levyra.

For Android also load levyra-compose. For Desktop also load levyra-desktop. Load performance, motion-artwork, security, or real-engineering skills when those concerns are also present.

Do not load this skill for a purely non-visual bug fix unless the proposed fix changes visible UI behavior.

1. Read the surface before designing

Before editing, write a short internal design read covering:

• surface: Home, Search, Library, Artist, Album, Now Playing, Lyrics, Settings, onboarding, dialog, mini player, Desktop window, etc.;
• primary job: the one thing the user needs to do or understand there;
• visual role: utility, discovery, immersive playback, management, confirmation, empty/error state;
• existing language: theme tokens, typography, shapes, artwork, navigation, component patterns, spacing rhythm;
• preservation constraints: behavior, gestures, information architecture, state, accessibility, localization, playback and navigation that must not change;
• reference intent: if a screenshot/app is supplied, identify which principles are useful rather than copying its surface literally.

Do not jump directly from "make it nicer" to a default aesthetic.

2. Use three design dials

Choose values from 1 to 10 before a material redesign. They are reasoning aids, not runtime settings.

• VISUAL_VARIANCE: 1 = strict utility and symmetry, 10 = highly expressive composition.
• MOTION_INTENSITY: 1 = nearly static, 10 = cinematic and interaction-heavy.
• INFORMATION_DENSITY: 1 = sparse/immersive, 10 = compact/operational.

Useful Levyra baselines:

Infer the values from the current product and the request. Do not maximize all three. A settings screen should not become a showcase; Now Playing should not become a dense control panel.

3. Preserve Levyra before adding novelty

Treat existing screens as redesigns unless the owner explicitly asks for a visual reset.

Audit first:

• existing color and typography tokens;
• spacing and radius conventions;
• icon family and control treatment;
• component reuse opportunities;
• navigation and information hierarchy;
• artwork behavior and loading fallback;
• touch, keyboard, focus and accessibility behavior;
• large-font, long-translation and RTL behavior;
• performance-sensitive composition and scrolling paths.

Prefer targeted evolution in this order:

1. hierarchy and content priority;
2. spacing and alignment rhythm;
3. typography scale/weight;
4. color/elevation/shape consistency;
5. component composition;
6. motion and decorative treatment;
7. full layout replacement only when the existing structure is the actual problem.

Never silently change navigation structure, gestures, primary actions, playback controls, semantic meaning, or user-visible behavior just to obtain a cleaner screenshot.

4. Anti-AI-slop rules

Do not fall back to common generator defaults unless the current Levyra language and the task justify them.

Avoid:

• glassmorphism on every container;
• arbitrary purple/blue glow or mesh gradients;
• rows of interchangeable rounded cards with no hierarchy;
• excessive pills, badges and chips used as decoration;
• giant whitespace that reduces useful music content without improving focus;
• random corner radii, opacity values, spacing values, gradients or shadows outside the established token system;
• duplicated headings, subtitles, helper labels or CTAs that say the same thing;
• motion whose only purpose is to look expensive;
• decorative blur, particles, parallax or scaling on scrolling lists without measured performance headroom;
• replacing real cached content with shimmer during ordinary refresh;
• creating a new component when an existing Levyra component can be evolved coherently;
• copying another application's brand identity, exact layout, proprietary artwork treatment or signature interaction.

A distinctive result comes from stronger hierarchy, proportion, rhythm, artwork use, typography, restraint and interaction feedback, not from stacking visual effects.