| 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
- Start from a working baseline. Do not begin with polish if structure or behavior is still broken.
- Read
references/ELEVATION_PROTOCOL.md and follow the refinement loop.
- Read
references/DESIGN_INTERROGATION.md before finalizing anything visual.
- Pull 1 or 2 strong moves from
references/TECHNIQUE_CATALOG.md instead of many weak ones.
- Use
references/REFERENCE_LIBRARY.md to choose a visual direction that matches the job.
- Use
references/DESIGN_PHILOSOPHY.md to keep the result bold enough to feel designed, but restrained enough to stay usable.
- If the task is a website or app, pair this skill with
frontend-design for direction-setting and web-design-guidelines for usability guardrails.
- 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.
