Live Products
Asgard AI
Product Design · Design Systems
Overview
An AI-native platform for enterprise workflow
Built Asgard's design system and core product flows from the ground up, bridging product and engineering at an early-stage AI startup.
Asgard AI is a production LLM platform that lets enterprises build and deploy AI apps (chatbots, internal search, automations) without code, using a node-based workflow builder. I focused on the SaaS product experience and design system, supporting core flows and scalable UI foundations for the platform.
Scope
- End-to-end product design for the AI builder
- Design system: tokens, components, dark-mode foundation
- Node-based drag-and-drop builder UX
- Light marketing support (e.g., adapting existing visuals for social posts)
The Challenge
Build from zero
Build a design system and product UX foundation from zero. The product was built on Material Design with few reusable components or tokens, and handoff was ad hoc.
Three problems surfaced as the platform grew:
Problems
- Fragmented IA. Modules spoke different design languages.
- Hard-to-scan data. Dense screens were difficult to understand quickly.
- Chatbot integration. Adding an AI chatbot required rethinking key flows end to end.
Research & Context
Background
I worked with the PM to translate the existing product flow into a node-based drag-and-drop canvas for building LLM-powered workflows, chatbots, and data tools, and built the design system underneath it.
Key Insights
- AI needs dedicated UI states. Loading, streaming, partial responses, and graceful errors aren't covered by generic systems, so I designed them from scratch.
- Breakpoints should be part of handoff. Explicit max widths in the file reduced implementation drift.
- Design dark mode first. AI/dev-tool users expect it, so tokens were built around dark mode from day one.
Design Strategy
Two pillars: clear product structure and clearer product-to-engineering communication
1. Product Experience & Architecture
Rebuilt IA and key flows so complex functionality is easier to navigate and understand.
2. Design Language
One cross-platform system unifying product UI and website, built for expansion.
Design Process
Building the system from foundations up
Foundation: Tokens & Visual Language
Dark-first tokens: palette, type scale, elevation, motion, scaling across product surfaces.
Component Architecture
Components were built bottom-up from subcomponents, with each type and state documented through detailed annotations in the design specs.
Node-based Builder
I built up the builder experience by starting from individual screens and stitching them into an end-to-end flow. I mapped product state logic (empty/loading/configuring/error/success states) and defined where components live across the canvas and side panels. This made handoff to engineering clearer and reduced implementation drift as the builder grew.
Key handoff artifacts
- State maps for each node and panel (inputs, validation, connection rules, and error handling)
- Component positioning rules (canvas, inspector, contextual toolbars, and modal overlays)
- Responsive constraints: explicit min/max widths and layout breakpoints so dense configurations stayed readable on desktop
Outcomes
A system that shipped
Delivered a complete design system handoff and product guidelines that enabled the team to move from early-stage iteration to mature, scalable development. With a clear source of truth for components, patterns, and usage rules, other designers can extend the product while keeping a consistent visual and interaction style.
Result
- Design system shipped to engineering: tokens, components, and usage rules handed off as a scalable foundation.
- Node-based builder live at asgard-ai.com: production LLM platform with drag-and-drop workflow builder deployed.
- Reduced implementation drift via state maps and component positioning rules that made handoff unambiguous for the dev team.
The product is live at asgard-ai.com.
Reflection
What I'd do differently
I learned that aligning on product logic earlyis just as important as polishing the UI. Strong design isn't decoration. It's defining clear component positioning, behaviors, and constraints so the product can scale without breaking consistency.
The biggest improvement I'd make next time is to sync even earlier with the PM and product owner on what the system should do (states, rules, edge cases) before exploring UI solutions. When product intent is shared and documented up front, handoff is smoother, and the way features are communicated in the interface becomes much more predictable and successful.
NDA
Portions remain under NDA. For deeper context, get in touch.