Role
Staff Product Designer (Co-creator)
Timeline
3 months (Aug 2025 - Oct 2025)
Tools
Figma, Claude Code, VSCode, GitHub, GitHub Copilot
Platform
Design System
From Vision to Foundation
Following the Actabl Product Design Vision alignment, we faced a critical infrastructure challenge: how do 5 designers across 4 product lines execute a unified vision while maintaining autonomy and speed?
The problem: Traditional design systems solve for human developers. But in late 2024, development workflows were rapidly shifting toward AI-assisted tools like GitHub Copilot, Cursor, and Claude Code. We needed a system that worked for both paradigms.
The Adoption Challenge: Actabl's proprietary framework had a steep learning curve and limited customization—creating a barrier between design and implementation. By building Bellhop as framework-agnostic but compatible, we enabled designers to work freely in Figma while creating an incremental pathway for better UX patterns to influence products.
My role: Staff Product Designer, co-creating Bellhop Design System alongside a fellow designer to enable scalable, consistent design implementation across Alice (Housekeeping), Transcendent (Asset Management), ProfitSword (Finance), and Hotel Effectiveness (Labor Management).
Why "Bellhop"?
Like a bellhop guides hotel guests through their stay, our design system guides teams through product development. The name reinforced our hospitality-rooted design philosophy while making the system's purpose immediately clear to non-designers.
The AI-Ready Difference
Traditional design systems provide:
- Component libraries
- Usage guidelines
- Design tokens
- Implementation specs
Bellhop adds:
- LLM-readable documentation structured for AI comprehension
- Integration examples for AI-powered dev tools
- Prompt-friendly component descriptions that work with Copilot/Cursor
- Semantic structure enabling AI tools to suggest correct implementations
Building Process
1. Component Audit & Prioritization
Analyzed all 4 products to identify:
- Most used components
- Most used variants or types for the components
- Gaps where designers were building from scratch
2. Dual-Purpose Architecture
For each component, created:
- Visual specifications for designers: storybook
- Implementation code for traditional dev workflows: GitHub
- Structured documentation readable by LLMs: llms.txt
- Usage examples formatted for AI code completion: plenty of code snippets
3. Time to build
Take advantage of AI agents:
- Build a base prd for compoonent creation
- Used Claude Code + Figma MCP + Vscode
- Publish the component to team library
- Document usage and properties for designers and devs
These let designers start from 60% done instead of 0%.
The Technical Implementation
Stack Integration:
- Figma: Design components with variables and properties
- GitHub: Version-controlled component library
- Claude Code & GitHub Copilot: AI-assisted implementation
- Documentation platform: Dual-format specs (human + LLM)
AI Documentation Example:
1================
2File: src/lib/components/breadcrumbs/Breadcrumbs.tsx
3================
4'use client';
5
6import * as React from 'react';
7import '../bellhopos-styles/src/components/breadcrumbs.css';
8import { ButtonIcon } from '../button-icon/ButtonIcon';
9
10export interface BreadcrumbItem {
11 label: string;
12 path?: string;
13 isActive?: boolean;
14 icon?: string;
15}
16
17export interface BreadcrumbsProps {
18 items: BreadcrumbItem[];
19 separator?: string;
20 showHome?: boolean;
21 maxVisibleItems?: number;
22 onItemClick?: (item: BreadcrumbItem) => void;
23 onNavigate?: (path: string) => void;
24 className?: string;
25}1================
2File: src/lib/components/breadcrumbs/Breadcrumbs.tsx
3================
4'use client';
5
6import * as React from 'react';
7import '../bellhopos-styles/src/components/breadcrumbs.css';
8import { ButtonIcon } from '../button-icon/ButtonIcon';
9
10export interface BreadcrumbItem {
11 label: string;
12 path?: string;
13 isActive?: boolean;
14 icon?: string;
15}
16
17export interface BreadcrumbsProps {
18 items: BreadcrumbItem[];
19 separator?: string;
20 showHome?: boolean;
21 maxVisibleItems?: number;
22 onItemClick?: (item: BreadcrumbItem) => void;
23 onNavigate?: (path: string) => void;
24 className?: string;
25}This structure helps AI tools suggest contextually appropriate implementations.
Impact & Early Signals
For Designers:
- Moving faster, focusing on crafting great experiences rather than reinventing components
- Building functional prototypes and POC apps with PMs using AI-powered tools
- Freedom to design without proprietary framework constraints
For Engineers:
- Unified design language creating shared vocabulary with designers
- Bellhop as reference point reducing interpretation gaps
- AI-assisted implementation enabling faster POC development
For the Business:
- PMs referencing Bellhop in customer conversations
- AI-enabled prototyping helping close more deals
- Design system establishing foundation for scalable quality
Learnings & Reflections
What worked:
- Co-creation model—two designers brought complementary strengths
- Starting with most-used components to maximize early impact
- Building documentation for both humans and LLMs from the start
- Leveraging AI tools to accelerate routine tasks
What was challenging:
- Balancing structure for AI tools vs flexibility for edge cases
- Creating documentation that serves both humans and LLMs without duplication
- Managing adoption across teams with different maturity levels
What's next:
- Expand AI integration examples as tools evolve
- Build feedback loop measuring adoption and time savings
- Create contribution guidelines for designers to propose components
Future of Design Systems:
Bellhop represents a shift in how we think about design infrastructure. Design systems aren't just component libraries—they're knowledge bases that both humans and AI agents query to build products.
By building for both traditional development and AI-assisted workflows, we've positioned Actabl's design team to remain effective regardless of how development practices evolve.
