FleetView 4.0 User/Assets

Problem

In FleetView 4.0, QA kept finding differences between what was in development and what people expected. The Lovable prototype was not the styling reference; KendoReact and the Figma design system were. I wanted a faster way to compare them and prepare screens engineering and QA could review. It was still a proof of concept, not a tested production workflow.

What I did

• Pulled the Lovable prototype into VS Code and used GitHub Copilot to inspect it
• Compared the prototype with existing KendoReact patterns and the Figma design system
• Used Figma MCP to generate screens and find places where the prototype did not match an existing component
• Annotated the Figma screens and updated the system where a component or pattern was missing

Result

• Created annotated Figma screens for engineering and QA to review
• Used KendoReact and Figma as the references for component behavior and styling
• Kept the work as a proof of concept; it still needs testing before production decisions

Process

1. 01
   

   Lovable prototype open in VS Code with GitHub Copilot and Figma MCP

2. 02
   

   Figma screen generated from the Lovable prototype

3. 03
   

   Annotated Figma screen for engineering and QA review

4. 04
   

   From Lovable prototype through VS Code, GitHub Copilot, and Figma MCP to annotated Figma screens

Tools

Lovable · VS Code · GitHub Copilot · Figma MCP · Figma · KendoReact