Building a product from scratch at an early-stage startup
First designer in, owning brand through to production code
- Who
- lumenxJun 2025 – Apr 2026 (11mo)
- Team
- FounderCTOPrincipal scientistFrontend developer Senior Product Designer & Design Engineer
- Scope
- BrandMarketing websiteProduct UIDesign systemProduction code
- Tools
Claude AI
Figma
GitHub
Linear
Shadcn
Adobe Illustrator CC
Notion
Tailwind CSS- Links
- View project
Context
An AI research startup with everything user-facing still to build
lumenx had built the backend, with healthcare and risk & compliance as the target verticals, structured around established behavioural science frameworks. It was a small, remote team, and I joined as the first designer.
The work
Two routes through setup, with the manual one reverse-engineered from the AI
The product had three surfaces: setup, AI interviewer, and reporting, with the deepest design work on setup.
Two routes were live: manual setup for owners who knew what they wanted, and an AI-led intake that asked the right questions and inferred the project shape from the answers. The AI intake started as a vibe-coded experiment from the founder, which I finessed and shipped. The manual setup came after, reverse-engineered from the AI flow, mapping the data the AI captured into a structured field-based form.
The principal scientist was a strong collaborator on the data architecture, helping decide which data was AI-generated, which was user-entered, and which still needed AI intervention regardless of route.
The conventional move would have been to design the manual setup first and layer AI on top. Going the other way mattered, because finalising the AI flow first locked the data model in early. Every interview, whichever route the owner came through, produced the same shape of structured insight downstream, and the reporting layer never had to reconcile two different data shapes.
Working in code
Treating the codebase as the source of truth, so design and engineering stayed in sync
We started with a bespoke Figma design system, on the assumption a startup product needed its own personality at the component layer. The CTO pushed back, saying a framework would get us further, faster, with a small team. I did the research on which framework to land on and proposed Radix and shadcn. He'd used them both before with great success, and we pivoted the foundation off custom TypeScript and SCSS onto shadcn, Radix, and Tailwind.
From there I contributed components and pages in production code directly, raising PRs alongside the frontend developer. .md instruction files and MCPs kept AI-generated output inside the system by construction, not by review.
Throughout the build I sat with a live question about whether a UI-based design system in Figma is even still the right answer, in a world where MCPs and AI-to-Figma tooling are reshaping how interfaces get made. By the end I'd landed on yes, but with the system's role shifted. The codebase becomes the source of truth, and Figma becomes a hi-fi mocking aid synced to it, optimised for validating a feature before code gets written. That's how the lumenx system landed.
The 5-day pre-demo refactor
Rebuilt the foundations five days from demo, because polish on broken foundations doesn't ship
A new report section had been built using AI tooling on the final approach to the pilot demo. The code had bypassed our Tailwind and shadcn foundations and was written in raw CSS, working but visually inconsistent.
With the frontend developer on holiday, I refactored: migrated the raw CSS back into Tailwind and shadcn, restored the core components, isolated demo-specific changes into versioned component copies.
The time cost came up mid-process, and I explained that polishing the UI on top of broken foundations would be like driving a car with a flat tyre. The judgement underneath the metaphor was that a polished demo on broken foundations would have shipped, and then set a pattern the team would have paid for for months after I'd left. Foundations first, especially when I was about to hand it over. The work continued, the demo shipped on time, and the pilot landed.
Outcome
A pilot demo landed, with a system any developer can inherit
A live website. A working app for creating projects, conducting behavioural interviews, and generating structured reports. A pilot demo that landed with a key enterprise prospect. A design system on shadcn/ui, Lucide, Tailwind, and Radix UI, inheritable by any developer.
Two design decisions shaped that landing as much as the surface polish did. Organising the reporting interface around frameworks the audience already trusted, COM-B, MINDSPACE, and EAST, gave a small AI startup the right kind of credibility in a regulated room. And the design system migration meant the demo shipped on time despite a near-disaster five days out.
lumenx has continued to evolve since, and what's shown here reflects the work as it landed in April 2026.
