PLUS
UNO
PLUS is a virtual tutoring platform that aims to bridge gaps in math education, empowering middle school students with AI technology and research-backed methods.
Summary
Role
Product Designer working with a PM, later scaled to a team of 5
Timeline
November 2025 — Present
Responsibility
Led foundational design work for an AI-assisted workflow at PLUS — building the context layer, improving tool output, and scaling it across the team.
Problem
Every cohort restart meant losing context — and AI made it worse, not better.
PLUS has designers who rotate every 4–5 months. Every cohort restart meant losing product context, design system knowledge, and team conventions, slowing onboarding to 4–6 weeks.
AI can theoretically expedite this, but reloading context is very time-consuming for each session. Could we build a system where that knowledge persists — so new designers hit the ground running, and AI stops starting from zero every session?
Where we started
Two people, a lot of new tools, and no established answer.
We started with Cursor, since we had a free Pro plan. But as the weeks went by, new tools kept updating, and we had to experiment with them to make sure what we were doing wouldn't become obsolete.
The pivot and foundation
Instead of betting on one tool, we planned the foundation.
We stepped back from chasing a specific tool and planned the foundation of what we wanted to build — a team-owned stack that makes AI work reusable, reviewable, and compounding.
Key decisions
Architectural decisions made in service of one goal.
Every decision we made was in service of one goal: making context persist across sessions, no matter if you're new or have used the tool in the past, and to improve tool performance and consistency.
Dropped HTML/CSS & vanilla JavaScript and moved to React Bootstrap
Our codebase runs on HTML/CSS vanilla JavaScript Bootstrap — but AI models produce significantly better output with modern frameworks, so we moved to React Bootstrap and accepted the gap from production in exchange for consistently usable prototypes.
HTML/CSS + vanilla JS
React Bootstrap
Matches codebase?
Matches design system easily?
Prototype functionality
LowHighContext routing system
We structured the design system into modular markdown files — components, tokens, layouts — and router files direct AI to read only the relevant context for a given task, rather than processing everything at once.
Sticking to Cursor
Our hope was to package the tool up into an NPM package so it could become tool-agnostic — especially utilizing it in Figma Make. However, it didn't work, and we decided to stick with Cursor since it had the strongest capabilities.
Tool agnostic → Cursor diagram
Asset pending — drop into /case-studies/plus-uno/ once available.
Solution
PLUS UNO — an AI-assisted prototyping tool with a persistent context layer.
I built PLUS UNO so designers can go from PRD to high-fidelity, interactive prototype without rebuilding context from scratch every time.
Storybook as the source of truth
A live documentation of the PLUS design system — the source of truth in code for the tool to work with, while also letting designers understand how components interact in real time.
Skills & modes
A structured framework that tells the AI how to behave depending on the task — whether that's consulting on layout or rapidly prototyping a new idea. Modes define the mindset; skills define the action.
Modes
Mode
Typical user signals
What it's for
Learning
“What is…”, “How does…”, “Where is…”
Discovery and orientation: explain what exists, how it works, where it lives — no new implementation.
Maintaining
“Update the component”, “Sync tokens”, “Add to the DS”
Change design-system source: components, APIs, stories, styles, token sync/regeneration, DS docs/scripts.
Consulting
“What should the layout be”, “Help me plan the page”
Structure-first work early on: IA, page structure, layout/wireframe thinking — greyscale, hierarchy over polish.
Iteration
“Show me options”, “Compare approaches”
3–5 distinct directions with tradeoffs; mid-fidelity comparison before picking a production path.
Rapid prototyping
“Build this”
High-fi, low-rigor PoC to test one idea; looks right, less concern for production wiring.
Finalization
“Finalize this prototype”
Production wiring of the prototype, making sure it uses components and tokens correctly.
Skills
Skill
Typical triggers
What it's for
uno-prototype
Scaffold / new prototype / create playground
Scaffolds a playground prototype under playground/; often first step when exploring a new idea.
uno-review
Review / check / validate / quality check; “done” / “ready”
Quality gate before shipping — treat as read-only review; on pass continue.
uno-post
Submit / publish / add to market
Publishes to the marketplace flow by writing the marketplace data file (after review passes).
uno-compound
Document / write up / compound; after significant work or session end
Captures learnings (e.g. solution docs under docs/solutions/), may suggest instruction updates.
Rapidly generate interactive, high-fidelity prototypes
Designers, developers, and PMs can visualize how designs and components interact in real time — spinning up a plan-driven prototype straight from a PRD.
With vs without the harness
Without the harness, AI invents components, hallucinates widgets, and hardcodes values. With the harness, the same task produces linked assets, library components, imported widgets, and tokenized variables — prototypes that actually map back to the design system.
Prototype market
A centralized platform to host all PLUS prototypes for easy viewing — so the team can browse deployed prototypes, jump into one, and pick up where someone else left off.
The new workflow
From PRD to interactive prototype — before Figma.
Rather than waiting for a fully polished Figma prototype, designers and PMs can generate a hi-fi interactive prototype from a PRD and get real feedback from users and developers immediately — iterating directly in the tool before ever touching Figma.
Early outcomes
What changed once the harness was in place.
- Onboarding time dropped from 4–6 weeks to under 1 week for new designers.
- Design system coverage expanded as documentation was structured for AI consumption.
- Product managers began handling minor design tasks independently, reducing designer bottleneck.
Reflections & learnings
Choose when and how to use AI.
AI won't replace every aspect of the design process, nor will it replace the same aspect every time.
Build for the workflow, not the tool.
Working in a space where tools update faster than you can evaluate them forces you to build workflows that are tool-agnostic enough to survive change. The NPM package attempt was a lesson in that.
Good quality input = good quality output.
The quality of AI output is only as good as the context you give it. Investing in the documentation and structure upfront is what made the outputs actually usable.