AutoView
Team
1 PM, 1 Designer, 3 Engineers
Role
Sole Product Designer
Timeline
Platform
Web, Mobile
Overview
While managing a platform, I identified a structural issue: significant internal resources were being wasted on hardcoding repetitive frontend components. To solve this, the project was launched as an in house productivity tool where planners and designers could simply define data specs to generate React code via AI within a minute.
Following highly positive internal feedback, management decided to pivot the tool into an open source product targeting global developers. As our audience expanded to an external developer ecosystem, my challenge was to completely redesign the dashboard core, introducing features like GitHub integration, API key management, and collaborative sharing.
Pick your language:
The Problem
The time it takes for the LLM to analyze the schema and generate the initial React code. While the generation itself is highly efficient at under one minute, the first output rarely matches the user's exact needs, making subsequent edits inevitable.
Furthermore, the frequency of build errors during manual code modifications. When non-technical users attempted to tweak minor details directly in the generated code, it resulted in a 35% syntax error rate, causing the system to crash and disrupting the workflow.
Lastly, the abandonment rate during the component customization phase. Because users were forced to use text-based coding to make even the slightest visual adjustments, those without a programming background faced a steep learning curve and frequently abandoned the tool.
Average UI Generation Time
Over 1-2 min
Code-Level Error Rate
~35% on subsequent manual edits
Drop-off Rate
Significantly higher for non-technical users
User Research
"It’s amazing that AI can generate code in under a minute. But when it comes to tweaking minor UI details like padding or a header title, I still have to dive back into the raw code. For a non-technical user, the barrier to entry remains just as high." - Jane, Designer
Through user interviews (3 PMs, 3 PDs), I discovered a crucial pain point: users do not expect AI to generate a perfect UI on the first try. The real value lies in the iterative process, allowing users to converse with the AI to refine and tweak subtle details easily.
Hypothesis
If we combine a live preview with a natural language chat interface alongside the code editor, even non technical users will be able to build UIs effortlessly. Furthermore, a hybrid interface that blends chat commands with direct visual manipulation will provide the optimal balance of flexibility and precision.
Hybrid Editing Experience
If we combine a live preview with a natural language chat interface alongside the code editor, even non technical users will be able to refine and tweak subtle details effortlessly without touching raw code.
Role-Based Safe Workflow
If we design a distinct read only state for external teammates to restrict editing capabilities, we can prevent accidental code alterations and drastically lower the friction and drop off rate during collaboration.
Workboard
Design + PRD
Prototyping
I wanted to validate the usability of this complex interactive dashboard through an actual working environment rather than relying on qualitative assumptions. Utilizing Claude for coding, I personally built a high fidelity interactive prototype where the live preview rendered in real time and responded to natural language chat commands.
The Solution
While general AI builders like Claude exist, they fall short when it comes to managing component assets at an organizational level and integrating seamlessly with production codebases. AutoView bridges this gap. By designing a project based dashboard and implementing a secure, read only sharing system, I elevated the user experience from a simple AI coding sandbox to a robust, production ready development workflow.
Hybrid Dashboard Interface
I designed an interface that allows users to direct major layout changes via the chat panel on the left while modifying specific component attributes directly through intuitive popups on the preview screen.
Contextual Error Handling
When a user enters an invalid TypeScript interface, the system does not simply crash. Instead, it provides a clear, actionable guide at the bottom, helping users debug and continue their workflow.
Role-Based Sharing for Safe Collaboration
To ensure a secure workflow when sharing project links, I designed a distinct view for external teammates. This read only state restricts editing capabilities, preventing accidental alterations while preserving interactive testing.
Reflection
AI is actually, really fun
This project tested my ability to scale a design system rapidly amidst shifting business requirements. More importantly, by utilizing AI coding tools to build a high fidelity prototype and driving the user testing myself, I learned how to bridge the gap between design and code, shaping me into a more technical and business aligned product designer.
