| 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
- Inspect the existing design system, components, tokens, and screenshots.
- Identify the weakest design dimension: hierarchy, density, spacing, color, typography, controls, or responsiveness.
- 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.
- Improve the design using existing patterns first.
- Test mobile and desktop layouts, long text, empty states, and error states.
- 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.
