Nothing's Gen UI lets non-technical users create and deploy AI-powered phone widgets. My team was tasked with rebuilding the entire app in a single sprint to raise the bar across the board. I had sole responsibility for the frontend.
Gallery
The rewrite fetches only what fits on screen, shows skeleton cards on slow connections, and uses optimistic updates for rename and delete. Fully keyboard-navigable with semantic HTML throughout.
Deploy Flow
Once happy with the preview you can deploy the widget to your phone. The backend compiles the React Native code into a real app that lives in the widget drawer.
The new flow hides build logs and starts the build the moment the modal opens, so by the time the user fills in the name and description it is already done.
Mobile
Given that Gen UI is ultimately a phone product, mobile parity was a clear priority. The rewrite enforces a token-based system for colour and typography, with Storybook used to catch regressions before they ship.
On mobile the editor switches between chat, code, and preview via a tab toggle, the deploy flow becomes a bottom drawer, and navigation collapses into a mobile-specific component.
Preview Architecture
The widget preview runs inside an iframe so a broken widget can't crash the editor. In the original that iframe had its own backend connection and state, which could drift out of sync with the parent silently. The rewrite makes the main app the single owner of state. The iframe's only job is to receive files via postMessage, bundle them, and report back.
Engineering
The rewrite uses Tailwind exclusively with design tokens for colour and typography. ESLint bans any, so every prop and API response is fully typed. useEffect was replaced almost entirely with TanStack Query, keeping data in the cache rather than spread across component state. Components are organised by feature, so each area of the app owns its own hooks and utils.
Widget Size
The agent optimises the widget for a specific size, so the wrong choice produces broken layouts on device. The original surfaced this as a dropdown that was easy to miss. The rewrite surfaces the choice explicitly with a visual of each size, and shows a dialog if you change it after the widget is built — responsive design is not enough, the agent needs to rebuild for the new dimensions.
Fun
Some fun widgets made along the way.
