From Supernova to an AI-readable, self-hosted design system documentation, redesigned, rebuilt, and shipped to production on BEESDEV.
challenge.
For years, Hexa's documentation lived on Supernova. As the design system scaled to 50+ squads, 70+ components, and 2,000+ internal users across 29+ markets, the doc portal became a bottleneck, not a product that teams trusted.
Most Supernova capabilities went unused. Documentation drifted from Figma libraries. Component status and platform availability were inconsistent between docs and code. Updates were manual and didn't scale. There was no dedicated space for Local libraries, community discovery, or unified support. And as Hexa became AI-readable, the documentation itself wasn't structured for AI to read, generate, or maintain.
Teams paid for a passive reference portal while the Hexa squad absorbed growing support load.
how we solved.
We rebuilt Hexa documentation as a living product, self-hosted on BEESDEV, AI-readable, and designed for 2,000+ designers and engineers.
The new documentation includes a dynamic homepage with testimonials and feedback loops; a dedicated libraries space for Core and Local libraries (components, icons, illustrations); improved component pages with live library status, per-platform availability, and a new Usage tab; updated Foundations; a Community page for discovery and access requests; and a reformulated Support page unifying every channel.
Designed in Figma using Hexa components, then vibe-coded to production via the Hexa Prototyping Agent, Hexa skills, Cursor, and Figma MCP. We dogfooded our own system without a dedicated engineering squad.
results.
Migrated from Supernova to self-hosted BEESDEV, email-only access, no per-seat licensing. Documentation now serves 2,000+ users across 50+ squads in 29+ markets with live library–documentation status parity. Reduced manual documentation effort by 50% (AI-assisted DesignOps baseline). Built AI-readable structure ready for automated Figma → docs maintenance (workflow in progress).
team.
Design Manager: Doug Lazarini
Product Designer: Mikaella Kitaushi
Product Designer: Fernanda Dutra
activities.
Information Architecture
Visual Design
Design Systems
DesignOps
AI-readable Structure
Vibe-coding
Documentation
Figma MCP
context.
The Company
This project was developed at BEES, AB InBev's digital ecosystem, a global environment where the Hexa Design System supports 50+ product squads across 29+ markets. Hexa is organizational infrastructure: 70+ components for Web, iOS, and Android, adopted by 2,000+ internal designers and engineers daily.
My Role
I led the documentation product end-to-end, from the decision to leave Supernova through production delivery on BEESDEV. That included product vision, information architecture, UI design, content model, library–documentation parity, and hosting strategy. I defined every new page type and shipped the site using Hexa components, the Hexa Prototyping Agent, Hexa skills, Cursor, and Figma MCP.
Duration
2025–2026, from the decision to leave Supernova through redesign, production delivery on BEESDEV, and ongoing iteration (Usage tab use cases, foundations updates, AI automation workflow).
Rationale
Design system documentation is not a side project. It's the product that enables adoption at scale. When 50+ squads depend on Hexa, stale docs create inconsistency, rework, and support bottlenecks. Rebuilding documentation as a self-hosted, AI-readable product ensures teams find what they need, trust what they read, and benefit from automation as the system evolves.
process.
Product-Led Documentation Migration
Rather than a platform migration project, we treated documentation as a product rebuild with a clear sequence:
Audit & problem definition: Supernova usage gaps, library drift, support pain
Product vision & IA: Define new page types and navigation model
Visual design: Full UI in Figma using Hexa components
Production build: Vibe-code to BEESDEV via Prototyping Agent + skills
Ship & iterate: Feedback loops on homepage, Usage tab expansion, automation path
This approach balanced speed (no dedicated eng squad) with long-term ownership (self-hosted, AI-readable, no third-party license dependency).
discovery.
Problem Understanding
Supernova audit: Identified unused platform features and manual content gaps
Library–doc drift analysis: Mapped inconsistencies between Figma library status and documentation
Support pattern review: Recurring questions from Office Hours and Slack channels
AI-readiness assessment: Evaluated whether doc structure could support automated maintenance
Challenge Identified: Passive Portal at Global Scale
When documentation doesn't scale with adoption, the design system team becomes the bottleneck:
Platform mismatch: Paying for Supernova while most features went unused
Status drift: Docs and libraries showing different component availability
Manual maintenance: Updates didn't scale across 50+ squads and 29+ markets
Missing product surfaces: No Local libraries hub, community discovery, or unified support
Not AI-ready: Structure couldn't support automated generation or sync
proposed solution.
Live Documentation with AI
A self-hosted, AI-readable documentation product on BEESDEV: redesigned from the ground up to serve designers and engineers at global scale.
Key Features:
New homepage: Dynamic, interactive, with testimonials and feedback/suggestion areas
Dedicated libraries space: Hexa Core + all Local libraries, icons, and illustrations in one place
Improved component pages: Live status synced with libraries; platform availability per version; new Usage tab (guidelines, do/don't, use cases (in progress))
Updated Foundations: More informative, relevant, structured for human and AI consumption
Community page: Discover design communities and request access
Reformulated Support: All Hexa support channels unified in one page
Self-hosted on BEESDEV: Company email access only, no Supernova licensing
The platform turns documentation from a read-only reference into a channel for dialogue, discovery, and self-service, structured so AI can maintain it as Hexa evolves.
The Opportunity
Hexa needed documentation that would:
Reflect live library status, one source of truth across Figma and docs
Scale to 50+ squads without linear growth in manual effort
Remove license barriers for 2,000+ internal users
Enable feedback and community discovery inside the product
Support AI-readable structure for automated maintenance
design.
Information Architecture
and High-Fidelity Screens
In this phase, the goal was to define the full documentation experience in Figma: every page type, navigation model, and component pattern, before shipping to production.
Information Architecture
and Key Design Decisions
Homepage as product front door: Not a static index; interactive with testimonials and feedback
Libraries as first-class destination: Core and Local libraries browsable from one entry point
Component pages synced with reality: Live status, platform versions, dedicated Usage tab
Progressive disclosure: Foundations and Usage content structured for scanning, not walls of text
Support and community built in: Reduce Slack dependency for onboarding and help
High-Fidelity Screens
Created detailed designs for key surfaces:
Key Design Decisions
Supernova → self-hosted AI-first product
We stopped adapting to a platform and built documentation around how teams, and AI, consume design system knowledge.
Library–documentation status parity
One status, two surfaces. If it's not in the library, it's not "ready" in the docs.
AI-readable structure from day one
Every page structured for the automated Figma → docs workflow we're building next, not a second migration later.
Feedback loops on the homepage
Testimonials and suggestion areas turn documentation into a two-way channel with 2,000+ users.
development.
Production Delivery,
Hexa Skills, and Vibe-coding
In this phase, the goal was to ship the designed documentation to production on BEESDEV, a live product, not a prototype.
Build Approach
After designing the full experience in Figma, we shipped using the Hexa Prototyping Agent powered by Hexa skills: structured knowledge that teaches AI to read Hexa components, guidelines, web stack, and DS conventions. Through Cursor and Figma MCP, the agent generated a production-ready implementation using real Hexa components.
Pipeline:
Design, IA + UI in Figma using Hexa components
Skills, Hexa skills encode components, guidelines, and web stack for AI
Build, Hexa Prototyping Agent · Cursor · Figma MCP
Ship, Deploy to BEESDEV, email access, no Supernova license
Automate (in progress), AI-readable pages → automated Figma → docs workflow
Hexa Skills: What AI Reads to Build the Docs
Vibe-coding only works if AI understands Hexa. Hexa skills encode:
Components: Hexa Core library, props, variants, platform differences (Web, iOS, Android)
Guidelines: Usage rules, do's and don'ts, accessibility baselines
Web stack: Implementation patterns, file structure, doc site conventions
DS conventions: Tokens, theming, naming, so output matches the system
Because the skills already spoke Hexa, the documentation was generated with real system components, structured AI-readably for automated maintenance.
Architecture: Skills Tree Diagram
Self-Hosted on BEESDEV
(BEES Documentation portal)
Documentation moved from Supernova to BEESDEV local hosting. Users access with company email only, no paid third-party seats. We own the infrastructure, roadmap, and integration path for AI automation.
validation.
Documentation Live With Real Users
In this phase, the goal is to validate adoption, gather feedback, and iterate on the live product.
User Feedback Loops
The new homepage includes testimonials and a feedback/suggestion area, turning documentation into a continuous dialogue channel. Early signal comes from homepage submissions, Office Hours patterns, and squad adoption of new page types (libraries, Usage tab, community).
Adoption Signal
2,000+ designers and engineers with access via BEESDEV
50+ squads across 29+ markets served by Hexa documentation
Library–documentation status parity restored, teams trust component availability again
Areas in Progress
Usage tab use cases across top components (in progress)
Automated Figma → documentation AI workflow (in progress)
Foundations content expansion
results.
Measurable Results
Live Documentation with AI transformed how Hexa teams consume design system knowledge, from a passive Supernova portal to a self-hosted product built for scale and automation.
Before (Supernova):
❌ Most platform features unused, paying for infrastructure teams didn't need
❌ Documentation drifted from Figma libraries, inconsistent component status
❌ Manual updates, didn't scale with 50+ squads
❌ No Local libraries hub, community page, or unified support
❌ Per-seat Supernova licensing
❌ Not structured for AI to read or maintain
After (Live Documentation):
✅ Self-hosted, company email access, no third-party license
✅ Dynamic homepage, testimonials, feedback loops, interactive sections
✅ Dedicated libraries space, Core + Local libraries in one place
✅ Component pages synced with live library status and platform availability
✅ Community discovery and unified support built in
✅ AI-readable structure, automation workflow in progress
✅ 2,000+ users · 50+ squads · 29+ markets
✅ −50% manual documentation effort (AI-assisted DesignOps baseline)
Organizational Impact
Adoption & trust:
Live status parity between docs and libraries restores confidence in component availability
Self-service surfaces (libraries, support, community) reduce repeat Slack questions
Feedback loops on homepage create direct user → Hexa team channel
Efficiency:
Eliminated Supernova licensing costs
Manual documentation effort reduced by 50%
Structure ready for AI-automated maintenance, avoiding a second migration
Accessibility:
Email-only BEESDEV access, no barrier for internal users
Documentation designed with Hexa accessibility baselines
conclusion.
When documentation doesn't scale, neither does the design system.
Live Documentation with AI represents more than a platform migration. It's a product decision to treat docs as infrastructure that 2,000+ people depend on daily. By moving off Supernova, rebuilding every page type, syncing with live libraries, and structuring content AI-readably, we created a foundation that teams trust today and automation can maintain tomorrow.
The documentation was designed in Figma and shipped to production by dogfooding Hexa itself, proving the system works for real products while delivering a live, self-hosted experience without a dedicated engineering squad.
As the automated Figma → documentation workflow launches and Usage tab use cases expand, this product will continue to reduce manual effort and keep Hexa aligned across 50+ squads globally.
Key Takeaways
What This Case Demonstrates
Documentation as a product: Led a full rebuild, not a content migration or platform swap
Platform decision-making: Supernova → self-hosted BEESDEV with clear trade-offs
Information architecture at scale: New page types serving 2,000+ users across 29+ markets
Visual craft + shipped work: Full UI redesign, not wireframes or process theatre
Library–doc parity: One status across Figma and documentation restores trust
AI-ready by design: Structured for automated maintenance, not retrofitted later
Dogfooding the system: Built with Hexa components, skills, and Prototyping Agent
User feedback built in: Homepage testimonials and suggestions as product features
Skills Demonstrated
Product leadership: Vision, documentation strategy, cross-functional alignment, platform decisions
Information Architecture: Homepage, libraries, components, foundations, community, support
Visual Design: Full UI redesign, dynamic, interactive, library-synced component pages
Design Systems: Hexa components, tokens, multi-platform patterns, accessibility baselines
DesignOps: Self-hosted delivery, AI-readable content model, automation pipeline (in progress)
AI-enabled delivery: Hexa skills, Prototyping Agent, Cursor, Figma MCP, vibe-coding to production
Cross-Functional Collaboration: Hexa core team, engineering (BEESDEV), 50+ adopting squads, design communities
thanks for reading.
I hope you enjoyed this case overview. While most of the project details are protected by a non-disclosure agreement (NDA), I'd be happy to discuss my role and contributions further in a live meeting. Check the contacts below and feel free to reach out.