Skip to main content
Phase 2 turns the Phase 1 mockups into a component-based app and fills the design gaps. The order below puts foundations first.
1

Build approach (done)

A Vite + React + TypeScript component app, built by Cloudflare on every push. See architecture.
2

Design-system foundation (in progress)

Done so far: a shared stylesheet generated from the design tokens, an inventory of 28 components, and the first four components (Button, StatusChip, Card, AiContent) in a live component library. See Components. Next: the rest of the inventory, then replacing hard-coded colors in the original screens.
3

Connect the prototype

The learning profile feeds the Today screen, and the tutor follows the instructor’s tutor settings.
4

Author flow

A clickable path from prompt to brief, outline, draft review, and publish readiness: the core differentiator.
5

Course home and the corporate learner

A course home with a module map and instructor presence, plus a compliance-first experience for industry learners.
6

Evaluation

A usability test protocol with a System Usability Scale target of 80 or above, and a screen-reader walkthrough.
7

Breadth

Persona variants, templates and branding, a full publish-readiness report, integration setup, dark mode, and a mobile lesson player.
After usability testing, Tessera grows into a full-stack app with accounts, a database, and real AI calls.