PLUS UNO
An AI-powered prototyping tool that helps teams rapidly turn early concepts into high-fi interactive prototypes using PLUS design system, accelerating design workflows.
Context
PLUS is a tutoring platform that connects human tutors with AI-driven software to boost learning gains for middle school students from historically underserved communities. The platform currently supports over 13 schools, 3000 students, 500 tutors, completing more than 10k hours of tutoring every month.
As the Product & Design Systems Designer, I built an AI-powered prototyping agent using Figma tokens to generate system-aligned UI, enabling faster validation across design, product, and engineering. I led the scaling of the design system by standardizing tokens and component sizing, and by migrating legacy work into a unified Web App Specs file to improve consistency and developer handoff.
Problem
PLUS’s rotating designer model creates repeated knowledge loss. Every 4–5 months, new designers need to relearn product context, design system rules, and team conventions, slowing onboarding to 4–6 weeks.
While AI tools can speed up prototyping, they still lack persistent team context, causing designers to re-explain constraints and spend time correcting inconsistent outputs.
PLUS UNO, an AI-assisted prototyping workflow that combines design-system context, a prototyping workspace, and shared review infrastructure. Its role was not to replace every design tool. It was to help teams move from rough ideas to system-aligned, evaluable prototypes much faster.
01 Storybook
It works as an interactive source of truth. Instead of static specs, the team had a place where they could inspect components, states, and behavior in a format that was much more usable during design and implementation.
02 PLUS UNO Storybook AI Assistant
To bring AI guidance directly to where designers work, I integrated a live LLM backend into Storybook. By embedding the AI directly into our component library, designers and developers can pull up usage guidelines, get technical breakdowns of the specific screen they are viewing, and navigate the design system using natural language.
03 Prototype Market Place
A centralized platform to host all prototypes for easy viewing so the team can review, compare, revisit, and reuse outputs.
04 Skills Pipeline
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.
uno-research → uno-plan → uno-prototype → uno-review → (iterate) → uno-post → uno-compound
Key Decisions
Dropped jQuery-based stacks → React Bootstrap
React-based approaches produced clearer structure and more predictable results.
Our codebase runs on HTML/CSS vanilla JavaScript Bootstrap — but AI models produce significantly better output with modern frameworks.
We deprioritized HTML/CSS/JavaScript and shifted to TypeScript with React, using React Bootstrap to align with existing Bootstrap-based patterns.
Context Routing System
We structured the design system into modular markdown files — components, tokens, layouts — router files would direct AI to read only the relevant context for a given task, rather than processing everything at once.
Stick with Cursor
Our hope was to package the tool 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.
The New Workflow
Early Outcomes
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
Next Step
As PLUS UNO stabilizes, our focus shifts toward maturity and expansion. We aim to solidify the agent's place in the design process and explore new opportunities for impact.
Achieve consistent team-wide usage
Roll out stable templates and best practices to reduce output variance and ensure all designers use the system with confidence.
Reach workflow maturity and evaluate expansion
Finalize documentation, tutorials, and prompt guidelines to support onboarding and streamline adoption across new projects.
Explore deeper integration with developer tools
Pilot integrations between the prototyping agent and engineering workflows, such as Slack review loops, to speed up design-to-dev collaboration and QA.
View More Projects
