Independent product · UX Prototype
UX Prototype: connecting design standards to working products.
A design-system workspace connecting foundations, components, AI handoff and product-review tools.
- My role
- Founder · Product strategy, design & engineering
- Period
- Independent product development
- Designed for
- Designers, engineers & AI-assisted teams
AI leadership noteTest generated interfaces against the reference
Original approach
Designed, engineered and launched the platform, connecting design foundations, interactive components, tokens and themes in a working workspace.
What could change today
Package the component contract, example and acceptance checks together for the agent. Ask it to build one form, then compare its behavior with the reference implementation.
Workflow excerpt. The numbered steps show the same part of the journey in each version. The full project includes work beyond this comparison.
Original workflow
- Create the system
- Prepare the handoff
- Build with shared context
- Review the product
Proposed workflow with AI
- Define tokens, component behavior and accessibility rules.
- Package those rules and examples for the agent.
- Generate the interface against the shared contract.
- Compare the result with the reference on keyboard and mobile.
How to test the change
Review keyboard order, error recovery, responsive layout and contrast alongside the rendered design.
01 / Customer & problem
The need behind the work.
Who needed this.
Teams need design decisions to remain usable through handoff, implementation and product review.
The problem to solve.
Teams can document a design system and still struggle to apply it consistently. Tokens, components, implementation guidance and AI instructions need to connect to the work being built.
Give designers, engineers and AI-assisted teams a shared workspace for creating a system, carrying it into delivery and reviewing the resulting product.
02 / My ownership
Responsibilities.
Owned product direction, UX, engineering and the platform’s design-system foundation, turning enterprise design-system practice into an independently delivered product.
The constraint to work through.
A workspace must retain advanced capability while making the next task understandable.
- Create the system
- Prepare the handoff
- Build with shared context
- Review the product
03 / Actions & delivery
How the work came together.
Designed, engineered and launched the platform, connecting design foundations, interactive components, tokens and themes in a working workspace.
System-building tools and structured packages connect the design decisions to implementation guidance. AI handoff, agent guardrails, reusable skills and MCP access make that context available in the development workflow.
Product-review tools support responsive, accessibility and design-system inspection. Saved systems and reusable outputs keep the work connected beyond a single tool session.
04 / Decisions & judgment
What carries through the design.
Connect the reference to the task.
A component library becomes more useful when people can move from a design decision to an implementation package and then review the product it produces.
Keep advanced capability discoverable.
The workspace organizes foundations, AI delivery and product tools into recognizable areas, with guidance around the outcome of each activity.
05 / Results & business value
What changed through the work.
A launched design-system platform with working components, system-building tools, structured AI handoff and product-review capabilities.
Why it matters.
The platform connects reusable standards with implementation context and review, giving teams a practical path from a design system to a working product.
06 / Reflection
Lessons for future projects.
Keep the system’s usefulness in delivery as the test of its quality, connecting guidance to executable tools and inspectable outputs.
Let’s talk about your next chapter.
Exploring Senior Director, Head of Design and VP opportunities.