AI Agent Workflow Collection

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.

The craftsman that turns a Vision (the experiential spec produced by envision-the-experience) into a real, running interface — by researching the truest, soundest means BEFORE writing a line of implementation. Use whenever you are about to build, prototype, or technically realize a distinctive/immersive/experiential UI — animation, motion, depth or 3D, scroll-choreography, cinematic transitions, generative or hand-drawn visuals, sound, haptics — or whenever you must choose the tools, frameworks, libraries, rendering approach, or architecture for an interface whose feeling matters. This skill does NOT jump to code. It requires two contracts before any high-fidelity build — the Vision (the feeling, from envision-the-experience) AND the Staging (the bold, web-native art direction — the central concept, the staged artistic moments, and the visual system — from stage-the-vision); if no confirmed Staging exists it produces one with stage-the-vision first and never invents the art itself from the feeling (the exact vacuum the model's default taste rushes to fill — card grids, then blobs/gradients, then garish saturation). Its job is to engineer each staged moment soundly, not to design it. It reads the Vision as a contract (the feeling is what must survive, not any particular widget), translates that feeling into what it technically demands, then RESEARCHES the field — surveying the means that could produce it, weighing their tradeoffs, nuances, and caveats — and only then chooses deliberately, fitted to the vision AND the real constraints (performance budget, accessibility, target devices, the team's stack, long-term maintainability), never by default, fashion, or familiarity. It is the experienced practitioner who knows the landscape (GSAP, Motion, three.js / React-Three-Fiber / angular-three, Web Animations API, CSS scroll-driven animations, View Transitions, Lottie/Rive, Canvas/SVG/WebGL/WebGPU, Web Audio, the Vibration API) and its footguns (jank, layout thrash, main-thread blocking, vestibular harm, missing reduced-motion fallbacks, broken keyboard/screen-reader semantics under custom visuals) — and compensates for them up front. It also knows the boundary of what code (and an LLM) builds well versus what must be sourced — generated, downloaded, licensed, or commissioned: figurative or photoreal art (a couple kissing, a landscape, a mascot, a textured hero) is acquired from image/video/3D generation, stock, or open icon/SVG/illustration/Lottie/3D-model libraries, never hand-coded into grotesque path-soup — and it handles that path's caveats (licensing and commercial rights, reviewing every generated asset for artifacts/bias/tone, art-directing it to the Vision's world, optimizing its weight, giving it accessible meaning), often composing sourced assets with coded behavior. It designs the architecture and confirms it before implementing (architecture-first), wraps imperative libraries behind clean Angular seams (angular-native-wrappers), and verifies the built result against the feeling AND the Staging in the running app, not merely that it renders — and it does NOT self-certify aesthetics (a model is confidently wrong about taste): mechanics it checks itself, but whether it looks good and the moment lands is judged against the Staging and by an outside eye (the user, or the great work it adapts), never by its own sense of nice, and it engineers the moments and structure the Staging specifies rather than reskinning the same boxes. Where work is genuinely independent it fans out across subagents — researching the means, sourcing asset candidates, building independent regions, and running verification lenses concurrently — always against the Vision as the shared contract, and always converging on a coherence pass so the parallel pieces add up to one feeling (never fanning out the parts that must know the whole — the rhythm, palette, motion language, and emotional arc). Routes to a reference library (motion & timelines; depth/3D/spatial; scroll & cinematic; SVG/canvas/generative; build-vs-source / sourcing & generating assets; performance & budgets; responsive & adaptive layout — engineering each moment's per-form-factor staging, re-composing rather than shrinking; accessibility/reduced-motion/fallbacks; sound & haptics) — read only the cluster you need. The downstream building member of the experience-design trio envision-the-experience (feeling) → stage-the-vision (the bold, web-native Staging) → realize-the-vision (build); a direct expression of engineering:architect-mentality and engineering:architecture-first.