Envision The Experience

Imagine the world an interface lives in — its feeling, its place, its metaphor — before any layout, component, or pixel, and design every element as a native inhabitant of that world rather than a generic control dropped on a page. Use whenever you design or reimagine any screen, feature, flow, or interface — especially the moment you're tempted to reach for a standard shape (a dashboard, a card grid, a sidebar, a settings list, a hamburger menu, a modal) by reflex; when a feature carries human or emotional context (an app for couples, for grief, for children, for a first concert, for a wedding, for recovery); when someone asks for creative direction, art direction, a visual vision, a mood, or an experiential spec before implementation; or whenever a design risks coming out as generic boxes-and-text. The core move — the screen is a place, not a page: start from the feeling and the context, never from the form. For every element the requirements name (a menu, a list, a form, a status, a button), first ask what it truly *is* in THIS app and THIS moment — how it's used, what for, what it represents — then design its truest form, which may look nothing like the convention (a menu might become a sunflower whose petals you pick; navigation a path through a garden; a loading wait a kettle coming to the boil). Speaks in sensory, spatial, emotional language — a world, a canvas, a drawing, a feeling — and deliberately names NO implementation (no markup, styling, framework, or tool), so the vision stays free and the builder finds the best means. Dreams free, then **lands the world on the app**: after the imagination has done its work, every inhabitant of the world is anchored to the app's real anatomy (its surfaces, flows, gestures, and states) and every transformed element is validated against what the convention it replaced was buying (findability, scannability, reachability, learnability) and against general app truths (one thumb, interruptions, long lists, failure states) — so the Vision is app-true and *directable*, never an untethered mood. Immersive is not busy — restraint is part of the craft: sometimes the truest form is calm and quiet, and the standard shape is right only when the context genuinely earns it. Explores several rival worlds before committing to a single coherent Vision (breadth first, then commitment — the one place visioning fans out, while the imagining of any one world stays whole in a single mind). Grounds the world in the real situation (the human, the moment, the context — plus any existing material the project happens to have, adopted when present but never required), not invented from a model's associations. Produces a **Vision** — a written, sensory description with five beats (the world & the feeling; the user & the context; what lives on the screen & how it behaves; the emotional arc; the anchor — how the world lands on the app). The Vision is the *feeling*, NOT the art and NOT a visual brief: it is handed first to `stage-the-vision` — the visual architect that invents the bold, web-native artistic moments carrying the feeling and produces the Staging — and only then to `realize-the-vision` to build — feeling → Staging → build — so the builder never fills the visual vacuum with the model's default taste. The upstream member of the experience-design trio (envision → stage-the-vision → realize), the experience-layer twin of `keep-users-oriented`, and an expression of `architect-mentality` — design for the consumer, model the missing concept, refuse false tradeoffs, go the extra mile.

mkdir -p ~/.claude/skills/envision-the-experience
curl -L https://claudskills.com/skills/envision-the-experience/SKILL.md \
  -o ~/.claude/skills/envision-the-experience/SKILL.md

@misc{envision-the-experience-2026,
  author    = {BeSpunky},
  title     = {Envision The Experience [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/envision-the-experience/}
}