design · diff
git:20260919.3fc997a to git:20260923.4f2751d
3 added, 23 removed. Audit A to A.
---
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.'
+ description: 'Guide visual and interaction design from the person it is for, the moment they meet it in, and the subject it is about: the feeling that moment wants and how strong, with the visual idea, palette, type and texture drawn from the subject and the audience''s world rather than a house style. 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 visually study multiple relevant examples with distinct lessons; let the range of design choices the task needs guide the selection. 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` |
+ Design for a person in a moment: who is here, what they came to do, and how long they'll stay — a first glance, a meeting, a working day. Make them feel what that moment wants, as strongly as it wants — quiet to spectacular — unless the request says otherwise. Find the visual idea in the subject and in their world, and take palette, type and texture from there rather than from a house style.
- Study the examples themselves, including behavior when that is the lesson; reading annotations alone is not visual study. Before composing, briefly compare what the examples taught you and how those observations inform 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.
+ Explicit requirements and an existing design system outrank this. When refining existing work, keep what works and change what the feedback names.