design-elevation

name	design-elevation
description	Elevate the visual quality of websites, apps, dashboards, presentations, and other visual outputs after the first functional pass. Use when the output works but still feels generic, flat, confusing, or unfinished.

Design Elevation

Use this skill after a functional visual output exists, or when you are asked to make a design feel more polished, intentional, and less generic.

Trigger cases

• "Make this site feel more polished."
• "The page works, but it looks generic."
• "Improve the design before we call it done."
• "Elevate this dashboard / presentation / HTML output."
• "Show a stronger visual direction and refine it."

Non-trigger cases

• "Build the first version of this backend API."
• "Debug a server crash."
• "Do a strict read-only UI audit only."
• "Fix one tiny CSS bug with the smallest patch."

Workflow

1. Start from a working baseline. Do not begin with polish if structure or behavior is still broken.
2. Read references/ELEVATION_PROTOCOL.md and follow the refinement loop.
3. Read references/DESIGN_INTERROGATION.md before finalizing anything visual.
4. Pull 1 or 2 strong moves from references/TECHNIQUE_CATALOG.md instead of many weak ones.
5. Use references/REFERENCE_LIBRARY.md to choose a visual direction that matches the job.
6. Use references/DESIGN_PHILOSOPHY.md to keep the result bold enough to feel designed, but restrained enough to stay usable.
7. If the task is a website or app, pair this skill with frontend-design for direction-setting and web-design-guidelines for usability guardrails.
8. If the task is a presentation or dashboard, keep hierarchy, density, and readability more important than decorative effects.

Output expectations

Return one of these shapes, depending on the task:

• an upgraded implementation
• a prioritized design improvement plan
• 2 or 3 distinct visual directions with tradeoffs
• before/after comparison showing what changed and why

Guardrails

• Do not hide weak UX behind visual decoration.
• Do not pile on too many visual ideas at once.
• Do not default to bland AI aesthetics, especially generic fonts, weak hierarchy, or purple-gradient-on-white defaults.
• Do not call a design "elevated" unless typography, spacing, color, states, and composition all improved together.
• Prefer a smaller number of strong, coherent choices over noisy novelty.