git:20260915.2143ce8 to git:20260916.6062505

16 added, 43 removed. Audit A to A.

---

name: design

- description: 'Design and build digital artifacts whose audience can understand, engage with and use them: interfaces, documents, presentations, charts, media and interactive experiences. Use for creating or restyling artifacts, including disposable prototypes. Combine art direction, information design and interaction design, then verify the delivered experience. Finished-artifact evaluation belongs to review-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

---

- # Design the audience's experience

- Make what matters understandable, the relationships coherent, and engagement compelling in a way suited to the purpose. Use art direction, information design and interaction design together. Visual work should be striking and memorable; neither a usable layout nor an impressive first frame alone finishes the design.

- ## Understand the experience before choosing its form

- Use the brief, existing artifact and available evidence. Briefly record who this is for, what they need to understand or do, the intended feeling, and the delivery medium. Name the path they take or the loop they repeat, the context they need together, and how frequency and consequential moments affect that work. Keep this task model beside the artifact so the arrangement can be checked against it; revise it when evidence changes the work.

- Information needed together should be available without avoidable memory work. Preserve those relationships across small screens and nonvisual alternatives. A once-read presentation and a tool used hundreds of times a day need different pacing, density and interaction.

- Respect the user's requirements, then the existing design system, then this skill's defaults. When missing information would change the design, ask the smallest question that distinguishes the plausible directions; use concrete references or a comparison for a visual choice. Avoid a default interview. In autonomous work, state permitted assumptions and their consequences. Distinguish the creator's preference from evidence about the audience: apparent fluency, activity or approval does not establish understanding.

- ## Give the experience a coherent idea

- Choose a subject-specific creative direction whose central idea is perceptible in the composition or behavior, not only in a headline beside an illustration. Decide what carries that idea—typography, imagery, data, material, interaction, motion—and compose them together. Attention may need a focal point, a comparison field or an unfolding sequence. Let the task decide; different regions can have different jobs within one coherent whole.

- Choose the representation—prose, table, image, diagram, chart or interaction—that makes the important relationships perceptible. Use copy for precision, qualification, voice and meaning the form cannot carry. Simplicity is not minimalism: retain labels, evidence, uncertainty and complementary explanations that support understanding and access. Judge the whole composition: individually reasonable panels, summaries and captions can collectively make everything equally loud.

- Motion earns its place through what time contributes: feedback, continuity, transformation, rhythm, atmosphere or play. Compare it with what a still view or simultaneous comparison offers. Keep essential orientation and controls available, and preserve meaning and agency when motion is reduced. Judge the sequence and repeated use, not only its strongest frame.

- ## Build one system, preserve the work

- Use the project's components and tokens where they exist. Otherwise declare a compact system appropriate to the medium: visual roles for color, typography, spacing and shape, or conventions for voice, timing and feedback. Carry the creative direction through that system. Use its values and components consistently, checking for accidental drift during refinement.

- Applicable functional and accessibility requirements bind; style examples are defaults, not laws. Preserve truthful information, meaningful state and recovery, and equivalent access. Decorative or generated material must not masquerade as evidence. Load the relevant references below before making the choices they govern.

- ## Verify the encounter and the use

- Inspect the artifact in its intended browser, native host, player or device. Exercise the actual path, including consequential state changes and recovery where they exist; repeat interactions whose feel changes with repetition. Check composition and reading hierarchy alongside the behavior: what the form makes clear, what still depends on explanation, what competes for attention, where the person must hunt or remember, and whether the creative direction survives active use and endings.

- Use established project checks. For HTML, run `scripts/design-check.mjs <artifact.html>` from this skill's directory as bounded triage: exit zero means it ran, NOTE items need judgment, and SKIPPED items remain unverified. A source selector or automated pass does not establish access, motion quality or audience comprehension. Responsive web starting views are 1440×900 and 390×844; test applicable 320 CSS px reflow, text enlargement, keyboard paths and supported themes. Inspect actual motion and its reduced alternative separately from static captures.

- For improvements, compare the incumbent and revision at matched content, state, output size and useful fidelity. Identify whether the weak layer is the concept, hierarchy, craft, behavior or adaptation; preserve successful identity and behavior while changing that layer. Keep the stronger result, including the original where the change loses, and recheck affected paths.

+ # Clean structure, expressive behavior

- State what was observed, what is a design judgment, and what remains unverified. Source inspection can locate a cause; it cannot clear a missing render or behavior check. Real audience understanding, preference, recall and conversion require evidence beyond the creator's or model's reaction. When a finished-artifact verdict is required, invoke `review-design`; building and evaluating remain separate jobs.

+ 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.

- ## Prototype weight

+ 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.

- A disposable prototype concentrates fidelity on the question being tested. Keep the task model and creative direction, a minimal system, truthful content and legibility; leave incidental regions visibly unfinished. Orientation and necessary controls must be available on arrival. A prototype about interaction or pacing must expose that behavior. The reader's reaction is the test, not a shipping verdict; do not spend a full verification cycle polishing an artifact that will be discarded.

+ **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.

- Candidate sets vary the unresolved choice, with incidental differences controlled enough to interpret the reaction. Include an incumbent at comparable fidelity where one exists. Preference can select a direction; it does not establish task performance.

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

## What loads

- Load the applicable guidance, not the whole library. These references are shared with `review-design`.

+ 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 the work involves | Read |

+ | When designing | Read |

|---|---|

- | Web interfaces, or web access and interaction requirements | `references/floors.md` — measurements, exceptions and behavioral checks |

- | Choosing a representation for structural or quantitative information; charts, diagrams or other information graphics | `references/figures.md` — faithful encoding and equivalent access |

- | Stateful or shared work, multi-page journeys, presentations, non-web delivery, temporal, conversational, AI, spatial or unfamiliar media | `references/experience.md` — continuity, consequences and actual-medium verification |

+ | 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.