Docebo / 2026
Elemental Prototype Playground
Designed and built an AI-native prototyping system that turns product ideas into high-fidelity, reviewable Docebo experiences using the real Elemental design system.
Design Highlights
Overview
I designed and built the Elemental Prototype Playground as a shared design-engineering environment for turning product ideas into realistic Docebo experiences. It combines an Angular prototype studio, the real Elemental design system, reusable LMS patterns, and repo-local AI workflows so designers and engineers can move from intent to working interaction without touching production applications.
Challenge
Product ideas often lose fidelity as they move from research and static mockups into technical implementation. One-off AI prototypes can make that worse: they look plausible, but ignore the product's components, navigation, accessibility patterns, and edge cases. The team needed a safe place to explore quickly while keeping every concept grounded in Docebo's actual interaction language and credible enough for meaningful review.
Approach
I treated prototyping as a system rather than a collection of demos. New work is shaped around a clear audience, user path, expected states, and Elemental component choices before implementation begins. Custom Codex and Claude workflows guide builders through planning, implementation, accessibility review, quality checks, and polish. Shared application shells and navigation patterns keep prototypes consistent, while realistic local data makes them safe to explore and easy to reset.
Solution
The Playground includes a searchable, registry-driven hub; curated light and dark previews; learning-path and status filters; and inspectable context for every prototype. A built-in design-system catalog exposes thousands of tokens and assets alongside 75 Elemental component families and 38 shared playground patterns. The guided workflow connects planning, building, review, and handoff, with responsive, dark-mode, RTL, loading, empty, error, and accessibility expectations built into the process.
Impact
The live studio now contains 17 registered product prototypes across six learning paths, supported by a searchable Elemental catalog and a reusable set of platform patterns. It gives product, design, and engineering partners a shared artifact they can navigate and critique, preserves the rationale around experiments, and makes high-fidelity product exploration repeatable instead of disposable.
Key Learnings
Fast prototypes only improve decisions when they stay faithful to the real product. Elemental components, believable data, working interactions, and explicit quality checks made the concepts easier to trust and discuss. The other major lesson was that the surrounding system matters as much as any single prototype: searchable context, shared patterns, planning lineage, and durable handoff turn experiments into organizational learning.