Product UIBuilt with AI2-week prototype · 8 core surfaces · Built with Cursor
100x Agent Extension
V1 agent extension prototype — chat, workflows, data explorer, and app generation in one shell.
100x.botDesign EngineerJun 2026
8
Core surfaces
167
React components
40+
Design system UI
What I built
Full agent extension shell — chat, workflows, data explorer, app generation, and onboarding in one React workspace.
- Multi-mode AI chat with streaming responses, attachments, and thread-scoped file tracking
- Visual workflow builder with browser simulation and script compilation
- Data explorer — TanStack Table with AI filters, grouping, and D3/Perspective charts
- Natural-language app generation with sandboxed React/JSX preview
- Quick actions and interest-based personalization from onboarding tags
- 100X-UI design system — 40+ components, semantic tokens, light/dark themes
Agent workspace
Chat, home dashboard, and workflow automation surfaces.
Data & app generation
Interactive tables and sandboxed React output from natural language.
Design system
100X-UI component catalog with semantic tokens and theme switching.
Design approach
- Mode-aware shell — chat, build, data, and app surfaces share navigation without context loss
- Semantic design tokens synced to the 100X-UI Figma system for light/dark parity
- Miller's Law in UI — dropdowns capped at seven items to reduce cognitive load
- Built with Cursor in two weeks as a design-engineering reference for 100x product direction
Stack
ReactTypeScriptTailwindFramer MotionTanStack TableZustandNeonVite
V1 prototype for 100x.bot — shipped in two weeks with Neon auth and a documented 100X-UI design system.