AI Docs
ZoomInfo built its name on data. GTM Workspace put that data to work inside AI applications, and every document the LLM generated had to look like ZoomInfo. I designed the component system the LLM builds from, the chat-to-document flow, and the galleries where sellers find what they made. Lead designer, alongside three PMs, one engineer, and a design partner.
Product Context
GTM Workspace is ZoomInfo's unified AI platform for enterprise sales teams. It pulls the signals sellers normally chase across tools (CRM records, call transcripts, intent data, and intelligence on 100M+ companies) into one place. Sellers then work in natural language: find accounts like my best customers, prep me for this meeting. Most of what comes back is AI-generated. Busy sellers need to scan it in seconds. That created the need for AI-generated documents (previously known as Artifacts within our product), and the system built here to define them.
The Problem & Business Opportunity
AI was moving fast. Product managers were spinning up new agents and "artifacts" daily, each one unlocking and customizing ZoomInfo's data for its users. Speed came at a cost. With so many hands creating on tight timelines, consistency was the first thing to go: color and layout fractured across doc types. We needed a lightweight AI design system. It had to inherit the React-based branding, color, and typography of GTM Workspace, yet stay flexible enough to flip to Muze, our archival Angular system, if we ever needed it.
Visual Teardown: AI Docs Without a Consistent Design System
My Role & System Execution
Two audiences had to build with this system: the developers who coded the product, and the LLM that assembles each document in real time. I partnered with a second designer on the token architecture and the instruction set. I owned the styling for all 24 components and the AI Doc templates, then pressure-tested them in our chat tool alongside a developer and our product manager. That combination let the LLM make fast, consistent design choices our users could trust. Click the tabs to explore it live.
Static previews shown at this screen size. The interactive AI Docs Design System prototype is available on desktop.
Design System: Tokens
CSS variables define the entire visual language: colors, radius, type. Change a token once and every artifact updates, instead of hunting through 24 components.
Design System: Blocks
24 reusable component classes in one stylesheet: every doc type draws from the same building blocks instead of reinventing layout.
Design System: LLM Instructions
The instruction set locks the LLM to CSS variables and component classes only, no inline styles, so generated docs can’t drift from the system.
Design System: AI Docs
10 templated documents built entirely from tokens and blocks, then populated with real customer data to confirm the design held up once actual content filled it.
Simplifying Organization for Everyday Use
Documents multiplied fast, and sellers needed a way to find them again. In user research on our All Chats improvements, sellers actively confirmed that visual previews made documents much easier to find and scan. I designed the gallery around recognition: responsive layouts, filtering by account, sharing, and the quick-start templates that seed a new doc. The prototype below is fully usable. Try the search, the filters, or generate the Meeting Prep doc yourself.
Responsive AI Docs Gallery
Static previews shown at this screen size. The interactive AI Docs Gallery prototype is available on desktop.
Final Screen: Gallery
A single scannable gallery for every generated doc: user testing showed sellers wanted to browse visually, not dig back through chat history.
Final Screen: Shared with Me
Sellers can share documents with teammates to move their deals toward close.
Final Screen: Company Filters
Filter documents by the company account each one is tied to.
Final Screen: Template Gallery
Quick-start AI document templates, organized around a seller’s jobs to be done.
Final Screen: Doc Generated
The generated doc opens beside the chat that produced it: the real output of the component system.
Final Screen: Sharing Dialog
The sharing dialog allows for both private and organization-wide sharing, with the ability to search by name or copy a link to the doc.
Results & Impact
AI Docs shipped into GTM Workspace in Q2 2026, a premium early-access launch with 40 customers onboarded. None of them ever saw the fractured pre-system documents. Every doc sellers generated was on brand from day one, and the gallery gave them one place to find and share it. The system reached the codebase through ZoomInfo's org-wide no-code agent builder, tested against live data in the chat agent. Product managers kept their speed. Every new doc type landed on the same tokens and blocks.
