/design

name: design
description: 'Guide audience-centered visual and interaction design through direct study of curated examples, clean hierarchy and purposeful aliveness. HTML-first across landing pages, visual explainers and slideshows. Use when creating or restyling a visual artifact, choosing a design direction, or designing a disposable prototype.'
argument-hint: '<artifact, brief or existing file>'
user-invocable: true

Clean structure, expressive behavior

Practice audience-centered art direction, information design and interaction design. Before composing, ground a concise design brief in the audience's knowledge, needs and use context: what must they understand, feel or do, and how should color, hierarchy, density and pacing serve that? Resolve consequential gaps from available context or ask; label assumptions when proceeding without an answer. Explicit requirements and the established design system outrank this profile. Prefer HTML when the medium is open.

Aim for polished composition, strong hierarchy, low unnecessary density and selective personality. Preserve useful labels, evidence and qualifications. Linear is a cross-category craft anchor, not a mandatory skin.

**Aliveness is a strong preference, not an animation quota.** Use responsive feedback, coherent transitions and expressive motion where they serve understanding, state, atmosphere or play. Give reading and decisions room to rest; spectacle that competes with the idea has overshot.

When refining existing work, preserve its successful identity and behavior while changing the layer the feedback names.

What loads

Before composing, load the catalog for the dominant job and open relevant examples for visual study; combine catalogs only where the jobs genuinely overlap. Other artifacts keep the direction above in their appropriate medium.

| When designing | Read | |---|---| | Landing pages | `references/landing-pages.md` | | Long-form visual research or explainers | `references/long-form-explainers.md` | | Quick visual ELI5 explainers, including internal PM briefs | `references/quick-visual-explainers.md` | | HTML presentations or slideshows | `references/html-presentations.md` | | Motion, microinteractions or app-like visual treatment | `references/aliveness.md` |

Study the examples themselves, including behavior when that is the lesson; reading annotations alone is not visual study. Before composing, name what you observed and how it informs this audience's design. Borrow within the annotated scope, keeping approved, facet-only, reserve and boundary references distinct. If visual access is unavailable, state the limitation and distinguish annotation-based guidance from observation. A preferred design is not evidence of usability or comprehension, and approval does not transfer automatically to a later redesign.