Experience Design
The ux-ui-kit makes interfaces correct: tokens, components, states, accessibility, verified renders. This skill decides what the interface should be like to use and to remember, and turns that into concrete decisions the kit can build. It answers: what should people notice first, what must stay familiar, where originality earns its place, what moves and what stays still, how interactions communicate, where the experience peaks and how it ends, and what remains when the impressive layer is removed.
Where this sits
| Layer | Owns | Skill |
|---|---|---|
| Website strategy | what the site must achieve and say, page structure, proof, trust, conversion, SEO | website-excellence |
| Experience direction (this skill) | attention, familiarity and originality, art direction, composition and pacing, interaction, motion, signature moments, adaptation, experiential validation | experience-design |
| Execution and verification | tokens, components, code, copy, gates | apply-aesthetic, brandkit, design-tokens, design-component, design-code, image-to-code, ux-writing, prototype, redesign, design-review, a11y-audit, performance, design-qa |
Use strategic context only when it changes an interface decision. If the audience, offer or page purpose of a website is unresolved, get it from website-excellence first, or state the assumption and continue. Product UI, apps and dashboards come straight here.
Step 0: scale the process
Pick the depth before anything else. The frameworks in the references are tools for judgment, not stages every request must pass through.
| Mode | Use for | What to produce |
|---|---|---|
| Quick | a component, state, screen tweak or fix inside an established system | Read the project's design decision record if one exists. Attention order for the affected view, an interaction or motion card only for what changes, the anti-pattern scan, then build. No thesis essay. |
| Standard | a new page, flow or screen family, or the redesign of one | Experience brief and thesis, attention map, novelty budget, one direction (alternatives only for a real trade-off), rhythm map, interaction and motion map, adaptation notes, self-critique, decision record. |
| Signature | a brand-defining site or launch, an identity redesign, or an explicit ask for something memorable | Everything in Standard, plus concept exploration (three genuinely different directions, compared, one chosen), designed signature moments, a prototype of the riskiest piece, and an experiential validation plan. |
Restraint check. In a government service, checkout, authentication, settings, documentation, an operational dashboard, or a medical or financial task, the novelty budget in task paths is close to zero. Personality lives in typography, clarity, tone, precision and the quality of feedback. Knowing when restraint is the stronger decision is part of the job.
The loop
Run the steps the mode needs. Each points to the reference that holds the method.
- Understand. Write the experience brief: user intent, arrival context, primary attention, outcome, tone, what stays familiar, constraints, what people should remember. [01]
- Establish. Write the experience thesis and the attention hierarchy (levels 1 to 4) for each key view. The thesis filters every later decision. [01]
- Explore (Signature, or whenever the first idea is the category default). Three directions that differ in concept, not in color; compare conservative, differentiated and bold; choose; record what was rejected and why. Stop exploring once the choice is clear. [02]
- Direct. Set three to seven art-direction rules and translate the thesis into consequences for layout, type, scale, space, density, color, imagery, surfaces, components, interaction, motion and responsive behavior. [02]
- Compose. Draw the rhythm map: each section's job, density and intensity, where stillness sits, where the peak is, how it ends. Let content choose its form instead of heading, paragraph, three cards. [03]
- Interact. Write interaction cards for meaningful interactions (intent, affordance, trigger, response, feedback, state, recovery, continuity) and cover loading, empty, error, success, interrupted and edge states. [04]
- Choreograph. Make the motion map: what moves, what stays still, one motion card per significant motion with its budget class and a designed reduced-motion version. [05]
- Peak. Choose zero to three signature moments and run the signature test on each. [06]
- Adapt. Re-decide the experience for small screens, touch, keyboard, zoom and reflow, reduced motion and low-powered devices; define the degradation ladder. [07]
- Stress-test and edit. Run major decisions through the decision filter and ambitious ones through the implementation reality check; then the anti-pattern scan, interchangeability test, concept integrity test and self-critique from seven perspectives; then remove what does not earn its place. [08]
- Hand off and verify. Pass the Experience Spec to the build skills. Run the kit gates and
motion_audit.mjs; render and look at about 375 and 1440 px, keyboard only, with reduced motion emulated. [07, 08] - Validate, refine and remember. Test the riskiest assumptions with the cheapest method that can answer them; fix the highest-impact weaknesses rather than polishing low-value details; update the design decision record. [08]
Non-negotiables
- Make the necessary things familiar; make the meaningful things distinctive. Navigation, forms, checkout, authentication, search, settings and error recovery keep conventional behavior unless audience evidence supports a change. Express the brand around them.
- Accessibility is a design input. WCAG 2.2 AA is the floor. Nothing essential depends on hover, drag, motion, color or sound alone. Every motion has a designed reduced-motion version, not only a deleted one.
- No motion without a job. Each significant motion names what it communicates and its budget class: essential, enhancing, expressive, experimental, or avoid.
- No interaction without feedback and recovery. Every meaningful action is acknowledged within about 100 ms and can be undone, cancelled or retried where that makes sense.
- Every enhancement has a failure mode. Content and core tasks still work with JavaScript, heavy media and animation removed.
- Variation must carry meaning. Change composition, density or intensity because content, pacing, hierarchy or emotion calls for it, never only to avoid repetition.
- References give principles, not surfaces. Never rebuild a real company's identity for someone else; extract why a reference works and express it differently.
- Spend novelty, do not sprinkle it. Typical budget: Quick 0, Standard 0 to 1, Signature 1 to 2 unfamiliar ideas, concentrated where they create meaning or memory.
- Label confidence on material claims (below) and never state a result you did not measure (kit Verification Protocol).
- Scale analysis to the decision. No theory for obvious choices; decide and move on.
Output: the Experience Spec
Fill templates/experience-spec.md to the depth of the mode: about ten lines for Quick, one to two pages for Standard, two to four for Signature. When building, the spec is a working plan that drives the code; keep its language out of page copy and code comments, and summarize only the decisions that matter in the handover. For Standard and Signature work, write or update the project's design decision record from templates/design-decision-record.md, and read it first on every later task in that project.
Hand-offs
| Decision made here | Executed by |
|---|---|
| Art direction rules become tokens (color roles, type, space, radius, depth, motion mode and durations) | brandkit for a new foundation or apply-aesthetic for an existing one, then design-tokens |
| Components and their states, from the interaction cards | design-component, then design-code |
| Pages and screens from the spec | design-code, or image-to-code when building from a reference |
| Upgrading an existing UI after the genericity diagnosis | redesign |
| Copy for actions, errors, empty states and feedback | ux-writing |
| Prototypes of signature moments and risky interactions | prototype |
| Gates: contrast in all states, axe, focus traps, responsive overflow, taste, motion | a11y-audit, design-qa, performance, and node ~/.claude/ux-ui-kit/scripts/motion_audit.mjs <page> |
| Scored review of a screen through the foundation and experience lenses | design-review |
The kit's rules still bind the build: tokens only, the 8 component states, the Verification Protocol in ~/.claude/ux-ui-kit/CLAUDE.md, no emoji.
Confidence labels
Use them on recommendations a reader could mistake for fact. Do not label every sentence.
| Label | Meaning | Website-excellence equivalent |
|---|---|---|
| High-confidence convention | widely established pattern with strong usability value | Current convention, or Standard |
| Evidence-supported guidance | backed by a standard or relevant research; say what the evidence covers | Standard / requirement, Strong evidence |
| Project-specific inference | reasoned from these users, constraints and goals; state the assumption | Inference |
| Creative hypothesis | a judgment meant to create a feeling or a memory; testable, not provable by research | Practical heuristic |
| Experimental opportunity | novel, uncertain outcome; justify it and test it before relying on it | Limited/contextual evidence, plus a validation plan |
Research can set constraints and flag risks. It cannot choose the one correct art direction.
References
Load only what the mode and the problem need.
- 01 Brief, thesis and attention: experience brief, thesis, the three levels of response, attention hierarchy, proportionality by context, when restraint wins.
- 02 Concepts and art direction: creative territories, conceptual difference, direction cards and comparison, intent to execution, typography, color, imagery, surfaces, using references and the style library.
- 03 Composition, rhythm and content: designing across time, the rhythm map, contrast and pacing, density and pause, content-shaped interfaces, cards, composition tools.
- 04 Interaction design: interaction cards, the communication test, novelty budget, feedback timing, optimistic updates, undo, forms, experience states, input parity, transforming patterns, signature interactions, repeated use.
- 05 Motion system: evidence, jobs of motion, budget classes, motion map and cards, timing, easing and springs, choreography, scroll-linked motion, view transitions, reduced motion as design, performance, mobile, tools, testing.
- 06 Signature moments: moment types, memorability without spectacle, peak and end, selection, the signature test, still forms, prototyping.
- 07 Adaptation and degradation: responsive as adaptation, input and capability queries, container queries, zoom and reflow, reach, device tiers, the degradation ladder, failure modes, accessibility for expressive features, render checks.
- 08 Critique, validation and memory: the decision filter, implementation reality check, AI anti-pattern scan, interchangeability and integrity tests, self-critique loop, ruthless edit, craft pass, validation methods for clarity and for feeling, the design decision record.