design-sexyness

name	design-sexyness
description	Create polished, non-generic visual design with strong hierarchy, spacing, typography, color, alignment, density, design-system fit, and optional imagegen-assisted visual direction. Use when improving UI, pages, dashboards, components, layouts, visual rhythm, brand feel, or anything that should stop looking like AI-generated slop.

Design Sexyness

Use this sub-skill to make interfaces feel deliberate, premium, and domain-appropriate.

Standards

• Match the product context: dense and calm for operational tools, expressive for games, editorial only when the content calls for it.
• Build hierarchy with layout, scale, contrast, spacing, and grouping before adding decoration.
• Use a real palette with restraint. Avoid one-note color themes and generic purple-blue gradient energy.
• Make typography feel intentional: readable sizes, clear weights, no negative letter spacing, no viewport-scaled type.
• Align edges, rhythm, and whitespace. Keep repeated items consistent.
• Use real controls for real actions: icons for tool buttons, segmented controls for modes, toggles for binary choices, sliders or inputs for numbers.
• Do not nest cards inside cards. Use cards for repeated items, modals, or framed tools only.

Process

1. Inspect the existing design system, components, tokens, and screenshots.
2. Identify the weakest design dimension: hierarchy, density, spacing, color, typography, controls, or responsiveness.
3. If the surface needs stronger visual direction or generated bitmap assets, load ../imagegen-sexyness/SKILL.md and use generated images as concept references or saved assets, not as static UI replacements.
4. Improve the design using existing patterns first.
5. Test mobile and desktop layouts, long text, empty states, and error states.
6. Capture or inspect screenshots when the artifact is visual.

QA Gate

• No overlapping text, clipped labels, unstable control sizes, or incoherent responsive layout.
• Visual hierarchy is obvious within five seconds.
• The design uses at least one meaningful visual asset or product-specific signal when building a site, app, or game.
• The result fits the domain instead of applying a generic landing-page treatment.
• If imagegen was used, the final UI implements extracted design decisions rather than embedding a mockup screenshot.
• Screenshot or real render verification is performed when possible.